create-freakpunch 0.0.0-stage → 0.2.0

package/template/src/pages/dashboard/dashboard-page.tsx

@@ -0,0 +1,55 @@
+import { lazy, Suspense } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Blocks } from 'lucide-react'
+
+import { useAuth } from '@/core/auth/use-auth'
+import { isDemo } from '@/core/config/runtime'
+import { Page } from '@/core/components/page'
+import { EmptyState, LoadingState } from '@/core/components/states'
+import { enabledModules } from '@/modules/registry'
+import { QuickActionsCard } from './quick-actions'
+
+// A glob, not an import: the public demo's sample dashboard isn't part of installed copies.
+const demoLoader = Object.values(
+  import.meta.glob<{ DemoDashboardPage: React.ComponentType }>('/src/demo/dashboard-page.tsx'),
+)[0]
+const DemoDashboardPage =
+  isDemo && demoLoader ? lazy(async () => ({ default: (await demoLoader()).DemoDashboardPage })) : null
+
+const moduleWidgets = enabledModules.flatMap((m) => m.dashboardWidgets ?? [])
+
+function greetingKey() {
+  const h = new Date().getHours()
+  return h < 12 ? 'greeting.morning' : h < 18 ? 'greeting.afternoon' : 'greeting.evening'
+}
+
+export default function DashboardPage() {
+  const { user } = useAuth()
+  const { t } = useTranslation(['dashboard', 'common'])
+
+  if (DemoDashboardPage) {
+    return (
+      <Suspense fallback={<LoadingState />}>
+        <DemoDashboardPage />
+      </Suspense>
+    )
+  }
+
+  return (
+    <Page
+      title={t(greetingKey(), { name: user?.firstName || t('greeting.fallbackName') })}
+      documentTitle={t('common:nav.dashboard')}
+      description={t('readyDescription')}
+    >
+      {moduleWidgets.map((Widget, i) => (
+        <Widget key={i} />
+      ))}
+      {enabledModules.length === 0 && (
+        <div className="rounded-xl border bg-card shadow-(--shadow-card)">
+          <EmptyState icon={<Blocks />} title={t('noModules.title')} description={t('noModules.description')} />
+        </div>
+      )}
+      <QuickActionsCard />
+    </Page>
+  )
+}

package/template/src/pages/dashboard/quick-actions.tsx

@@ -0,0 +1,37 @@
+import { Link } from 'react-router'
+import { ArrowRight } from 'lucide-react'
+
+import { usePermissions } from '@/core/auth/can'
+import { Panel } from '@/core/components/page'
+import { useAnyT } from '@/core/i18n/keys'
+import { quickActions } from '@/core/modules/navigation'
+
+export function QuickActionsCard() {
+  const t = useAnyT()
+  const { can } = usePermissions()
+  return (
+    <Panel label={t('dashboard:panels.quickActions')} bodyClassName="p-2">
+      <ul className="flex flex-col gap-0.5">
+        {quickActions
+          .filter((a) => !a.permission || can(a.permission))
+          .map(({ path, label, description, icon: Icon }) => (
+          <li key={path}>
+            <Link
+              to={path}
+              className="group flex items-center gap-3 rounded-lg p-2 outline-none hover:bg-fill-1 focus-visible:ring-2 focus-visible:ring-ring/40"
+            >
+              <span className="flex size-9 shrink-0 items-center justify-center rounded-lg border bg-raised text-muted-foreground shadow-(--shadow-raised) group-hover:text-primary">
+                <Icon className="size-4" />
+              </span>
+              <span className="min-w-0 flex-1">
+                <span className="block text-sm font-medium">{t(label)}</span>
+                {description && <span className="block truncate text-xs text-muted-foreground">{t(description)}</span>}
+              </span>
+              <ArrowRight className="size-4 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100" />
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </Panel>
+  )
+}

package/template/src/pages/login-page.tsx

@@ -0,0 +1,152 @@
+import { useEffect } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useTranslation } from 'react-i18next'
+import { Navigate, useNavigate, useSearchParams } from 'react-router'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Field, FieldDescription, FieldGroup, FieldLabel } from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+import { Spinner } from '@/components/ui/spinner'
+import { demoSeed } from '@/core/api/demo'
+import { ApiError } from '@/core/api/http'
+import { useAuth } from '@/core/auth/use-auth'
+import { useCompanySettings } from '@/core/company/hooks'
+import { useAppName } from '@/core/company/use-app-name'
+import { isDemo } from '@/core/config/runtime'
+import { FormFieldError } from '@/core/components/form-error'
+import { LanguageSwitcher } from '@/core/i18n/language-switcher'
+import { vmsg } from '@/core/i18n/keys'
+import { ThemeToggle } from '@/core/theme/theme-toggle'
+
+const schema = z.object({
+  email: z.email(vmsg('validation.email')),
+  password: z.string().min(1, vmsg('auth:signIn.passwordRequired')),
+})
+type Values = z.infer<typeof schema>
+
+/** Only allow same-app redirects (no open redirect via ?redirect=https://…). */
+function safeRedirect(value: string | null) {
+  return value && value.startsWith('/app') ? value : '/app'
+}
+
+export default function LoginPage() {
+  const { isAuthenticated, login } = useAuth()
+  const [params] = useSearchParams()
+  const navigate = useNavigate()
+  const redirect = safeRedirect(params.get('redirect'))
+  const { t } = useTranslation('auth')
+
+  const { register, handleSubmit, formState } = useForm<Values>({
+    resolver: zodResolver(schema),
+    defaultValues: { email: demoSeed<string>('loginEmail') ?? '', password: '' },
+  })
+  const { errors, isSubmitting } = formState
+
+  const appName = useAppName()
+  const title = t('signIn.title')
+  useEffect(() => {
+    document.title = `${title} · ${appName}`
+  }, [title, appName])
+
+  if (isAuthenticated && !isSubmitting) return <Navigate to={redirect} replace />
+
+  const onSubmit = handleSubmit(async (values) => {
+    try {
+      const session = await login(values)
+      toast.success(t('signIn.welcome', { name: session.user.firstName }))
+      navigate(redirect, { replace: true })
+    } catch (e) {
+      const status = e instanceof ApiError ? e.status : undefined
+      const description =
+        status === 401 ? t('signIn.invalid') : status === 403 ? t('signIn.inactive') : e instanceof Error ? e.message : undefined
+      toast.error(t('signIn.failed'), { description })
+    }
+  })
+
+  return (
+    // Equal 1fr rows above and below keep the card exactly centered; the demo note sits in the bottom row.
+    <div className="relative grid min-h-svh grid-rows-[1fr_auto_1fr] justify-items-center bg-canvas px-4 py-10 md:px-10">
+      <div className="absolute top-3 right-3 flex items-center gap-1.5 sm:top-4 sm:right-4">
+        <LanguageSwitcher />
+        <ThemeToggle />
+      </div>
+
+      <Card className="row-start-2 w-full max-w-sm gap-0 rounded-(--radius-panel) py-0 shadow-(--shadow-panel) md:max-w-4xl">
+        <CardContent className="grid p-0 md:grid-cols-2">
+          <form onSubmit={onSubmit} noValidate className="p-6 sm:p-8 md:p-10">
+            <FieldGroup className="gap-4">
+              <div className="mb-2 flex flex-col items-center gap-2 text-center">
+                <h1 className="text-2xl font-semibold tracking-tight">{t('signIn.heading')}</h1>
+                <p className="text-sm text-balance text-muted-foreground">
+                  {t('signIn.description', { name: appName })}
+                </p>
+              </div>
+              <Field data-invalid={!!errors.email}>
+                <FieldLabel htmlFor="email">{t('signIn.email')}</FieldLabel>
+                <Input
+                  id="email"
+                  type="email"
+                  autoComplete="email"
+                  autoFocus={!isDemo}
+                  size="lg"
+                  aria-invalid={!!errors.email}
+                  {...register('email')}
+                />
+                <FormFieldError error={errors.email} />
+              </Field>
+              <Field data-invalid={!!errors.password}>
+                <FieldLabel htmlFor="password">{t('signIn.password')}</FieldLabel>
+                <Input
+                  id="password"
+                  type="password"
+                  autoComplete="current-password"
+                  autoFocus={isDemo}
+                  size="lg"
+                  aria-invalid={!!errors.password}
+                  {...register('password')}
+                />
+                <FormFieldError error={errors.password} />
+              </Field>
+              <Button type="submit" size="lg" className="mt-2 w-full" disabled={isSubmitting}>
+                {isSubmitting && <Spinner data-icon="inline-start" />}
+                {t('signIn.submit')}
+              </Button>
+              <FieldDescription className="text-center">{t('signIn.invitationOnly')}</FieldDescription>
+            </FieldGroup>
+          </form>
+          <BrandPanel />
+        </CardContent>
+      </Card>
+
+      {isDemo && (
+        <p className="row-start-3 max-w-sm self-end pt-4 text-center text-xs text-balance text-muted-foreground md:max-w-md">
+          {t('signIn.demo', { domain: demoSeed<string>('loginDomain') })}
+        </p>
+      )}
+    </div>
+  )
+}
+
+/** Image side of the split card: a neutral, token-only placeholder (no stock photo). Hidden on mobile. */
+function BrandPanel() {
+  const appName = useAppName()
+  const logo = useCompanySettings().data?.branding.logoLight
+  return (
+    <div aria-hidden className="relative hidden items-center justify-center overflow-hidden border-l bg-fill-1 md:flex">
+      <div className="absolute inset-0 bg-[radial-gradient(var(--border)_1px,transparent_1px)] bg-size-[16px_16px] mask-[radial-gradient(ellipse_at_center,black_30%,transparent_75%)]" />
+      <div className="relative flex size-24 items-center justify-center rounded-(--radius-panel) bg-raised shadow-(--shadow-raised) ring-1 ring-border">
+        {logo ? (
+          <img src={logo} alt="" className="max-h-16 max-w-16 object-contain" />
+        ) : (
+          <span className="flex size-12 items-center justify-center rounded-xl bg-foreground text-xl font-semibold text-background">
+            {appName[0]?.toUpperCase()}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}

package/template/src/pages/no-access-page.tsx

@@ -0,0 +1,11 @@
+import { useTranslation } from 'react-i18next'
+
+import { Message } from './not-found-page'
+
+/** Shown (inside the app panel) when a route guard denies access. */
+export default function NoAccessPage() {
+  const { t } = useTranslation('errors')
+  return (
+    <Message code={t('noAccess.code')} title={t('noAccess.title')} description={t('noAccess.description')} inset />
+  )
+}

package/template/src/pages/not-found-page.tsx

@@ -0,0 +1,61 @@
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { isRouteErrorResponse, useRouteError } from 'react-router'
+import { ArrowLeft } from 'lucide-react'
+
+import { ButtonLink } from '@/core/components/button-link'
+import { cn } from '@/lib/utils'
+
+/** Centered full-page message: 404, unexpected error, no access. */
+export function Message({
+  code,
+  title,
+  description,
+  inset,
+}: {
+  code: string
+  title: string
+  description: string
+  inset?: boolean
+}) {
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    document.title = title
+  }, [title])
+
+  return (
+    <div className={cn('flex flex-col items-center justify-center px-6 text-center', inset ? 'py-24' : 'min-h-svh bg-canvas')}>
+      <span className="label-caps">{code}</span>
+      <h1 className="mt-3 text-3xl font-semibold tracking-tight">{title}</h1>
+      <p className="mt-2 max-w-sm text-sm text-muted-foreground">{description}</p>
+      <ButtonLink to={inset ? '/app' : '/'} variant="outline" className="mt-8">
+        <ArrowLeft data-icon="inline-start" />
+        {inset ? t('actions.backToDashboard') : t('actions.backHome')}
+      </ButtonLink>
+    </div>
+  )
+}
+
+/** 404. `inset` renders it inside the app panel instead of full screen. */
+export default function NotFoundPage({ inset }: { inset?: boolean }) {
+  const { t } = useTranslation('errors')
+  return (
+    <Message code={t('notFound.code')} title={t('notFound.title')} description={t('notFound.description')} inset={inset} />
+  )
+}
+
+/** Route errorElement: 404s from loaders and unexpected render errors. */
+export function RouteError({ inset }: { inset?: boolean }) {
+  const error = useRouteError()
+  const { t } = useTranslation('errors')
+  if (isRouteErrorResponse(error) && error.status === 404) return <NotFoundPage inset={inset} />
+  return (
+    <Message
+      code={t('unexpected.code')}
+      title={t('unexpected.title')}
+      description={error instanceof Error ? error.message : t('unexpected.description')}
+      inset={inset}
+    />
+  )
+}

package/template/src/pages/settings/account/account.service.ts

@@ -0,0 +1,128 @@
+import { ApiError } from '@/core/api/http'
+import { demoSeed } from '@/core/api/demo'
+import { createMockDocument, delay } from '@/core/api/mock'
+import { appConfig } from '@/app.config'
+import { authStore } from '@/core/auth/auth-store'
+import { localCredentials } from '@/core/auth/local-credentials'
+import { isDemo } from '@/core/config/runtime'
+import {
+  type ActiveSession,
+  type LoginEvent,
+  type PasswordChange,
+  type SecurityOverview,
+  type TwoFactorSetup,
+} from './types'
+
+/**
+ * The signed-in user's own security settings (notification settings live in
+ * `core/notifications`). A real
+ * backend implements this with `http` (e.g. PUT /me/password,
+ * POST /me/2fa/setup, GET /me/sessions); screens stay the same.
+ */
+export interface AccountService {
+  security(): Promise<SecurityOverview>
+  changePassword(input: PasswordChange): Promise<void>
+  startTwoFactorSetup(): Promise<TwoFactorSetup>
+  confirmTwoFactor(code: string): Promise<{ recoveryCodes: string[] }>
+  disableTwoFactor(): Promise<void>
+  sessions(): Promise<ActiveSession[]>
+  revokeSession(id: string): Promise<void>
+  revokeOtherSessions(): Promise<void>
+  loginHistory(): Promise<LoginEvent[]>
+}
+
+/** Error codes in ApiError.message; screens map them to translations. */
+export const accountErrors = { wrongPassword: 'wrong_password', invalidCode: 'invalid_code' } as const
+
+export type AccountDoc = {
+  security: SecurityOverview
+  sessions: ActiveSession[]
+  history: LoginEvent[]
+}
+
+const blankAccount = (): AccountDoc => ({
+  security: { passwordChangedAt: new Date().toISOString(), twoFactorEnabled: false },
+  sessions: [],
+  history: [],
+})
+
+function createMockAccountService(): AccountService {
+  const docs = new Map<string, ReturnType<typeof createMockDocument<AccountDoc>>>()
+  const doc = () => {
+    const userId = authStore.getSession()?.user.id
+    if (!userId) throw new ApiError(401, 'unauthorized')
+    if (!docs.has(userId)) docs.set(userId, createMockDocument(`account:${userId}`, () => demoSeed<(id: string) => AccountDoc>('account')?.(userId) ?? blankAccount()))
+    return docs.get(userId)!
+  }
+  const update = (patch: Partial<AccountDoc>) => doc().save({ ...doc().get(), ...patch })
+  let pendingSecret: string | null = null
+
+  return {
+    async security() {
+      await delay(150, 300)
+      return doc().get().security
+    },
+
+    async changePassword({ current, next }) {
+      await delay(500, 800)
+      if (isDemo) {
+        // Demo rule so the error path can be tried: "wrong" is never the current password.
+        if (current === 'wrong') throw new ApiError(400, accountErrors.wrongPassword)
+      } else {
+        const userId = authStore.getSession()?.user.id ?? ''
+        if (!(await localCredentials.verify(userId, current))) throw new ApiError(400, accountErrors.wrongPassword)
+        await localCredentials.set(userId, next)
+      }
+      update({ security: { ...doc().get().security, passwordChangedAt: new Date().toISOString() } })
+    },
+
+    async startTwoFactorSetup() {
+      await delay(200, 400)
+      const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567'
+      pendingSecret = Array.from({ length: 32 }, () => alphabet[Math.floor(Math.random() * 32)]).join('')
+      const email = authStore.getSession()?.user.email ?? ''
+      return {
+        secret: pendingSecret.match(/.{4}/g)!.join(' '),
+        otpauthUrl: `otpauth://totp/${encodeURIComponent(appConfig.name)}:${encodeURIComponent(email)}?secret=${pendingSecret}&issuer=${encodeURIComponent(appConfig.name)}`,
+      }
+    },
+
+    async confirmTwoFactor(code) {
+      await delay(400, 700)
+      if (!pendingSecret || !/^\d{6}$/.test(code)) throw new ApiError(400, accountErrors.invalidCode)
+      pendingSecret = null
+      update({
+        security: { ...doc().get().security, twoFactorEnabled: true, twoFactorEnabledAt: new Date().toISOString() },
+      })
+      const chunk = () => Math.random().toString(36).slice(2, 7)
+      return { recoveryCodes: Array.from({ length: 8 }, () => `${chunk()}-${chunk()}`) }
+    },
+
+    async disableTwoFactor() {
+      await delay()
+      update({ security: { ...doc().get().security, twoFactorEnabled: false, twoFactorEnabledAt: undefined } })
+    },
+
+    async sessions() {
+      await delay(150, 350)
+      return doc().get().sessions
+    },
+
+    async revokeSession(id) {
+      await delay()
+      update({ sessions: doc().get().sessions.filter((s) => s.id !== id || s.current) })
+    },
+
+    async revokeOtherSessions() {
+      await delay()
+      update({ sessions: doc().get().sessions.filter((s) => s.current) })
+    },
+
+    async loginHistory() {
+      await delay(150, 350)
+      return doc().get().history
+    },
+  }
+}
+
+export const accountService: AccountService = createMockAccountService()

package/template/src/pages/settings/account/components/mock-qr.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from 'react'
+
+import { seededRandom } from '@/core/api/mock'
+
+const SIZE = 25
+
+/**
+ * A QR-looking placeholder derived from `value` (deterministic). A real
+ * backend returns the otpauth URL and a QR library or the API renders it.
+ */
+export function MockQr({ value, label, className }: { value: string; label: string; className?: string }) {
+  const cells = useMemo(() => {
+    let seed = 0
+    for (const ch of value) seed = (seed * 31 + ch.charCodeAt(0)) % 2147483647
+    const rand = seededRandom(seed || 1)
+    const finder = (x: number, y: number) =>
+      [
+        [0, 0],
+        [SIZE - 7, 0],
+        [0, SIZE - 7],
+      ].some(([fx, fy]) => x >= fx! && x < fx! + 7 && y >= fy! && y < fy! + 7)
+    const out: [number, number][] = []
+    for (let y = 0; y < SIZE; y++) {
+      for (let x = 0; x < SIZE; x++) {
+        if (finder(x, y)) continue
+        if (rand() > 0.52) out.push([x, y])
+      }
+    }
+    return out
+  }, [value])
+
+  const finderAt = (x: number, y: number) => (
+    <g key={`${x}-${y}`}>
+      <rect x={x} y={y} width={7} height={7} fill="currentColor" />
+      <rect x={x + 1} y={y + 1} width={5} height={5} className="fill-card" />
+      <rect x={x + 2} y={y + 2} width={3} height={3} fill="currentColor" />
+    </g>
+  )
+
+  return (
+    <svg viewBox={`-1 -1 ${SIZE + 2} ${SIZE + 2}`} role="img" aria-label={label} className={className} shapeRendering="crispEdges">
+      {cells.map(([x, y]) => (
+        <rect key={`${x}:${y}`} x={x} y={y} width={1} height={1} fill="currentColor" />
+      ))}
+      {finderAt(0, 0)}
+      {finderAt(SIZE - 7, 0)}
+      {finderAt(0, SIZE - 7)}
+    </svg>
+  )
+}

package/template/src/pages/settings/account/components/password-strength.tsx

@@ -0,0 +1,38 @@
+import { useTranslation } from 'react-i18next'
+import { Check, Minus } from 'lucide-react'
+
+import { checkPassword, passwordStrength, type PasswordPolicy } from '@/core/company/password-policy'
+import { cn } from '@/lib/utils'
+
+const barColor = ['bg-danger', 'bg-danger', 'bg-warning', 'bg-success', 'bg-success'] as const
+const levels = ['tooWeak', 'weak', 'fair', 'good', 'strong'] as const
+
+/** Four-segment strength bar + the company's password rules, checked live. */
+export function PasswordStrength({ password, policy }: { password: string; policy: PasswordPolicy }) {
+  const { t } = useTranslation('account')
+  const score = passwordStrength(password)
+  const { rules } = checkPassword(policy, password)
+
+  return (
+    <div className="flex flex-col gap-2.5">
+      <div className="flex items-center gap-3">
+        <div className="flex flex-1 gap-1" aria-hidden>
+          {[1, 2, 3, 4].map((i) => (
+            <span key={i} className={cn('h-1 flex-1 rounded-full', password && score >= i ? barColor[score] : 'bg-fill-3')} />
+          ))}
+        </div>
+        <span className="w-20 text-right text-xs text-muted-foreground" aria-live="polite">
+          {password ? t(`security.password.strength.${levels[score]}`) : t('security.password.strength.label')}
+        </span>
+      </div>
+      <ul className="grid gap-1 text-xs sm:grid-cols-2">
+        {rules.map(({ rule, met }) => (
+          <li key={rule} className={cn('flex items-center gap-1.5', met ? 'text-foreground' : 'text-muted-foreground')}>
+            {met ? <Check className="size-3.5 text-success" /> : <Minus className="size-3.5" />}
+            {t(`security.password.rules.${rule}`, { count: policy.minLength })}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

package/template/src/pages/settings/account/components/two-factor-dialog.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Copy } from 'lucide-react'
+import { toast } from 'sonner'
+
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+import { Spinner } from '@/components/ui/spinner'
+import { LoadingState } from '@/core/components/states'
+import { useConfirmTwoFactor, useTwoFactorSetup } from '../hooks'
+import { MockQr } from './mock-qr'
+
+/** Two steps: scan + verify a code, then show recovery codes once. */
+export function TwoFactorDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
+  const { t } = useTranslation(['account', 'common'])
+  const setup = useTwoFactorSetup()
+  const confirm = useConfirmTwoFactor()
+  const [code, setCode] = useState('')
+  const [invalid, setInvalid] = useState(false)
+  const [recoveryCodes, setRecoveryCodes] = useState<string[] | null>(null)
+
+  const { mutate: start, reset: resetSetup } = setup
+  useEffect(() => {
+    if (open) start()
+  }, [open, start])
+
+  function close() {
+    onOpenChange(false)
+    setCode('')
+    setInvalid(false)
+    setRecoveryCodes(null)
+    resetSetup()
+  }
+
+  async function verify() {
+    if (!/^\d{6}$/.test(code)) return setInvalid(true)
+    try {
+      const result = await confirm.mutateAsync(code)
+      setRecoveryCodes(result.recoveryCodes)
+      toast.success(t('security.twoFactor.dialog.enabledToast'))
+    } catch {
+      setInvalid(true)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && close()}>
+      <DialogContent showCloseButton={false} className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            {recoveryCodes ? t('security.twoFactor.dialog.recoveryTitle') : t('security.twoFactor.dialog.title')}
+          </DialogTitle>
+          <DialogDescription>
+            {recoveryCodes ? t('security.twoFactor.dialog.recoveryDescription') : t('security.twoFactor.dialog.scanStep')}
+          </DialogDescription>
+        </DialogHeader>
+
+        {recoveryCodes ? (
+          <ul className="grid grid-cols-2 gap-2 rounded-xl border bg-fill-1 p-3 text-sm tabular-nums">
+            {recoveryCodes.map((c) => (
+              <li key={c}>{c}</li>
+            ))}
+          </ul>
+        ) : !setup.data ? (
+          <LoadingState className="py-10" />
+        ) : (
+          <form
+            id="two-factor-form"
+            className="flex flex-col gap-4"
+            onSubmit={(e) => {
+              e.preventDefault()
+              void verify()
+            }}
+          >
+            <div className="flex flex-col items-center gap-3 sm:flex-row sm:items-start">
+              <div className="rounded-xl border bg-card p-2 text-foreground shadow-(--shadow-card)">
+                <MockQr value={setup.data.otpauthUrl} label={t('security.twoFactor.dialog.qrLabel')} className="size-36" />
+              </div>
+              <div className="min-w-0 text-xs text-muted-foreground">
+                <p>{t('security.twoFactor.dialog.manual')}</p>
+                <p className="mt-1.5 rounded-lg bg-fill-2 px-2 py-1.5 tabular-nums text-[11px] break-all text-foreground">
+                  {setup.data.secret}
+                </p>
+              </div>
+            </div>
+            <Field data-invalid={invalid}>
+              <FieldLabel htmlFor="totp">{t('security.twoFactor.dialog.codeLabel')}</FieldLabel>
+              <Input
+                id="totp"
+                inputMode="numeric"
+                autoComplete="one-time-code"
+                maxLength={6}
+                autoFocus
+                value={code}
+                aria-invalid={invalid}
+                className="tabular-nums tracking-[0.3em]"
+                onChange={(e) => {
+                  setCode(e.target.value.replace(/\D/g, '').slice(0, 6))
+                  setInvalid(false)
+                }}
+              />
+              <FieldDescription>{t('security.twoFactor.dialog.codeHint')}</FieldDescription>
+              {invalid && <FieldError>{t('security.twoFactor.dialog.codeInvalid')}</FieldError>}
+            </Field>
+          </form>
+        )}
+
+        <DialogFooter>
+          {recoveryCodes ? (
+            <>
+              <Button
+                variant="outline"
+                onClick={() => {
+                  void navigator.clipboard?.writeText(recoveryCodes.join('\n'))
+                  toast.success(t('common:actions.copied'))
+                }}
+              >
+                <Copy data-icon="inline-start" />
+                {t('security.twoFactor.dialog.copyCodes')}
+              </Button>
+              <Button onClick={close}>{t('security.twoFactor.dialog.done')}</Button>
+            </>
+          ) : (
+            <>
+              <Button variant="ghost" onClick={close}>
+                {t('common:actions.cancel')}
+              </Button>
+              <Button type="submit" form="two-factor-form" disabled={!setup.data || confirm.isPending}>
+                {confirm.isPending && <Spinner data-icon="inline-start" />}
+                {t('security.twoFactor.dialog.verify')}
+              </Button>
+            </>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}