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 { :root {
color-scheme: dark; 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; min-height: 100vh;
color: #f8fafc; color: #f8fafc;
background: background:
radial-gradient(circle at top, rgba(255, 222, 173, 0.28), transparent 28%), radial-gradient(circle at 18% 84%, rgba(142, 214, 119, 0.22), transparent 18%),
linear-gradient(145deg, #101827 0%, #18253d 52%, #0f172a 100%); 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 { .login-shell {
min-height: 100vh; min-height: 100vh;
display: grid; display: grid;
place-items: center; place-items: start center;
padding: 24px; 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 { .login-panel {
width: min(480px, 100%); width: min(420px, 100%);
padding: 28px; position: relative;
border-radius: 28px; z-index: 1;
background: rgba(15, 23, 42, 0.58); padding: 0;
border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0;
box-shadow: 0 24px 80px rgba(2, 6, 23, 0.42); background: transparent;
backdrop-filter: blur(24px); border: 0;
box-shadow: none;
backdrop-filter: none;
} }
.login-panel-wide { .login-panel-wide {
width: min(760px, 100%); width: min(460px, 100%);
} }
.login-panel-admin { .login-panel-admin {
width: min(1180px, 100%); 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 { .login-panel-top {
margin-bottom: 24px; margin-bottom: 18px;
text-align: center;
} }
.login-kicker { .login-kicker {
margin: 0 0 12px; margin: 0 0 12px;
font-size: 12px; font-size: 0.76rem;
letter-spacing: 0.18em; letter-spacing: 0.22em;
text-transform: uppercase; text-transform: uppercase;
color: #cbd5e1; color: rgba(248, 250, 252, 0.84);
font-weight: 700;
} }
.login-panel h1 { .login-panel h1 {
margin: 0 0 10px; margin: 0 0 10px;
font-size: 36px; font-size: 2.2rem;
line-height: 1.05; line-height: 1.05;
font-weight: 400;
} }
.login-copy { .login-copy {
margin: 0; margin: 0;
color: #dbe5f1; color: rgba(248, 250, 252, 0.9);
line-height: 1.5; line-height: 1.5;
} }
.login-actions { .login-actions {
display: grid; display: grid;
gap: 12px; gap: 12px;
margin-bottom: 24px; margin-bottom: 0;
} }
.login-button { .login-button {
@@ -76,24 +99,27 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 48px; min-height: 48px;
padding: 0 16px; padding: 0 18px;
border-radius: 14px; border-radius: 999px;
text-decoration: none; text-decoration: none;
font-weight: 700; font-weight: 700;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
font: inherit; font: inherit;
transition: transform 160ms ease, filter 160ms ease;
} }
.login-button-primary { .login-button-primary {
color: #082032; color: #082f49;
background: linear-gradient(180deg, #a7f3d0, #6ee7b7); background: linear-gradient(180deg, #7dd3fc, #0ea5e9);
box-shadow: 0 14px 30px rgba(14, 165, 233, 0.22);
} }
.login-button-secondary { .login-button-secondary {
color: #f8fafc; color: #f8fafc;
background: rgba(255, 255, 255, 0.08); background: rgba(248, 250, 252, 0.18);
border: 1px solid rgba(255, 255, 255, 0.12); border: 1px solid rgba(248, 250, 252, 0.16);
backdrop-filter: blur(8px);
} }
.login-button-disabled { .login-button-disabled {
@@ -107,9 +133,14 @@ body {
background: linear-gradient(180deg, #fb7185, #e11d48); background: linear-gradient(180deg, #fb7185, #e11d48);
} }
.login-button:hover {
transform: translateY(-1px);
filter: brightness(1.03);
}
.login-form { .login-form {
display: grid; display: grid;
gap: 18px; gap: 12px;
} }
.login-form-grid { .login-form-grid {
@@ -124,25 +155,41 @@ body {
} }
.login-field span { .login-field span {
font-size: 13px; font-size: 0.88rem;
color: #cbd5e1; color: rgba(248, 250, 252, 0.94);
} }
.login-field input, .login-field input,
.login-field textarea { .login-field textarea {
width: 100%; width: 100%;
min-height: 48px; min-height: 48px;
padding: 12px 14px; padding: 0 18px;
border-radius: 14px; border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(15, 23, 42, 0.52); background: rgba(213, 223, 193, 0.54);
color: #f8fafc; color: #f8fafc;
font: inherit; font: inherit;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
backdrop-filter: blur(9px);
outline: none;
} }
.login-field textarea { .login-field textarea {
min-height: 120px; min-height: 120px;
resize: vertical; 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 { .login-field-span-2 {
@@ -153,7 +200,9 @@ body {
margin-bottom: 18px; margin-bottom: 18px;
padding: 16px 18px; padding: 16px 18px;
border-radius: 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 { .login-notice strong {
@@ -167,15 +216,15 @@ body {
} }
.login-notice-success { .login-notice-success {
background: rgba(20, 83, 45, 0.45); background: rgba(20, 83, 45, 0.34);
} }
.login-notice-error { .login-notice-error {
background: rgba(127, 29, 29, 0.4); background: rgba(127, 29, 29, 0.24);
} }
.login-notice-info { .login-notice-info {
background: rgba(30, 41, 59, 0.5); background: rgba(9, 18, 12, 0.34);
} }
.login-list { .login-list {
@@ -276,6 +325,15 @@ body {
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.login-shell {
padding: 110px 14px 24px;
}
.login-panel,
.login-panel-wide {
width: 100%;
}
.login-form-grid { .login-form-grid {
grid-template-columns: 1fr; 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 = []; $errors = [];
$submitted = false;
$createdRequest = null;
$form = [ $form = [
'username' => '', 'username' => '',
'given_name' => '', 'given_name' => '',
@@ -57,18 +55,16 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (($result['success'] ?? false) !== true) { if (($result['success'] ?? false) !== true) {
$errors = array_values(array_map('strval', (array) ($result['errors'] ?? []))); $errors = array_values(array_map('strval', (array) ($result['errors'] ?? [])));
} else { } else {
$submitted = true; $createdRequest = is_array($result['request'] ?? null) ? $result['request'] : [];
$createdRequest = $result['request'] ?? null; $_SESSION['registration_confirmation'] = [
'id' => (string) ($createdRequest['id'] ?? ''),
'username' => (string) ($createdRequest['username'] ?? ''),
'email' => (string) ($createdRequest['email'] ?? ''),
];
$csrfToken = bin2hex(random_bytes(16)); $csrfToken = bin2hex(random_bytes(16));
$_SESSION['registration_form_token'] = $csrfToken; $_SESSION['registration_form_token'] = $csrfToken;
$form = [ header('Location: /auth/register/confirmation/', true, 302);
'username' => '', exit;
'given_name' => '',
'family_name' => '',
'email' => '',
'password' => '',
'password_confirm' => '',
];
} }
} }
} }
@@ -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> <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> </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 !== []): ?> <?php if ($errors !== []): ?>
<div class="login-notice login-notice-error"> <div class="login-notice login-notice-error">
<strong>Bitte prüfen</strong> <strong>Bitte prüfen</strong>
@@ -110,7 +96,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div> </div>
<?php endif; ?> <?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) ?>"> <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken, ENT_QUOTES) ?>">
<div class="login-form-grid"> <div class="login-form-grid">