create-authenik8-app 2.4.11 → 2.4.13

package/templates/fullstack/apps/web/src/pages/DashboardPage.tsx

@@ -0,0 +1,48 @@
+import { useQuery } from "@tanstack/react-query";
+import { Activity, ArrowRight, CheckCircle2, FolderKanban, MonitorSmartphone, ShieldCheck } from "lucide-react";
+import { Link } from "react-router-dom";
+import { Badge, Card, EmptyState, Spinner } from "@authenik8/ui";
+import { accountApi, healthApi, projectApi } from "@authenik8/api-client";
+import { PageHeader, ErrorNotice } from "../components/Page";
+import { useAuth } from "../auth/AuthProvider";
+
+export function DashboardPage() {
+  const { user } = useAuth();
+  const projects = useQuery({ queryKey: ["projects"], queryFn: projectApi.list });
+  const sessions = useQuery({ queryKey: ["sessions"], queryFn: accountApi.sessions });
+  const health = useQuery({ queryKey: ["health"], queryFn: healthApi.status, refetchInterval: 60_000 });
+
+  return (
+    <>
+      <PageHeader title={`Good to see you, ${user?.name.split(" ")[0]}`} description="Your workspace and identity services at a glance." />
+      <div className="stat-grid">
+        <Card className="stat-card"><span className="stat-icon cyan"><FolderKanban size={19} /></span><div><span>Projects</span><strong>{projects.data?.projects.length ?? "-"}</strong></div></Card>
+        <Card className="stat-card"><span className="stat-icon violet"><MonitorSmartphone size={19} /></span><div><span>Active sessions</span><strong>{sessions.data?.sessions.length ?? "-"}</strong></div></Card>
+        <Card className="stat-card"><span className="stat-icon green"><ShieldCheck size={19} /></span><div><span>Email security</span><strong>{user?.verified ? "Verified" : "Pending"}</strong></div></Card>
+        <Card className="stat-card"><span className="stat-icon amber"><Activity size={19} /></span><div><span>API status</span><strong>{health.data?.status ?? "Checking"}</strong></div></Card>
+      </div>
+
+      <div className="dashboard-grid">
+        <section className="panel">
+          <div className="panel-heading"><div><h2>Recent projects</h2><p>Latest workspace activity</p></div><Link className="text-link" to="/projects">View all <ArrowRight size={15} /></Link></div>
+          {projects.isPending ? <div className="panel-loading"><Spinner /></div> : projects.error ? <ErrorNotice error={projects.error} /> : projects.data!.projects.length === 0 ? (
+            <EmptyState icon={<FolderKanban />} title="No projects yet" action={<Link className="button button-primary" to="/projects/new">Create project</Link>}>Create the first owned resource in this workspace.</EmptyState>
+          ) : (
+            <div className="table-wrap"><table><thead><tr><th>Name</th><th>Status</th><th>Updated</th></tr></thead><tbody>
+              {projects.data!.projects.slice(0, 5).map((project) => <tr key={project.id}><td><Link className="table-link" to={`/projects/${project.id}`}>{project.name}</Link></td><td><Badge tone={project.status === "ACTIVE" ? "success" : project.status === "ARCHIVED" ? "neutral" : "warning"}>{project.status}</Badge></td><td>{new Date(project.updatedAt).toLocaleDateString()}</td></tr>)}
+            </tbody></table></div>
+          )}
+        </section>
+        <aside className="panel security-panel">
+          <div className="panel-heading"><div><h2>Security posture</h2><p>Account checks</p></div></div>
+          <ul className="check-list">
+            <li><CheckCircle2 /><span><strong>Rotating session</strong><small>Refresh cookie protected</small></span></li>
+            <li className={user?.verified ? "" : "pending"}><CheckCircle2 /><span><strong>Email verification</strong><small>{user?.verified ? "Identity confirmed" : "Action required"}</small></span></li>
+            <li><CheckCircle2 /><span><strong>API authorization</strong><small>Role and owner policies active</small></span></li>
+          </ul>
+          <Link className="button button-secondary full-width" to="/settings/security">Review account security</Link>
+        </aside>
+      </div>
+    </>
+  );
+}

package/templates/fullstack/apps/web/src/pages/StatusPages.tsx

@@ -0,0 +1,8 @@
+import { ArrowLeft, LockKeyhole, SearchX } from "lucide-react";
+import { Link } from "react-router-dom";
+
+function StatusPage({ icon, title, message }: { icon: React.ReactNode; title: string; message: string }) {
+  return <main className="status-page"><div className="status-icon">{icon}</div><h1>{title}</h1><p>{message}</p><Link className="button button-primary" to="/"><ArrowLeft size={17} /> Return to dashboard</Link></main>;
+}
+export const ForbiddenPage = () => <StatusPage icon={<LockKeyhole />} title="Access denied" message="Your account does not have permission to view this area." />;
+export const NotFoundPage = () => <StatusPage icon={<SearchX />} title="Page not found" message="The page you requested does not exist." />;

package/templates/fullstack/apps/web/src/pages/admin/AuditPage.tsx

@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/react-query";
+import { Activity, RefreshCw } from "lucide-react";
+import { Button, EmptyState, Spinner } from "@authenik8/ui";
+import { adminApi } from "@authenik8/api-client";
+import { ErrorNotice, PageHeader } from "../../components/Page";
+
+export function AuditPage() {
+  const query = useQuery({ queryKey: ["audit"], queryFn: adminApi.audit });
+  return (
+    <>
+      <PageHeader title="Audit trail" description="Recent privileged workspace actions." action={<Button variant="secondary" onClick={() => query.refetch()}><RefreshCw size={17} /> Refresh</Button>} />
+      <section className="panel">
+        {query.isPending ? <div className="panel-loading"><Spinner /></div> : query.error ? <ErrorNotice error={query.error} /> : query.data!.events.length === 0 ? <EmptyState icon={<Activity />} title="No audit events">Administrative changes will appear here.</EmptyState> : <div className="table-wrap"><table><thead><tr><th>Action</th><th>Actor</th><th>Target</th><th>Time</th></tr></thead><tbody>
+          {query.data!.events.map((event) => <tr key={event.id}><td><code>{event.action}</code></td><td>{event.actorEmail ?? "System"}</td><td>{event.targetType}{event.targetId ? ` / ${event.targetId.slice(0, 8)}` : ""}</td><td>{new Date(event.createdAt).toLocaleString()}</td></tr>)}
+        </tbody></table></div>}
+      </section>
+    </>
+  );
+}

package/templates/fullstack/apps/web/src/pages/admin/UsersPage.tsx

@@ -0,0 +1,24 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { MoreHorizontal, RefreshCw, Users } from "lucide-react";
+import { Badge, Button, EmptyState, Spinner } from "@authenik8/ui";
+import { adminApi } from "@authenik8/api-client";
+import type { Role, UserStatus } from "@authenik8/contracts";
+import { ErrorNotice, PageHeader } from "../../components/Page";
+
+export function UsersPage() {
+  const client = useQueryClient();
+  const query = useQuery({ queryKey: ["admin-users"], queryFn: () => adminApi.users() });
+  const update = useMutation({ mutationFn: ({ id, role, status }: { id: string; role?: Role; status?: UserStatus }) => adminApi.updateUser(id, { role, status }), onSuccess: () => client.invalidateQueries({ queryKey: ["admin-users"] }) });
+  const revoke = useMutation({ mutationFn: adminApi.revokeSessions });
+  return (
+    <>
+      <PageHeader title="Users" description="Roles, account status, and session control." action={<Button variant="secondary" onClick={() => query.refetch()}><RefreshCw size={17} /> Refresh</Button>} />
+      {(query.error || update.error || revoke.error) && <ErrorNotice error={query.error ?? update.error ?? revoke.error} />}
+      <section className="panel">
+        {query.isPending ? <div className="panel-loading"><Spinner /></div> : query.data!.items.length === 0 ? <EmptyState icon={<Users />} title="No users">Registered users will appear here.</EmptyState> : <div className="table-wrap"><table><thead><tr><th>User</th><th>Role</th><th>Status</th><th>Verified</th><th>Joined</th><th><span className="sr-only">Actions</span></th></tr></thead><tbody>
+          {query.data!.items.map((user) => <tr key={user.id}><td><strong>{user.name}</strong><small className="table-subtitle">{user.email}</small></td><td><select className="table-select" value={user.role} onChange={(event) => update.mutate({ id: user.id, role: event.target.value as Role })}><option value="USER">User</option><option value="ADMIN">Admin</option></select></td><td><select className="table-select" value={user.status} onChange={(event) => update.mutate({ id: user.id, status: event.target.value as UserStatus })}><option value="ACTIVE">Active</option><option value="SUSPENDED">Suspended</option></select></td><td><Badge tone={user.verified ? "success" : "warning"}>{user.verified ? "Verified" : "Pending"}</Badge></td><td>{new Date(user.createdAt).toLocaleDateString()}</td><td><Button className="icon-button" variant="ghost" onClick={() => revoke.mutate(user.id)} aria-label={`Revoke sessions for ${user.name}`} title="Revoke all sessions"><MoreHorizontal size={18} /></Button></td></tr>)}
+        </tbody></table></div>}
+      </section>
+    </>
+  );
+}

package/templates/fullstack/apps/web/src/pages/auth/LoginPage.tsx

@@ -0,0 +1,51 @@
+import { useState, type FormEvent } from "react";
+import { Github, KeyRound } from "lucide-react";
+import { Link, useLocation, useNavigate, useSearchParams } from "react-router-dom";
+import { Button, Input } from "@authenik8/ui";
+import { AuthShell } from "../../components/AuthShell";
+import { ErrorNotice, Field } from "../../components/Page";
+import { useAuth } from "../../auth/AuthProvider";
+import { enabledOAuthProviders } from "../../auth/providers";
+
+export function LoginPage() {
+  const { login } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [params] = useSearchParams();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<unknown>();
+  const [pending, setPending] = useState(false);
+
+  async function submit(event: FormEvent) {
+    event.preventDefault();
+    setPending(true);
+    setError(undefined);
+    try {
+      await login({ email, password });
+      const from = (location.state as { from?: string } | null)?.from;
+      navigate(from ?? "/", { replace: true });
+    } catch (caught) {
+      setError(caught);
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <AuthShell title="Welcome back" subtitle="Sign in to your workspace" footer={<>New to Authenik8? <Link to="/register">Create an account</Link></>}>
+      {params.has("oauthError") && <ErrorNotice error={new Error("OAuth sign-in could not be completed")} />}
+      {error !== undefined && <ErrorNotice error={error} />}
+      <form className="form-stack" onSubmit={submit}>
+        <Field label="Email address" htmlFor="email"><Input id="email" type="email" autoComplete="email" value={email} onChange={(event) => setEmail(event.target.value)} required /></Field>
+        <Field label="Password" htmlFor="password"><Input id="password" type="password" autoComplete="current-password" value={password} onChange={(event) => setPassword(event.target.value)} required /></Field>
+        <div className="form-row end"><Link to="/forgot-password">Forgot password?</Link></div>
+        <Button type="submit" disabled={pending}><KeyRound size={17} /> {pending ? "Signing in..." : "Sign in"}</Button>
+      </form>
+      {enabledOAuthProviders.length > 0 && <><div className="divider"><span>or continue with</span></div>
+        <div className="oauth-grid">
+          {enabledOAuthProviders.map((provider) => <Button key={provider} variant="secondary" onClick={() => window.location.assign(`/api/auth/oauth/${provider}`)}>{provider === "google" ? <span className="provider-g">G</span> : <Github size={18} />} {provider === "google" ? "Google" : "GitHub"}</Button>)}
+        </div></>}
+    </AuthShell>
+  );
+}

package/templates/fullstack/apps/web/src/pages/auth/OAuthCallbackPage.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { Spinner } from "@authenik8/ui";
+import { useAuth } from "../../auth/AuthProvider";
+import { AuthShell } from "../../components/AuthShell";
+import { ErrorNotice } from "../../components/Page";
+
+export function OAuthCallbackPage() {
+  const [params] = useSearchParams();
+  const navigate = useNavigate();
+  const { completeOAuth } = useAuth();
+  const started = useRef(false);
+  const [error, setError] = useState<unknown>();
+  useEffect(() => {
+    if (started.current) return;
+    started.current = true;
+    const code = params.get("code");
+    if (!code) { setError(new Error("OAuth exchange code is missing")); return; }
+    completeOAuth(code).then(() => navigate("/", { replace: true })).catch(setError);
+  }, [completeOAuth, navigate, params]);
+  return (
+    <AuthShell title="Completing sign in" subtitle="Securing your new session" footer={<span />}>
+      {error ? <ErrorNotice error={error} /> : <div className="center-status"><Spinner label="Completing OAuth sign in" /></div>}
+    </AuthShell>
+  );
+}

package/templates/fullstack/apps/web/src/pages/auth/RecoveryPages.tsx

@@ -0,0 +1,53 @@
+import { useState, type FormEvent } from "react";
+import { ArrowLeft, Mail, RotateCcw } from "lucide-react";
+import { Link, useSearchParams } from "react-router-dom";
+import { Button, Input } from "@authenik8/ui";
+import { authApi } from "@authenik8/api-client";
+import { AuthShell } from "../../components/AuthShell";
+import { ErrorNotice, Field, SuccessNotice } from "../../components/Page";
+
+export function ForgotPasswordPage() {
+  const [email, setEmail] = useState("");
+  const [result, setResult] = useState<{ message: string; devResetToken?: string }>();
+  const [error, setError] = useState<unknown>();
+  async function submit(event: FormEvent) {
+    event.preventDefault();
+    setError(undefined);
+    try { setResult(await authApi.forgotPassword(email)); } catch (caught) { setError(caught); }
+  }
+  return (
+    <AuthShell title="Reset your password" subtitle="We will send a short-lived recovery link" footer={<Link to="/login"><ArrowLeft size={15} /> Back to sign in</Link>}>
+      {error !== undefined && <ErrorNotice error={error} />}
+      {result ? <SuccessNotice>{result.message}{result.devResetToken && <> Development token: <code>{result.devResetToken}</code></>}</SuccessNotice> : (
+        <form className="form-stack" onSubmit={submit}>
+          <Field label="Email address" htmlFor="email"><Input id="email" type="email" autoComplete="email" value={email} onChange={(event) => setEmail(event.target.value)} required /></Field>
+          <Button type="submit"><Mail size={17} /> Send recovery link</Button>
+        </form>
+      )}
+    </AuthShell>
+  );
+}
+
+export function ResetPasswordPage() {
+  const [params] = useSearchParams();
+  const [password, setPassword] = useState("");
+  const [done, setDone] = useState(false);
+  const [error, setError] = useState<unknown>();
+  const token = params.get("token") ?? "";
+  async function submit(event: FormEvent) {
+    event.preventDefault();
+    setError(undefined);
+    try { await authApi.resetPassword(token, password); setDone(true); } catch (caught) { setError(caught); }
+  }
+  return (
+    <AuthShell title="Choose a new password" subtitle="This link can be used once" footer={<Link to="/login">Return to sign in</Link>}>
+      {error !== undefined && <ErrorNotice error={error} />}
+      {done ? <SuccessNotice>Password updated. You can sign in now.</SuccessNotice> : (
+        <form className="form-stack" onSubmit={submit}>
+          <Field label="New password" htmlFor="password"><Input id="password" type="password" minLength={10} autoComplete="new-password" value={password} onChange={(event) => setPassword(event.target.value)} required /></Field>
+          <Button type="submit" disabled={!token}><RotateCcw size={17} /> Update password</Button>
+        </form>
+      )}
+    </AuthShell>
+  );
+}

package/templates/fullstack/apps/web/src/pages/auth/RegisterPage.tsx

@@ -0,0 +1,86 @@
+import { useState, type FormEvent } from "react";
+import { UserPlus } from "lucide-react";
+import { Link } from "react-router-dom";
+import { registerSchema, type RegisterInput } from "@authenik8/contracts";
+import { ApiError, authApi } from "@authenik8/api-client";
+import { Button, Input } from "@authenik8/ui";
+import { AuthShell } from "../../components/AuthShell";
+import { ErrorNotice, Field, SuccessNotice } from "../../components/Page";
+
+type RegistrationField = keyof RegisterInput;
+type RegistrationErrors = Partial<Record<RegistrationField, string>>;
+
+function validationErrors(error: { issues: Array<{ path: PropertyKey[]; message: string }> }): RegistrationErrors {
+  const fields: RegistrationErrors = {};
+  for (const issue of error.issues) {
+    const field = issue.path[0];
+    if ((field === "name" || field === "email" || field === "password") && !fields[field]) {
+      fields[field] = issue.message;
+    }
+  }
+  return fields;
+}
+
+export function RegisterPage() {
+  const [form, setForm] = useState({ name: "", email: "", password: "" });
+  const [fieldErrors, setFieldErrors] = useState<RegistrationErrors>({});
+  const [error, setError] = useState<unknown>();
+  const [result, setResult] = useState<{ message: string; devVerificationToken?: string }>();
+  const [pending, setPending] = useState(false);
+
+  function update(field: RegistrationField, value: string) {
+    setForm((current) => ({ ...current, [field]: value }));
+    setFieldErrors((current) => ({ ...current, [field]: undefined }));
+  }
+
+  async function submit(event: FormEvent) {
+    event.preventDefault();
+    setError(undefined);
+
+    const validation = registerSchema.safeParse(form);
+    if (!validation.success) {
+      setFieldErrors(validationErrors(validation.error));
+      return;
+    }
+
+    setFieldErrors({});
+    setPending(true);
+    try {
+      setResult(await authApi.register(validation.data));
+    } catch (caught) {
+      if (caught instanceof ApiError && caught.fields) {
+        setFieldErrors(Object.fromEntries(
+          Object.entries(caught.fields)
+            .filter(([field]) => field === "name" || field === "email" || field === "password")
+            .map(([field, messages]) => [field, messages[0]]),
+        ));
+      }
+      setError(caught);
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <AuthShell title="Create your account" subtitle="Start with a secure workspace" footer={<>Already registered? <Link to="/login">Sign in</Link></>}>
+      {error !== undefined && <ErrorNotice error={error} />}
+      {result ? (
+        <SuccessNotice>{result.message}{result.devVerificationToken && <> Development token: <code>{result.devVerificationToken}</code></>}</SuccessNotice>
+      ) : (
+        <form className="form-stack" onSubmit={submit} noValidate>
+          <Field label="Full name" htmlFor="name" error={fieldErrors.name}>
+            <Input id="name" autoComplete="name" value={form.name} onChange={(event) => update("name", event.target.value)} aria-invalid={Boolean(fieldErrors.name)} required />
+          </Field>
+          <Field label="Email address" htmlFor="email" error={fieldErrors.email}>
+            <Input id="email" type="email" autoComplete="email" value={form.email} onChange={(event) => update("email", event.target.value)} aria-invalid={Boolean(fieldErrors.email)} required />
+          </Field>
+          <Field label="Password" htmlFor="password" error={fieldErrors.password}>
+            <Input id="password" type="password" autoComplete="new-password" value={form.password} onChange={(event) => update("password", event.target.value)} aria-invalid={Boolean(fieldErrors.password)} required />
+          </Field>
+          <p className="field-hint">Use 10 or more characters with uppercase, lowercase, and a number.</p>
+          <Button type="submit" disabled={pending}><UserPlus size={17} /> {pending ? "Creating..." : "Create account"}</Button>
+        </form>
+      )}
+    </AuthShell>
+  );
+}

package/templates/fullstack/apps/web/src/pages/auth/VerifyEmailPage.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { Link, useSearchParams } from "react-router-dom";
+import { Spinner } from "@authenik8/ui";
+import { authApi } from "@authenik8/api-client";
+import { AuthShell } from "../../components/AuthShell";
+import { ErrorNotice, SuccessNotice } from "../../components/Page";
+
+export function VerifyEmailPage() {
+  const [params] = useSearchParams();
+  const [status, setStatus] = useState<"loading" | "done" | "error">("loading");
+  const [error, setError] = useState<unknown>();
+  useEffect(() => {
+    const token = params.get("token");
+    if (!token) { setStatus("error"); setError(new Error("Verification token is missing")); return; }
+    authApi.verifyEmail(token).then(() => setStatus("done")).catch((caught) => { setError(caught); setStatus("error"); });
+  }, [params]);
+  return (
+    <AuthShell title="Email verification" subtitle="Confirming your account" footer={<Link to="/login">Continue to sign in</Link>}>
+      {status === "loading" && <div className="center-status"><Spinner label="Verifying email" /></div>}
+      {status === "done" && <SuccessNotice>Your email address is verified.</SuccessNotice>}
+      {status === "error" && <ErrorNotice error={error} />}
+    </AuthShell>
+  );
+}

package/templates/fullstack/apps/web/src/pages/settings/ProfilePage.tsx

@@ -0,0 +1,34 @@
+import { useState, type FormEvent } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { Save, UserRound } from "lucide-react";
+import { Button, Input } from "@authenik8/ui";
+import { accountApi } from "@authenik8/api-client";
+import { useAuth } from "../../auth/AuthProvider";
+import { ErrorNotice, Field, PageHeader, SuccessNotice } from "../../components/Page";
+
+export function ProfilePage() {
+  const { user, setUser } = useAuth();
+  const [name, setName] = useState(user?.name ?? "");
+  const [saved, setSaved] = useState(false);
+  const mutation = useMutation({
+    mutationFn: () => accountApi.updateProfile({ name }),
+    onSuccess: ({ user: updated }) => { setUser(updated); setSaved(true); },
+  });
+  function submit(event: FormEvent) { event.preventDefault(); setSaved(false); mutation.mutate(); }
+  return (
+    <>
+      <PageHeader title="Profile" description="Personal details used across your workspace." />
+      <div className="settings-layout">
+        <nav className="settings-nav"><a className="active" href="/settings/profile">Profile</a><a href="/settings/security">Security</a></nav>
+        <form className="form-panel" onSubmit={submit}>
+          <div className="form-section-heading"><span className="stat-icon cyan"><UserRound size={19} /></span><div><h2>Personal information</h2><p>Keep your workspace identity current.</p></div></div>
+          {mutation.error && <ErrorNotice error={mutation.error} />}
+          {saved && <SuccessNotice>Profile saved.</SuccessNotice>}
+          <Field label="Full name" htmlFor="name"><Input id="name" autoComplete="name" value={name} onChange={(event) => setName(event.target.value)} required /></Field>
+          <Field label="Email address" htmlFor="email"><Input id="email" type="email" value={user?.email ?? ""} disabled /></Field>
+          <div className="form-actions"><Button type="submit" disabled={mutation.isPending}><Save size={17} /> {mutation.isPending ? "Saving..." : "Save changes"}</Button></div>
+        </form>
+      </div>
+    </>
+  );
+}

package/templates/fullstack/apps/web/src/pages/settings/SecurityPage.tsx

@@ -0,0 +1,57 @@
+import { useState, type FormEvent } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Github, KeyRound, Link2, LogOut, MonitorSmartphone, ShieldCheck } from "lucide-react";
+import { Badge, Button, Input, Spinner } from "@authenik8/ui";
+import { accountApi, authApi } from "@authenik8/api-client";
+import { ErrorNotice, Field, PageHeader, SuccessNotice } from "../../components/Page";
+import { enabledOAuthProviders } from "../../auth/providers";
+
+export function SecurityPage() {
+  const client = useQueryClient();
+  const sessions = useQuery({ queryKey: ["sessions"], queryFn: accountApi.sessions });
+  const providers = useQuery({ queryKey: ["providers"], queryFn: accountApi.providers });
+  const [passwords, setPasswords] = useState({ currentPassword: "", newPassword: "" });
+  const [passwordSaved, setPasswordSaved] = useState(false);
+  const passwordMutation = useMutation({ mutationFn: () => accountApi.changePassword(passwords), onSuccess: () => { setPasswords({ currentPassword: "", newPassword: "" }); setPasswordSaved(true); } });
+  const revoke = useMutation({ mutationFn: accountApi.revokeSession, onSuccess: () => client.invalidateQueries({ queryKey: ["sessions"] }) });
+  async function link(provider: "google" | "github") {
+    const result = await accountApi.startProviderLink(provider);
+    window.location.assign(result.url);
+  }
+  function submitPassword(event: FormEvent) { event.preventDefault(); setPasswordSaved(false); passwordMutation.mutate(); }
+
+  return (
+    <>
+      <PageHeader title="Security" description="Credentials, providers, and active sessions." />
+      <div className="settings-layout">
+        <nav className="settings-nav"><a href="/settings/profile">Profile</a><a className="active" href="/settings/security">Security</a></nav>
+        <div className="settings-stack">
+          <form className="form-panel" onSubmit={submitPassword}>
+            <div className="form-section-heading"><span className="stat-icon violet"><KeyRound size={19} /></span><div><h2>Password</h2><p>Update your credential regularly.</p></div></div>
+            {passwordMutation.error && <ErrorNotice error={passwordMutation.error} />}{passwordSaved && <SuccessNotice>Password updated.</SuccessNotice>}
+            <div className="two-fields"><Field label="Current password" htmlFor="current-password"><Input id="current-password" type="password" autoComplete="current-password" value={passwords.currentPassword} onChange={(event) => setPasswords({ ...passwords, currentPassword: event.target.value })} required /></Field><Field label="New password" htmlFor="new-password"><Input id="new-password" type="password" minLength={10} autoComplete="new-password" value={passwords.newPassword} onChange={(event) => setPasswords({ ...passwords, newPassword: event.target.value })} required /></Field></div>
+            <div className="form-actions"><Button type="submit" disabled={passwordMutation.isPending}>Update password</Button></div>
+          </form>
+
+          <section className="panel settings-panel">
+            <div className="form-section-heading"><span className="stat-icon cyan"><Link2 size={19} /></span><div><h2>Linked providers</h2><p>External identities connected to this account.</p></div></div>
+            {providers.isPending ? <Spinner /> : providers.error ? <ErrorNotice error={providers.error} /> : <div className="provider-list">
+              {enabledOAuthProviders.map((provider) => {
+                const linked = providers.data!.providers.find((item) => item.provider === provider);
+                return <div className="provider-row" key={provider}><span className="provider-icon">{provider === "github" ? <Github size={20} /> : <span className="provider-g">G</span>}</span><div><strong>{provider === "github" ? "GitHub" : "Google"}</strong><small>{linked?.providerEmail ?? "Not connected"}</small></div>{linked ? <Badge tone="success">Connected</Badge> : <Button variant="secondary" onClick={() => void link(provider)}>Connect</Button>}</div>;
+              })}
+            </div>}
+          </section>
+
+          <section className="panel settings-panel">
+            <div className="form-section-heading"><span className="stat-icon green"><MonitorSmartphone size={19} /></span><div><h2>Active sessions</h2><p>Devices with refresh access.</p></div></div>
+            {revoke.error && <ErrorNotice error={revoke.error} />}
+            {sessions.isPending ? <Spinner /> : sessions.error ? <ErrorNotice error={sessions.error} /> : <div className="session-list">
+              {sessions.data!.sessions.map((session) => <div className="session-row" key={session.id}><span className="device-icon"><ShieldCheck size={19} /></span><div><strong>{session.userAgent}</strong><small>{session.ipAddress} · Last used {new Date(session.lastUsedAt).toLocaleString()}</small></div>{session.current && <Badge tone="accent">Current</Badge>}<Button className="icon-button" variant="ghost" onClick={() => revoke.mutate(session.id)} aria-label="Revoke session" title="Revoke session"><LogOut size={18} /></Button></div>)}
+            </div>}
+          </section>
+        </div>
+      </div>
+    </>
+  );
+}