@cosmicdrift/kumiko-samples 0.338.0

package/packages/bundled-features/src/auth-email-password/web/invite-accept-screen.tsx

@@ -0,0 +1,272 @@
+// @runtime client
+// InviteAcceptScreen — Magic-Link-Accept für Tenant-Invitations.
+//
+// Liest `?token=...` aus der URL und branched intern je nach session-state:
+//   - Logged-in + Email-Match: 1-click accept (Branch 1, dispatcher
+//     invite-accept). Bei Email-Mismatch zeigen wir die fehlermeldung
+//     und einen "Mit anderem Account anmelden"-Link.
+//   - Anonymous: Email + Password-Form. Toggle "Schon einen Account?"
+//     entscheidet Branch 2 (existing user, login + accept) vs Branch 3
+//     (neuer user, signup + accept).
+//
+// Anti-enumeration: invalidInviteToken collapsed alle Token/User/
+// Password-Failures auf einen Code (gleicher Trade-off wie reset).
+//
+// Auto-Login: Branch 2+3 setzen Cookies via Server, Frontend redirected
+// zu loggedInHref. Branch 1 hat schon eine Session — Frontend redirected
+// auch zu loggedInHref damit der invitee in seinem neuen Tenant landet.
+
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type FormEvent, type ReactNode, useContext, useState } from "react";
+import { csrfHeader } from "./auth-client.js";
+import { resolvePostAuthHref } from "./auth-form-logic.js";
+import { AuthCard, useUrlToken } from "./auth-form-primitives.js";
+import { SessionContext, UNAUTHENTICATED } from "./session.js";
+
+export type InviteAcceptScreenProps = {
+  readonly title?: string;
+  readonly token?: string;
+  /** Where to redirect on success. Default "/" — multi-tenant apps can pass
+   *  `(data) => "/${data.tenantId}/"`. Function-form receives the roles this
+   *  flow grants in the target tenant; branch 1 reports the invitation's
+   *  role, which for an existing member is not their full role set there.
+   *  @deprecated Configure auth.postAuthLanding on the server; its landingPath wins.
+   *  Kept as fallback. */
+  readonly loggedInHref?:
+    | string
+    | ((args: { tenantId: string; roles: readonly string[] }) => string);
+  /** Login-Href für "Mit anderem Account anmelden". Default "/login". */
+  readonly loginHref?: string;
+};
+
+type Mode = "loggedin" | "anon-existing" | "anon-new";
+
+// All three accept routes answer 200 with tenantId + the invitation role;
+// the two session-minting branches additionally carry the stripped session
+// roles. An MFA challenge is also a 200 and carries none of them.
+type InviteAcceptMfaPending = {
+  readonly tenantId?: undefined;
+  readonly mfaRequired?: boolean;
+  readonly mfaSetupRequired?: boolean;
+};
+
+type InviteAcceptSucceeded = {
+  readonly tenantId: string;
+  readonly role?: string;
+  readonly user?: { readonly roles?: readonly string[] };
+  // Present only when the server's auth.postAuthLanding resolver returned a
+  // valid path — see auth-routes.ts.
+  readonly landingPath?: string;
+};
+
+type InviteAcceptResponse = InviteAcceptMfaPending | InviteAcceptSucceeded;
+
+function isMfaPending(data: InviteAcceptResponse): data is InviteAcceptMfaPending {
+  return data.tenantId === undefined;
+}
+
+function grantedRoles(data: InviteAcceptSucceeded): readonly string[] {
+  if (data.user?.roles !== undefined) return data.user.roles;
+  return data.role === undefined ? [] : [data.role];
+}
+
+export function InviteAcceptScreen({
+  title,
+  token: tokenProp,
+  loggedInHref = "/",
+  loginHref = "/login",
+}: InviteAcceptScreenProps): ReactNode {
+  const t = useTranslation();
+  const { Form, Field, Input, Button, Banner, Link } = usePrimitives();
+  // NOT useSession(): InviteAcceptScreen is a public route (anon invite-links
+  // are the documented use case) — useSession() throws without a
+  // <SessionProvider> ancestor. Read the context directly and fall back to
+  // the anonymous state when no provider wraps this screen (632/1).
+  const session = useContext(SessionContext) ?? UNAUTHENTICATED;
+  const token = useUrlToken(tokenProp);
+  const [mode, setMode] = useState<Mode>(() =>
+    session.status === "authenticated" ? "loggedin" : "anon-existing",
+  );
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const effectiveTitle = title ?? t("auth.inviteAccept.title");
+
+  // The invitation is already consumed when the server answers with an MFA
+  // challenge / setup requirement, but no session cookie was minted: send the
+  // user to the login screen (now a member) instead of a tenant URL.
+  const finishAccept = (data: InviteAcceptResponse): void => {
+    if (isMfaPending(data)) {
+      window.location.assign(loginHref);
+      return;
+    }
+    window.location.assign(
+      resolvePostAuthHref(data.landingPath, loggedInHref, {
+        tenantId: data.tenantId,
+        roles: grantedRoles(data),
+      }),
+    );
+  };
+
+  const acceptLoggedIn = async (): Promise<void> => {
+    setSubmitting(true);
+    setError(null);
+    // kumiko-lint-ignore no-raw-hooks Phase-3 conversion tracked in #2312
+    const res = await fetch("/api/auth/invite-accept", {
+      method: "POST",
+      credentials: "same-origin",
+      headers: { "Content-Type": "application/json", ...csrfHeader() },
+      body: JSON.stringify({ token }),
+    });
+    setSubmitting(false);
+    if (res.ok) {
+      // @cast-boundary engine-payload — auth route JSON
+      const data = (await res.json()) as InviteAcceptResponse;
+      finishAccept(data);
+      return;
+    }
+    setError(t("auth.errors.invalidInviteToken"));
+  };
+
+  const acceptAnonExisting = async (): Promise<void> => {
+    setSubmitting(true);
+    setError(null);
+    // kumiko-lint-ignore no-raw-hooks Phase-3 conversion tracked in #2312
+    const res = await fetch("/api/auth/invite-accept-with-login", {
+      method: "POST",
+      credentials: "same-origin",
+      headers: { "Content-Type": "application/json", ...csrfHeader() },
+      body: JSON.stringify({ token, email, password }),
+    });
+    setSubmitting(false);
+    if (res.ok) {
+      // @cast-boundary engine-payload — auth route JSON
+      const data = (await res.json()) as InviteAcceptResponse;
+      finishAccept(data);
+      return;
+    }
+    setError(t("auth.errors.invalidInviteToken"));
+  };
+
+  const acceptAnonNew = async (): Promise<void> => {
+    setSubmitting(true);
+    setError(null);
+    // kumiko-lint-ignore no-raw-hooks Phase-3 conversion tracked in #2312
+    const res = await fetch("/api/auth/invite-signup-complete", {
+      method: "POST",
+      credentials: "same-origin",
+      headers: { "Content-Type": "application/json", ...csrfHeader() },
+      body: JSON.stringify({ token, password }),
+    });
+    setSubmitting(false);
+    if (res.ok) {
+      // @cast-boundary engine-payload — auth route JSON
+      const data = (await res.json()) as InviteAcceptResponse;
+      finishAccept(data);
+      return;
+    }
+    setError(t("auth.errors.invalidInviteToken"));
+  };
+
+  const onSubmit = (e?: FormEvent): void => {
+    e?.preventDefault();
+    if (mode === "loggedin") {
+      void acceptLoggedIn();
+      return;
+    }
+    if (mode === "anon-existing") {
+      void acceptAnonExisting();
+      return;
+    }
+    void acceptAnonNew();
+  };
+
+  if (token === "") {
+    return (
+      <AuthCard title={effectiveTitle}>
+        <div className="p-6 pt-0 flex flex-col gap-4">
+          <p className="text-sm text-muted-foreground">{t("auth.inviteAccept.missingToken")}</p>
+          <Link href={loginHref} variant="muted">
+            {t("auth.inviteAccept.goToLogin")}
+          </Link>
+        </div>
+      </AuthCard>
+    );
+  }
+
+  return (
+    <AuthCard title={effectiveTitle}>
+      <div className="p-6 pt-0 flex flex-col gap-4">
+        <p className="text-sm text-muted-foreground">{t("auth.inviteAccept.intro")}</p>
+
+        {mode === "loggedin" ? (
+          <Form onSubmit={onSubmit}>
+            <p className="text-sm">
+              {t("auth.inviteAccept.loggedInAs", { email: session.user?.email ?? "" })}
+            </p>
+            {error !== null && <Banner variant="error">{error}</Banner>}
+            <Button type="submit" loading={submitting} disabled={submitting}>
+              {submitting ? t("auth.inviteAccept.submitting") : t("auth.inviteAccept.acceptButton")}
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => {
+                setMode("anon-existing");
+              }}
+            >
+              {t("auth.inviteAccept.useOtherAccount")}
+            </Button>
+          </Form>
+        ) : (
+          <Form onSubmit={onSubmit}>
+            {mode === "anon-existing" && (
+              <Field id="invite-email" label={t("auth.inviteAccept.email")} required>
+                <Input
+                  kind="email"
+                  id="invite-email"
+                  name="invite-email"
+                  value={email}
+                  onChange={setEmail}
+                  disabled={submitting}
+                  required
+                  autoComplete="email"
+                />
+              </Field>
+            )}
+            <Field id="invite-password" label={t("auth.inviteAccept.password")} required>
+              <Input
+                kind="password"
+                id="invite-password"
+                name="invite-password"
+                value={password}
+                onChange={setPassword}
+                disabled={submitting}
+                required
+                autoComplete={mode === "anon-existing" ? "current-password" : "new-password"}
+              />
+            </Field>
+            {error !== null && <Banner variant="error">{error}</Banner>}
+            <Button type="submit" loading={submitting} disabled={submitting}>
+              {submitting ? t("auth.inviteAccept.submitting") : t("auth.inviteAccept.submit")}
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => {
+                setMode(mode === "anon-existing" ? "anon-new" : "anon-existing");
+                setError(null);
+              }}
+            >
+              {mode === "anon-existing"
+                ? t("auth.inviteAccept.toggleNew")
+                : t("auth.inviteAccept.toggleExisting")}
+            </Button>
+          </Form>
+        )}
+      </div>
+    </AuthCard>
+  );
+}

package/packages/bundled-features/src/auth-email-password/web/login-screen.tsx

@@ -0,0 +1,298 @@
+// @runtime client
+// Default-LoginScreen. Reine E-Mail-+-Passwort-Form, zentriert, Card-
+// Layout. Texte kommen aus `useTranslation()` — die Default-Bundles
+// (de+en) liefert das Feature selber mit (translations.ts); Apps die
+// was anderes wollen, setzen entweder einen eigenen LocaleResolver auf
+// App-Level oder reichen Key-Overrides an `emailPasswordClient()`.
+//
+// Die Reason-Codes aus dem Login-Handler werden 1:1 auf i18n-Keys
+// gemappt (reasonToI18nKey) — neue Reason-Codes brauchen nur eine
+// neue Zeile im Bundle + hier im Mapping.
+
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type FormEvent, type ReactNode, useState } from "react";
+import {
+  type KnownLoginFailureReason,
+  type LoginFailure,
+  requestEmailVerification,
+} from "./auth-client.js";
+import { AuthCard } from "./auth-form-primitives.js";
+import { useSession } from "./session.js";
+
+// Resend-Status für den "Bestätigungs-Mail erneut senden"-Flow, der bei
+// reason=email_not_verified unter dem Fehler-Banner angeboten wird.
+type ResendStatus =
+  | { readonly kind: "idle" }
+  | { readonly kind: "sending" }
+  | { readonly kind: "success" }
+  | { readonly kind: "rateLimited" }
+  | { readonly kind: "error" };
+
+export type AuthLegalLink = {
+  readonly label: string;
+  readonly href: string;
+};
+
+export type LoginScreenProps = {
+  /** Overridet den `auth.login.title`-i18n-Key. Nur setzen wenn der
+   *  Titel stark app-branded ist und keine Translation braucht. */
+  readonly title?: string;
+  readonly subtitle?: ReactNode;
+  readonly submitLabel?: string;
+  /** Optional href zum ForgotPasswordScreen. Wenn gesetzt rendert die
+   *  LoginScreen unter dem Submit-Button einen "Passwort vergessen?"-
+   *  Link. Apps die den Reset-Flow NICHT anbieten (z.B. nur Magic-Link),
+   *  setzen das einfach nicht — Login bleibt minimalistisch. */
+  readonly forgotPasswordHref?: string;
+  /** Optional href to RequestAccountUnlockScreen (#1266). When set, an
+   *  account_locked login error renders an "Unlock account?" link inline —
+   *  the account-lockout escape hatch, since forgotPasswordHref does NOT
+   *  help here: the lockout gate blocks login before password verify even
+   *  runs, so it also blocks the post-reset login. Apps without
+   *  accountUnlock configured just leave this unset. */
+  readonly unlockAccountHref?: string;
+  /** Optional href zum SignupScreen. Wenn gesetzt rendert die LoginScreen
+   *  einen "Account erstellen"-Link. Apps die kein Self-Signup wollen
+   *  (closed-invite-only) setzen das einfach nicht. */
+  readonly signupHref?: string;
+  /** Impressum/Datenschutz unterhalb der Card — der Login-Screen ist
+   *  oft die einzige öffentliche Seite einer Admin-Domain und braucht
+   *  dann selbst erreichbare Legal-Links (DE: Impressumspflicht).
+   *  Labels kommen vom Caller (typisch schon übersetzt bzw. Eigennamen
+   *  wie "Impressum"). */
+  readonly legalLinks?: readonly AuthLegalLink[];
+  /** Called when the server responds with an MFA challenge instead of a
+   *  session. Apps typically swap this screen out for auth-mfa's
+   *  MfaVerifyScreen(challengeToken). Without a handler, MFA-enrolled
+   *  users see a generic "not supported" error — better than a silent
+   *  hang, but apps mounting auth-mfa must wire this. */
+  readonly onMfaChallenge?: (challengeToken: string) => void;
+  /** Called when the tenant's enforcement policy requires MFA but this
+   *  user has no factor enrolled yet. Carries the preauthSetupToken the
+   *  login response issued plus the typed email (no session to derive it
+   *  from) — apps typically swap this screen out for auth-mfa's
+   *  MfaSetupPreauthScreen(preauthSetupToken, accountLabel). Without a
+   *  handler, the user sees a "setup required, contact your administrator"
+   *  error. */
+  readonly onMfaSetupRequired?: (preauthSetupToken: string, accountLabel: string) => void;
+};
+
+// Map vom Reason-Code des Login-Handlers auf einen i18n-Key plus
+// optional extrahierte Interpolations-Parameter. Ungekannte Codes
+// fallen auf `auth.errors.loginFailed` zurück.
+function reasonToKey(failure: LoginFailure): {
+  readonly key: string;
+  readonly params?: Readonly<Record<string, unknown>>;
+} {
+  switch (failure.reason) {
+    case "invalid_credentials":
+      return { key: "auth.errors.invalidCredentials" };
+    case "no_membership":
+      return { key: "auth.errors.noMembership" };
+    case "account_locked":
+      if (failure.retryAfterSeconds !== undefined) {
+        return {
+          key: "auth.errors.accountLockedRetry",
+          params: { minutes: Math.ceil(failure.retryAfterSeconds / 60) },
+        };
+      }
+      return { key: "auth.errors.accountLocked" };
+    case "email_not_verified":
+      return { key: "auth.errors.emailNotVerified" };
+    case "rate_limited":
+      return { key: "auth.errors.rateLimited" };
+    case "invalid_body":
+      return { key: "auth.errors.invalidBody" };
+    case "mfa_not_supported":
+      return { key: "auth.errors.mfaNotSupported" };
+    case "mfa_setup_required":
+      return { key: "auth.errors.mfaSetupRequired" };
+    default:
+      return { key: "auth.errors.loginFailed" };
+  }
+}
+
+export function LoginScreen({
+  title,
+  subtitle,
+  submitLabel,
+  forgotPasswordHref,
+  unlockAccountHref,
+  signupHref,
+  legalLinks,
+  onMfaChallenge,
+  onMfaSetupRequired,
+}: LoginScreenProps): ReactNode {
+  const t = useTranslation();
+  const { Form, Field, Input, Button, Banner, Link } = usePrimitives();
+  const session = useSession();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<LoginFailure | null>(null);
+  const [resendStatus, setResendStatus] = useState<ResendStatus>({ kind: "idle" });
+  // Tracked, damit der Resend-Button verschwindet sobald der User die
+  // Email-Eingabe ändert — sonst würde Resend silent an die geänderte
+  // (potentiell typoed) Adresse gehen ohne User-Feedback.
+  const [failedLoginEmail, setFailedLoginEmail] = useState<string | null>(null);
+
+  const doSubmit = async (): Promise<void> => {
+    setSubmitting(true);
+    setError(null);
+    setResendStatus({ kind: "idle" });
+    const res = await session.login({ email, password });
+    setSubmitting(false);
+    if (res.kind === "success") return;
+    if (res.kind === "mfa-challenge") {
+      if (onMfaChallenge) {
+        onMfaChallenge(res.challengeToken);
+        return;
+      }
+      setError({ reason: "mfa_not_supported" satisfies KnownLoginFailureReason });
+      setFailedLoginEmail(email);
+      return;
+    }
+    if (res.kind === "mfa-setup-required") {
+      if (onMfaSetupRequired) {
+        onMfaSetupRequired(res.preauthSetupToken, email);
+        return;
+      }
+      setError({ reason: "mfa_setup_required" satisfies KnownLoginFailureReason });
+      setFailedLoginEmail(email);
+      return;
+    }
+    setError(res.error);
+    setFailedLoginEmail(email);
+  };
+
+  const onSubmit = (e?: FormEvent): void => {
+    e?.preventDefault();
+    void doSubmit();
+  };
+
+  // Resend-Bestätigungsmail bei reason=email_not_verified. requestEmail-
+  // Verification ist silent-success (200 auch wenn kein User existiert),
+  // sodass kein anti-enumeration-Branching nötig ist; 429 → rate-limit-
+  // Hint inline, sonstige Fehler → generischer Inline-Hint.
+  const onResend = async (): Promise<void> => {
+    setResendStatus({ kind: "sending" });
+    try {
+      const res = await requestEmailVerification(email);
+      if (res.ok) {
+        setResendStatus({ kind: "success" });
+        return;
+      }
+      setResendStatus({
+        kind: res.error.reason === "rate_limited" ? "rateLimited" : "error",
+      });
+    } catch {
+      setResendStatus({ kind: "error" });
+    }
+  };
+
+  const effectiveTitle = title ?? t("auth.login.title");
+  const effectiveSubmit = submitLabel ?? t("auth.login.submit");
+
+  return (
+    <AuthCard title={effectiveTitle} subtitle={subtitle}>
+      <div className="p-6 pt-0 flex flex-col gap-4">
+        <Form onSubmit={onSubmit}>
+          <Field id="login-email" label={t("auth.login.email")} required>
+            <Input
+              kind="email"
+              id="login-email"
+              name="login-email"
+              value={email}
+              onChange={setEmail}
+              disabled={submitting}
+              required
+              autoComplete="email"
+            />
+          </Field>
+          <Field id="login-password" label={t("auth.login.password")} required>
+            <Input
+              kind="password"
+              id="login-password"
+              name="login-password"
+              value={password}
+              onChange={setPassword}
+              disabled={submitting}
+              required
+              autoComplete="current-password"
+            />
+          </Field>
+          {session.signedOutReason === "session-ended" && (
+            <Banner variant="info">{t("auth.login.sessionEnded")}</Banner>
+          )}
+          {resendStatus.kind === "success" ? (
+            <Banner variant="info">{t("auth.login.resendSuccess")}</Banner>
+          ) : error !== null ? (
+            <Banner variant="error">
+              <div className="flex flex-col gap-1">
+                <span>
+                  {(() => {
+                    const { key, params } = reasonToKey(error);
+                    return t(key, params);
+                  })()}
+                </span>
+                {error.reason === "email_not_verified" &&
+                  email.trim().length > 0 &&
+                  email === failedLoginEmail && (
+                    <span className="self-start">
+                      <Button
+                        variant="link"
+                        onClick={() => void onResend()}
+                        disabled={resendStatus.kind === "sending"}
+                      >
+                        {resendStatus.kind === "sending"
+                          ? t("auth.login.submitting")
+                          : t("auth.login.resendVerification")}
+                      </Button>
+                    </span>
+                  )}
+                {error.reason === "account_locked" && unlockAccountHref !== undefined && (
+                  <span className="self-start">
+                    <Link href={unlockAccountHref} variant="default">
+                      {t("auth.login.unlockAccount")}
+                    </Link>
+                  </span>
+                )}
+                {resendStatus.kind === "rateLimited" && (
+                  <span className="text-xs">{t("auth.login.resendRateLimited")}</span>
+                )}
+                {resendStatus.kind === "error" && (
+                  <span className="text-xs">{t("auth.login.resendError")}</span>
+                )}
+              </div>
+            </Banner>
+          ) : null}
+          <Button type="submit" loading={submitting} disabled={submitting}>
+            {submitting ? t("auth.login.submitting") : effectiveSubmit}
+          </Button>
+        </Form>
+        {forgotPasswordHref !== undefined && (
+          <Link href={forgotPasswordHref} variant="muted" className="self-center">
+            {t("auth.login.forgotPassword")}
+          </Link>
+        )}
+        {signupHref !== undefined && (
+          <Link href={signupHref} variant="muted" className="self-center">
+            {t("auth.signup.title")}
+          </Link>
+        )}
+        {legalLinks !== undefined && legalLinks.length > 0 && (
+          <nav
+            data-testid="login-legal-links"
+            className="flex items-center justify-center gap-3 pt-2 border-t border-border/50"
+          >
+            {legalLinks.map((link) => (
+              <Link key={link.href} href={link.href} variant="muted" className="text-xs">
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+        )}
+      </div>
+    </AuthCard>
+  );
+}

package/packages/bundled-features/src/auth-email-password/web/request-account-unlock-screen.tsx

@@ -0,0 +1,112 @@
+// @runtime client
+// RequestAccountUnlockScreen — form with an email input. Submit triggers
+// /api/auth/request-account-unlock (silent-success, no account
+// enumeration). UI unconditionally shows an "if your account is locked,
+// a mail is on its way" confirmation — even when the server internally
+// knows the email doesn't exist or isn't locked. Mirrors
+// ForgotPasswordScreen 1:1.
+//
+// The app is responsible for mounting this screen under a URL (e.g.
+// /unlock-account) and for reaching it — LoginScreen can render a link
+// to the app route on accountLocked errors.
+
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type FormEvent, type ReactNode, useState } from "react";
+import { requestAccountUnlock } from "./auth-client.js";
+import { AuthCard } from "./auth-form-primitives.js";
+
+export type RequestAccountUnlockScreenProps = {
+  readonly title?: string;
+  readonly subtitle?: ReactNode;
+  /** href for the "back to sign in" link in success + form state. App-
+   *  specific — default "/login". */
+  readonly loginHref?: string;
+};
+
+export function RequestAccountUnlockScreen({
+  title,
+  subtitle,
+  loginHref = "/login",
+}: RequestAccountUnlockScreenProps): ReactNode {
+  const t = useTranslation();
+  const { Form, Field, Input, Button, Banner, Link } = usePrimitives();
+  const [email, setEmail] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [done, setDone] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // guard:dup-ok — same submit pattern as forgot-password-screen, but different API endpoint and state
+  const doSubmit = async (): Promise<void> => {
+    setSubmitting(true);
+    setError(null);
+    try {
+      const res = await requestAccountUnlock(email);
+      if (res.ok) {
+        setDone(true);
+      } else if (res.error.reason === "rate_limited") {
+        const minutes =
+          res.error.retryAfterSeconds !== undefined
+            ? Math.ceil(res.error.retryAfterSeconds / 60)
+            : undefined;
+        setError(
+          minutes !== undefined
+            ? t("auth.requestUnlock.rateLimited", { minutes })
+            : t("auth.errors.rateLimited"),
+        );
+      } else {
+        setError(t("auth.errors.unknownError"));
+      }
+    } catch {
+      setError(t("auth.errors.unknownError"));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const onSubmit = (e?: FormEvent): void => {
+    e?.preventDefault();
+    void doSubmit();
+  };
+
+  const effectiveTitle = title ?? t("auth.requestUnlock.title");
+
+  return (
+    <AuthCard title={effectiveTitle} subtitle={subtitle}>
+      {done ? (
+        <div className="p-6 pt-0 flex flex-col gap-4">
+          <Banner variant="info">
+            <p className="font-medium text-foreground">{t("auth.requestUnlock.successTitle")}</p>
+            <p className="mt-1">{t("auth.requestUnlock.successBody")}</p>
+          </Banner>
+          <Link href={loginHref} variant="muted">
+            {t("auth.requestUnlock.backToLogin")}
+          </Link>
+        </div>
+      ) : (
+        <div className="p-6 pt-0 flex flex-col gap-4">
+          <p className="text-sm text-muted-foreground">{t("auth.requestUnlock.intro")}</p>
+          <Form onSubmit={onSubmit}>
+            <Field id="unlock-email" label={t("auth.requestUnlock.email")} required>
+              <Input
+                kind="text"
+                id="unlock-email"
+                name="unlock-email"
+                value={email}
+                onChange={setEmail}
+                disabled={submitting}
+                required
+              />
+            </Field>
+            {error !== null && <Banner variant="error">{error}</Banner>}
+            <Button type="submit" loading={submitting} disabled={submitting}>
+              {submitting ? t("auth.requestUnlock.submitting") : t("auth.requestUnlock.submit")}
+            </Button>
+          </Form>
+          <Link href={loginHref} variant="muted" className="self-center">
+            {t("auth.requestUnlock.backToLogin")}
+          </Link>
+        </div>
+      )}
+    </AuthCard>
+  );
+}