feat(auth): enterprise authentication and user management

frontend/athena/app/users/[id]/page.tsx

@@ -0,0 +1,235 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { FormEvent } from "react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { ArrowLeft, KeyRound, Pencil } from "lucide-react";
+
+import StatusBadge from "@/components/common/StatusBadge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import UserFormDialog from "@/components/users/UserFormDialog";
+import { api } from "@/lib/api";
+import type { User, UserPayload } from "@/types/user";
+
+function getErrorMessage(error: unknown) {
+  if (typeof error === "object" && error !== null && "response" in error) {
+    const response = (error as { response?: { data?: { detail?: string } } }).response;
+    return response?.data?.detail ?? "Aktion konnte nicht abgeschlossen werden";
+  }
+
+  return "Aktion konnte nicht abgeschlossen werden";
+}
+
+function formatDateTime(value: string) {
+  return new Intl.DateTimeFormat("de-DE", {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(new Date(value));
+}
+
+export default function UserDetailPage() {
+  const params = useParams<{ id: string }>();
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [pending, setPending] = useState(false);
+  const [formOpen, setFormOpen] = useState(false);
+  const [formError, setFormError] = useState("");
+  const [passwordOpen, setPasswordOpen] = useState(false);
+  const [password, setPassword] = useState("");
+  const [passwordError, setPasswordError] = useState("");
+
+  const loadUser = useCallback(async () => {
+    try {
+      const response = await api.get<User>(`/users/${params.id}`);
+      setUser(response.data);
+    } catch (err) {
+      setError(getErrorMessage(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [params.id]);
+
+  useEffect(() => {
+    queueMicrotask(() => {
+      void loadUser();
+    });
+  }, [loadUser]);
+
+  async function saveUser(payload: UserPayload) {
+    if (!user) {
+      return;
+    }
+
+    setPending(true);
+    setFormError("");
+
+    try {
+      const response = await api.put<User>(`/users/${user.id}`, payload);
+      setUser(response.data);
+      setFormOpen(false);
+    } catch (err) {
+      setFormError(getErrorMessage(err));
+    } finally {
+      setPending(false);
+    }
+  }
+
+  async function savePassword(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    if (!user || password.length < 8) {
+      setPasswordError("Passwort muss mindestens 8 Zeichen lang sein");
+      return;
+    }
+
+    setPending(true);
+    setPasswordError("");
+
+    try {
+      const response = await api.put<User>(`/users/${user.id}?action=password`, {
+        password,
+      });
+      setUser(response.data);
+      setPassword("");
+      setPasswordOpen(false);
+    } catch (err) {
+      setPasswordError(getErrorMessage(err));
+    } finally {
+      setPending(false);
+    }
+  }
+
+  if (loading) {
+    return <div className="rounded-lg border bg-white p-8 text-slate-500">Benutzer wird geladen...</div>;
+  }
+
+  if (error || !user) {
+    return (
+      <div className="space-y-4">
+        <Link
+          href="/users"
+          className="inline-flex h-8 items-center justify-center rounded-lg border border-border bg-background px-2.5 text-sm font-medium hover:bg-muted"
+        >
+          Zurück
+        </Link>
+        <div className="rounded-lg border bg-white p-8 text-red-600">
+          {error || "Benutzer nicht gefunden"}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div>
+          <Link
+            href="/users"
+            className="inline-flex items-center gap-2 text-sm text-slate-500 hover:text-slate-900"
+          >
+            <ArrowLeft size={16} />
+            Zurück zur Benutzerliste
+          </Link>
+          <h1 className="mt-3 text-3xl font-bold text-slate-950">{user.username}</h1>
+          <p className="mt-1 text-sm text-slate-500">{user.email}</p>
+        </div>
+
+        <div className="flex gap-2">
+          <Button type="button" variant="outline" onClick={() => setPasswordOpen(true)}>
+            <KeyRound size={16} />
+            Passwort ändern
+          </Button>
+          <Button type="button" onClick={() => setFormOpen(true)}>
+            <Pencil size={16} />
+            Bearbeiten
+          </Button>
+        </div>
+      </div>
+
+      <section className="rounded-lg border bg-white p-6">
+        <h2 className="text-lg font-semibold">Informationen</h2>
+        <dl className="mt-6 grid gap-5 md:grid-cols-2">
+          <Detail label="Vorname" value={user.first_name || "-"} />
+          <Detail label="Nachname" value={user.last_name || "-"} />
+          <Detail label="Benutzername" value={user.username} />
+          <Detail label="E-Mail" value={user.email} />
+          <Detail label="Rolle" value={user.role} />
+          <div>
+            <dt className="text-sm text-slate-500">Status</dt>
+            <dd className="mt-1"><StatusBadge active={user.is_active} /></dd>
+          </div>
+          <Detail label="Erstellt" value={formatDateTime(user.created_at)} />
+          <Detail label="Aktualisiert" value={formatDateTime(user.updated_at)} />
+        </dl>
+      </section>
+
+      <UserFormDialog
+        open={formOpen}
+        user={user}
+        pending={pending}
+        serverError={formError}
+        onOpenChange={setFormOpen}
+        onSubmit={saveUser}
+      />
+
+      <Dialog open={passwordOpen} onOpenChange={setPasswordOpen}>
+        <DialogContent>
+          <form onSubmit={savePassword} className="space-y-5">
+            <DialogHeader>
+              <DialogTitle>Passwort ändern</DialogTitle>
+              <DialogDescription>
+                Das Passwort wird serverseitig mit pwdlib gehasht.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-1.5">
+              <Label>Neues Passwort</Label>
+              <Input
+                type="password"
+                value={password}
+                aria-invalid={Boolean(passwordError)}
+                onChange={(event) => setPassword(event.target.value)}
+              />
+              {passwordError && <p className="text-xs text-red-600">{passwordError}</p>}
+            </div>
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                disabled={pending}
+                onClick={() => setPasswordOpen(false)}
+              >
+                Abbrechen
+              </Button>
+              <Button type="submit" disabled={pending || password.length < 8}>
+                {pending ? "Speichern..." : "Speichern"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function Detail({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <dt className="text-sm text-slate-500">{label}</dt>
+      <dd className="mt-1 font-medium text-slate-950">{value}</dd>
+    </div>
+  );
+}