Add login-required user management (admin/user roles, Config->Benutzer)

No self-signup: admins create every account in Config -> Benutzer with a
typed start password; a forced password change gates first use. Session-
cookie auth protects all /api/* routes; /api/users additionally requires
the admin role. See docs/authentication.md.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/frontend/components/LoginGate.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import { useState } from "react";
+import { authApi } from "../utils/auth-api";
+import { useAuth } from "./AuthProvider";
+
+export function LoginGate({ children }: { children: React.ReactNode }) {
+  const { status, user, reload } = useAuth();
+
+  if (status === "loading") {
+    return (
+      <div className="login-gate-screen">
+        <p>Lädt…</p>
+      </div>
+    );
+  }
+
+  if (status === "signed-out") {
+    return (
+      <div className="login-gate-screen">
+        <LoginForm onSignedIn={reload} />
+      </div>
+    );
+  }
+
+  if (user?.mustChangePassword) {
+    return (
+      <div className="login-gate-screen">
+        <ForcedPasswordChangeForm onChanged={reload} />
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+}
+
+function LoginForm({ onSignedIn }: { onSignedIn: () => Promise<void> }) {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    setSubmitting(true);
+    setError(null);
+    try {
+      await authApi.login(username, password);
+      await onSignedIn();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Anmeldung fehlgeschlagen.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <form className="login-gate-card card" onSubmit={handleSubmit}>
+      <h1 className="h4 mb-3">Leistungsbilanz</h1>
+      <div className="mb-3">
+        <label className="form-label" htmlFor="login-username">
+          Anmeldename
+        </label>
+        <input
+          id="login-username"
+          className="form-control"
+          value={username}
+          onChange={(event) => setUsername(event.target.value)}
+          autoFocus
+          autoComplete="username"
+          required
+        />
+      </div>
+      <div className="mb-3">
+        <label className="form-label" htmlFor="login-password">
+          Passwort
+        </label>
+        <input
+          id="login-password"
+          type="password"
+          className="form-control"
+          value={password}
+          onChange={(event) => setPassword(event.target.value)}
+          autoComplete="current-password"
+          required
+        />
+      </div>
+      {error && <p className="text-danger">{error}</p>}
+      <button type="submit" className="btn btn-primary" disabled={submitting}>
+        {submitting ? "Meldet an…" : "Anmelden"}
+      </button>
+    </form>
+  );
+}
+
+function ForcedPasswordChangeForm({ onChanged }: { onChanged: () => Promise<void> }) {
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [newPasswordRepeat, setNewPasswordRepeat] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    if (newPassword !== newPasswordRepeat) {
+      setError("Die beiden neuen Passwörter stimmen nicht überein.");
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      await authApi.changePassword(currentPassword, newPassword);
+      await onChanged();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Passwort konnte nicht geändert werden.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <form className="login-gate-card card" onSubmit={handleSubmit}>
+      <h1 className="h4 mb-3">Neues Passwort setzen</h1>
+      <p className="text-body-secondary">
+        Dieser Zugang wurde mit einem Startpasswort angelegt. Bitte vor der
+        weiteren Nutzung ein eigenes Passwort vergeben.
+      </p>
+      <div className="mb-3">
+        <label className="form-label" htmlFor="force-current-password">
+          Aktuelles (Start-)Passwort
+        </label>
+        <input
+          id="force-current-password"
+          type="password"
+          className="form-control"
+          value={currentPassword}
+          onChange={(event) => setCurrentPassword(event.target.value)}
+          autoComplete="current-password"
+          autoFocus
+          required
+        />
+      </div>
+      <div className="mb-3">
+        <label className="form-label" htmlFor="force-new-password">
+          Neues Passwort
+        </label>
+        <input
+          id="force-new-password"
+          type="password"
+          className="form-control"
+          value={newPassword}
+          onChange={(event) => setNewPassword(event.target.value)}
+          autoComplete="new-password"
+          minLength={8}
+          required
+        />
+      </div>
+      <div className="mb-3">
+        <label className="form-label" htmlFor="force-new-password-repeat">
+          Neues Passwort wiederholen
+        </label>
+        <input
+          id="force-new-password-repeat"
+          type="password"
+          className="form-control"
+          value={newPasswordRepeat}
+          onChange={(event) => setNewPasswordRepeat(event.target.value)}
+          autoComplete="new-password"
+          minLength={8}
+          required
+        />
+      </div>
+      {error && <p className="text-danger">{error}</p>}
+      <button type="submit" className="btn btn-primary" disabled={submitting}>
+        {submitting ? "Speichert…" : "Passwort setzen"}
+      </button>
+    </form>
+  );
+}