create-astram-app 0.1.3 → 0.3.0

package/template/frontend/src/pages/account/TwoFactorPage.jsx

@@ -0,0 +1,833 @@
+/**
+ * TwoFactorPage — a multi-device authenticator manager, in astram3's
+ * two-pane account-card language. Rendered inside <AccountLayout/>'s <Outlet/>.
+ *
+ * On mount it lists the user's CONFIRMED authenticator devices via the shared
+ * accountService. From there:
+ *   - empty state → "Two-factor is off" + an "Add device" button.
+ *   - device list  → one row per device (name · added · last used · rename · remove),
+ *                    plus "Add device" and "Regenerate recovery codes".
+ *
+ * The ADD-DEVICE sub-flow reuses the classic enroll UX: name → begin → a SCANNABLE QR
+ * (otpauth:// rendered to a data-URL, kept dark-on-white so it scans in dark mode too)
+ * + a manual base32 key + a 6-digit code → confirm. On the FIRST device the server
+ * returns recovery codes ONCE — we show them in a prominent "save these" panel.
+ *
+ * RENAME is inline (edit-in-place on the row). REMOVE and REGENERATE are SENSITIVE ops
+ * gated behind the themed <ConfirmDialog/>: each gathers a proof code INSIDE the dialog
+ * and fires its API ONLY from the dialog's confirm handler (never on the initial click).
+ *
+ * Device ids are machine-only (used as keys/params) — never rendered to the user. Only
+ * names + formatted dates + relative "last used" reach the DOM.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import QRCode from 'qrcode';
+import { toast } from 'sonner';
+import {
+  AlertTriangle,
+  Check,
+  Copy,
+  KeyRound,
+  Loader2,
+  Pencil,
+  Plus,
+  ShieldCheck,
+  Smartphone,
+  Trash2,
+  X,
+} from 'lucide-react';
+import { useAuth } from '@/auth/AuthContext';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import ConfirmDialog from '@/components/ConfirmDialog';
+
+/** Absolute date for "Added" — e.g. "13 Jul 2026". */
+function formatAdded(ms) {
+  if (!ms) return '—';
+  try {
+    return new Date(ms).toLocaleDateString(undefined, {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+    });
+  } catch {
+    return '—';
+  }
+}
+
+/** Relative "last used" — "Never", "just now", "2 hours ago", or a date if far back. */
+function formatLastUsed(ms) {
+  if (!ms) return 'Never';
+  const diff = Date.now() - ms;
+  if (diff < 0) return 'just now';
+  const min = Math.floor(diff / 60000);
+  if (min < 1) return 'just now';
+  if (min < 60) return `${min} minute${min === 1 ? '' : 's'} ago`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr} hour${hr === 1 ? '' : 's'} ago`;
+  const days = Math.floor(hr / 24);
+  if (days < 30) return `${days} day${days === 1 ? '' : 's'} ago`;
+  return formatAdded(ms);
+}
+
+/** The static "how to" guide shown in the right pane. */
+function HowToGuide() {
+  return (
+    <div className="md:border-l md:pl-6">
+      <p className="text-sm font-medium text-foreground">How it works</p>
+      <ol className="mt-3 space-y-3 text-sm text-muted-foreground">
+        <li className="flex gap-2.5">
+          <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/10 text-[11px] font-semibold text-primary">
+            1
+          </span>
+          <span>Install an authenticator app — Google Authenticator, Authy, or 1Password.</span>
+        </li>
+        <li className="flex gap-2.5">
+          <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/10 text-[11px] font-semibold text-primary">
+            2
+          </span>
+          <span>
+            Add a device here, then scan the QR code — or choose &ldquo;enter a setup key&rdquo; and
+            paste the key manually.
+          </span>
+        </li>
+        <li className="flex gap-2.5">
+          <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/10 text-[11px] font-semibold text-primary">
+            3
+          </span>
+          <span>Enter the 6-digit code the app generates to confirm and enable the device.</span>
+        </li>
+        <li className="flex gap-2.5">
+          <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/10 text-[11px] font-semibold text-primary">
+            4
+          </span>
+          <span>
+            Add more devices for backup, and save your recovery codes — they let you sign in if you
+            lose every device.
+          </span>
+        </li>
+      </ol>
+    </div>
+  );
+}
+
+/** The prominent one-time recovery-codes panel (first enroll + regenerate). */
+function RecoveryCodesPanel({ codes, onCopy, onDone, doneLabel = 'I’ve saved them' }) {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-start gap-2 rounded-lg border border-[var(--warn)]/40 bg-[var(--warn)]/10 px-3 py-2 text-sm">
+        <AlertTriangle className="mt-0.5 size-4 shrink-0 text-[var(--warn)]" />
+        <div>
+          <p className="font-medium text-foreground">Save these recovery codes now</p>
+          <p className="text-muted-foreground">
+            They are shown ONCE and will not be shown again. Each code works once if you lose access
+            to every authenticator device. Store them somewhere safe.
+          </p>
+        </div>
+      </div>
+      <div className="grid grid-cols-2 gap-2 rounded-lg border bg-muted/40 p-3">
+        {codes.map((c) => (
+          <code
+            key={c}
+            className="select-all rounded bg-background px-2 py-1 text-center font-mono text-sm"
+          >
+            {c}
+          </code>
+        ))}
+      </div>
+      <div className="flex items-center gap-2">
+        <Button type="button" variant="outline" onClick={onCopy}>
+          <Copy className="size-4" />
+          Copy codes
+        </Button>
+        <Button type="button" onClick={onDone}>
+          {doneLabel}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * A single device row — displays name/added/last-used, with inline rename + remove.
+ * `reenrollMode` hides Rename/Remove: those routes (PATCH/DELETE /account/mfa/devices)
+ * are NOT on the server's re-enroll allowlist, so offering them on the forced re-enroll
+ * screen would only yield a confusing 403 — the display still shows the device.
+ */
+function DeviceRow({ device, onRename, onRemove, disabled, reenrollMode = false }) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(device.name);
+  const [savingRename, setSavingRename] = useState(false);
+
+  const startEdit = () => {
+    setDraft(device.name);
+    setEditing(true);
+  };
+
+  const submitRename = async () => {
+    const next = draft.trim();
+    if (!next) {
+      toast.error('Please enter a device name.');
+      return;
+    }
+    if (next === device.name) {
+      setEditing(false);
+      return;
+    }
+    setSavingRename(true);
+    const ok = await onRename(device.id, next);
+    setSavingRename(false);
+    if (ok) setEditing(false);
+  };
+
+  return (
+    <div className="flex flex-col gap-3 rounded-lg border p-3 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex min-w-0 items-start gap-3">
+        <span className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
+          <Smartphone className="size-4" />
+        </span>
+        <div className="min-w-0">
+          {editing ? (
+            <div className="flex items-center gap-2">
+              <Input
+                value={draft}
+                autoFocus
+                maxLength={64}
+                className="h-8 w-44"
+                disabled={savingRename}
+                onChange={(e) => setDraft(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault();
+                    submitRename();
+                  }
+                  if (e.key === 'Escape') setEditing(false);
+                }}
+              />
+              <Button
+                type="button"
+                size="icon"
+                className="size-8"
+                onClick={submitRename}
+                disabled={savingRename}
+                aria-label="Save name"
+              >
+                {savingRename ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <Check className="size-4" />
+                )}
+              </Button>
+              <Button
+                type="button"
+                size="icon"
+                variant="ghost"
+                className="size-8"
+                onClick={() => setEditing(false)}
+                disabled={savingRename}
+                aria-label="Cancel rename"
+              >
+                <X className="size-4" />
+              </Button>
+            </div>
+          ) : (
+            <p className="truncate font-medium text-foreground">{device.name}</p>
+          )}
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            Added {formatAdded(device.createdAtMs)} · Last used {formatLastUsed(device.lastUsedAtMs)}
+          </p>
+        </div>
+      </div>
+
+      {!editing && !reenrollMode && (
+        <div className="flex items-center gap-1 self-end sm:self-auto">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={startEdit}
+            disabled={disabled}
+          >
+            <Pencil className="size-4" />
+            Rename
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="text-destructive hover:bg-destructive/10 hover:text-destructive"
+            onClick={() => onRemove(device)}
+            disabled={disabled}
+          >
+            <Trash2 className="size-4" />
+            Remove
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * @param {object} props
+ * @param {(() => void)} [props.onDeviceConfirmed]  Called after a device confirm
+ *   succeeds. Undefined in the normal account context; the forced-re-enroll screen
+ *   passes it to clear the re-enroll gate + leave the screen once a device is added.
+ * @param {boolean} [props.reenrollMode]  When true (the forced-re-enroll screen),
+ *   hides Rename/Remove on existing devices — those routes aren't on the server's
+ *   re-enroll allowlist, so offering them would only 403. Add-device + regenerate
+ *   (both allowlisted) stay usable. Normal /account/2fa omits this → actions shown.
+ */
+export default function TwoFactorPage({ onDeviceConfirmed, reenrollMode = false } = {}) {
+  const { tokens, account } = useAuth();
+  const token = tokens?.accessToken;
+
+  // List state.
+  const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState('');
+  const [unavailable, setUnavailable] = useState(false); // seam-absent (501)
+  const [devices, setDevices] = useState([]);
+
+  // Add-device sub-flow: 'idle' | 'naming' | 'enrolling'.
+  const [addPhase, setAddPhase] = useState('idle');
+  const [newName, setNewName] = useState('');
+  const [deviceId, setDeviceId] = useState('');
+  const [secret, setSecret] = useState('');
+  const [otpauthUri, setOtpauthUri] = useState('');
+  const [qrDataUrl, setQrDataUrl] = useState('');
+  const [code, setCode] = useState('');
+  const [addError, setAddError] = useState('');
+  const [addBusy, setAddBusy] = useState(false);
+  // The boxed-OTP input (input-otp forwards its ref to the real <input>). Focused when the
+  // enroll step opens so the user can type the code straight away without clicking a box.
+  const codeInputRef = useRef(null);
+
+  // One-time recovery codes panel (first enroll OR regenerate).
+  const [recoveryCodes, setRecoveryCodes] = useState([]);
+  const [showRecovery, setShowRecovery] = useState(false);
+
+  // Remove ConfirmDialog.
+  const [removeTarget, setRemoveTarget] = useState(null);
+  const [removeCode, setRemoveCode] = useState('');
+  const [removeError, setRemoveError] = useState('');
+  const [removeBusy, setRemoveBusy] = useState(false);
+
+  // Regenerate ConfirmDialog.
+  const [regenOpen, setRegenOpen] = useState(false);
+  const [regenCode, setRegenCode] = useState('');
+  const [regenError, setRegenError] = useState('');
+  const [regenBusy, setRegenBusy] = useState(false);
+
+  const refresh = useCallback(async () => {
+    if (!token) return;
+    const r = await account.listMfaDevices(token);
+    if (r.ok) {
+      setDevices(r.devices || []);
+      setUnavailable(false);
+      setLoadError('');
+    } else if (r.status === 501) {
+      setUnavailable(true);
+      setLoadError('');
+    } else {
+      setLoadError(r.error || 'Could not load your two-factor devices.');
+    }
+  }, [account, token]);
+
+  useEffect(() => {
+    let active = true;
+    (async () => {
+      setLoading(true);
+      const r = await account.listMfaDevices(token);
+      if (!active) return;
+      if (r.ok) {
+        setDevices(r.devices || []);
+        setUnavailable(false);
+      } else if (r.status === 501) {
+        setUnavailable(true);
+      } else {
+        setLoadError(r.error || 'Could not load your two-factor devices.');
+      }
+      setLoading(false);
+    })();
+    return () => {
+      active = false;
+    };
+  }, [account, token]);
+
+  // Render the otpauth:// URI to a scannable QR data-URL. Explicit dark-on-white so it
+  // scans in dark mode too.
+  useEffect(() => {
+    if (!otpauthUri) {
+      setQrDataUrl('');
+      return;
+    }
+    let cancelled = false;
+    QRCode.toDataURL(otpauthUri, {
+      errorCorrectionLevel: 'M',
+      margin: 2,
+      width: 200,
+      color: { dark: '#000000ff', light: '#ffffffff' },
+    })
+      .then((url) => {
+        if (!cancelled) setQrDataUrl(url);
+      })
+      .catch(() => {
+        if (!cancelled) setQrDataUrl('');
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [otpauthUri]);
+
+  // When the enroll step opens (QR shown), focus the OTP boxes so the user can type the
+  // code straight away — no click needed. Deferred a tick so the input is mounted first.
+  useEffect(() => {
+    if (addPhase !== 'enrolling') return undefined;
+    const t = setTimeout(() => codeInputRef.current?.focus(), 0);
+    return () => clearTimeout(t);
+  }, [addPhase]);
+
+  const copy = async (text, label) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(`${label} copied`);
+    } catch {
+      toast.error('Could not copy to clipboard');
+    }
+  };
+
+  // ---- Add-device flow -----------------------------------------------------
+
+  const openAdd = () => {
+    setAddError('');
+    setNewName('');
+    setAddPhase('naming');
+  };
+
+  const resetAdd = () => {
+    setAddPhase('idle');
+    setNewName('');
+    setDeviceId('');
+    setSecret('');
+    setOtpauthUri('');
+    setCode('');
+    setAddError('');
+  };
+
+  const onBegin = async (e) => {
+    e.preventDefault();
+    setAddError('');
+    const name = newName.trim();
+    if (!name) {
+      setAddError('Enter a name for this device.');
+      return;
+    }
+    setAddBusy(true);
+    const r = await account.beginMfaDevice(token, name);
+    setAddBusy(false);
+    if (!r.ok) {
+      setAddError(r.error || 'Could not start two-factor setup.');
+      return;
+    }
+    setDeviceId(r.deviceId || '');
+    setSecret(r.secret || '');
+    setOtpauthUri(r.otpauthUri || '');
+    setCode('');
+    setAddPhase('enrolling');
+  };
+
+  const onConfirm = async (e) => {
+    e.preventDefault();
+    setAddError('');
+    if (!code.trim()) {
+      setAddError('Enter the 6-digit code from your authenticator app.');
+      return;
+    }
+    setAddBusy(true);
+    const r = await account.confirmMfaDevice(token, deviceId, code.trim());
+    setAddBusy(false);
+    if (!r.ok) {
+      setAddError(r.error || 'Could not confirm this device.');
+      return;
+    }
+    const codes = r.recoveryCodes || [];
+    resetAdd();
+    await refresh();
+    toast.success('Authenticator device added');
+    if (codes.length > 0) {
+      setRecoveryCodes(codes);
+      setShowRecovery(true);
+    }
+    // In the forced-re-enroll flow, a successful device confirm is what re-secures the
+    // account — the server has cleared the gate, so release the UI. Deferred so any
+    // one-time recovery-codes panel is shown first (the parent decides when to leave).
+    onDeviceConfirmed?.();
+  };
+
+  // ---- Rename (inline, from the row) ---------------------------------------
+
+  const onRename = async (id, name) => {
+    const r = await account.renameMfaDevice(token, id, name);
+    if (!r.ok) {
+      toast.error(r.error || 'Could not rename the device.');
+      return false;
+    }
+    await refresh();
+    toast.success('Device renamed');
+    return true;
+  };
+
+  // ---- Remove (ConfirmDialog + code) ---------------------------------------
+
+  const openRemove = (device) => {
+    setRemoveError('');
+    setRemoveCode('');
+    setRemoveTarget(device);
+  };
+
+  const closeRemove = () => {
+    setRemoveTarget(null);
+    setRemoveCode('');
+    setRemoveError('');
+  };
+
+  const onConfirmRemove = async () => {
+    if (!removeTarget) return;
+    setRemoveError('');
+    if (!removeCode.trim()) {
+      setRemoveError('Enter a current 6-digit code or a recovery code.');
+      return;
+    }
+    setRemoveBusy(true);
+    const r = await account.removeMfaDevice(token, removeTarget.id, removeCode.trim());
+    setRemoveBusy(false);
+    if (!r.ok) {
+      setRemoveError(r.error || 'Could not remove the device.');
+      return;
+    }
+    closeRemove();
+    await refresh();
+    toast.success('Device removed');
+  };
+
+  // ---- Regenerate recovery codes (ConfirmDialog + code) --------------------
+
+  const openRegen = () => {
+    setRegenError('');
+    setRegenCode('');
+    setRegenOpen(true);
+  };
+
+  const closeRegen = () => {
+    setRegenOpen(false);
+    setRegenCode('');
+    setRegenError('');
+  };
+
+  const onConfirmRegen = async () => {
+    setRegenError('');
+    if (!regenCode.trim()) {
+      setRegenError('Enter a current 6-digit code or a recovery code.');
+      return;
+    }
+    setRegenBusy(true);
+    const r = await account.regenerateRecoveryCodes(token, regenCode.trim());
+    setRegenBusy(false);
+    if (!r.ok) {
+      setRegenError(r.error || 'Could not regenerate recovery codes.');
+      return;
+    }
+    closeRegen();
+    setRecoveryCodes(r.recoveryCodes || []);
+    setShowRecovery(true);
+    toast.success('Recovery codes regenerated');
+  };
+
+  // --------------------------------------------------------------------------
+
+  const busyAny = addBusy || removeBusy || regenBusy;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-base">
+          <Smartphone className="size-4 text-primary" />
+          Two-factor authentication
+        </CardTitle>
+        <CardDescription>
+          Add one or more authenticator apps (Google Authenticator, Authy, 1Password) as a second
+          factor when you sign in. Any device can approve — keep more than one for backup.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-6 md:grid-cols-2">
+          {/* LEFT — device manager / add-flow / recovery codes. */}
+          <div className="space-y-4">
+            {loadError && (
+              <div className="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+                {loadError}
+              </div>
+            )}
+
+            {loading ? (
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <Loader2 className="size-4 animate-spin" />
+                Loading your devices…
+              </div>
+            ) : unavailable ? (
+              <div className="rounded-lg border bg-muted/40 px-3 py-4 text-sm text-muted-foreground">
+                Two-factor authentication is not available.
+              </div>
+            ) : showRecovery ? (
+              <RecoveryCodesPanel
+                codes={recoveryCodes}
+                onCopy={() => copy(recoveryCodes.join('\n'), 'Recovery codes')}
+                onDone={() => {
+                  setShowRecovery(false);
+                  setRecoveryCodes([]);
+                }}
+              />
+            ) : addPhase === 'naming' ? (
+              <form onSubmit={onBegin} className="space-y-4" noValidate>
+                {addError && (
+                  <div className="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+                    {addError}
+                  </div>
+                )}
+                <div className="space-y-1.5">
+                  <Label htmlFor="mfa-name">Device name</Label>
+                  <Input
+                    id="mfa-name"
+                    autoFocus
+                    maxLength={64}
+                    placeholder="e.g. iPhone, Work laptop"
+                    value={newName}
+                    onChange={(e) => setNewName(e.target.value)}
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    A friendly label so you can tell your devices apart.
+                  </p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button type="submit" disabled={addBusy}>
+                    {addBusy ? (
+                      <Loader2 className="size-4 animate-spin" />
+                    ) : (
+                      <ShieldCheck className="size-4" />
+                    )}
+                    Continue
+                  </Button>
+                  <Button type="button" variant="ghost" onClick={resetAdd} disabled={addBusy}>
+                    Cancel
+                  </Button>
+                </div>
+              </form>
+            ) : addPhase === 'enrolling' ? (
+              <form onSubmit={onConfirm} className="space-y-4" noValidate>
+                {addError && (
+                  <div className="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+                    {addError}
+                  </div>
+                )}
+                <div className="rounded-lg border bg-muted/40 p-3">
+                  <p className="text-sm font-medium">1. Scan this with your authenticator app</p>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    Open your authenticator app and scan the QR code below.
+                  </p>
+                  {/* Fixed white/quiet-zone container so the QR always scans — including dark
+                      mode, where a dark-on-dark QR would be unreadable. */}
+                  <div className="mt-3 flex justify-center">
+                    <div className="rounded-xl bg-white p-3 shadow-sm ring-1 ring-black/5">
+                      {qrDataUrl ? (
+                        <img
+                          src={qrDataUrl}
+                          alt="Two-factor setup QR code"
+                          width={180}
+                          height={180}
+                          className="size-[180px]"
+                        />
+                      ) : (
+                        <div className="flex size-[180px] items-center justify-center text-muted-foreground">
+                          <Loader2 className="size-6 animate-spin" />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className="mt-3 border-t pt-3">
+                    <p className="text-xs font-medium text-muted-foreground">
+                      Can&rsquo;t scan? Enter this key manually
+                    </p>
+                    <div className="mt-2 flex items-center gap-2">
+                      <code className="flex-1 select-all break-all rounded bg-background px-2 py-1.5 font-mono text-sm">
+                        {secret}
+                      </code>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        onClick={() => copy(secret, 'Key')}
+                      >
+                        <Copy className="size-4" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+                <div className="space-y-1.5">
+                  <Label htmlFor="mfa-code">2. Enter the 6-digit code it shows</Label>
+                  {/* Boxed segmented OTP (one box per digit) — same control as the login
+                      MFA step: auto-advance, backspace-to-previous, paste fills all 6.
+                      On the 6th digit we auto-submit the confirm (belt-and-suspenders with
+                      the "Verify & add device" button). */}
+                  <div className="flex py-1">
+                    <InputOTP
+                      ref={codeInputRef}
+                      id="mfa-code"
+                      maxLength={6}
+                      inputMode="numeric"
+                      pattern="[0-9]*"
+                      autoComplete="one-time-code"
+                      value={code}
+                      onChange={(v) => setCode(v)}
+                      onComplete={() => {
+                        if (!addBusy) void onConfirm({ preventDefault: () => {} });
+                      }}
+                      disabled={addBusy}
+                    >
+                      <InputOTPGroup>
+                        <InputOTPSlot index={0} />
+                        <InputOTPSlot index={1} />
+                        <InputOTPSlot index={2} />
+                        <InputOTPSlot index={3} />
+                        <InputOTPSlot index={4} />
+                        <InputOTPSlot index={5} />
+                      </InputOTPGroup>
+                    </InputOTP>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button type="submit" disabled={addBusy}>
+                    {addBusy ? (
+                      <Loader2 className="size-4 animate-spin" />
+                    ) : (
+                      <ShieldCheck className="size-4" />
+                    )}
+                    Verify &amp; add device
+                  </Button>
+                  <Button type="button" variant="ghost" onClick={resetAdd} disabled={addBusy}>
+                    Cancel
+                  </Button>
+                </div>
+              </form>
+            ) : devices.length === 0 ? (
+              // Empty / off state.
+              <div className="space-y-4">
+                <div className="rounded-lg border border-dashed bg-muted/30 px-4 py-6 text-center">
+                  <Smartphone className="mx-auto size-6 text-muted-foreground" />
+                  <p className="mt-2 text-sm font-medium text-foreground">Two-factor is off</p>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    Add an authenticator device to secure your account.
+                  </p>
+                </div>
+                <Button type="button" onClick={openAdd}>
+                  <Plus className="size-4" />
+                  Add device
+                </Button>
+              </div>
+            ) : (
+              // Device list.
+              <div className="space-y-3">
+                <div className="space-y-2">
+                  {devices.map((d) => (
+                    <DeviceRow
+                      key={d.id}
+                      device={d}
+                      onRename={onRename}
+                      onRemove={openRemove}
+                      disabled={busyAny}
+                      reenrollMode={reenrollMode}
+                    />
+                  ))}
+                </div>
+                <div className="flex flex-nowrap items-center gap-2 pt-1">
+                  <Button type="button" onClick={openAdd} disabled={busyAny}>
+                    <Plus className="size-4" />
+                    Add device
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={openRegen}
+                    disabled={busyAny}
+                    className="whitespace-nowrap"
+                  >
+                    <KeyRound className="size-4" />
+                    Regenerate recovery codes
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* RIGHT — how-to guide. */}
+          <HowToGuide />
+        </div>
+      </CardContent>
+
+      {/* Sensitive op — remove is gated behind a themed confirm dialog that NAMES the
+          device; the proof code lives inside it and removeMfaDevice fires ONLY from
+          onConfirm. */}
+      <ConfirmDialog
+        open={!!removeTarget}
+        title={removeTarget ? `Remove “${removeTarget.name}”?` : 'Remove device?'}
+        message="This authenticator will no longer approve sign-in. Enter a current code from another device or a recovery code to confirm."
+        confirmLabel="Remove"
+        destructive
+        busy={removeBusy}
+        onConfirm={onConfirmRemove}
+        onCancel={closeRemove}
+      >
+        <div className="space-y-1.5">
+          <Label htmlFor="mfa-remove-code">Current code or recovery code</Label>
+          <Input
+            id="mfa-remove-code"
+            autoComplete="one-time-code"
+            placeholder="123456 or a recovery code"
+            value={removeCode}
+            onChange={(e) => setRemoveCode(e.target.value)}
+            disabled={removeBusy}
+          />
+          {removeError && <p className="text-sm text-destructive">{removeError}</p>}
+        </div>
+      </ConfirmDialog>
+
+      {/* Sensitive op — regenerate replaces the recovery-code set; a proof code is
+          gathered inside the dialog and the API fires ONLY from onConfirm. */}
+      <ConfirmDialog
+        open={regenOpen}
+        title="Regenerate recovery codes?"
+        message="Your existing recovery codes will stop working and a fresh set will be shown once. Enter a current code or a recovery code to confirm."
+        confirmLabel="Regenerate"
+        destructive
+        busy={regenBusy}
+        onConfirm={onConfirmRegen}
+        onCancel={closeRegen}
+      >
+        <div className="space-y-1.5">
+          <Label htmlFor="mfa-regen-code">Current code or recovery code</Label>
+          <Input
+            id="mfa-regen-code"
+            autoComplete="one-time-code"
+            placeholder="123456 or a recovery code"
+            value={regenCode}
+            onChange={(e) => setRegenCode(e.target.value)}
+            disabled={regenBusy}
+          />
+          {regenError && <p className="text-sm text-destructive">{regenError}</p>}
+        </div>
+      </ConfirmDialog>
+    </Card>
+  );
+}