@flaredev/cli 0.2.0 → 0.3.0

package/templates/app/app/dashboard/page.tsx

@@ -1,21 +1,49 @@
 import Link from "next/link";
 import { count, eq } from "drizzle-orm";
-import { CheckCircle2Icon, CircleIcon } from "lucide-react";
+import { ArrowRightIcon, CheckCircle2Icon, CircleIcon, PlusIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { resourceIcon } from "@/components/dashboard/resource-icon";
+import { StatCards, type Stat } from "@/components/dashboard/stat-card";
 import { getDb } from "@/db";
 import { passkey } from "@/db/auth-schema";
 import { authConfig, twoFactorAvailable } from "@/lib/auth-config";
+import { adminPermissions, recentCounts, recordCount, resourcePath, trend, visibleResources } from "@/lib/dashboard";
 import { requireSession } from "@/lib/session";
-import { site } from "@/lib/site";
 
 export const metadata = { title: "Dashboard" };
 
+/** The first thing you see when you sign in: how much data there is, and what's left to set up. */
 export default async function DashboardPage() {
   const { user } = await requireSession("/dashboard");
+  const resources = await visibleResources();
+
+  const cards = await Promise.all(
+    resources.map(async (resource) => {
+      const [total, recent, permissions] = await Promise.all([
+        recordCount(resource.name),
+        recentCounts(resource.name),
+        adminPermissions(resource.name),
+      ]);
+      return { resource, total, recent, permissions };
+    }),
+  );
+
+  const stats: Stat[] = cards.slice(0, 4).map(({ resource, total, recent }) => ({
+    label: resource.pluralLabel,
+    value: total,
+    hint: recent.current > 0 ? `${recent.current.toLocaleString()} this week` : "none this week",
+    change: trend(recent.current, recent.previous),
+    icon: resourceIcon(resource.icon),
+    href: resourcePath(resource),
+  }));
+
   const [{ passkeys } = { passkeys: 0 }] = await getDb().select({ passkeys: count() }).from(passkey).where(eq(passkey.userId, user.id));
   const twoFactorOn = Boolean((user as { twoFactorEnabled?: boolean | null }).twoFactorEnabled);
-
   const steps = [
-    { done: user.emailVerified, label: "Verify your email address", href: "/dashboard/account#profile" },
+    { done: user.emailVerified, label: "Verify your email address", href: "/verify-email" },
     ...(twoFactorAvailable ? [{ done: twoFactorOn, label: "Turn on two-factor authentication", href: "/dashboard/account#two-factor" }] : []),
     ...(authConfig.passkeys ? [{ done: passkeys > 0, label: "Add a passkey for one-tap sign-in", href: "/dashboard/account#passkeys" }] : []),
   ];
@@ -23,29 +51,82 @@ export default async function DashboardPage() {
 
   return (
     <>
-      <div className="flex flex-col gap-1">
-        <h1 className="text-3xl">Welcome{user.name ? `, ${user.name.split(" ")[0]}` : ""}</h1>
-        <p className="text-foreground-muted">This is your {site.name} dashboard.</p>
-      </div>
+      <PageHeader
+        title={`Welcome${user.name ? `, ${user.name.split(" ")[0]}` : ""}`}
+        description={resources.length > 0 ? "Everything in your app, and how it's moving." : "Your app is running. Add a resource to fill this page."}
+      />
+
+      <StatCards stats={stats} />
+
+      {resources.length === 0 && (
+        <Empty className="rounded-xl border border-dashed">
+          <EmptyHeader>
+            <EmptyTitle>No resources yet</EmptyTitle>
+            <EmptyDescription>
+              Generate one with <code>flare gen resource Contact --fields &quot;name:string, email:string&quot;</code>, then fill it with{" "}
+              <code>flare seed:resource Contact --count 1000</code>.
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )}
 
-      <section aria-labelledby="security" className="rounded-[calc(var(--radius)+4px)] border border-border bg-surface">
-        <div className="flex items-center justify-between gap-4 border-b border-border px-6 py-4">
-          <h2 id="security" className="text-base">
-            Secure your account
-          </h2>
-          <span className="text-sm text-foreground-muted">{remaining === 0 ? "All done" : `${remaining} to go`}</span>
-        </div>
-        <ul>
-          {steps.map((step) => (
-            <li key={step.label} className="border-b border-border last:border-b-0">
-              <Link href={step.href} className="flex items-center gap-3 px-6 py-4 text-sm hover:bg-surface-muted">
-                {step.done ? <CheckCircle2Icon className="size-5 text-success" /> : <CircleIcon className="size-5 text-foreground-muted" />}
-                <span className={step.done ? "text-foreground-muted line-through" : "font-medium"}>{step.label}</span>
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
+        {cards.length > 0 && (
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Your data</CardTitle>
+              <CardDescription>Every resource you can see.</CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-col">
+              {cards.map(({ resource, total, permissions }) => {
+                const Icon = resourceIcon(resource.icon);
+                return (
+                  <div key={resource.name} className="flex items-center gap-3 border-b py-3 last:border-b-0 last:pb-0">
+                    <span className="grid size-9 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground">
+                      <Icon className="size-4.5" />
+                    </span>
+                    <div className="flex min-w-0 flex-col">
+                      <Link href={resourcePath(resource)} className="truncate text-sm font-medium hover:underline">
+                        {resource.pluralLabel}
+                      </Link>
+                      <span className="text-xs text-muted-foreground">{total.toLocaleString()} records</span>
+                    </div>
+                    <div className="ml-auto flex items-center gap-1">
+                      {permissions.create && (
+                        <Button variant="ghost" size="icon" aria-label={`New ${resource.label.toLowerCase()}`} asChild>
+                          <Link href={resourcePath(resource, "new")}>
+                            <PlusIcon />
+                          </Link>
+                        </Button>
+                      )}
+                      <Button variant="ghost" size="icon" aria-label={`Open ${resource.pluralLabel.toLowerCase()}`} asChild>
+                        <Link href={resourcePath(resource)}>
+                          <ArrowRightIcon />
+                        </Link>
+                      </Button>
+                    </div>
+                  </div>
+                );
+              })}
+            </CardContent>
+          </Card>
+        )}
+
+        <Card className="h-fit">
+          <CardHeader>
+            <CardTitle className="text-base">Secure your account</CardTitle>
+            <CardDescription>{remaining === 0 ? "All done." : `${remaining} to go.`}</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col">
+            {steps.map((step) => (
+              <Link key={step.label} href={step.href} className="flex items-center gap-3 border-b py-3 text-sm last:border-b-0 last:pb-0 hover:text-primary">
+                {step.done ? <CheckCircle2Icon className="size-4.5 text-success" /> : <CircleIcon className="size-4.5 text-muted-foreground" />}
+                <span className={step.done ? "text-muted-foreground line-through" : "font-medium"}>{step.label}</span>
               </Link>
-            </li>
-          ))}
-        </ul>
-      </section>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
     </>
   );
 }

package/templates/app/app/verify-email/page.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { VerifyEmailForm } from "@/components/auth/verify-email-form";
+import { authConfig } from "@/lib/auth-config";
+import { getSession, safeRedirectPath } from "@/lib/session";
+
+export const metadata = { title: "Verify your email" };
+
+/**
+ * Confirm an email address: by the code in the message, or by asking for a fresh link
+ * when the one they have has expired.
+ */
+export default async function VerifyEmailPage({ searchParams }: { searchParams: Promise<{ email?: string; next?: string }> }) {
+  const { email, next } = await searchParams;
+  const session = await getSession();
+  const to = safeRedirectPath(next, "/dashboard/account");
+  if (session?.user.emailVerified) redirect(to);
+
+  return (
+    <AuthShell
+      title="Verify your email"
+      subtitle="One step, so we know we can reach you."
+      footer={
+        <Link href={session ? "/dashboard" : "/sign-in"} className="font-medium text-link hover:underline">
+          {session ? "Back to the dashboard" : "Back to sign in"}
+        </Link>
+      }
+    >
+      <VerifyEmailForm initialEmail={session?.user.email ?? email ?? ""} codes={authConfig.emailOtp} next={to} />
+    </AuthShell>
+  );
+}

package/templates/app/components/account/security-settings.tsx

@@ -5,9 +5,11 @@ import { useRouter } from "next/navigation";
 import { renderSVG } from "uqr";
 import { CheckIcon, CopyIcon, FingerprintIcon, LaptopIcon, ShieldCheckIcon, Trash2Icon } from "lucide-react";
 import { AuthInput, AuthLabel, FormMessage, PrimaryButton, SecondaryButton, TextButton } from "@/components/auth/ui";
+import { PasswordField } from "@/components/auth/password-field";
 import { authErrorMessage } from "@/components/auth/sign-in-flow";
 import { PROVIDER_LABELS, ProviderIcon } from "@/components/auth/provider-icons";
 import { authClient } from "@/lib/auth-client";
+import { checkPassword } from "@/lib/password-rules";
 import type { SocialProvider } from "@/lib/auth-config";
 import { cn } from "@/lib/utils";
 
@@ -147,7 +149,8 @@ function Password({ hasPassword, email }: { hasPassword: boolean; email: string
 
   const change = async (event: React.FormEvent) => {
     event.preventDefault();
-    if (next.length < 8) return setMessage({ tone: "error", text: "Use at least 8 characters." });
+    const check = checkPassword(next, [email]);
+    if (!check.valid) return setMessage({ tone: "error", text: check.advice ?? "That password is too short." });
     setPending(true);
     const { error } = await authClient.changePassword({ currentPassword: current, newPassword: next, revokeOtherSessions: true });
     setPending(false);
@@ -160,14 +163,8 @@ function Password({ hasPassword, email }: { hasPassword: boolean; email: string
   return (
     <Section id="password" title="Password" description="Changing it signs you out everywhere else.">
       <form className="flex flex-col gap-4" onSubmit={change}>
-        <div className="flex flex-col gap-2">
-          <AuthLabel htmlFor="current-password">Current password</AuthLabel>
-          <AuthInput id="current-password" type="password" autoComplete="current-password" value={current} onChange={(event) => setCurrent(event.target.value)} required />
-        </div>
-        <div className="flex flex-col gap-2">
-          <AuthLabel htmlFor="new-password">New password</AuthLabel>
-          <AuthInput id="new-password" type="password" autoComplete="new-password" value={next} onChange={(event) => setNext(event.target.value)} required minLength={8} />
-        </div>
+        <PasswordField id="current-password" label="Current password" name="current-password" autoComplete="current-password" value={current} onChange={setCurrent} showRules={false} />
+        <PasswordField id="new-password" label="New password" name="new-password" value={next} onChange={setNext} avoid={[email]} />
         {message && <FormMessage tone={message.tone}>{message.text}</FormMessage>}
         <PrimaryButton type="submit" pending={pending} className="w-fit">
           Change password

package/templates/app/components/auth/otp-input.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useId, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface Props {
+  value: string;
+  onChange: (value: string) => void;
+  /** Called once the last character is typed or pasted, so nobody taps "Continue". */
+  onComplete?: (value: string) => void;
+  length?: number;
+  label?: string;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  /** Backup codes are letters and digits; emailed codes are digits. */
+  mode?: "numeric" | "alphanumeric";
+  id?: string;
+}
+
+/**
+ * A code box that is really one input with the cells drawn behind it.
+ *
+ * The obvious build — one input per digit — breaks paste, iOS and Android code
+ * autofill, backspace across cells and screen readers, all of which a single input
+ * gets for free from `autocomplete="one-time-code"`.
+ */
+export function OtpInput({ value, onChange, onComplete, length = 6, label = "Verification code", autoFocus, disabled, mode = "numeric", id }: Props) {
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+  const input = useRef<HTMLInputElement>(null);
+  const [focused, setFocused] = useState(false);
+
+  const clean = (raw: string) => (mode === "numeric" ? raw.replace(/\D/g, "") : raw.replace(/[^a-zA-Z0-9]/g, "").toUpperCase()).slice(0, length);
+
+  const handle = (raw: string) => {
+    const next = clean(raw);
+    onChange(next);
+    if (next.length === length) onComplete?.(next);
+  };
+
+  const characters = [...value];
+  // The cursor sits on the first empty cell, or the last one when it's full.
+  const cursor = Math.min(value.length, length - 1);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label htmlFor={fieldId} className="sr-only">
+        {label}
+      </label>
+      <div className="relative" onClick={() => input.current?.focus()}>
+        <input
+          ref={input}
+          id={fieldId}
+          value={value}
+          onChange={(event) => handle(event.target.value)}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          onPaste={(event) => {
+            event.preventDefault();
+            handle(event.clipboardData.getData("text"));
+          }}
+          inputMode={mode === "numeric" ? "numeric" : "text"}
+          autoComplete="one-time-code"
+          autoCorrect="off"
+          spellCheck={false}
+          maxLength={length}
+          disabled={disabled}
+          autoFocus={autoFocus}
+          aria-label={label}
+          // Invisible but really there, so autofill, paste and the caret all work.
+          // The right padding keeps a password manager's icon off the last cell.
+          className="absolute inset-0 h-full w-full cursor-text pr-10 text-transparent caret-transparent opacity-0 outline-none"
+        />
+        <div className="flex gap-2" aria-hidden="true">
+          {Array.from({ length }, (_, index) => {
+            const active = focused && index === cursor;
+            return (
+              <div
+                key={index}
+                className={cn(
+                  "relative grid h-13 flex-1 place-items-center rounded-[calc(var(--radius)-2px)] border border-border bg-surface text-lg font-medium tabular-nums transition-[border-color,box-shadow]",
+                  active && "border-brand ring-[3px] ring-brand/20",
+                  disabled && "opacity-60",
+                )}
+              >
+                {characters[index] ?? ""}
+                {active && !characters[index] && <span className="absolute h-5 w-px animate-pulse bg-foreground" />}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/app/components/auth/password-field.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useId, useMemo, useState } from "react";
+import { CheckIcon, EyeIcon, EyeOffIcon } from "lucide-react";
+import { checkPassword, PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH } from "@/lib/password-rules";
+import { cn } from "@/lib/utils";
+import { AuthInput, AuthLabel } from "./ui";
+
+interface Props {
+  value: string;
+  onChange: (value: string) => void;
+  label?: string;
+  id?: string;
+  name?: string;
+  autoComplete?: "new-password" | "current-password";
+  autoFocus?: boolean;
+  required?: boolean;
+  placeholder?: string;
+  /** Show the rules and strength as they type. Off for "your current password". */
+  showRules?: boolean;
+  /** Their name and email: a password shouldn't contain either. */
+  avoid?: (string | null | undefined)[];
+}
+
+const BAR_COLOURS = ["bg-danger", "bg-danger", "bg-warning", "bg-success/70", "bg-success"];
+
+/**
+ * A password input that says what it wants before you get it wrong: the rules and a
+ * strength reading update as you type, and the eye shows what you've typed.
+ *
+ * Only the length is enforced; everything else reads as advice (see lib/password-rules.ts).
+ */
+export function PasswordField({
+  value,
+  onChange,
+  label = "Password",
+  id,
+  name = "password",
+  autoComplete = "new-password",
+  autoFocus,
+  required = true,
+  placeholder,
+  showRules = autoComplete === "new-password",
+  avoid = [],
+}: Props) {
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+  const hintId = `${fieldId}-hint`;
+  const [visible, setVisible] = useState(false);
+  const check = useMemo(() => checkPassword(value, avoid), [value, avoid.join("\u0000")]);
+  const started = value.length > 0;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <AuthLabel htmlFor={fieldId}>{label}</AuthLabel>
+      <div className="relative">
+        <AuthInput
+          id={fieldId}
+          name={name}
+          type={visible ? "text" : "password"}
+          autoComplete={autoComplete}
+          autoFocus={autoFocus}
+          required={required}
+          placeholder={placeholder}
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          minLength={autoComplete === "new-password" ? PASSWORD_MIN_LENGTH : undefined}
+          maxLength={PASSWORD_MAX_LENGTH}
+          aria-describedby={showRules ? hintId : undefined}
+          // A styling hook, so the field can go green without any state plumbing.
+          data-has-passed-validation={showRules && check.valid ? "" : undefined}
+          className={cn("pr-11", showRules && check.valid && "border-success/60")}
+        />
+        <button
+          type="button"
+          onClick={() => setVisible(!visible)}
+          aria-pressed={visible}
+          aria-controls={fieldId}
+          aria-label={visible ? "Hide password" : "Show password"}
+          title={visible ? "Hide password" : "Show password"}
+          className="absolute inset-y-0 right-0 grid w-11 place-items-center text-foreground-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+        >
+          {visible ? <EyeOffIcon className="size-4.5" /> : <EyeIcon className="size-4.5" />}
+        </button>
+      </div>
+
+      {showRules && (
+        <div id={hintId} className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <div className="flex h-1 flex-1 gap-1" aria-hidden="true">
+              {[0, 1, 2, 3].map((step) => (
+                <span key={step} className={cn("h-full flex-1 rounded-full transition-colors", started && check.score > step ? BAR_COLOURS[check.score] : "bg-border")} />
+              ))}
+            </div>
+            <span className={cn("text-xs tabular-nums", started ? "text-foreground-muted" : "text-transparent")}>{check.label}</span>
+          </div>
+
+          {/* Announced politely: it changes on every keystroke, so it mustn't interrupt. */}
+          <ul className="flex flex-col gap-1" aria-live="polite">
+            {check.rules.map((rule) => (
+              <li key={rule.id} className={cn("flex items-center gap-2 text-xs", rule.met ? "text-success" : "text-foreground-muted")}>
+                <span className={cn("grid size-3.5 shrink-0 place-items-center rounded-full border", rule.met ? "border-success bg-success/15" : "border-border")}>
+                  {rule.met && <CheckIcon className="size-2.5" />}
+                </span>
+                {rule.label}
+                {rule.required && !rule.met && <span className="text-foreground-muted">(required)</span>}
+              </li>
+            ))}
+          </ul>
+
+          {started && check.advice && <p className="text-xs text-foreground-muted">{check.advice}</p>}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/app/components/auth/password-forms.tsx

@@ -1,79 +1,76 @@
-"use client";
-
-import { useState } from "react";
-import { authClient } from "@/lib/auth-client";
-import { authErrorMessage } from "./sign-in-flow";
-import { AuthInput, AuthLabel, FormMessage, PrimaryButton } from "./ui";
-
-/** Asks for a reset link. Says the same thing whether or not the address has an account. */
-export function ForgotPasswordForm({ initialEmail }: { initialEmail: string }) {
-  const [email, setEmail] = useState(initialEmail);
-  const [pending, setPending] = useState(false);
-  const [sent, setSent] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const submit = async (event: React.FormEvent) => {
-    event.preventDefault();
-    setPending(true);
-    setError(null);
-    const { error } = await authClient.requestPasswordReset({ email, redirectTo: "/reset-password" });
-    setPending(false);
-    if (error) return setError(authErrorMessage(error));
-    setSent(true);
-  };
-
-  if (sent) {
-    return <FormMessage tone="success">If {email} has an account, a reset link is on its way. It expires in 1 hour.</FormMessage>;
-  }
-  return (
-    <form className="flex flex-col gap-4" onSubmit={submit}>
-      <div className="flex flex-col gap-2">
-        <AuthLabel htmlFor="email">Email</AuthLabel>
-        <AuthInput id="email" type="email" autoComplete="email" value={email} onChange={(event) => setEmail(event.target.value)} required autoFocus />
-      </div>
-      <FormMessage>{error}</FormMessage>
-      <PrimaryButton type="submit" pending={pending}>
-        Send reset link
-      </PrimaryButton>
-    </form>
-  );
-}
-
-/** Sets the new password from the emailed link's token. */
-export function ResetPasswordForm({ token }: { token: string }) {
-  const [password, setPassword] = useState("");
-  const [confirm, setConfirm] = useState("");
-  const [pending, setPending] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const submit = async (event: React.FormEvent) => {
-    event.preventDefault();
-    if (password.length < 8) return setError("Use at least 8 characters.");
-    if (password !== confirm) return setError("The two passwords don't match.");
-    setPending(true);
-    setError(null);
-    const { error } = await authClient.resetPassword({ newPassword: password, token });
-    setPending(false);
-    if (error) {
-      return setError(error.code === "INVALID_TOKEN" ? "This link has expired or was already used. Ask for a new one." : authErrorMessage(error));
-    }
-    window.location.href = "/sign-in?reset=1";
-  };
-
-  return (
-    <form className="flex flex-col gap-4" onSubmit={submit}>
-      <div className="flex flex-col gap-2">
-        <AuthLabel htmlFor="password">New password</AuthLabel>
-        <AuthInput id="password" type="password" autoComplete="new-password" value={password} onChange={(event) => setPassword(event.target.value)} required minLength={8} autoFocus />
-      </div>
-      <div className="flex flex-col gap-2">
-        <AuthLabel htmlFor="confirm">Confirm it</AuthLabel>
-        <AuthInput id="confirm" type="password" autoComplete="new-password" value={confirm} onChange={(event) => setConfirm(event.target.value)} required />
-      </div>
-      <FormMessage>{error}</FormMessage>
-      <PrimaryButton type="submit" pending={pending}>
-        Set new password
-      </PrimaryButton>
-    </form>
-  );
-}
+"use client";
+
+import { useState } from "react";
+import { authClient } from "@/lib/auth-client";
+import { checkPassword } from "@/lib/password-rules";
+import { PasswordField } from "./password-field";
+import { authErrorMessage } from "./sign-in-flow";
+import { AuthInput, AuthLabel, FormMessage, PrimaryButton } from "./ui";
+
+/** Asks for a reset link. Says the same thing whether or not the address has an account. */
+export function ForgotPasswordForm({ initialEmail }: { initialEmail: string }) {
+  const [email, setEmail] = useState(initialEmail);
+  const [pending, setPending] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setPending(true);
+    setError(null);
+    const { error } = await authClient.requestPasswordReset({ email, redirectTo: "/reset-password" });
+    setPending(false);
+    if (error) return setError(authErrorMessage(error));
+    setSent(true);
+  };
+
+  if (sent) {
+    return <FormMessage tone="success">If {email} has an account, a reset link is on its way. It expires in 1 hour.</FormMessage>;
+  }
+  return (
+    <form className="flex flex-col gap-4" onSubmit={submit}>
+      <div className="flex flex-col gap-2">
+        <AuthLabel htmlFor="email">Email</AuthLabel>
+        <AuthInput id="email" type="email" autoComplete="email" value={email} onChange={(event) => setEmail(event.target.value)} required autoFocus />
+      </div>
+      <FormMessage>{error}</FormMessage>
+      <PrimaryButton type="submit" pending={pending}>
+        Send reset link
+      </PrimaryButton>
+    </form>
+  );
+}
+
+/** Sets the new password from the emailed link's token. */
+export function ResetPasswordForm({ token }: { token: string }) {
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    const check = checkPassword(password);
+    if (!check.valid) return setError(check.advice ?? "That password is too short.");
+    if (password !== confirm) return setError("The two passwords don't match.");
+    setPending(true);
+    setError(null);
+    const { error } = await authClient.resetPassword({ newPassword: password, token });
+    setPending(false);
+    if (error) {
+      return setError(error.code === "INVALID_TOKEN" ? "This link has expired or was already used. Ask for a new one." : authErrorMessage(error));
+    }
+    window.location.href = "/sign-in?reset=1";
+  };
+
+  return (
+    <form className="flex flex-col gap-4" onSubmit={submit}>
+      <PasswordField id="password" label="New password" value={password} onChange={setPassword} autoFocus />
+      <PasswordField id="confirm" label="Confirm it" name="confirm" value={confirm} onChange={setConfirm} showRules={false} />
+      <FormMessage>{error}</FormMessage>
+      <PrimaryButton type="submit" pending={pending}>
+        Set new password
+      </PrimaryButton>
+    </form>
+  );
+}