Modul-Review 1: Auth-Nachbesserungen (Sicherheit & UX)

Ergebnis der ersten Test- und Review-Runde zum Modul "Zugang & App-Rahmen":

- Login-Timing-Ausgleich: unbekannter Benutzer wird gegen Dummy-bcrypt-Hash
  geprueft -> Antwortzeit verraet nicht mehr, ob ein Name existiert
- Zurueck-Knopf nach Logout: pageshow-Waechter prueft die Session erneut und
  leitet die aus dem bfcache zurueckgeholte Ansicht auf /login
- Rate-Limiting (neues lib/rate-limit.ts): Login 10/15min, Registrierung
  5/h je IP, Passwortaenderung 10/15min je Benutzer; 429 + Retry-After
- Passwort-Dialog laeuft neu ueber Modal -> schliesst auf Esc (Fokus-Falle,
  aria-modal inklusive)
- Registrierungs-Fehler getrennt: nur belegter Name = 409 mit freundlicher
  Meldung, sonst 500 statt roher Prisma-Meldung

SPEZIFIKATION 0.27 (3.1.2/3/4, neues 3.1.6). 261 -> 267 Tests.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/ProfileMenu.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from "react";
 import { KeyRound, LogOut, Palette, UserCircle2 } from "lucide-react";
 import { api } from "@/lib/api-client";
+import { Button, Modal } from "@/components/ui";
 import { getEffectiveTheme, setTheme, THEMES, type Theme } from "@/lib/theme";
 
 export function ProfileMenu({ username }: { username: string }) {
@@ -140,28 +141,21 @@ function ChangePasswordDialog({ onClose }: { onClose: () => void }) {
   const inputClass =
     "w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-fg shadow-sm focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/25";
 
+  // Über die zentrale Modal-Komponente: bringt Esc, Fokus-Falle und aria-modal mit
+  // (SPEZIFIKATION 3.7.6) -- der Dialog war zuvor von Hand gebaut und ignorierte Esc.
   return (
-    <div className="fixed inset-0 z-40 flex items-center justify-center bg-black/40 px-4" onClick={onClose}>
-      <form
-        onSubmit={handleSubmit}
-        onClick={(e) => e.stopPropagation()}
-        className="flex w-full max-w-sm flex-col gap-3 rounded-2xl border border-border bg-surface p-6 shadow-xl"
-      >
-        <h2 className="text-base font-semibold text-fg">Passwort ändern</h2>
+    <Modal title="Passwort ändern" onClose={onClose}>
+      <form onSubmit={handleSubmit} className="flex flex-col gap-3">
         <input type="password" placeholder="Aktuelles Passwort" autoComplete="current-password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} className={inputClass} />
         <input type="password" placeholder="Neues Passwort" autoComplete="new-password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} className={inputClass} />
         <input type="password" placeholder="Neues Passwort bestätigen" autoComplete="new-password" value={newPasswordConfirm} onChange={(e) => setNewPasswordConfirm(e.target.value)} className={inputClass} />
         {error && <p className="text-sm text-danger">{error}</p>}
         {done && <p className="text-sm text-success">Passwort geändert.</p>}
         <div className="flex gap-2 pt-1">
-          <button type="submit" disabled={saving} className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-accent-fg shadow-sm hover:bg-accent-hover disabled:opacity-50">
-            {saving ? "..." : "Speichern"}
-          </button>
-          <button type="button" onClick={onClose} className="rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted hover:bg-surface-2">
-            Abbrechen
-          </button>
+          <Button type="submit" disabled={saving}>{saving ? "..." : "Speichern"}</Button>
+          <Button type="button" variant="secondary" onClick={onClose}>Abbrechen</Button>
         </div>
       </form>
-    </div>
+    </Modal>
   );
 }