@tristan2828/ui-foundation 3.30.1 → 4.1.0

package/dist/error-reporting/reporter.d.ts

@@ -0,0 +1,30 @@
+import type { QueryClient } from "@tanstack/react-query";
+import type { ClientErrorReport } from "../api/gateway/client-errors.js";
+export type ErrorReportingOptions = {
+    /** The frontend build a report names, e.g. the commit (`import.meta.env.VITE_RELEASE`). */
+    release?: string;
+};
+export type ReportSource = ClientErrorReport["source"];
+/** FoundationProviders' prop, as options, or null when reporting is off. */
+export declare function resolveErrorReporting(option: boolean | ErrorReportingOptions | undefined): ErrorReportingOptions | null;
+export declare function scrub(text: string, limit: number): string;
+/** `/widgets/7/edit` with `{ id: '7' }` → `/widgets/:id/edit`; a splat → `*`. */
+export declare function routePattern(pathname: string, params: Readonly<Record<string, string | undefined>>): string;
+export type ErrorReporter = {
+    /** Reports `error` from `source`, unless it's a duplicate or signed out. */
+    report: (source: ReportSource, error: unknown, request?: {
+        method?: string;
+        status?: number;
+    }) => void;
+    /** The screen's route pattern, for reports that don't know theirs. */
+    setRoute: (pattern: string | null) => void;
+    /** Whether there's a session: the endpoint refuses without one, so nothing is sent until then. */
+    setSignedIn: (signedIn: boolean) => void;
+    /** Listens on the window and the query client; returns the undo. */
+    install: (queryClient: QueryClient, target: Pick<EventTarget, "addEventListener" | "removeEventListener">) => () => void;
+};
+export declare function createErrorReporter({ options, send, now, }: {
+    options: ErrorReportingOptions;
+    send: (report: ClientErrorReport) => void;
+    now?: () => number;
+}): ErrorReporter;

package/dist/error-reporting/reporter.js

@@ -0,0 +1,126 @@
+import { httpStatusOf } from "../api/gateway/errors.js";
+const DEDUPE_MS = 60_000;
+const MAX_MESSAGE = 2000;
+const MAX_STACK = 16000;
+const REPORTED_KINDS = new Set(["server"]);
+/** FoundationProviders' prop, as options, or null when reporting is off. */
+export function resolveErrorReporting(option) {
+    if (!option)
+        return null;
+    return option === true ? {} : option;
+}
+// A query string or fragment in a URL or path, up to a stack frame's
+// trailing :line:col (the backend's scrub, in app/error_reporting.py, is
+// the same rule).
+const URL_QUERY = /(\b[a-z][a-z0-9+.-]*:\/\/[^\s?#"'()]+|(?<![\w/])\/[^\s?#"'()]*)[?#][^\s"'()]*?(?=(?::\d+){1,2}(?=[\s"'()]|$)|[\s"'()]|$)/gi;
+export function scrub(text, limit) {
+    const cut = text.replace(URL_QUERY, "$1");
+    return cut.length <= limit ? cut : `${cut.slice(0, limit - 1)}…`;
+}
+/** `/widgets/7/edit` with `{ id: '7' }` → `/widgets/:id/edit`; a splat → `*`. */
+export function routePattern(pathname, params) {
+    const named = Object.entries(params).filter(([name, value]) => name !== "*" && value);
+    const splat = params["*"];
+    let path = pathname;
+    if (splat && path.endsWith(`/${splat}`))
+        path = `${path.slice(0, -splat.length)}*`;
+    return path
+        .split("/")
+        .map((segment) => {
+        const match = named.find(([, value]) => value === decodeSegment(segment));
+        return match ? `:${match[0]}` : segment;
+    })
+        .join("/");
+}
+function decodeSegment(segment) {
+    try {
+        return decodeURIComponent(segment);
+    }
+    catch {
+        return segment;
+    }
+}
+function isAppError(value) {
+    return typeof value === "object" && value !== null && "kind" in value && "message" in value;
+}
+function describe(error) {
+    if (error instanceof Error) {
+        return { type: error.name || "Error", message: error.message, stack: error.stack };
+    }
+    if (isAppError(error))
+        return { type: "ServerError", message: error.message };
+    return { type: "Error", message: typeof error === "string" ? error : "A value that isn't an Error was thrown." };
+}
+export function createErrorReporter({ options, send, now = Date.now, }) {
+    const lastSent = new Map();
+    let route = null;
+    let signedIn = false;
+    const report = (source, error, request = {}) => {
+        if (!signedIn)
+            return;
+        const described = describe(error);
+        const message = scrub(described.message, MAX_MESSAGE);
+        const signature = [source, described.type, message, route ?? ""].join("\u001f");
+        const at = now();
+        for (const [key, sentAt] of lastSent)
+            if (at - sentAt >= DEDUPE_MS)
+                lastSent.delete(key);
+        if (lastSent.has(signature))
+            return;
+        lastSent.set(signature, at);
+        send({
+            source,
+            type: described.type.slice(0, 200),
+            message,
+            ...(described.stack ? { stack: scrub(described.stack, MAX_STACK) } : {}),
+            ...(route ? { route } : {}),
+            ...(request.method ? { method: request.method } : {}),
+            ...(request.status ? { status: request.status } : {}),
+            ...(options.release ? { release: options.release.slice(0, 100) } : {}),
+        });
+    };
+    const reportAppError = (source, error, method) => {
+        if (!isAppError(error) || !REPORTED_KINDS.has(error.kind))
+            return;
+        report(source, error, { method, status: httpStatusOf(error) });
+    };
+    return {
+        report,
+        setRoute: (pattern) => {
+            route = pattern;
+        },
+        setSignedIn: (value) => {
+            signedIn = value;
+        },
+        install: (queryClient, target) => {
+            const onError = (event) => {
+                const { error, message } = event;
+                report("window", error ?? message);
+            };
+            const onRejection = (event) => {
+                const { reason } = event;
+                // An AppError is a request's answer: the caches below report the
+                // ones that are bugs, and the rest are expected.
+                if (isAppError(reason))
+                    return;
+                report("unhandledrejection", reason);
+            };
+            target.addEventListener("error", onError);
+            target.addEventListener("unhandledrejection", onRejection);
+            const unsubscribeQueries = queryClient.getQueryCache().subscribe((event) => {
+                if (event.type === "updated" && event.action.type === "error")
+                    reportAppError("query", event.action.error, "GET");
+            });
+            const unsubscribeMutations = queryClient.getMutationCache().subscribe((event) => {
+                if (event.type === "updated" && event.action.type === "error")
+                    reportAppError("mutation", event.action.error);
+            });
+            return () => {
+                target.removeEventListener("error", onError);
+                target.removeEventListener("unhandledrejection", onRejection);
+                unsubscribeQueries();
+                unsubscribeMutations();
+            };
+        },
+    };
+}

package/dist/index.d.ts

@@ -25,8 +25,9 @@ export { LoginRoute, type LoginRouteProps } from './routes/login.js';
 export { RegisterRoute } from './routes/register.js';
 export { returnPath } from './routes/return-path.js';
 export { AuthProvider, useAuth } from './auth/use-auth.js';
-export type { AuthContextValue, AuthStatus, AuthUser } from './auth/auth-context.js';
+export type { AuthContextValue, AuthStatus, AuthUser, SignInResult } from './auth/auth-context.js';
 export type { AppError, Page, QuerySpec } from './api/contracts.js';
+export type { ErrorReportingOptions } from './error-reporting/reporter.js';
 export { createQueryClient } from './api/query-client.js';
 export { useTableUrlState } from './hooks/use-table-url-state.js';
 export type { TableView, UrlChanges } from './hooks/table-url-changes.js';

package/dist/mocks/auth.d.ts

@@ -2,6 +2,9 @@ import type { components } from '../api/schema.js';
 type User = components['schemas']['User'];
 export declare const MOCK_USER: User;
 export declare const MOCK_PASSWORD = "dev-password-123";
+export declare const MOCK_TOTP_USER: User;
+export declare const MOCK_TOTP_CODE = "123456";
+export declare const MOCK_RECOVERY_CODE = "abcd-efgh";
 export declare function isMockAuthenticated(): boolean;
 export declare function setMockAuthenticated(value: boolean): void;
 /**

package/dist/mocks/auth.js

@@ -8,6 +8,14 @@ import { http, HttpResponse } from 'msw';
 // logging in behaves the same whether MSW or the real API answers.
 export const MOCK_USER = { id: 1, email: 'dev@example.com', name: 'Dev User' };
 export const MOCK_PASSWORD = 'dev-password-123';
+// An account with two-step sign-in, for an app's e2e test of both steps:
+// MOCK_PASSWORD, then MOCK_TOTP_CODE (always right, as a fixed clock would
+// make it) or MOCK_RECOVERY_CODE (once per reset). Five wrong codes end
+// the pending sign-in (410), as the reference backend does.
+export const MOCK_TOTP_USER = { id: 1001, email: 'two-step@example.com', name: 'Two Step User' };
+export const MOCK_TOTP_CODE = '123456';
+export const MOCK_RECOVERY_CODE = 'abcd-efgh';
+const PENDING_MAX_TRIES = 5;
 // Signed in by default: screen specs assume access, and only auth specs
 // exercise the logged-out path (by overriding GET /auth/me to 401).
 let authenticated = true;
@@ -16,6 +24,10 @@ let authenticated = true;
 let registeredUsers = new Map([[MOCK_USER.email, MOCK_USER]]);
 let currentUser = MOCK_USER;
 let nextUserId = 2;
+// The pending sign-in after MOCK_TOTP_USER's password: wrong codes so far,
+// or null when none is waiting.
+let pendingTries = null;
+let recoveryCodeUsed = false;
 export function isMockAuthenticated() {
     return authenticated;
 }
@@ -36,6 +48,8 @@ export function resetMockAuth() {
     registeredUsers = new Map([[MOCK_USER.email, MOCK_USER]]);
     currentUser = MOCK_USER;
     nextUserId = 2;
+    pendingTries = null;
+    recoveryCodeUsed = false;
 }
 export const authHandlers = [
     http.post('*/api/auth/register', async ({ request }) => {
@@ -68,6 +82,10 @@ export const authHandlers = [
     }),
     http.post('*/api/auth/login', async ({ request }) => {
         const body = (await request.json());
+        if (body.email === MOCK_TOTP_USER.email && body.password === MOCK_PASSWORD) {
+            pendingTries = 0;
+            return HttpResponse.json({ next: 'totp' }, { status: 202 });
+        }
         if (body.email !== MOCK_USER.email || body.password !== MOCK_PASSWORD) {
             return HttpResponse.json({ detail: 'Invalid email or password' }, { status: 401 });
         }
@@ -75,6 +93,27 @@ export const authHandlers = [
         authenticated = true;
         return HttpResponse.json(MOCK_USER);
     }),
+    http.post('*/api/auth/login/totp', async ({ request }) => {
+        const { code } = (await request.json());
+        if (pendingTries === null) {
+            return HttpResponse.json({ detail: 'Your sign-in timed out. Enter your email and password again.' }, { status: 410 });
+        }
+        const recovery = !recoveryCodeUsed && code.trim().toLowerCase() === MOCK_RECOVERY_CODE;
+        if (code.trim() === MOCK_TOTP_CODE || recovery) {
+            if (recovery)
+                recoveryCodeUsed = true;
+            pendingTries = null;
+            currentUser = MOCK_TOTP_USER;
+            authenticated = true;
+            return HttpResponse.json(MOCK_TOTP_USER);
+        }
+        pendingTries += 1;
+        if (pendingTries >= PENDING_MAX_TRIES) {
+            pendingTries = null;
+            return HttpResponse.json({ detail: 'Too many wrong codes. Enter your email and password again.' }, { status: 410 });
+        }
+        return HttpResponse.json({ detail: "That code isn't right. Check it and try again." }, { status: 401 });
+    }),
     http.post('*/api/auth/logout', () => {
         authenticated = false;
         return new HttpResponse(null, { status: 204 });

package/dist/mocks/client-errors.d.ts

@@ -0,0 +1,7 @@
+import type { components } from '../api/schema.js';
+type ClientErrorReport = components['schemas']['ClientErrorReport'];
+/** What POST /client-errors has received since the last reset. */
+export declare function getMockClientErrors(): readonly ClientErrorReport[];
+export declare function resetMockClientErrors(): void;
+export declare const clientErrorHandlers: import("msw").HttpHandler[];
+export {};

package/dist/mocks/client-errors.js

@@ -0,0 +1,24 @@
+// MSW handler for POST /client-errors (openapi/foundation.yaml), for an app
+// that turns on FoundationProviders' errorReporting. It answers 204 like
+// the reference backend and keeps what it was sent, so an app's tests can
+// check a report was made and what it held. Like the backend, it needs the
+// mock session.
+import { http, HttpResponse } from 'msw';
+import { isMockAuthenticated } from './auth.js';
+let received = [];
+/** What POST /client-errors has received since the last reset. */
+export function getMockClientErrors() {
+    return received;
+}
+export function resetMockClientErrors() {
+    received = [];
+}
+export const clientErrorHandlers = [
+    http.post('*/api/client-errors', async ({ request }) => {
+        if (!isMockAuthenticated()) {
+            return HttpResponse.json({ detail: 'Not authenticated' }, { status: 401 });
+        }
+        received = [...received, (await request.json())];
+        return new HttpResponse(null, { status: 204 });
+    }),
+];

package/dist/mocks/e2e-hooks.js

@@ -19,10 +19,10 @@ export function exposeMswForE2E(worker) {
                 const bytes = Uint8Array.from(atob(override.bodyBase64), (character) => character.charCodeAt(0));
                 return new HttpResponse(bytes, {
                     status: override.status ?? 200,
-                    headers: { 'Content-Type': override.contentType ?? 'application/octet-stream' },
+                    headers: { 'Content-Type': override.contentType ?? 'application/octet-stream', ...override.headers },
                 });
             }
-            return HttpResponse.json(override.body ?? {}, { status: override.status ?? 200 });
+            return HttpResponse.json(override.body ?? {}, { status: override.status ?? 200, headers: override.headers });
         }));
     }
 }

package/dist/mocks/index.d.ts

@@ -1,4 +1,5 @@
-export { authHandlers, getMockCurrentUser, isMockAuthenticated, MOCK_PASSWORD, MOCK_USER, resetMockAuth, setMockAuthenticated, } from './auth.js';
+export { authHandlers, getMockCurrentUser, isMockAuthenticated, MOCK_PASSWORD, MOCK_RECOVERY_CODE, MOCK_TOTP_CODE, MOCK_TOTP_USER, MOCK_USER, resetMockAuth, setMockAuthenticated, } from './auth.js';
+export { clientErrorHandlers, getMockClientErrors, resetMockClientErrors } from './client-errors.js';
 export { environmentHandlers } from './environment.js';
 export { exposeMswForE2E } from './e2e-hooks.js';
 export type { MswHandle, MswOverride } from './override.js';

package/dist/mocks/index.js

@@ -1,6 +1,7 @@
 // `@tristan2828/ui-foundation/mocks` — MSW support. A separate entry point
 // so msw (an optional peer dependency) never reaches an app's main bundle
 // unless it imports this.
-export { authHandlers, getMockCurrentUser, isMockAuthenticated, MOCK_PASSWORD, MOCK_USER, resetMockAuth, setMockAuthenticated, } from './auth.js';
+export { authHandlers, getMockCurrentUser, isMockAuthenticated, MOCK_PASSWORD, MOCK_RECOVERY_CODE, MOCK_TOTP_CODE, MOCK_TOTP_USER, MOCK_USER, resetMockAuth, setMockAuthenticated, } from './auth.js';
+export { clientErrorHandlers, getMockClientErrors, resetMockClientErrors } from './client-errors.js';
 export { environmentHandlers } from './environment.js';
 export { exposeMswForE2E } from './e2e-hooks.js';

package/dist/mocks/override.d.ts

@@ -8,6 +8,8 @@ export type MswOverride = {
     delayMs?: number;
     bodyBase64?: string;
     contentType?: string;
+    /** Response headers, e.g. a 429's `Retry-After`. */
+    headers?: Record<string, string>;
 };
 export type MswHandle = {
     worker: SetupWorker;

package/dist/routes/login-schema.d.ts

@@ -5,3 +5,10 @@ export declare const loginFormSchema: z.ZodObject<{
 }, z.core.$strip>;
 export type LoginFormValues = z.infer<typeof loginFormSchema>;
 export declare const LOGIN_FORM_DEFAULTS: LoginFormValues;
+export declare const totpCodeFormSchema: z.ZodObject<{
+    code: z.ZodString;
+}, z.core.$strip>;
+export declare const recoveryCodeFormSchema: z.ZodObject<{
+    code: z.ZodString;
+}, z.core.$strip>;
+export type CodeFormValues = z.infer<typeof totpCodeFormSchema>;

package/dist/routes/login-schema.js

@@ -11,3 +11,11 @@ export const LOGIN_FORM_DEFAULTS = {
     email: '',
     password: '',
 };
+// The second step, when the account has TOTP: six digits from an
+// authenticator app, or (switched to) one of the account's recovery codes.
+export const totpCodeFormSchema = z.object({
+    code: z.string().trim().regex(/^\d{6}$/, 'Enter the 6-digit code from your authenticator app'),
+});
+export const recoveryCodeFormSchema = z.object({
+    code: z.string().trim().min(1, 'Enter a recovery code').max(64, 'That is longer than a recovery code'),
+});

package/dist/routes/login.js

@@ -5,26 +5,71 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // chrome (title + Cancel + Submit), and a login screen has no "cancel"
 // destination — so this uses the same mandated FieldGroup/Field primitives
 // directly (AGENTS.md "Correct Patterns").
+//
+// Two steps when the account has TOTP (4.0): the password, then a code
+// from an authenticator app or a recovery code. No session exists between
+// them; the server keeps a pending sign-in for a few minutes, and when it
+// has gone (expired, out of tries) the screen goes back to the password
+// with the reason.
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Link, useLocation, useNavigate } from 'react-router';
 import { useAuth } from '../auth/use-auth.js';
 import { ErrorState } from '../components/app/error-state.js';
 import { PasswordInput } from '../components/app/password-input.js';
 import { Button } from '../components/ui/button.js';
-import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card.js';
-import { Field, FieldError, FieldGroup, FieldLabel } from '../components/ui/field.js';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card.js';
+import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from '../components/ui/field.js';
 import { Input } from '../components/ui/input.js';
 import { Spinner } from '../components/ui/spinner.js';
-import { LOGIN_FORM_DEFAULTS, loginFormSchema } from './login-schema.js';
+import { LOGIN_FORM_DEFAULTS, loginFormSchema, recoveryCodeFormSchema, totpCodeFormSchema, } from './login-schema.js';
 import { returnPath } from './return-path.js';
+// A refusal for too many attempts holds the submit button until the
+// server's Retry-After has passed, so the screen never offers a retry it
+// knows will be refused.
+function useRateLimitHold(error) {
+    // The refusal whose wait has passed; the button holds until it's this one.
+    const [released, setReleased] = useState(null);
+    useEffect(() => {
+        if (error?.kind !== 'rate_limited')
+            return;
+        const seconds = error.retryAfterSeconds ?? 60;
+        const timer = window.setTimeout(() => setReleased(error), seconds * 1000);
+        return () => window.clearTimeout(timer);
+    }, [error]);
+    return error?.kind === 'rate_limited' && released !== error;
+}
 export function LoginRoute({ registerPath = '/register' } = {}) {
-    const { login } = useAuth();
     const navigate = useNavigate();
     const location = useLocation();
+    const [step, setStep] = useState('password');
+    // Why the screen came back to the password from the code step.
+    const [restartReason, setRestartReason] = useState(null);
+    const onResult = (result) => {
+        if (result.status === 'signed-in') {
+            navigate(returnPath(location.state), { replace: true });
+        }
+        else if (result.status === 'totp') {
+            setRestartReason(null);
+            setStep('code');
+        }
+        else {
+            setRestartReason(result.message);
+            setStep('password');
+        }
+    };
+    return (_jsx("main", { className: "flex min-h-screen items-center justify-center bg-background p-6", children: _jsxs(Card, { className: "w-full max-w-sm", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: _jsx("h1", { children: "Sign in" }) }), step === 'code' && _jsx(CardDescription, { children: "Your account has two-step sign-in." })] }), _jsx(CardContent, { children: step === 'password' ? (_jsx(PasswordStep, { registerPath: registerPath, restartReason: restartReason, onResult: onResult })) : (_jsx(CodeStep, { onResult: onResult, onStartOver: () => {
+                            setRestartReason(null);
+                            setStep('password');
+                        } })) })] }) }));
+}
+function PasswordStep({ registerPath, restartReason, onResult, }) {
+    const { login } = useAuth();
+    const location = useLocation();
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [submitError, setSubmitError] = useState(null);
+    const held = useRateLimitHold(submitError);
     const form = useForm({
         resolver: zodResolver(loginFormSchema),
         defaultValues: LOGIN_FORM_DEFAULTS,
@@ -33,8 +78,7 @@ export function LoginRoute({ registerPath = '/register' } = {}) {
         setSubmitError(null);
         setIsSubmitting(true);
         try {
-            await login(values.email, values.password);
-            navigate(returnPath(location.state), { replace: true });
+            onResult(await login(values.email, values.password));
         }
         catch (err) {
             const error = err;
@@ -46,7 +90,46 @@ export function LoginRoute({ registerPath = '/register' } = {}) {
             else {
                 // 401 lands here as one form-level message — never bound to the
                 // email or password field individually, so a failed attempt can't
-                // be used to confirm which part was wrong.
+                // be used to confirm which part was wrong. So does a 429.
+                setSubmitError(error);
+            }
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    });
+    return (_jsxs("form", { onSubmit: onSubmit, noValidate: true, className: "flex flex-col gap-6", children: [restartReason && _jsx(FieldError, { children: restartReason }), _jsxs(FieldGroup, { children: [_jsxs(Field, { "data-invalid": !!form.formState.errors.email, children: [_jsx(FieldLabel, { htmlFor: "login-email", children: "Email" }), _jsx(Input, { id: "login-email", type: "email", autoComplete: "username", "aria-invalid": !!form.formState.errors.email, ...form.register('email') }), _jsx(FieldError, { errors: [form.formState.errors.email] })] }), _jsxs(Field, { "data-invalid": !!form.formState.errors.password, children: [_jsx(FieldLabel, { htmlFor: "login-password", children: "Password" }), _jsx(PasswordInput, { id: "login-password", autoComplete: "current-password", "aria-invalid": !!form.formState.errors.password, ...form.register('password') }), _jsx(FieldError, { errors: [form.formState.errors.password] })] })] }), submitError && _jsx(ErrorState, { error: submitError }), _jsxs(Button, { type: "submit", disabled: isSubmitting || held, children: [isSubmitting && _jsx(Spinner, { className: "size-4" }), "Sign in"] }), registerPath !== null && (_jsx(Button, { variant: "link", size: "sm", nativeButton: false, render: _jsx(Link, { to: registerPath, state: location.state }), children: "Create account" }))] }));
+}
+function CodeStep({ onResult, onStartOver, }) {
+    const [recovery, setRecovery] = useState(false);
+    // A fresh form per mode: its own schema, an empty field, and the
+    // browser's one-time-code autofill and numeric keypad following the mode.
+    return (_jsx(CodeForm, { recovery: recovery, onSwitchMode: () => setRecovery((value) => !value), onResult: onResult, onStartOver: onStartOver }, recovery ? 'recovery' : 'totp'));
+}
+function CodeForm({ recovery, onSwitchMode, onResult, onStartOver, }) {
+    const { submitTotp } = useAuth();
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [submitError, setSubmitError] = useState(null);
+    const held = useRateLimitHold(submitError);
+    const form = useForm({
+        resolver: zodResolver(recovery ? recoveryCodeFormSchema : totpCodeFormSchema),
+        defaultValues: { code: '' },
+    });
+    // The field takes the caret when the step (or the mode) appears.
+    useEffect(() => form.setFocus('code'), [form]);
+    const onSubmit = form.handleSubmit(async (values) => {
+        setSubmitError(null);
+        setIsSubmitting(true);
+        try {
+            onResult(await submitTotp(values.code));
+        }
+        catch (err) {
+            const error = err;
+            if (error.kind === 'auth' || (error.kind === 'validation' && error.fieldErrors?.code)) {
+                // A wrong code is the field's error: the code is the only thing typed.
+                form.setError('code', { message: error.fieldErrors?.code?.[0] ?? error.message }, { shouldFocus: true });
+            }
+            else {
                 setSubmitError(error);
             }
         }
@@ -54,5 +137,8 @@ export function LoginRoute({ registerPath = '/register' } = {}) {
             setIsSubmitting(false);
         }
     });
-    return (_jsx("main", { className: "flex min-h-screen items-center justify-center bg-background p-6", children: _jsxs(Card, { className: "w-full max-w-sm", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-lg", children: _jsx("h1", { children: "Sign in" }) }) }), _jsx(CardContent, { children: _jsxs("form", { onSubmit: onSubmit, noValidate: true, className: "flex flex-col gap-6", children: [_jsxs(FieldGroup, { children: [_jsxs(Field, { "data-invalid": !!form.formState.errors.email, children: [_jsx(FieldLabel, { htmlFor: "login-email", children: "Email" }), _jsx(Input, { id: "login-email", type: "email", autoComplete: "username", "aria-invalid": !!form.formState.errors.email, ...form.register('email') }), _jsx(FieldError, { errors: [form.formState.errors.email] })] }), _jsxs(Field, { "data-invalid": !!form.formState.errors.password, children: [_jsx(FieldLabel, { htmlFor: "login-password", children: "Password" }), _jsx(PasswordInput, { id: "login-password", autoComplete: "current-password", "aria-invalid": !!form.formState.errors.password, ...form.register('password') }), _jsx(FieldError, { errors: [form.formState.errors.password] })] })] }), submitError && _jsx(ErrorState, { error: submitError }), _jsxs(Button, { type: "submit", disabled: isSubmitting, children: [isSubmitting && _jsx(Spinner, { className: "size-4" }), "Sign in"] }), registerPath !== null && (_jsx(Button, { variant: "link", size: "sm", nativeButton: false, render: _jsx(Link, { to: registerPath, state: location.state }), children: "Create account" }))] }) })] }) }));
+    const invalid = !!form.formState.errors.code;
+    return (_jsxs("form", { onSubmit: onSubmit, noValidate: true, className: "flex flex-col gap-6", children: [_jsx(FieldGroup, { children: _jsxs(Field, { "data-invalid": invalid, children: [_jsx(FieldLabel, { htmlFor: "login-code", children: recovery ? 'Recovery code' : 'Authentication code' }), _jsx(Input, { id: "login-code", autoComplete: recovery ? 'off' : 'one-time-code', inputMode: recovery ? 'text' : 'numeric', spellCheck: false, "aria-invalid": invalid, "aria-describedby": "login-code-description", ...form.register('code') }), _jsx(FieldDescription, { id: "login-code-description", children: recovery
+                                ? 'One of the recovery codes you saved when two-step sign-in was turned on. Each works once.'
+                                : 'The 6-digit code your authenticator app shows for this account.' }), _jsx(FieldError, { errors: [form.formState.errors.code] })] }) }), submitError && _jsx(ErrorState, { error: submitError }), _jsxs(Button, { type: "submit", disabled: isSubmitting || held, children: [isSubmitting && _jsx(Spinner, { className: "size-4" }), "Verify"] }), _jsxs("div", { className: "flex flex-wrap justify-between gap-2", children: [_jsx(Button, { type: "button", variant: "link", size: "sm", onClick: onSwitchMode, children: recovery ? 'Use your authenticator app' : 'Use a recovery code' }), _jsx(Button, { type: "button", variant: "link", size: "sm", onClick: onStartOver, children: "Start over" })] })] }));
 }