"use client"; import { cn } from "@/lib/utils"; import { Input } from "@/components/ui/input"; import { useLoginForm, type LoginCredentials, type LoginSubmitResult, } from "@/hooks/use-login-form"; export type LoginField = { name: string; label?: string; type?: string; placeholder?: string; autoComplete?: string; }; export type LoginFormProps = { /** * Caller-supplied submit. Resolve to succeed; return `{ error }` / * `{ rateLimited: true }`, or throw, to fail. No transport assumed. */ onSubmit: (credentials: LoginCredentials) => Promise; /** Fields to render. Defaults to a single password field. */ fields?: LoginField[]; title?: string; submitLabel?: string; loadingLabel?: string; className?: string; }; const DEFAULT_FIELDS: LoginField[] = [ { name: "password", label: "password", type: "password", placeholder: "password", autoComplete: "current-password", }, ]; /** * Styled login view over the headless useLoginForm hook. Renders one or more * fields, an error line (generic or rate-limited), and a submit button that * reflects the loading state. Plain

— no router, no fetch. */ export function LoginForm({ onSubmit, fields = DEFAULT_FIELDS, title = "log in", submitLabel = "log in", loadingLabel = "signing in...", className, }: LoginFormProps) { const form = useLoginForm({ onSubmit, fields: fields.map((f) => f.name), }); return ( { e.preventDefault(); void form.submit(); }} className={cn("flex w-full max-w-sm flex-col gap-3", className)} > {title && (

{title}

)} {fields.map((field, i) => ( form.setValue(field.name, e.target.value)} onKeyDown={form.onKeyDown} className="w-full" /> ))} {form.error && (

{form.error}

)}

); }

login-form.

log in