private/desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout
All checks were successful
Deploy / deploy-staging (push) Successful in 22s
Details
Deploy / deploy-production (push) Has been skipped
Details

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-06-15 20:17:28 +02:00
parent 823c5d197d
commit 8081ea2486
3 changed files with 152 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
public/assets/auth/login.css
View File

@@ -1,6 +1,6 @@
:root {
color-scheme: dark;
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}
* {
@@ -12,63 +12,86 @@ body {
min-height: 100vh;
color: #f8fafc;
background:
radial-gradient(circle at top, rgba(255, 222, 173, 0.28), transparent 28%),
linear-gradient(145deg, #101827 0%, #18253d 52%, #0f172a 100%);
radial-gradient(circle at 18% 84%, rgba(142, 214, 119, 0.22), transparent 18%),
linear-gradient(0deg, rgba(14, 27, 19, 0.28), rgba(14, 27, 19, 0.28)),
linear-gradient(135deg, #26442b 0%, #355939 26%, #5f4a2f 58%, #22351f 100%);
}
.login-shell {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
place-items: start center;
padding: 170px 24px 30px;
position: relative;
}
.login-shell::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 16%),
radial-gradient(circle at center, transparent 24%, rgba(7, 13, 8, 0.18) 100%);
pointer-events: none;
}
.login-panel {
width: min(480px, 100%);
padding: 28px;
border-radius: 28px;
background: rgba(15, 23, 42, 0.58);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 24px 80px rgba(2, 6, 23, 0.42);
backdrop-filter: blur(24px);
width: min(420px, 100%);
position: relative;
z-index: 1;
padding: 0;
border-radius: 0;
background: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
}
.login-panel-wide {
width: min(760px, 100%);
width: min(460px, 100%);
}
.login-panel-admin {
width: min(1180px, 100%);
padding: 28px;
border-radius: 28px;
background: rgba(9, 18, 12, 0.34);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 24px 80px rgba(2, 6, 23, 0.42);
backdrop-filter: blur(16px);
}
.login-panel-top {
margin-bottom: 24px;
margin-bottom: 18px;
text-align: center;
}
.login-kicker {
margin: 0 0 12px;
font-size: 12px;
letter-spacing: 0.18em;
font-size: 0.76rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #cbd5e1;
color: rgba(248, 250, 252, 0.84);
font-weight: 700;
}
.login-panel h1 {
margin: 0 0 10px;
font-size: 36px;
font-size: 2.2rem;
line-height: 1.05;
font-weight: 400;
}
.login-copy {
margin: 0;
color: #dbe5f1;
color: rgba(248, 250, 252, 0.9);
line-height: 1.5;
}
.login-actions {
display: grid;
gap: 12px;
margin-bottom: 24px;
margin-bottom: 0;
}
.login-button {
@@ -76,24 +99,27 @@ body {
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 16px;
border-radius: 14px;
padding: 0 18px;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
border: 0;
cursor: pointer;
font: inherit;
transition: transform 160ms ease, filter 160ms ease;
}
.login-button-primary {
color: #082032;
background: linear-gradient(180deg, #a7f3d0, #6ee7b7);
color: #082f49;
background: linear-gradient(180deg, #7dd3fc, #0ea5e9);
box-shadow: 0 14px 30px rgba(14, 165, 233, 0.22);
}
.login-button-secondary {
color: #f8fafc;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(248, 250, 252, 0.18);
border: 1px solid rgba(248, 250, 252, 0.16);
backdrop-filter: blur(8px);
}
.login-button-disabled {
@@ -107,9 +133,14 @@ body {
background: linear-gradient(180deg, #fb7185, #e11d48);
}
.login-button:hover {
transform: translateY(-1px);
filter: brightness(1.03);
}
.login-form {
display: grid;
gap: 18px;
gap: 12px;
}
.login-form-grid {
@@ -124,25 +155,41 @@ body {
}
.login-field span {
font-size: 13px;
color: #cbd5e1;
font-size: 0.88rem;
color: rgba(248, 250, 252, 0.94);
}
.login-field input,
.login-field textarea {
width: 100%;
min-height: 48px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(15, 23, 42, 0.52);
padding: 0 18px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(213, 223, 193, 0.54);
color: #f8fafc;
font: inherit;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
backdrop-filter: blur(9px);
outline: none;
}
.login-field textarea {
min-height: 120px;
resize: vertical;
padding: 14px 18px;
border-radius: 18px;
}
.login-field input::placeholder,
.login-field textarea::placeholder {
color: rgba(248, 250, 252, 0.82);
}
.login-field input:focus,
.login-field textarea:focus {
border-color: rgba(255, 255, 255, 0.26);
background: rgba(213, 223, 193, 0.62);
}
.login-field-span-2 {
@@ -153,7 +200,9 @@ body {
margin-bottom: 18px;
padding: 16px 18px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(248, 250, 252, 0.94);
backdrop-filter: blur(10px);
}
.login-notice strong {
@@ -167,15 +216,15 @@ body {
}
.login-notice-success {
background: rgba(20, 83, 45, 0.45);
background: rgba(20, 83, 45, 0.34);
}
.login-notice-error {
background: rgba(127, 29, 29, 0.4);
background: rgba(127, 29, 29, 0.24);
}
.login-notice-info {
background: rgba(30, 41, 59, 0.5);
background: rgba(9, 18, 12, 0.34);
}
.login-list {
@@ -276,6 +325,15 @@ body {
}
@media (max-width: 640px) {
.login-shell {
padding: 110px 14px 24px;
}
.login-panel,
.login-panel-wide {
width: 100%;
}
.login-form-grid {
grid-template-columns: 1fr;
}

48
public/auth/register/confirmation/index.php Normal file
View File

@@ -0,0 +1,48 @@
<?php
declare(strict_types=1);
session_start();
$confirmation = is_array($_SESSION['registration_confirmation'] ?? null)
? $_SESSION['registration_confirmation']
: null;
if ($confirmation === null) {
header('Location: /auth/register/', true, 302);
exit;
}
unset($_SESSION['registration_confirmation']);
?><!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registrierung bestätigt</title>
<link rel="stylesheet" href="/assets/auth/login.css">
</head>
<body>
<main class="login-shell">
<section class="login-panel">
<div class="login-panel-top">
<p class="login-kicker">Kusche.Berlin</p>
<h1>Registrierung eingegangen</h1>
<p class="login-copy">Deine Registrierung wurde erfolgreich gespeichert und als inaktiver Benutzer vorbereitet. Eine berechtigte Person prüft jetzt die Freischaltung.</p>
</div>
<div class="login-notice login-notice-success">
<strong>Bestätigung</strong>
<p>Benutzername: <?= htmlspecialchars((string) ($confirmation['username'] ?? ''), ENT_QUOTES) ?></p>
<p>E-Mail: <?= htmlspecialchars((string) ($confirmation['email'] ?? ''), ENT_QUOTES) ?></p>
<p class="login-meta-inline">Vorgangs-ID: <?= htmlspecialchars((string) ($confirmation['id'] ?? ''), ENT_QUOTES) ?></p>
</div>
<div class="login-actions">
<a class="login-button login-button-primary" href="/auth/keycloak">Weiter zu Keycloak</a>
<a class="login-button login-button-secondary" href="/auth/register/">Neue Registrierung</a>
</div>
</section>
</main>
</body>
</html>

32
public/auth/register/index.php
View File

@@ -26,8 +26,6 @@ if ($csrfToken === '') {
}
$errors = [];
$submitted = false;
$createdRequest = null;
$form = [
'username' => '',
'given_name' => '',
@@ -57,18 +55,16 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (($result['success'] ?? false) !== true) {
$errors = array_values(array_map('strval', (array) ($result['errors'] ?? [])));
} else {
$submitted = true;
$createdRequest = $result['request'] ?? null;
$createdRequest = is_array($result['request'] ?? null) ? $result['request'] : [];
$_SESSION['registration_confirmation'] = [
'id' => (string) ($createdRequest['id'] ?? ''),
'username' => (string) ($createdRequest['username'] ?? ''),
'email' => (string) ($createdRequest['email'] ?? ''),
];
$csrfToken = bin2hex(random_bytes(16));
$_SESSION['registration_form_token'] = $csrfToken;
$form = [
'username' => '',
'given_name' => '',
'family_name' => '',
'email' => '',
'password' => '',
'password_confirm' => '',
];
header('Location: /auth/register/confirmation/', true, 302);
exit;
}
}
}
@@ -89,16 +85,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<p class="login-copy">Neue Konten werden nicht sofort freigeschaltet. Deine Anfrage wird geprüft und erst danach für LDAP, NAS und Desktop vorbereitet.</p>
</div>
<?php if ($submitted): ?>
<div class="login-notice login-notice-success">
<strong>Anfrage gespeichert.</strong>
<p>Dein Zugang wurde noch nicht freigeschaltet. Eine berechtigte Person prüft nun die Registrierung.</p>
<?php if (is_array($createdRequest)): ?>
<p class="login-meta-inline">Vorgangs-ID: <?= htmlspecialchars((string) ($createdRequest['id'] ?? ''), ENT_QUOTES) ?></p>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($errors !== []): ?>
<div class="login-notice login-notice-error">
<strong>Bitte prüfen</strong>
@@ -110,7 +96,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div>
<?php endif; ?>
<form class="login-form" method="post" action="/auth/register">
<form class="login-form" method="post" action="/auth/register/">
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken, ENT_QUOTES) ?>">
<div class="login-form-grid">