@meith/web 0.23.2 → 0.24.0

package/app/(board)/usercp/security/verify/page.tsx

@@ -47,6 +47,9 @@ export default async function VerifySecurityPage({
           codeSubmit: tr.t('credentialProof.codeSubmit'),
           passwordLabel: tr.t('credentialProof.passwordLabel'),
           passwordSubmit: tr.t('credentialProof.passwordSubmit'),
+          recoveryLabel: tr.t('otp.recoveryLabel'),
+          useRecovery: tr.t('otp.useRecovery'),
+          useApp: tr.t('otp.useApp'),
         }}
         hasPassword={account?.passwordHash !== null && account !== null}
         hasSecondFactor={factor.enrolled}

package/app/admin/layout.tsx

@@ -26,7 +26,7 @@ export default async function AdminLayout({ children }: { children: React.ReactN
       <main
         id="board-content"
         tabIndex={-1}
-        className="flex min-h-screen items-center justify-center px-6 py-12"
+        className="flex min-h-screen flex-col items-center justify-center gap-4 px-6 py-12"
       >
         <AdminSignInForm
           next="/admin"
@@ -34,6 +34,9 @@ export default async function AdminLayout({ children }: { children: React.ReactN
           idleMinutes={ADMIN_IDLE_MINUTES}
           copy={adminFormsCopy(await getTranslator())}
         />
+        <a href="/" className="text-sm text-muted-foreground hover:text-foreground">
+          {await tr('adminPanel.cancel')}
+        </a>
       </main>
     )
   }
@@ -64,9 +67,6 @@ export default async function AdminLayout({ children }: { children: React.ReactN
             {await tr('page.control-panel')}
           </a>
           <div className="ml-auto flex shrink-0 items-center gap-3 text-sm whitespace-nowrap sm:gap-4">
-            <a href="/" className="text-muted-foreground hover:text-foreground">
-              {await tr('page.board')}
-            </a>
             <AdminSignOutForm copy={adminFormsCopy(t)} />
           </div>
         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/web",
-  "version": "0.23.2",
+  "version": "0.24.0",
   "description": "The board itself: the Next.js app, and the forum-web bin that materializes it into an external board workspace.",
   "license": "MIT",
   "repository": {
@@ -43,53 +43,53 @@
     "react-dom": "19.2.8",
     "tailwindcss": "^4.3.3",
     "typescript": "7.0.2",
-    "@meith/accounts": "0.23.2",
-    "@meith/admin": "0.23.2",
-    "@meith/antispam": "0.23.2",
-    "@meith/api": "0.23.2",
-    "@meith/attachments": "0.23.2",
-    "@meith/authorization": "0.23.2",
-    "@meith/avatars": "0.23.2",
-    "@meith/core": "0.23.2",
-    "@meith/db": "0.23.2",
-    "@meith/demo": "0.23.2",
-    "@meith/drafts": "0.23.2",
-    "@meith/drivers": "0.23.2",
-    "@meith/events": "0.23.2",
-    "@meith/forums": "0.23.2",
-    "@meith/groups": "0.23.2",
-    "@meith/i18n": "0.23.2",
-    "@meith/import": "0.23.2",
-    "@meith/install": "0.23.2",
-    "@meith/mail": "0.23.2",
-    "@meith/markdown": "0.23.2",
-    "@meith/marketplace": "0.23.2",
-    "@meith/messages": "0.23.2",
-    "@meith/moderation": "0.23.2",
-    "@meith/notifications": "0.23.2",
-    "@meith/plugin-calendar": "0.23.2",
-    "@meith/plugin-dues": "0.23.2",
-    "@meith/plugin-kit": "0.23.2",
-    "@meith/polls": "0.23.2",
-    "@meith/posts": "0.23.2",
-    "@meith/profile-fields": "0.23.2",
-    "@meith/relations": "0.23.2",
-    "@meith/reputation": "0.23.2",
-    "@meith/runtime": "0.23.2",
-    "@meith/settings": "0.23.2",
-    "@meith/search": "0.23.2",
-    "@meith/signatures": "0.23.2",
-    "@meith/subscriptions": "0.23.2",
-    "@meith/tasks": "0.23.2",
-    "@meith/theme-clubhouse": "0.23.2",
-    "@meith/theme-kit": "0.23.2",
-    "@meith/theme-default": "0.23.2",
-    "@meith/theme-midnight": "0.23.2",
-    "@meith/theme-phasebook": "0.23.2",
-    "@meith/theme-raidframe": "0.23.2",
-    "@meith/threads": "0.23.2",
-    "@meith/ui": "0.23.2",
-    "@meith/upgrade": "0.23.2"
+    "@meith/accounts": "0.24.0",
+    "@meith/admin": "0.24.0",
+    "@meith/antispam": "0.24.0",
+    "@meith/api": "0.24.0",
+    "@meith/attachments": "0.24.0",
+    "@meith/authorization": "0.24.0",
+    "@meith/avatars": "0.24.0",
+    "@meith/core": "0.24.0",
+    "@meith/db": "0.24.0",
+    "@meith/demo": "0.24.0",
+    "@meith/drafts": "0.24.0",
+    "@meith/drivers": "0.24.0",
+    "@meith/events": "0.24.0",
+    "@meith/forums": "0.24.0",
+    "@meith/groups": "0.24.0",
+    "@meith/i18n": "0.24.0",
+    "@meith/import": "0.24.0",
+    "@meith/install": "0.24.0",
+    "@meith/mail": "0.24.0",
+    "@meith/markdown": "0.24.0",
+    "@meith/marketplace": "0.24.0",
+    "@meith/messages": "0.24.0",
+    "@meith/moderation": "0.24.0",
+    "@meith/notifications": "0.24.0",
+    "@meith/plugin-calendar": "0.24.0",
+    "@meith/plugin-dues": "0.24.0",
+    "@meith/plugin-kit": "0.24.0",
+    "@meith/polls": "0.24.0",
+    "@meith/posts": "0.24.0",
+    "@meith/profile-fields": "0.24.0",
+    "@meith/relations": "0.24.0",
+    "@meith/reputation": "0.24.0",
+    "@meith/runtime": "0.24.0",
+    "@meith/search": "0.24.0",
+    "@meith/settings": "0.24.0",
+    "@meith/signatures": "0.24.0",
+    "@meith/subscriptions": "0.24.0",
+    "@meith/tasks": "0.24.0",
+    "@meith/theme-clubhouse": "0.24.0",
+    "@meith/theme-default": "0.24.0",
+    "@meith/theme-kit": "0.24.0",
+    "@meith/theme-midnight": "0.24.0",
+    "@meith/theme-phasebook": "0.24.0",
+    "@meith/theme-raidframe": "0.24.0",
+    "@meith/threads": "0.24.0",
+    "@meith/ui": "0.24.0",
+    "@meith/upgrade": "0.24.0"
   },
   "scripts": {
     "dev": "next dev",

package/src/components/account/credential-proof-form.tsx

@@ -9,6 +9,7 @@ import { EMPTY_STATE } from '@/server/auth-form-state'
 import { proveCredentialAction } from '@/server/credential-proof-actions'
 
 import { FormError } from '../auth/form-controls'
+import { OtpField } from '../auth/otp-field'
 
 export interface CredentialProofCopy {
   readonly codeConsumed: string
@@ -16,6 +17,9 @@ export interface CredentialProofCopy {
   readonly codeSubmit: string
   readonly passwordLabel: string
   readonly passwordSubmit: string
+  readonly recoveryLabel: string
+  readonly useRecovery: string
+  readonly useApp: string
 }
 
 export function CredentialProofForm({
@@ -59,10 +63,16 @@ export function CredentialProofForm({
         >
           <input type="hidden" name="method" value="code" />
           <input type="hidden" name="next" value={next} />
-          <label className="flex flex-col gap-1 text-sm">
-            <span className="font-medium">{copy.codeLabel}</span>
-            <Input name="code" inputMode="numeric" autoComplete="one-time-code" required />
-          </label>
+          <OtpField
+            label={copy.codeLabel}
+            name="code"
+            recovery={{
+              label: copy.recoveryLabel,
+              toRecovery: copy.useRecovery,
+              toApp: copy.useApp,
+              hint: copy.codeConsumed,
+            }}
+          />
           <p className="text-sm text-muted-foreground">{copy.codeConsumed}</p>
           <div>
             <Button type="submit" variant="primary">

package/src/components/account/two-factor-forms.tsx

@@ -15,6 +15,7 @@ import {
 import { RECOVERY_CODES_FIELD } from '@/view/two-factor'
 
 import { Field, FormError } from '../auth/form-controls'
+import { OtpField, otpRecoveryFromCopy } from '../auth/otp-field'
 import { type Copy, fromCopy } from '../shell/copy'
 
 const CARD = 'flex flex-col gap-4 rounded-lg border border-border bg-card p-5'
@@ -96,10 +97,9 @@ export function TwoFactorSetup({
 
       <form action={action} className="flex flex-col gap-4">
         <FormError message={state.error} />
-        <Field
+        <OtpField
           label={fromCopy(copy, 'accountForm.twoFactor.codeLabel')}
           name="code"
-          autoComplete="one-time-code"
           hint={fromCopy(copy, 'accountForm.twoFactor.codeHint')}
         />
         <div className="flex flex-wrap gap-2">
@@ -166,12 +166,12 @@ export function TwoFactorPanel({
         autoComplete="current-password"
       />
     ) : (
-      <Field
+      <OtpField
         id={`${which}-code`}
         label={fromCopy(copy, 'accountForm.twoFactor.codeProofLabel')}
         name="code"
-        autoComplete="one-time-code"
         hint={fromCopy(copy, 'accountForm.twoFactor.codeProofHint')}
+        recovery={otpRecoveryFromCopy(copy)}
       />
     )
 

package/src/components/admin/admin-forms.tsx

@@ -6,6 +6,7 @@ import { adminSignInAction, adminSignOutAction } from '@/server/admin-actions'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 
 import { FormError } from '../auth/form-controls'
+import { OtpField, otpRecoveryFromCopy } from '../auth/otp-field'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 
 export function AdminSignInForm({
@@ -50,19 +51,13 @@ export function AdminSignInForm({
         />
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
-        <span className="font-medium">{fromCopy(copy, 'adminPanel.twoFactorCode')}</span>
-        <input
-          type="text"
-          name="code"
-          inputMode="numeric"
-          autoComplete="one-time-code"
-          className="h-10 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40"
-        />
-        <span className="text-xs text-muted-foreground">
-          {fromCopy(copy, 'adminPanel.twoFactorCodeHint')}
-        </span>
-      </label>
+      <OtpField
+        label={fromCopy(copy, 'adminPanel.twoFactorCode')}
+        name="code"
+        required={false}
+        hint={fromCopy(copy, 'adminPanel.twoFactorCodeHint')}
+        recovery={otpRecoveryFromCopy(copy)}
+      />
 
       <button
         type="submit"

package/src/components/admin/badge-forms.tsx

@@ -10,6 +10,7 @@ import { removeBadgeAction, saveBadgeAction } from '@/server/group-badge-actions
 
 import { FormError, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+import { Saved } from './form-bits'
 
 const GHOST =
   'inline-flex h-8 items-center justify-center rounded-md border border-border px-3 text-xs font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
@@ -39,13 +40,11 @@ export function BadgeUploadForm({
       <h3 className="text-sm font-medium">{label}</h3>
 
       <FormError message={saved.error ?? removed.error} />
-      {(saved.notice === 'saved' || removed.notice === 'removed') && (
-        <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {saved.notice === 'saved'
-            ? fromCopy(copy, 'admin.saved')
-            : fromCopy(copy, 'adminPanel.badge.removed')}
-        </p>
-      )}
+      <Saved when={saved.notice === 'saved' || removed.notice === 'removed'}>
+        {saved.notice === 'saved'
+          ? fromCopy(copy, 'admin.saved')
+          : fromCopy(copy, 'adminPanel.badge.removed')}
+      </Saved>
 
       <div
         className={`flex min-h-12 items-center justify-center rounded-md border border-border bg-card p-2 ${

package/src/components/admin/branding-forms.tsx

@@ -8,6 +8,7 @@ import { removeLogoAction, saveLogoAction } from '@/server/branding-actions'
 
 import { FormError, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+import { Saved } from './form-bits'
 
 export interface LogoSlot {
   readonly scheme: 'light' | 'dark'
@@ -41,16 +42,10 @@ export function LogoUploadForm({
       </div>
 
       <FormError message={saved.error ?? removed.error} />
-      {saved.notice === 'saved' && (
-        <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {fromCopy(copy, 'adminPanel.branding.saved')}
-        </p>
-      )}
-      {removed.notice === 'removed' && (
-        <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {fromCopy(copy, 'adminPanel.branding.removed')}
-        </p>
-      )}
+      <Saved when={saved.notice === 'saved'}>{fromCopy(copy, 'adminPanel.branding.saved')}</Saved>
+      <Saved when={removed.notice === 'removed'}>
+        {fromCopy(copy, 'adminPanel.branding.removed')}
+      </Saved>
 
       <div
         className={`flex min-h-16 items-center justify-center rounded-md border border-border bg-card p-3 ${

package/src/components/admin/form-bits.tsx

@@ -1,11 +1,13 @@
+import { Alert, AlertDescription } from '@meith/ui'
+
 export const INPUT =
   'w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
-export function Saved({ when, children }: { when: boolean; children: React.ReactNode }) {
+export function Saved({ when = true, children }: { when?: boolean; children: React.ReactNode }) {
   if (!when) return null
   return (
-    <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-      {children}
-    </p>
+    <Alert tone="success">
+      <AlertDescription>{children}</AlertDescription>
+    </Alert>
   )
 }

package/src/components/admin/forum-forms.tsx

@@ -19,7 +19,7 @@ import {
 
 import { FormError, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
-import { INPUT } from './form-bits'
+import { INPUT, Saved } from './form-bits'
 
 const TOGGLES = [
   { name: 'isOpen', labelKey: 'adminForum.toggle.isOpen' },
@@ -49,11 +49,7 @@ export function ForumOptionsForm({ forum, copy }: { forum: ForumOptionsValues; c
   return (
     <form action={action} className="flex flex-col gap-4" noValidate>
       <FormError message={state.error} />
-      {state.notice === 'saved' && (
-        <p className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {fromCopy(copy, 'admin.saved')}
-        </p>
-      )}
+      <Saved when={state.notice === 'saved'}>{fromCopy(copy, 'admin.saved')}</Saved>
       <input type="hidden" name="forumId" value={forum.id} />
 
       <label className="flex flex-col gap-1 text-sm">
@@ -342,7 +338,9 @@ export function ForumPermissionRowForm({
             {formatFromCopy(copy, 'adminForum.saveGroup', { group: row.groupTitle })}
           </SubmitButton>
           {state.notice === 'saved' && (
-            <span className="text-xs text-muted-foreground">{fromCopy(copy, 'admin.saved')}</span>
+            <span className="text-xs font-medium text-moderation-approved">
+              {fromCopy(copy, 'admin.saved')}
+            </span>
           )}
         </div>
       </form>
@@ -366,11 +364,7 @@ export function CopyPermissionsForm({
   return (
     <form action={action} className="flex flex-col gap-3">
       <FormError message={state.error} />
-      {state.notice === 'copied' && (
-        <p className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {fromCopy(copy, 'adminForum.copied')}
-        </p>
-      )}
+      <Saved when={state.notice === 'copied'}>{fromCopy(copy, 'adminForum.copied')}</Saved>
       <input type="hidden" name="forumId" value={forumId} />
       <div>
         <SubmitButton>
@@ -418,11 +412,7 @@ export function CreateForumForm({
   return (
     <form action={action} className="flex flex-col gap-3" noValidate>
       <FormError message={state.error} />
-      {state.notice === 'created' && (
-        <p className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {fromCopy(copy, 'admin.created')}
-        </p>
-      )}
+      <Saved when={state.notice === 'created'}>{fromCopy(copy, 'admin.created')}</Saved>
 
       <div className="grid gap-3 sm:grid-cols-2">
         <label className="flex flex-col gap-1 text-sm">
@@ -486,11 +476,7 @@ export function MoveForumForm({
   return (
     <form action={action} className="flex flex-col gap-3" noValidate>
       <FormError message={state.error} />
-      {state.notice === 'moved' && (
-        <p className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {fromCopy(copy, 'adminForum.moved')}
-        </p>
-      )}
+      <Saved when={state.notice === 'moved'}>{fromCopy(copy, 'adminForum.moved')}</Saved>
       <input type="hidden" name="forumId" value={forumId} />
 
       <label className="flex flex-col gap-1 text-sm">
@@ -589,9 +575,7 @@ export function ModeratorsPanel({
 
       <form action={appoint} className={PANEL_CARD}>
         <FormError message={appointState.error} />
-        {appointState.notice === 'saved' && (
-          <p className="text-sm text-muted-foreground">{fromCopy(copy, 'admin.saved')}</p>
-        )}
+        <Saved when={appointState.notice === 'saved'}>{fromCopy(copy, 'admin.saved')}</Saved>
         <h3 className="text-sm font-medium">{fromCopy(copy, 'adminForum.appointTitle')}</h3>
         <input type="hidden" name="forumId" value={forumId} />
 

package/src/components/admin/mail-test-card.tsx

@@ -7,6 +7,7 @@ import { EMPTY_STATE, type FormState } from '@/server/auth-form-state'
 import { sendTestMailAction } from '@/server/mail-test-actions'
 
 import { type Copy, fromCopy } from '../shell/copy'
+import { Saved } from './form-bits'
 
 export function MailTestCard({
   summary,
@@ -61,11 +62,7 @@ export function MailTestCard({
         </p>
       )}
 
-      {state.notice !== undefined && (
-        <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {state.notice}
-        </p>
-      )}
+      <Saved when={state.notice !== undefined}>{state.notice}</Saved>
 
       <form action={submit} className="flex flex-col gap-2">
         <div>

package/src/components/admin/marketplace-forms.tsx

@@ -7,6 +7,7 @@ import { refreshMarketplaceAction } from '@/server/marketplace-actions'
 
 import { FormError } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
+import { Saved } from './form-bits'
 
 export function MarketplaceRefreshForm({ copy }: { copy: Copy }) {
   const [state, action] = useActionState(refreshMarketplaceAction, EMPTY_STATE)
@@ -14,11 +15,9 @@ export function MarketplaceRefreshForm({ copy }: { copy: Copy }) {
   return (
     <form action={action} className="flex flex-col gap-2">
       <FormError message={state.error} />
-      {state.notice === 'refreshed' && (
-        <p role="status" className="text-sm text-muted-foreground">
-          {fromCopy(copy, 'adminPanel.marketplace.refreshed')}
-        </p>
-      )}
+      <Saved when={state.notice === 'refreshed'}>
+        {fromCopy(copy, 'adminPanel.marketplace.refreshed')}
+      </Saved>
       <button
         type="submit"
         className="inline-flex h-9 w-fit items-center justify-center rounded-md border border-border px-3 text-sm font-medium transition-colors hover:border-primary hover:bg-accent"

package/src/components/admin/plugin-forms.tsx

@@ -11,7 +11,7 @@ import {
 
 import { FormError, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
-import { INPUT } from './form-bits'
+import { INPUT, Saved } from './form-bits'
 
 export interface PluginSettingField {
   readonly key: string
@@ -87,11 +87,7 @@ export function PluginSettingsForm({
   return (
     <form action={action} className="flex flex-col gap-4" noValidate>
       <FormError message={state.error} />
-      {state.notice === 'saved' && (
-        <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {fromCopy(copy, 'adminPanel.plugin.saved')}
-        </p>
-      )}
+      <Saved when={state.notice === 'saved'}>{fromCopy(copy, 'adminPanel.plugin.saved')}</Saved>
 
       <input type="hidden" name="key" value={pluginKey} />
 

package/src/components/admin/settings-form.tsx

@@ -8,7 +8,7 @@ import type { SettingFieldModel, SettingGroupModel } from '@/view/admin-settings
 
 import { FormError, SubmitButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
-import { INPUT } from './form-bits'
+import { INPUT, Saved } from './form-bits'
 
 function Control({ setting, copy }: { setting: SettingFieldModel; copy: Copy }) {
   const { field, key, value } = setting
@@ -95,11 +95,7 @@ export function AdminSettingsForm({
   return (
     <form action={action} className="flex flex-col gap-8" noValidate>
       <FormError message={state.error} />
-      {state.notice === 'saved' && (
-        <p className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {fromCopy(copy, 'adminPanel.setting.saved')}
-        </p>
-      )}
+      <Saved when={state.notice === 'saved'}>{fromCopy(copy, 'adminPanel.setting.saved')}</Saved>
       {state.notice === 'unchanged' && (
         <p className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
           {fromCopy(copy, 'adminPanel.setting.unchanged')}

package/src/components/admin/system-forms.tsx

@@ -14,13 +14,10 @@ import {
 
 import { FormError, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+import { Saved } from './form-bits'
 
 function Result({ children }: { children: React.ReactNode }) {
-  return (
-    <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-      {children}
-    </p>
-  )
+  return <Saved>{children}</Saved>
 }
 
 export function PruneSessionsForm({ prunable, copy }: { prunable: number; copy: Copy }) {

package/src/components/auth/otp-field.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { Input, Field as UiField } from '@meith/ui'
+import { InputOTP, InputOTPGroup, InputOTPSlot, REGEXP_ONLY_DIGITS } from '@meith/ui/input-otp'
+
+import { type Copy, fromCopy } from '../shell/copy'
+
+const OTP_LENGTH = 6
+const OTP_SLOTS = Array.from({ length: OTP_LENGTH }, (_, index) => index)
+
+export interface OtpRecoveryCopy {
+  readonly label: string
+  readonly hint?: string | undefined
+  readonly toRecovery: string
+  readonly toApp: string
+}
+
+export function otpRecoveryFromCopy(copy: Copy, hint?: string): OtpRecoveryCopy {
+  return {
+    label: fromCopy(copy, 'otp.recoveryLabel'),
+    toRecovery: fromCopy(copy, 'otp.useRecovery'),
+    toApp: fromCopy(copy, 'otp.useApp'),
+    ...(hint === undefined ? {} : { hint }),
+  }
+}
+
+export interface OtpFieldProps {
+  readonly label: string
+  readonly name?: string
+  readonly id?: string
+  readonly hint?: string | undefined
+  readonly error?: string | undefined
+  readonly required?: boolean
+  readonly recovery?: OtpRecoveryCopy | undefined
+}
+
+function Toggle({ onClick, children }: { onClick: () => void; children: React.ReactNode }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="self-start text-xs text-muted-foreground underline underline-offset-4 transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+    >
+      {children}
+    </button>
+  )
+}
+
+export function OtpField({
+  label,
+  name = 'code',
+  id,
+  hint,
+  error,
+  required = true,
+  recovery,
+}: OtpFieldProps) {
+  const [enhanced, setEnhanced] = useState(false)
+  const [value, setValue] = useState('')
+  const [useRecovery, setUseRecovery] = useState(false)
+
+  useEffect(() => {
+    setEnhanced(true)
+  }, [])
+
+  if (!enhanced) {
+    return (
+      <UiField
+        name={name}
+        label={label}
+        error={error ?? null}
+        {...(id === undefined ? {} : { id })}
+        {...(hint === undefined ? {} : { description: hint })}
+      >
+        {(control) => (
+          <Input
+            {...control}
+            type="text"
+            autoComplete="one-time-code"
+            required={required}
+            {...(recovery === undefined ? { inputMode: 'numeric' as const } : {})}
+          />
+        )}
+      </UiField>
+    )
+  }
+
+  if (recovery !== undefined && useRecovery) {
+    return (
+      <div className="flex flex-col gap-2">
+        <UiField
+          name={name}
+          label={recovery.label}
+          error={error ?? null}
+          {...(id === undefined ? {} : { id })}
+          {...(recovery.hint === undefined ? {} : { description: recovery.hint })}
+        >
+          {(control) => (
+            <Input {...control} type="text" autoComplete="one-time-code" required={required} />
+          )}
+        </UiField>
+        <Toggle onClick={() => setUseRecovery(false)}>{recovery.toApp}</Toggle>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <UiField
+        name={name}
+        label={label}
+        error={error ?? null}
+        {...(id === undefined ? {} : { id })}
+        {...(hint === undefined ? {} : { description: hint })}
+      >
+        {(control) => (
+          <InputOTP
+            {...control}
+            maxLength={OTP_LENGTH}
+            pattern={REGEXP_ONLY_DIGITS}
+            value={value}
+            onChange={setValue}
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            required={required}
+          >
+            <InputOTPGroup>
+              {OTP_SLOTS.map((slot) => (
+                <InputOTPSlot key={slot} index={slot} />
+              ))}
+            </InputOTPGroup>
+          </InputOTP>
+        )}
+      </UiField>
+      {recovery !== undefined ? (
+        <Toggle onClick={() => setUseRecovery(true)}>{recovery.toRecovery}</Toggle>
+      ) : null}
+    </div>
+  )
+}

package/src/components/auth/second-factor-form.tsx

@@ -8,7 +8,8 @@ import { abandonSecondFactorAction, verifySecondFactorAction } from '@/server/au
 import { EMPTY_STATE } from '@/server/auth-form-state'
 
 import { type Copy, fromCopy } from '../shell/copy'
-import { Field, FormError, SubmitButton } from './form-controls'
+import { FormError, SubmitButton } from './form-controls'
+import { OtpField, otpRecoveryFromCopy } from './otp-field'
 
 export function SecondFactorForm({
   next,
@@ -26,15 +27,15 @@ export function SecondFactorForm({
       <form action={action} className="flex flex-col gap-4" noValidate>
         <FormError message={state.error} />
 
-        <Field
+        <OtpField
           label={fromCopy(copy, 'authForm.secondFactor.code')}
           name="code"
-          autoComplete="one-time-code"
           hint={
             recoveryCodesLeft > 0
               ? fromCopy(copy, 'authForm.secondFactor.recoveryHint')
               : fromCopy(copy, 'authForm.secondFactor.recoveryHintExhausted')
           }
+          recovery={otpRecoveryFromCopy(copy)}
         />
 
         {next ? <input type="hidden" name="next" value={next} /> : null}

package/src/server/upgrade-notice.ts

@@ -6,7 +6,7 @@ import { planUpgrade, type UpgradeState, upgradeNotice } from '@meith/upgrade'
 
 import { activeDefinitions } from './plugin-host'
 
-export const CODE_VERSION = '0.23.2'
+export const CODE_VERSION = '0.24.0'
 
 export async function pendingUpgradeNotice(): Promise<string | null> {
   if (env.DATA_SOURCE !== 'postgres') return null

package/src/view/account-copy.ts

@@ -1,5 +1,6 @@
 import type { Translator } from '@meith/i18n'
 
+import { otpFieldCopy } from './auth-copy'
 import { copyFor, splitAround } from './copy'
 import { untranslated } from './time'
 
@@ -201,6 +202,7 @@ export function twoFactorFormsCopy(
     'accountForm.twoFactor.codes': t.t('accountForm.twoFactor.codes', {
       count: recoveryCodesLeft,
     }),
+    ...otpFieldCopy(t),
   }
 }
 

package/src/view/admin-panel-copy.ts

@@ -1,6 +1,7 @@
 import type { Translator } from '@meith/i18n'
 
 import { adminSharedCopy } from './admin-copy'
+import { otpFieldCopy } from './auth-copy'
 import { copyFor, patternCopy, splitAround } from './copy'
 import { untranslated } from './time'
 
@@ -21,6 +22,7 @@ export function adminFormsCopy(t: Translator = untranslated()): Readonly<Record<
       t,
     ),
     ...patternCopy(['adminPanel.idleNote'], t),
+    ...otpFieldCopy(t),
   }
 }
 

package/src/view/auth-copy.ts

@@ -79,19 +79,26 @@ export function resendVerificationFormCopy(
   return copyFor(['authForm.email', 'authForm.resend.submit'], t)
 }
 
+export function otpFieldCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
+  return copyFor(['otp.recoveryLabel', 'otp.useApp', 'otp.useRecovery'], t)
+}
+
 export function secondFactorFormCopy(
   t: Translator = untranslated(),
 ): Readonly<Record<string, string>> {
-  return copyFor(
-    [
-      'authForm.secondFactor.code',
-      'authForm.secondFactor.recoveryHint',
-      'authForm.secondFactor.recoveryHintExhausted',
-      'authForm.secondFactor.submit',
-      'authForm.secondFactor.cancel',
-    ],
-    t,
-  )
+  return {
+    ...copyFor(
+      [
+        'authForm.secondFactor.code',
+        'authForm.secondFactor.recoveryHint',
+        'authForm.secondFactor.recoveryHintExhausted',
+        'authForm.secondFactor.submit',
+        'authForm.secondFactor.cancel',
+      ],
+      t,
+    ),
+    ...otpFieldCopy(t),
+  }
 }
 
 export function passkeyCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {