From 8081ea2486c7c95d8161f8041247d04d45b76942 Mon Sep 17 00:00:00 2001 From: Lars Gebhardt-Kusche Date: Mon, 15 Jun 2026 20:17:28 +0200 Subject: [PATCH] layout --- public/assets/auth/login.css | 132 ++++++++++++++------ public/auth/register/confirmation/index.php | 48 +++++++ public/auth/register/index.php | 32 ++--- 3 files changed, 152 insertions(+), 60 deletions(-) create mode 100644 public/auth/register/confirmation/index.php diff --git a/public/assets/auth/login.css b/public/assets/auth/login.css index ab2d83f2..0bb7e544 100644 --- a/public/assets/auth/login.css +++ b/public/assets/auth/login.css @@ -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; } diff --git a/public/auth/register/confirmation/index.php b/public/auth/register/confirmation/index.php new file mode 100644 index 00000000..09c3583c --- /dev/null +++ b/public/auth/register/confirmation/index.php @@ -0,0 +1,48 @@ + + + + + + Registrierung bestätigt + + + +
+ +
+ + diff --git a/public/auth/register/index.php b/public/auth/register/index.php index 11ee22aa..7960da7c 100644 --- a/public/auth/register/index.php +++ b/public/auth/register/index.php @@ -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') {

Neue Konten werden nicht sofort freigeschaltet. Deine Anfrage wird geprüft und erst danach für LDAP, NAS und Desktop vorbereitet.

- -
- Anfrage gespeichert. -

Dein Zugang wurde noch nicht freigeschaltet. Eine berechtigte Person prüft nun die Registrierung.

- - - -
- -
Bitte prüfen @@ -110,7 +96,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
-
+