user management

2026-06-24 00:35:42 +02:00
parent fa48a381ff
commit 30d7456fde
4 changed files with 732 additions and 166 deletions
--- a/config/apps.php
+++ b/config/apps.php
@@ -88,7 +88,7 @@ return [
        'icon' => 'UM',
        'entry_route' => '/admin/users/',
        'window_mode' => 'window',
-        'content_mode' => 'iframe',
+        'content_mode' => 'native-module',
        'default_width' => 1180,
        'default_height' => 760,
        'supports_widget' => false,
@@ -96,6 +96,20 @@ return [
        'module_name' => 'admin',
        'required_groups' => ['administrators'],
        'summary' => 'Benutzerverwaltung fuer Freischaltungen, Aktivierung, Deaktivierung und Passwort-Reset.',
+        'native_module' => [
+            'initializer' => 'initUserManagementApp',
+            'options' => [
+                'entryRoute' => '/admin/users/',
+            ],
+            'assets' => [
+                'styles' => [
+                    ['href' => '/assets/apps/user-management/app.css'],
+                ],
+                'scripts' => [
+                    ['src' => '/assets/apps/user-management/app.js'],
+                ],
+            ],
+        ],
    ],
    [
        'app_id' => 'desktop-login',
--- a/public/admin/users/index.php
+++ b/public/admin/users/index.php
@@ -4,46 +4,62 @@ declare(strict_types=1);

 require_once dirname(__DIR__, 3) . '/src/App/bootstrap.php';

-use App\ConfigLoader;
 use App\AccountGate;
+use App\ConfigLoader;
 use App\RegistrationService;
+use ModulesCore\ModuleHttp;

-session_start();
+if (session_status() !== PHP_SESSION_ACTIVE) {
+    session_start();
+}

 $projectRoot = dirname(__DIR__, 3);
+ModuleHttp::requireDesktopAccess($projectRoot);
+
 $accountGate = new AccountGate(ConfigLoader::load($projectRoot, 'registration'));
 $registration = new RegistrationService($projectRoot, ConfigLoader::load($projectRoot, 'registration'));

-if (isset($_SESSION['desktop_auth']) && is_array($_SESSION['desktop_auth'])) {
-    $currentAuthUser = is_array($_SESSION['desktop_auth']['user'] ?? null) ? $_SESSION['desktop_auth']['user'] : [];
-    $accountCheck = $accountGate->checkUsername((string) ($currentAuthUser['username'] ?? ''));
-
-    if (!($accountCheck['allowed'] ?? false)) {
-        unset($_SESSION['desktop_auth']);
-        $target = (string) ($accountCheck['state'] ?? '') === 'pending'
-            ? '/auth/pending/?username=' . urlencode((string) ($currentAuthUser['username'] ?? ''))
-            : '/auth/inactive/?message=' . urlencode((string) ($accountCheck['message'] ?? 'Dieses Konto ist noch nicht freigeschaltet.'));
-        header('Location: ' . $target, true, 302);
-        exit;
-    }
-}
-
 $currentUser = is_array($_SESSION['desktop_auth']['user'] ?? null) ? $_SESSION['desktop_auth']['user'] : [];
-$currentGroups = array_map(static fn (string $group): string => strtolower(trim($group, '/')), array_values(array_map('strval', (array) ($currentUser['groups'] ?? []))));
+$currentGroups = array_map(
+    static fn (string $group): string => strtolower(trim($group, '/')),
+    array_values(array_map('strval', (array) ($currentUser['groups'] ?? [])))
+);
+$isPartial = !empty($_GET['partial']);

 if (!in_array('administrators', $currentGroups, true)) {
    http_response_code(403);
-    echo 'Kein Zugriff auf User Management.';
-    exit;
+    $forbidden = '<div class="window-app-shell um-shell"><div class="window-app-frame um-frame"><main class="window-app-main um-main"><div class="window-app-panel um-panel"><section class="window-app-card um-card"><p class="um-message is-error">Kein Zugriff auf User Management.</p></section></div></main></div></div>';
+    if ($isPartial) {
+        echo $forbidden;
+        return;
+    }
+
+    ?><!DOCTYPE html>
+    <html lang="de">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>User Management</title>
+        <link rel="stylesheet" href="/assets/desktop/desktop.css">
+        <link rel="stylesheet" href="/assets/apps/user-management/app.css">
+    </head>
+    <body><?= $forbidden ?></body>
+    </html><?php
+    return;
 }

 $csrfToken = (string) ($_SESSION['user_management_token'] ?? '');
-
 if ($csrfToken === '') {
    $csrfToken = bin2hex(random_bytes(16));
    $_SESSION['user_management_token'] = $csrfToken;
 }

+$section = trim((string) ($_GET['section'] ?? $_POST['active_section'] ?? 'pending'));
+$allowedSections = ['pending', 'users', 'reset'];
+if (!in_array($section, $allowedSections, true)) {
+    $section = 'pending';
+}
+
 $messages = [];
 $errors = [];
 $selectedId = trim((string) ($_GET['id'] ?? $_POST['selected_id'] ?? ''));
@@ -55,7 +71,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $postedToken = (string) ($_POST['csrf_token'] ?? '');

    if ($postedToken === '' || !hash_equals($csrfToken, $postedToken)) {
-        $errors[] = 'Die Formularprüfung ist fehlgeschlagen.';
+        $errors[] = 'Die Formularpruefung ist fehlgeschlagen.';
    } else {
        $action = (string) ($_POST['action'] ?? '');

@@ -72,25 +88,46 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
            } else {
                $messages[] = 'Registrierung wurde freigeschaltet.';
            }
+            $section = 'pending';
        } elseif ($action === 'deactivate-user') {
            $result = $registration->deactivateUser($manualUsername);
-            ($result['success'] ?? false) ? $messages[] = (string) ($result['message'] ?? '') : $errors[] = (string) ($result['message'] ?? '');
+            if (($result['success'] ?? false) === true) {
+                $messages[] = (string) ($result['message'] ?? '');
+            } else {
+                $errors[] = (string) ($result['message'] ?? '');
+            }
+            $section = 'users';
        } elseif ($action === 'activate-user') {
            $groupDns = array_values(array_filter(array_map('strval', (array) ($_POST['manual_group_dns'] ?? []))));
            $result = $registration->activateExistingUser($manualUsername, $groupDns);
-            ($result['success'] ?? false) ? $messages[] = (string) ($result['message'] ?? '') : $errors[] = (string) ($result['message'] ?? '');
+            if (($result['success'] ?? false) === true) {
+                $messages[] = (string) ($result['message'] ?? '');
+            } else {
+                $errors[] = (string) ($result['message'] ?? '');
+            }
+            $section = 'users';
        } elseif ($action === 'send-reset-mail') {
            $origin = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http') . '://' . ($_SERVER['HTTP_HOST'] ?? 'localhost');
            $result = $registration->sendPasswordReset($manualResetUsername, $origin);
-            ($result['success'] ?? false) ? $messages[] = (string) ($result['message'] ?? '') : $errors[] = (string) ($result['message'] ?? '');
+            if (($result['success'] ?? false) === true) {
+                $messages[] = (string) ($result['message'] ?? '');
+            } else {
+                $errors[] = (string) ($result['message'] ?? '');
+            }
+            $section = 'reset';
        } elseif ($action === 'set-password') {
            if (strlen($manualResetPassword) < 12) {
                $errors[] = 'Das neue Passwort muss mindestens 12 Zeichen lang sein.';
            } else {
                $result = $registration->setUserPassword($manualResetUsername, $manualResetPassword);
-                ($result['success'] ?? false) ? $messages[] = (string) ($result['message'] ?? '') : $errors[] = (string) ($result['message'] ?? '');
+                if (($result['success'] ?? false) === true) {
+                    $messages[] = (string) ($result['message'] ?? '');
+                } else {
+                    $errors[] = (string) ($result['message'] ?? '');
                }
            }
+            $section = 'reset';
+        }
    }
 }

@@ -99,153 +136,286 @@ $availableGroups = $registration->availableGroups();
 $selected = $selectedId !== ''
    ? $registration->find($selectedId)
    : ($pendingRequests[0] ?? null);
+
+if ($selectedId === '' && is_array($selected) && isset($selected['id'])) {
+    $selectedId = (string) $selected['id'];
+}
+
+$h = static fn (?string $value): string => htmlspecialchars($value ?? '', ENT_QUOTES);
+$sectionUrl = static function (string $targetSection, string $requestId = ''): string {
+    $query = ['section' => $targetSection];
+    if ($requestId !== '') {
+        $query['id'] = $requestId;
+    }
+
+    return '/admin/users/?' . http_build_query($query, '', '&', PHP_QUERY_RFC3986);
+};
+
+$sectionMeta = [
+    'pending' => [
+        'label' => 'Freischaltungen',
+        'title' => 'Offene Registrierungen',
+        'description' => 'Neue Registrierungen pruefen, Gruppen zuweisen und Freischaltungen sauber dokumentieren.',
+        'nav' => 'Anfragen sichten und direkt freigeben.',
+    ],
+    'users' => [
+        'label' => 'Benutzerstatus',
+        'title' => 'Bestehende Benutzer',
+        'description' => 'LDAP-Benutzer aktivieren, deaktivieren und Gruppen fuer die Desktop-Nutzung zuweisen.',
+        'nav' => 'Aktivierung und Sperrung vorhandener Konten.',
+    ],
+    'reset' => [
+        'label' => 'Passwort-Reset',
+        'title' => 'Passwortverwaltung',
+        'description' => 'Reset-Mails ausloesen oder ein Passwort direkt als Administrator setzen.',
+        'nav' => 'Ruecksetzen oder direkt neu vergeben.',
+    ],
+];
+
+ob_start();
+?>
+<div id="user-management-app" class="window-app-shell um-shell">
+    <div class="window-app-frame um-frame">
+        <aside class="window-app-sidebar um-sidebar">
+            <div class="window-app-brand um-brand">
+                <p class="window-app-kicker um-kicker">Administration</p>
+                <h1>User Management</h1>
+                <p class="window-app-copy um-copy">Freischaltungen, Benutzerstatus und Passwort-Reset im gemeinsamen Desktop-Standard.</p>
+            </div>
+
+            <div class="window-app-nav-list um-nav-list">
+                <?php foreach ($sectionMeta as $sectionId => $meta): ?>
+                    <a class="window-app-nav-button um-nav-button<?= $section === $sectionId ? ' is-active' : '' ?>" href="<?= $h($sectionUrl($sectionId, $sectionId === 'pending' ? $selectedId : '')) ?>">
+                        <strong><?= $h($meta['label']) ?></strong>
+                        <span class="window-app-meta um-meta"><?= $h($meta['nav']) ?></span>
+                    </a>
+                <?php endforeach; ?>
+            </div>
+
+            <section class="window-app-card um-side-card">
+                <strong class="um-side-title">Schnellstatus</strong>
+                <div class="um-side-metric">
+                    <span>Offene Anfragen</span>
+                    <strong><?= count($pendingRequests) ?></strong>
+                </div>
+                <div class="um-side-metric">
+                    <span>Admin</span>
+                    <strong><?= $h((string) ($currentUser['username'] ?? 'administrator')) ?></strong>
+                </div>
+            </section>
+        </aside>
+
+        <main class="window-app-main um-main">
+            <div class="window-app-panel um-panel">
+                <section class="window-app-hero um-hero">
+                    <div>
+                        <p class="window-app-kicker um-kicker">User Management</p>
+                        <h2 class="window-app-title"><?= $h($sectionMeta[$section]['title']) ?></h2>
+                        <p class="window-app-copy um-copy"><?= $h($sectionMeta[$section]['description']) ?></p>
+                    </div>
+                    <div class="window-app-pill-row um-pill-row">
+                        <span class="window-app-pill">Administrators only</span>
+                        <span class="window-app-pill">Desktop Auth</span>
+                        <span class="window-app-pill">Section: <?= $h($sectionMeta[$section]['label']) ?></span>
+                    </div>
+                </section>
+
+                <?php if ($messages !== []): ?>
+                    <section class="window-app-card um-card">
+                        <div class="um-message is-success">
+                            <strong>Ergebnis</strong>
+                            <ul class="um-list">
+                                <?php foreach ($messages as $message): ?>
+                                    <li><?= $h($message) ?></li>
+                                <?php endforeach; ?>
+                            </ul>
+                        </div>
+                    </section>
+                <?php endif; ?>
+
+                <?php if ($errors !== []): ?>
+                    <section class="window-app-card um-card">
+                        <div class="um-message is-error">
+                            <strong>Bitte pruefen</strong>
+                            <ul class="um-list">
+                                <?php foreach ($errors as $error): ?>
+                                    <li><?= $h($error) ?></li>
+                                <?php endforeach; ?>
+                            </ul>
+                        </div>
+                    </section>
+                <?php endif; ?>
+
+                <?php if ($section === 'pending'): ?>
+                    <div class="window-app-grid um-grid um-grid--split">
+                        <section class="window-app-card um-card">
+                            <div class="um-section-head">
+                                <div>
+                                    <p class="window-app-kicker um-kicker">Queue</p>
+                                    <h3 class="um-section-title">Wartende Registrierungen</h3>
+                                </div>
+                                <span class="window-app-meta um-meta"><?= count($pendingRequests) ?> offen</span>
+                            </div>
+
+                            <div class="um-request-list">
+                                <?php if ($pendingRequests === []): ?>
+                                    <div class="um-empty">Aktuell gibt es keine offenen Registrierungen.</div>
+                                <?php else: ?>
+                                    <?php foreach ($pendingRequests as $request): ?>
+                                        <a class="um-request-card<?= (($selected['id'] ?? '') === ($request['id'] ?? '')) ? ' is-active' : '' ?>" href="<?= $h($sectionUrl('pending', (string) ($request['id'] ?? ''))) ?>">
+                                            <strong><?= $h((string) ($request['username'] ?? '')) ?></strong>
+                                            <span><?= $h((string) ($request['email'] ?? '')) ?></span>
+                                            <span class="um-request-status"><?= $h((string) ($request['status'] ?? 'pending')) ?></span>
+                                        </a>
+                                    <?php endforeach; ?>
+                                <?php endif; ?>
+                            </div>
+                        </section>
+
+                        <section class="window-app-card um-card">
+                            <div class="um-section-head">
+                                <div>
+                                    <p class="window-app-kicker um-kicker">Approval</p>
+                                    <h3 class="um-section-title">Freischaltung</h3>
+                                </div>
+                            </div>
+
+                            <?php if (is_array($selected)): ?>
+                                <div class="um-summary-grid">
+                                    <div class="um-summary-item"><span>Benutzer</span><strong><?= $h((string) ($selected['username'] ?? '')) ?></strong></div>
+                                    <div class="um-summary-item"><span>E-Mail</span><strong><?= $h((string) ($selected['email'] ?? '')) ?></strong></div>
+                                    <div class="um-summary-item"><span>Status</span><strong><?= $h((string) ($selected['status'] ?? '')) ?></strong></div>
+                                </div>
+
+                                <form class="um-form" method="post" action="/admin/users/">
+                                    <input type="hidden" name="csrf_token" value="<?= $h($csrfToken) ?>">
+                                    <input type="hidden" name="selected_id" value="<?= $h((string) ($selected['id'] ?? '')) ?>">
+                                    <input type="hidden" name="action" value="approve-registration">
+                                    <input type="hidden" name="active_section" value="pending">
+
+                                    <fieldset class="um-fieldset">
+                                        <legend>Gruppen fuer Freischaltung</legend>
+                                        <div class="um-checkbox-grid">
+                                            <?php foreach ($availableGroups as $group): ?>
+                                                <label class="window-app-item um-checkbox-item">
+                                                    <input type="checkbox" name="group_dns[]" value="<?= $h((string) ($group['dn'] ?? '')) ?>">
+                                                    <span class="window-app-item-main">
+                                                        <strong><?= $h((string) ($group['label'] ?? '')) ?></strong>
+                                                        <p><?= $h((string) ($group['dn'] ?? '')) ?></p>
+                                                    </span>
+                                                </label>
+                                            <?php endforeach; ?>
+                                        </div>
+                                    </fieldset>
+
+                                    <label class="um-field">
+                                        <span>Admin-Notiz</span>
+                                        <textarea name="admin_note" rows="4"></textarea>
+                                    </label>
+
+                                    <div class="um-actions">
+                                        <button class="window-app-nav-button um-primary" type="submit">Freischaltung bestaetigen</button>
+                                    </div>
+                                </form>
+                            <?php else: ?>
+                                <div class="um-empty">Keine Anfrage ausgewaehlt.</div>
+                            <?php endif; ?>
+                        </section>
+                    </div>
+                <?php elseif ($section === 'users'): ?>
+                    <section class="window-app-card um-card">
+                        <div class="um-section-head">
+                            <div>
+                                <p class="window-app-kicker um-kicker">Existing User</p>
+                                <h3 class="um-section-title">Bestehenden Benutzer verwalten</h3>
+                            </div>
+                        </div>
+
+                        <form class="um-form" method="post" action="/admin/users/">
+                            <input type="hidden" name="csrf_token" value="<?= $h($csrfToken) ?>">
+                            <input type="hidden" name="active_section" value="users">
+
+                            <label class="um-field">
+                                <span>Benutzername</span>
+                                <input type="text" name="manual_username" value="<?= $h($manualUsername) ?>" required>
+                            </label>
+
+                            <fieldset class="um-fieldset">
+                                <legend>Gruppen fuer Aktivierung</legend>
+                                <div class="um-checkbox-grid">
+                                    <?php foreach ($availableGroups as $group): ?>
+                                        <label class="window-app-item um-checkbox-item">
+                                            <input type="checkbox" name="manual_group_dns[]" value="<?= $h((string) ($group['dn'] ?? '')) ?>">
+                                            <span class="window-app-item-main">
+                                                <strong><?= $h((string) ($group['label'] ?? '')) ?></strong>
+                                                <p><?= $h((string) ($group['dn'] ?? '')) ?></p>
+                                            </span>
+                                        </label>
+                                    <?php endforeach; ?>
+                                </div>
+                            </fieldset>
+
+                            <div class="um-actions">
+                                <button class="window-app-nav-button um-primary" type="submit" name="action" value="activate-user">Benutzer aktivieren</button>
+                                <button class="window-app-nav-button um-danger" type="submit" name="action" value="deactivate-user">Benutzer deaktivieren</button>
+                            </div>
+                        </form>
+                    </section>
+                <?php else: ?>
+                    <section class="window-app-card um-card">
+                        <div class="um-section-head">
+                            <div>
+                                <p class="window-app-kicker um-kicker">Reset</p>
+                                <h3 class="um-section-title">Passwort zuruecksetzen</h3>
+                            </div>
+                        </div>
+
+                        <form class="um-form" method="post" action="/admin/users/">
+                            <input type="hidden" name="csrf_token" value="<?= $h($csrfToken) ?>">
+                            <input type="hidden" name="active_section" value="reset">
+
+                            <label class="um-field">
+                                <span>Benutzername</span>
+                                <input type="text" name="reset_username" value="<?= $h($manualResetUsername) ?>" required>
+                            </label>
+
+                            <label class="um-field">
+                                <span>Neues Passwort fuer direkten Reset</span>
+                                <input type="password" name="reset_password" value="" placeholder="Optional fuer direkten Admin-Reset">
+                            </label>
+
+                            <div class="um-actions">
+                                <button class="window-app-nav-button um-secondary" type="submit" name="action" value="send-reset-mail">Reset-Mail senden</button>
+                                <button class="window-app-nav-button um-primary" type="submit" name="action" value="set-password">Passwort direkt setzen</button>
+                            </div>
+                        </form>
+                    </section>
+                <?php endif; ?>
+            </div>
+        </main>
+    </div>
+</div>
+<?php
+$pageContent = (string) ob_get_clean();
+
+if ($isPartial) {
+    echo $pageContent;
+    return;
+}
 ?><!DOCTYPE html>
 <html lang="de">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>User Management</title>
-    <link rel="stylesheet" href="/assets/auth/login.css">
+    <link rel="stylesheet" href="/assets/desktop/desktop.css">
+    <link rel="stylesheet" href="/assets/apps/user-management/app.css">
 </head>
 <body>
-    <main class="login-shell">
-        <section class="login-panel login-panel-admin">
-            <div class="login-panel-top">
-                <p class="login-kicker">Kusche.Berlin</p>
-                <h1>User Management</h1>
-                <p class="login-copy">Nur für Benutzer in der Gruppe <strong>administrators</strong>. Hier werden Neuregistrierungen freigeschaltet sowie bestehende LDAP-Benutzer aktiviert, deaktiviert oder zurückgesetzt.</p>
-            </div>
-
-            <?php if ($messages !== []): ?>
-                <div class="login-notice login-notice-success">
-                    <strong>Ergebnis</strong>
-                    <ul class="login-list">
-                        <?php foreach ($messages as $message): ?>
-                            <li><?= htmlspecialchars($message, ENT_QUOTES) ?></li>
-                        <?php endforeach; ?>
-                    </ul>
-                </div>
-            <?php endif; ?>
-
-            <?php if ($errors !== []): ?>
-                <div class="login-notice login-notice-error">
-                    <strong>Bitte prüfen</strong>
-                    <ul class="login-list">
-                        <?php foreach ($errors as $error): ?>
-                            <li><?= htmlspecialchars($error, ENT_QUOTES) ?></li>
-                        <?php endforeach; ?>
-                    </ul>
-                </div>
-            <?php endif; ?>
-
-            <div class="admin-layout">
-                <aside class="admin-sidebar">
-                    <h2>Offene Registrierungen</h2>
-                    <div class="admin-request-list">
-                        <?php foreach ($pendingRequests as $request): ?>
-                            <a class="admin-request-card<?= (($selected['id'] ?? '') === ($request['id'] ?? '')) ? ' is-active' : '' ?>" href="/admin/users/?id=<?= urlencode((string) ($request['id'] ?? '')) ?>">
-                                <strong><?= htmlspecialchars((string) ($request['username'] ?? ''), ENT_QUOTES) ?></strong>
-                                <span><?= htmlspecialchars((string) ($request['email'] ?? ''), ENT_QUOTES) ?></span>
-                                <span class="admin-status"><?= htmlspecialchars((string) ($request['status'] ?? ''), ENT_QUOTES) ?></span>
-                            </a>
-                        <?php endforeach; ?>
-                    </div>
-                </aside>
-
-                <section class="admin-detail">
-                    <?php if (is_array($selected)): ?>
-                        <div class="admin-summary">
-                            <h2>Freischaltung</h2>
-                            <p>Benutzer: <?= htmlspecialchars((string) ($selected['username'] ?? ''), ENT_QUOTES) ?></p>
-                            <p>E-Mail: <?= htmlspecialchars((string) ($selected['email'] ?? ''), ENT_QUOTES) ?></p>
-                            <p>Status: <?= htmlspecialchars((string) ($selected['status'] ?? ''), ENT_QUOTES) ?></p>
-                        </div>
-
-                        <form class="login-form" method="post" action="/admin/users/">
-                            <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken, ENT_QUOTES) ?>">
-                            <input type="hidden" name="selected_id" value="<?= htmlspecialchars((string) ($selected['id'] ?? ''), ENT_QUOTES) ?>">
-                            <input type="hidden" name="action" value="approve-registration">
-
-                            <label class="login-field">
-                                <span>Zielgruppen für Freischaltung</span>
-                                <div class="admin-request-list">
-                                    <?php foreach ($availableGroups as $group): ?>
-                                        <label class="login-field">
-                                            <span>
-                                                <input type="checkbox" name="group_dns[]" value="<?= htmlspecialchars($group['dn'], ENT_QUOTES) ?>">
-                                                <?= htmlspecialchars($group['label'], ENT_QUOTES) ?>
-                                            </span>
-                                        </label>
-                                    <?php endforeach; ?>
-                                </div>
-                            </label>
-
-                            <label class="login-field">
-                                <span>Admin-Notiz</span>
-                                <textarea name="admin_note" rows="3"></textarea>
-                            </label>
-
-                            <div class="login-actions">
-                                <button class="login-button login-button-primary" type="submit">Freischaltung bestätigen</button>
-                            </div>
-                        </form>
-                    <?php endif; ?>
-
-                    <div class="admin-summary">
-                        <h2>Bestehenden Benutzer verwalten</h2>
-                    </div>
-
-                    <form class="login-form" method="post" action="/admin/users/">
-                        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken, ENT_QUOTES) ?>">
-                        <label class="login-field">
-                            <span>Benutzername</span>
-                            <input type="text" name="manual_username" value="<?= htmlspecialchars($manualUsername, ENT_QUOTES) ?>" required>
-                        </label>
-
-                        <label class="login-field">
-                            <span>Gruppen für Aktivierung</span>
-                            <div class="admin-request-list">
-                                <?php foreach ($availableGroups as $group): ?>
-                                    <label class="login-field">
-                                        <span>
-                                            <input type="checkbox" name="manual_group_dns[]" value="<?= htmlspecialchars($group['dn'], ENT_QUOTES) ?>">
-                                            <?= htmlspecialchars($group['label'], ENT_QUOTES) ?>
-                                        </span>
-                                    </label>
-                                <?php endforeach; ?>
-                            </div>
-                        </label>
-
-                        <div class="login-actions">
-                            <button class="login-button login-button-primary" type="submit" name="action" value="activate-user">Benutzer aktivieren</button>
-                            <button class="login-button login-button-danger" type="submit" name="action" value="deactivate-user">Benutzer deaktivieren</button>
-                        </div>
-                    </form>
-
-                    <div class="admin-summary">
-                        <h2>Passwort zurücksetzen</h2>
-                    </div>
-
-                    <form class="login-form" method="post" action="/admin/users/">
-                        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken, ENT_QUOTES) ?>">
-                        <label class="login-field">
-                            <span>Benutzername</span>
-                            <input type="text" name="reset_username" value="<?= htmlspecialchars($manualResetUsername, ENT_QUOTES) ?>" required>
-                        </label>
-
-                        <label class="login-field">
-                            <span>Neues Passwort für direkten Reset</span>
-                            <input type="password" name="reset_password" value="" placeholder="Optional für direkten Admin-Reset">
-                        </label>
-
-                        <div class="login-actions">
-                            <button class="login-button login-button-secondary" type="submit" name="action" value="send-reset-mail">Reset-Mail senden</button>
-                            <button class="login-button login-button-primary" type="submit" name="action" value="set-password">Passwort direkt setzen</button>
-                        </div>
-                    </form>
-                </section>
-            </div>
-        </section>
-    </main>
+    <?= $pageContent ?>
+    <script src="/assets/apps/user-management/app.js"></script>
+    <script>
+        window.initUserManagementApp?.(document.getElementById('user-management-app'), { standalone: true });
+    </script>
 </body>
 </html>
--- a/public/assets/apps/user-management/app.css
+++ b/public/assets/apps/user-management/app.css
@@ -0,0 +1,262 @@
+#user-management-app {
+    min-height: 100%;
+    color: #0f172a;
+    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+}
+
+#user-management-app,
+#user-management-app * {
+    box-sizing: border-box;
+}
+
+#user-management-app.is-loading {
+    opacity: 0.7;
+    pointer-events: none;
+}
+
+#user-management-app .um-shell,
+#user-management-app .um-frame,
+#user-management-app .um-main,
+#user-management-app .um-panel {
+    min-height: 100%;
+}
+
+#user-management-app .um-brand,
+#user-management-app .um-copy,
+#user-management-app .um-meta {
+    margin: 0;
+}
+
+#user-management-app .um-kicker {
+    margin: 0 0 10px;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #2563eb;
+}
+
+#user-management-app .um-nav-button.is-active {
+    color: #0f172a;
+}
+
+#user-management-app .um-side-card,
+#user-management-app .um-card {
+    display: grid;
+    gap: 14px;
+}
+
+#user-management-app .um-side-title,
+#user-management-app .um-section-title {
+    margin: 0;
+    font-size: 18px;
+    line-height: 1.2;
+}
+
+#user-management-app .um-side-metric,
+#user-management-app .um-summary-item {
+    display: grid;
+    gap: 4px;
+}
+
+#user-management-app .um-side-metric span,
+#user-management-app .um-summary-item span,
+#user-management-app .um-request-card span,
+#user-management-app .um-field span,
+#user-management-app .um-meta,
+#user-management-app .um-empty,
+#user-management-app .um-message,
+#user-management-app .um-checkbox-item p {
+    font-size: 14px;
+    line-height: 1.5;
+    color: #475569;
+}
+
+#user-management-app .um-grid {
+    display: grid;
+    gap: 18px;
+}
+
+#user-management-app .um-grid--split {
+    grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.35fr);
+}
+
+#user-management-app .um-section-head {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    align-items: flex-start;
+}
+
+#user-management-app .um-request-list,
+#user-management-app .um-checkbox-grid {
+    display: grid;
+    gap: 12px;
+}
+
+#user-management-app .um-request-card {
+    display: grid;
+    gap: 4px;
+    padding: 14px 16px;
+    border: 1px solid rgba(148, 163, 184, 0.24);
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.9);
+    color: inherit;
+    text-decoration: none;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+#user-management-app .um-request-card:hover,
+#user-management-app .um-request-card.is-active {
+    border-color: rgba(37, 99, 235, 0.4);
+    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.35);
+    transform: translateY(-1px);
+}
+
+#user-management-app .um-request-card strong,
+#user-management-app .um-checkbox-item strong {
+    font-size: 15px;
+}
+
+#user-management-app .um-request-status {
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: #1d4ed8;
+}
+
+#user-management-app .um-summary-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 12px;
+}
+
+#user-management-app .um-summary-item {
+    padding: 14px 16px;
+    border-radius: 16px;
+    background: rgba(248, 250, 252, 0.9);
+    border: 1px solid rgba(148, 163, 184, 0.18);
+}
+
+#user-management-app .um-summary-item strong {
+    font-size: 15px;
+    color: #0f172a;
+}
+
+#user-management-app .um-form {
+    display: grid;
+    gap: 16px;
+}
+
+#user-management-app .um-field {
+    display: grid;
+    gap: 8px;
+}
+
+#user-management-app .um-field input,
+#user-management-app .um-field textarea {
+    width: 100%;
+    min-height: 46px;
+    padding: 12px 14px;
+    border-radius: 14px;
+    border: 1px solid rgba(148, 163, 184, 0.24);
+    background: rgba(255, 255, 255, 0.95);
+    color: #0f172a;
+    font: inherit;
+}
+
+#user-management-app .um-field textarea {
+    min-height: 120px;
+    resize: vertical;
+}
+
+#user-management-app .um-fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    display: grid;
+    gap: 10px;
+}
+
+#user-management-app .um-fieldset legend {
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 700;
+    color: #0f172a;
+}
+
+#user-management-app .um-checkbox-item {
+    align-items: flex-start;
+}
+
+#user-management-app .um-checkbox-item input {
+    margin-top: 2px;
+}
+
+#user-management-app .um-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+}
+
+#user-management-app .um-primary {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 44px;
+    padding: 10px 16px;
+    border: 0;
+    border-radius: 14px;
+    background: linear-gradient(135deg, #2563eb, #1d4ed8);
+    color: #fff;
+    font: inherit;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+#user-management-app .um-secondary,
+#user-management-app .um-danger {
+    min-height: 42px;
+}
+
+#user-management-app .um-danger {
+    border-color: rgba(239, 68, 68, 0.28);
+    color: #b91c1c;
+}
+
+#user-management-app .um-message {
+    display: grid;
+    gap: 8px;
+}
+
+#user-management-app .um-message strong {
+    font-size: 15px;
+    color: #0f172a;
+}
+
+#user-management-app .um-message.is-error {
+    color: #b91c1c;
+}
+
+#user-management-app .um-message.is-success {
+    color: #047857;
+}
+
+#user-management-app .um-list {
+    margin: 0;
+    padding-left: 18px;
+}
+
+@media (max-width: 980px) {
+    #user-management-app .um-grid--split {
+        grid-template-columns: 1fr;
+    }
+
+    #user-management-app .um-section-head,
+    #user-management-app .um-actions {
+        flex-direction: column;
+        align-items: stretch;
+    }
+}
--- a/public/assets/apps/user-management/app.js
+++ b/public/assets/apps/user-management/app.js
@@ -0,0 +1,120 @@
+(() => {
+    const normalizeUrl = (url) => {
+        const next = new URL(url, window.location.origin);
+        next.searchParams.set('partial', '1');
+        return next.toString();
+    };
+
+    const renderError = (host, message) => {
+        host.innerHTML = `
+            <div class="window-app-shell um-shell">
+                <div class="window-app-frame um-frame">
+                    <main class="window-app-main um-main">
+                        <div class="window-app-panel um-panel">
+                            <section class="window-app-card um-card">
+                                <p class="um-message is-error">${String(message || 'User Management konnte nicht geladen werden.')}</p>
+                            </section>
+                        </div>
+                    </main>
+                </div>
+            </div>
+        `;
+    };
+
+    const bindInteractions = (host, loadRoute) => {
+        host.querySelectorAll('a[href]').forEach((link) => {
+            if (link.dataset.umBound === '1') {
+                return;
+            }
+
+            const href = String(link.getAttribute('href') || '');
+            if (!href.startsWith('/admin/users/')) {
+                return;
+            }
+
+            link.dataset.umBound = '1';
+            link.addEventListener('click', (event) => {
+                event.preventDefault();
+                loadRoute(href);
+            });
+        });
+
+        host.querySelectorAll('form[action]').forEach((form) => {
+            if (form.dataset.umBound === '1') {
+                return;
+            }
+
+            const action = String(form.getAttribute('action') || '');
+            if (!action.startsWith('/admin/users/')) {
+                return;
+            }
+
+            form.dataset.umBound = '1';
+            form.addEventListener('submit', async (event) => {
+                event.preventDefault();
+
+                try {
+                    host.classList.add('is-loading');
+                    const response = await fetch(normalizeUrl(action), {
+                        method: 'POST',
+                        credentials: 'same-origin',
+                        body: new FormData(form),
+                    });
+
+                    const html = await response.text();
+                    if (!response.ok) {
+                        throw new Error(`HTTP ${response.status}`);
+                    }
+
+                    host.innerHTML = html;
+                    bindInteractions(host, loadRoute);
+                } catch (error) {
+                    renderError(host, error?.message || 'Formular konnte nicht verarbeitet werden.');
+                } finally {
+                    host.classList.remove('is-loading');
+                }
+            });
+        });
+    };
+
+    window.initUserManagementApp = function initUserManagementApp(host, options = {}) {
+        if (!(host instanceof Element)) {
+            return;
+        }
+
+        if (host.dataset.umAppBound === '1') {
+            return;
+        }
+
+        host.dataset.umAppBound = '1';
+
+        const entryRoute = String(options.entryRoute || '/admin/users/');
+        const loadRoute = async (route) => {
+            try {
+                host.classList.add('is-loading');
+                const response = await fetch(normalizeUrl(route), {
+                    credentials: 'same-origin',
+                    headers: { Accept: 'text/html' },
+                });
+                const html = await response.text();
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}`);
+                }
+
+                host.innerHTML = html;
+                bindInteractions(host, loadRoute);
+            } catch (error) {
+                renderError(host, error?.message || 'User Management konnte nicht geladen werden.');
+            } finally {
+                host.classList.remove('is-loading');
+            }
+        };
+
+        if (options.standalone) {
+            bindInteractions(host, loadRoute);
+            return;
+        }
+
+        loadRoute(entryRoute);
+    };
+})();