@voltro/cli 0.28.0 → 0.30.0

package/templates/apps/frontend-auth/src/locales/de.ts

@@ -0,0 +1,66 @@
+// German catalog. Mirrors every key in `en.ts` — `defineLocale<typeof en>()`
+// fails the build if a key is missing. Translate the prose only.
+import { defineLocale } from '@voltro/i18n'
+import en from './en'
+
+export default defineLocale<typeof en>()({
+  'meta.login.title':  'Anmelden',
+  'meta.signup.title': 'Konto erstellen',
+  'meta.forgot.title': 'Passwort zurücksetzen',
+  'meta.reset.title':  'Neues Passwort festlegen',
+  'meta.magic.title':  'Magischer Link',
+  'meta.verify.title': 'Wird geprüft',
+  'meta.logout.title': 'Abmeldung',
+
+  'lang.label': 'Sprache',
+
+  'auth.email':       'E-Mail',
+  'auth.password':    'Passwort',
+  'auth.newPassword': 'Neues Passwort',
+  'auth.pending':     'Bitte warten…',
+  'auth.error':       'Das hat nicht geklappt. Prüfe deine Angaben und versuche es erneut.',
+
+  'login.title':    'Anmelden',
+  'login.submit':   'Anmelden',
+  'login.forgot':   'Passwort vergessen?',
+  'login.magic':    'Link per E-Mail senden',
+  'login.toSignup': 'Konto erstellen',
+
+  'signup.title':   'Konto erstellen',
+  'signup.submit':  'Konto erstellen',
+  'signup.toLogin': 'Konto vorhanden? Anmelden',
+
+  'forgot.title':   'Passwort zurücksetzen',
+  'forgot.body':    'Gib deine E-Mail ein und wir senden dir einen Link zum Zurücksetzen.',
+  'forgot.submit':  'Link senden',
+  'forgot.sent':    'Falls zu dieser E-Mail ein Konto existiert, ist ein Link unterwegs.',
+  'forgot.toLogin': '← Zurück zur Anmeldung',
+
+  'reset.title':   'Neues Passwort festlegen',
+  'reset.body':    'Wähle ein neues Passwort für dein Konto.',
+  'reset.submit':  'Passwort aktualisieren',
+  'reset.done':    'Dein Passwort wurde aktualisiert. Du kannst dich jetzt anmelden.',
+  'reset.failed':  'Dieser Link ist ungültig oder abgelaufen. Fordere einen neuen an.',
+  'reset.toLogin': '← Zurück zur Anmeldung',
+
+  'magic.title':   'Mit einem Link anmelden',
+  'magic.body':    'Wir senden dir einen einmaligen Anmeldelink — kein Passwort nötig.',
+  'magic.submit':  'Link senden',
+  'magic.sent':    'Falls zu dieser E-Mail ein Konto existiert, ist ein Anmeldelink unterwegs.',
+  'magic.toLogin': '← Zurück zur Anmeldung',
+
+  'verify.title':   'Dein Link wird geprüft',
+  'verify.pending': 'Einen Moment, wir melden dich an…',
+  'verify.success': 'Geschafft — du wirst weitergeleitet…',
+  'verify.failed':  'Dieser Link ist ungültig oder abgelaufen. Fordere einen neuen an.',
+  'verify.noToken': 'Diesem Link fehlt sein Token. Fordere einen neuen an.',
+  'verify.toLogin': '← Zurück zur Anmeldung',
+
+  'logout.title': 'Abmeldung',
+  'logout.body':  'Du wirst abgemeldet…',
+
+  'pw.weak':   'Schwach',
+  'pw.fair':   'Mittel',
+  'pw.good':   'Gut',
+  'pw.strong': 'Stark',
+})

package/templates/apps/frontend-auth/src/locales/en.ts

@@ -0,0 +1,76 @@
+// Base catalog — the source of truth for this app's UI strings. Every key here
+// MUST be mirrored in `de.ts`; `defineLocale<typeof en>()` enforces that parity
+// at build time.
+import { defineCatalog } from '@voltro/i18n'
+
+export default defineCatalog({
+  // Browser tab titles — locale-aware via each page's `meta({ locale })`.
+  'meta.login.title':  'Sign in',
+  'meta.signup.title': 'Create account',
+  'meta.forgot.title': 'Reset password',
+  'meta.reset.title':  'Set a new password',
+  'meta.magic.title':  'Magic link',
+  'meta.verify.title': 'Verifying',
+  'meta.logout.title': 'Signing out',
+
+  'lang.label': 'Language',
+
+  // ---- Shared field labels ----
+  'auth.email':       'Email',
+  'auth.password':    'Password',
+  'auth.newPassword': 'New password',
+  'auth.pending':     'Please wait…',
+  'auth.error':       'That didn’t work. Check your details and try again.',
+
+  // ---- Sign in ----
+  'login.title':    'Sign in',
+  'login.submit':   'Sign in',
+  'login.forgot':   'Forgot password?',
+  'login.magic':    'Email me a link',
+  'login.toSignup': 'Create an account',
+
+  // ---- Sign up ----
+  'signup.title':   'Create your account',
+  'signup.submit':  'Create account',
+  'signup.toLogin': 'Have an account? Sign in',
+
+  // ---- Forgot password ----
+  'forgot.title':   'Reset your password',
+  'forgot.body':    'Enter your email and we’ll send you a reset link.',
+  'forgot.submit':  'Send reset link',
+  'forgot.sent':    'If that email has an account, a reset link is on its way.',
+  'forgot.toLogin': '← Back to sign in',
+
+  // ---- Reset password ----
+  'reset.title':   'Set a new password',
+  'reset.body':    'Choose a new password for your account.',
+  'reset.submit':  'Update password',
+  'reset.done':    'Your password has been updated. You can sign in now.',
+  'reset.failed':  'That reset link is invalid or has expired. Request a new one.',
+  'reset.toLogin': '← Back to sign in',
+
+  // ---- Magic link ----
+  'magic.title':   'Sign in with a link',
+  'magic.body':    'We’ll email you a one-time sign-in link — no password needed.',
+  'magic.submit':  'Send me a link',
+  'magic.sent':    'If that email has an account, a sign-in link is on its way.',
+  'magic.toLogin': '← Back to sign in',
+
+  // ---- Verify (link consumer) ----
+  'verify.title':   'Verifying your link',
+  'verify.pending': 'One moment while we sign you in…',
+  'verify.success': 'You’re in — redirecting…',
+  'verify.failed':  'That link is invalid or has expired. Request a new one.',
+  'verify.noToken': 'This link is missing its token. Request a new one.',
+  'verify.toLogin': '← Back to sign in',
+
+  // ---- Logout ----
+  'logout.title': 'Signing out',
+  'logout.body':  'Signing you out…',
+
+  // ---- Password strength meter ----
+  'pw.weak':   'Weak',
+  'pw.fair':   'Fair',
+  'pw.good':   'Good',
+  'pw.strong': 'Strong',
+} as const)

package/templates/apps/frontend-auth/src/locales/index.ts

@@ -0,0 +1,14 @@
+// Catalog lookup OUTSIDE React — for a page's `meta({ locale })` locale-aware
+// <title>. This app is cookie-i18n (no `/<locale>` URL prefix), so @voltro/web
+// hands `meta` the active locale from the `voltro:locale` cookie. Inside React use
+// `<T>` / `useT()` via the framework's auto-wired <I18nProvider> instead.
+import en from './en'
+import de from './de'
+
+// Both catalogs share `en`'s keys (defineLocale enforces the mirror), so a
+// known-key lookup returns `string` — which is what `PageMeta.title` requires
+// under exactOptionalPropertyTypes.
+export type Messages = Record<keyof typeof en, string>
+
+export const getCatalog = (locale?: string): Messages =>
+  (locale === 'de' ? de : en) as Messages

package/templates/apps/frontend-auth/src/pages/forgot/page.tsx

@@ -0,0 +1,51 @@
+// Forgot password — URL `/forgot`. POST /auth/password-reset { email } always
+// returns 202 (no account enumeration — the same "check your email" whether or
+// not the address exists). The api emails a link to `/reset?token=…` (delivery
+// needs `sendEmail` wired on the api; without it the route still 202s).
+import type { ReactNode } from 'react'
+import { useState, type FormEvent } from 'react'
+import type { PageMeta } from '@voltro/web'
+import { T, useT } from '@voltro/i18n'
+import { AuthShell } from '../../components/AuthShell'
+import { postAuth } from '../../lib/auth'
+import { getCatalog } from '../../locales'
+
+export const renderMode = 'static' as const
+
+export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
+  title: getCatalog(locale)['meta.forgot.title'],
+})
+
+export default function Forgot(): ReactNode {
+  const [email, setEmail] = useState('')
+  const [pending, setPending] = useState(false)
+  const [sent, setSent] = useState(false)
+  const emailLabel = useT('auth.email')
+
+  const onSubmit = (e: FormEvent): void => {
+    e.preventDefault()
+    setPending(true)
+    void postAuth('/auth/password-reset', { email })
+      .then(() => { setSent(true); setPending(false) })
+      .catch(() => { setSent(true); setPending(false) }) // still show the neutral message
+  }
+
+  return (
+    <AuthShell titleId="forgot.title" footer={<a href="/login"><T id="forgot.toLogin" /></a>}>
+      {sent ? (
+        <p className="ok" role="status"><T id="forgot.sent" /></p>
+      ) : (
+        <form className="auth-form" onSubmit={onSubmit}>
+          <p className="muted"><T id="forgot.body" /></p>
+          <label>
+            <span><T id="auth.email" /></span>
+            <input type="email" required aria-label={emailLabel} value={email} onChange={(e) => setEmail(e.target.value)} />
+          </label>
+          <button type="submit" className="btn" disabled={pending}>
+            <T id={pending ? 'auth.pending' : 'forgot.submit'} />
+          </button>
+        </form>
+      )}
+    </AuthShell>
+  )
+}

package/templates/apps/frontend-auth/src/pages/layout.tsx

@@ -0,0 +1,12 @@
+// Root layout — wraps EVERY page (marketing + dashboard). Thin: it loads the
+// stylesheet and lets each AREA layout ((marketing)/layout.tsx,
+// dashboard/layout.tsx) supply its own chrome. Layouts nest, so a dashboard
+// page is wrapped root → dashboard.
+//
+// Don't render <html>/<head>/<body> here — the framework shell owns them.
+import type { ReactNode } from 'react'
+import '../globals.css'
+
+export default function RootLayout({ children }: { readonly children: ReactNode }): ReactNode {
+  return <>{children}</>
+}

package/templates/apps/frontend-auth/src/pages/login/page.test.tsx

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+//
+// The sign-in page. Asserts config + that it renders the credential form and the
+// footer navigation to the other flows. The network submit (CSRF + POST
+// /auth/sign-in) is exercised against a running api by `voltro dev`, not here.
+
+import { afterEach, describe, expect, test } from 'vitest'
+import { act, createElement, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { I18nProvider } from '@voltro/i18n'
+import enCatalog from '../../locales/en'
+
+const { default: Login, meta, renderMode } = await import('./page')
+
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+let container: HTMLDivElement
+let root: Root
+
+const render = (node: ReactNode): void => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  act(() => {
+    root = createRoot(container)
+    root.render(
+      createElement(I18nProvider, { locale: 'en', messages: enCatalog, defaultLocale: 'en', children: node }),
+    )
+  })
+}
+
+afterEach(() => {
+  if (root) act(() => root.unmount())
+  container?.remove()
+  document.body.innerHTML = ''
+})
+
+describe('login — config', () => {
+  test('is a static page titled Sign in', () => {
+    expect(renderMode).toBe('static')
+    expect(meta({ locale: 'en' }).title).toBe('Sign in')
+  })
+})
+
+describe('login — render', () => {
+  test('renders email + password inputs and the flow links', () => {
+    render(createElement(Login))
+    expect(container.querySelector('input[type="email"]')).not.toBeNull()
+    expect(container.querySelector('input[type="password"]')).not.toBeNull()
+    expect(container.querySelector('a[href="/signup"]')).not.toBeNull()
+    expect(container.querySelector('a[href="/forgot"]')).not.toBeNull()
+    expect(container.querySelector('a[href="/magic"]')).not.toBeNull()
+  })
+})

package/templates/apps/frontend-auth/src/pages/login/page.tsx

@@ -0,0 +1,67 @@
+// Sign in — URL `/login`. Email + password → POST /auth/sign-in (CSRF-guarded).
+// On success we do a FULL navigation to the safelisted `?next=` (default
+// AUTH_HOME) so the destination app's SSR gate re-runs with the fresh cookie.
+import type { ReactNode } from 'react'
+import { useState, type FormEvent } from 'react'
+import type { PageMeta } from '@voltro/web'
+import { T, useT } from '@voltro/i18n'
+import { AuthShell } from '../../components/AuthShell'
+import { AUTH_HOME } from '../../config'
+import { postAuth } from '../../lib/auth'
+import { nextFromLocation } from '../../lib/redirect'
+import { getCatalog } from '../../locales'
+
+export const renderMode = 'static' as const
+
+export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
+  title: getCatalog(locale)['meta.login.title'],
+})
+
+export default function Login(): ReactNode {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [pending, setPending] = useState(false)
+  const [failed, setFailed] = useState(false)
+  const emailLabel = useT('auth.email')
+  const passwordLabel = useT('auth.password')
+
+  const onSubmit = (e: FormEvent): void => {
+    e.preventDefault()
+    setPending(true)
+    setFailed(false)
+    void postAuth('/auth/sign-in', { email, password })
+      .then((res) => {
+        if (res.ok) window.location.assign(nextFromLocation(AUTH_HOME))
+        else { setFailed(true); setPending(false) }
+      })
+      .catch(() => { setFailed(true); setPending(false) })
+  }
+
+  return (
+    <AuthShell
+      titleId="login.title"
+      footer={
+        <>
+          <a href="/forgot"><T id="login.forgot" /></a>
+          <a href="/magic"><T id="login.magic" /></a>
+          <a href="/signup"><T id="login.toSignup" /></a>
+        </>
+      }
+    >
+      <form className="auth-form" onSubmit={onSubmit}>
+        <label>
+          <span><T id="auth.email" /></span>
+          <input type="email" required aria-label={emailLabel} value={email} onChange={(e) => setEmail(e.target.value)} />
+        </label>
+        <label>
+          <span><T id="auth.password" /></span>
+          <input type="password" required aria-label={passwordLabel} value={password} onChange={(e) => setPassword(e.target.value)} />
+        </label>
+        {failed ? <p className="error-text"><T id="auth.error" /></p> : null}
+        <button type="submit" className="btn" disabled={pending}>
+          <T id={pending ? 'auth.pending' : 'login.submit'} />
+        </button>
+      </form>
+    </AuthShell>
+  )
+}

package/templates/apps/frontend-auth/src/pages/logout/page.tsx

@@ -0,0 +1,28 @@
+// Logout — URL `/logout`. On mount it POSTs /auth/sign-out (revokes the session
+// row + clears the cookie), then sends the browser to /login regardless of the
+// result (a failed sign-out still shouldn't strand the user).
+import type { ReactNode } from 'react'
+import { useEffect } from 'react'
+import type { PageMeta } from '@voltro/web'
+import { T } from '@voltro/i18n'
+import { AuthShell } from '../../components/AuthShell'
+import { postAuth } from '../../lib/auth'
+import { getCatalog } from '../../locales'
+
+export const renderMode = 'static' as const
+
+export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
+  title: getCatalog(locale)['meta.logout.title'],
+})
+
+export default function Logout(): ReactNode {
+  useEffect(() => {
+    void postAuth('/auth/sign-out', {}).finally(() => window.location.assign('/login'))
+  }, [])
+
+  return (
+    <AuthShell titleId="logout.title">
+      <p className="muted" role="status"><T id="logout.body" /></p>
+    </AuthShell>
+  )
+}

package/templates/apps/frontend-auth/src/pages/magic/page.tsx

@@ -0,0 +1,51 @@
+// Magic link — URL `/magic`. Passwordless sign-in: POST /auth/magic-link
+// { email } mints a single-use, short-lived token and (when `sendEmail` is wired
+// on the api) emails a link to `/verify?token=…`. Always shows the neutral
+// "check your email" so it can't be used to probe which addresses exist.
+import type { ReactNode } from 'react'
+import { useState, type FormEvent } from 'react'
+import type { PageMeta } from '@voltro/web'
+import { T, useT } from '@voltro/i18n'
+import { AuthShell } from '../../components/AuthShell'
+import { postAuth } from '../../lib/auth'
+import { getCatalog } from '../../locales'
+
+export const renderMode = 'static' as const
+
+export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
+  title: getCatalog(locale)['meta.magic.title'],
+})
+
+export default function Magic(): ReactNode {
+  const [email, setEmail] = useState('')
+  const [pending, setPending] = useState(false)
+  const [sent, setSent] = useState(false)
+  const emailLabel = useT('auth.email')
+
+  const onSubmit = (e: FormEvent): void => {
+    e.preventDefault()
+    setPending(true)
+    void postAuth('/auth/magic-link', { email })
+      .then(() => { setSent(true); setPending(false) })
+      .catch(() => { setSent(true); setPending(false) })
+  }
+
+  return (
+    <AuthShell titleId="magic.title" footer={<a href="/login"><T id="magic.toLogin" /></a>}>
+      {sent ? (
+        <p className="ok" role="status"><T id="magic.sent" /></p>
+      ) : (
+        <form className="auth-form" onSubmit={onSubmit}>
+          <p className="muted"><T id="magic.body" /></p>
+          <label>
+            <span><T id="auth.email" /></span>
+            <input type="email" required aria-label={emailLabel} value={email} onChange={(e) => setEmail(e.target.value)} />
+          </label>
+          <button type="submit" className="btn" disabled={pending}>
+            <T id={pending ? 'auth.pending' : 'magic.submit'} />
+          </button>
+        </form>
+      )}
+    </AuthShell>
+  )
+}

package/templates/apps/frontend-auth/src/pages/page.tsx

@@ -0,0 +1,26 @@
+// Root — URL `/`. The auth app has no landing of its own; send visitors to
+// /login (preserving any `?next=`/`?token=` query so a deep link survives).
+import type { ReactNode } from 'react'
+import { useEffect } from 'react'
+import type { PageMeta } from '@voltro/web'
+import { T } from '@voltro/i18n'
+import { AuthShell } from '../components/AuthShell'
+import { getCatalog } from '../locales'
+
+export const renderMode = 'static' as const
+
+export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
+  title: getCatalog(locale)['meta.login.title'],
+})
+
+export default function Index(): ReactNode {
+  useEffect(() => {
+    const search = window.location.search
+    window.location.replace(`/login${search}`)
+  }, [])
+  return (
+    <AuthShell titleId="login.title">
+      <p className="muted"><a href="/login"><T id="login.submit" /></a></p>
+    </AuthShell>
+  )
+}

package/templates/apps/frontend-auth/src/pages/reset/page.test.tsx

@@ -0,0 +1,51 @@
+// @vitest-environment jsdom
+//
+// The reset page. Asserts config + that submitting with NO `?token=` in the URL
+// (jsdom's default location) surfaces the invalid-link message without a network
+// call — the guard that a reset can't proceed tokenless.
+
+import { afterEach, describe, expect, test } from 'vitest'
+import { act, createElement, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { I18nProvider } from '@voltro/i18n'
+import enCatalog from '../../locales/en'
+
+const { default: Reset, meta, renderMode } = await import('./page')
+
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+let container: HTMLDivElement
+let root: Root
+
+const render = (node: ReactNode): void => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  act(() => {
+    root = createRoot(container)
+    root.render(
+      createElement(I18nProvider, { locale: 'en', messages: enCatalog, defaultLocale: 'en', children: node }),
+    )
+  })
+}
+
+afterEach(() => {
+  if (root) act(() => root.unmount())
+  container?.remove()
+  document.body.innerHTML = ''
+})
+
+describe('reset — config', () => {
+  test('is a static page titled Set a new password', () => {
+    expect(renderMode).toBe('static')
+    expect(meta({ locale: 'en' }).title).toBe('Set a new password')
+  })
+})
+
+describe('reset — tokenless guard', () => {
+  test('submitting without a ?token= shows the invalid-link message', () => {
+    render(createElement(Reset))
+    const form = container.querySelector('form')!
+    act(() => { form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true })) })
+    expect(container.querySelector('.error-text')?.textContent).toContain('invalid or has expired')
+  })
+})

package/templates/apps/frontend-auth/src/pages/reset/page.tsx

@@ -0,0 +1,63 @@
+// Reset password — URL `/reset?token=…`. The link the reset email points at.
+// Reads the single-use token from the URL and POSTs it with the new password to
+// /auth/password-reset/confirm. On success the api invalidates the token and the
+// user signs in with the new password.
+import type { ReactNode } from 'react'
+import { useState, type FormEvent } from 'react'
+import type { PageMeta } from '@voltro/web'
+import { T, useT } from '@voltro/i18n'
+import { AuthShell } from '../../components/AuthShell'
+import { PasswordStrength } from '../../components/PasswordStrength'
+import { postAuth } from '../../lib/auth'
+import { tokenFromLocation } from '../../lib/redirect'
+import { getCatalog } from '../../locales'
+
+export const renderMode = 'static' as const
+
+export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
+  title: getCatalog(locale)['meta.reset.title'],
+})
+
+export default function Reset(): ReactNode {
+  const [password, setPassword] = useState('')
+  const [pending, setPending] = useState(false)
+  const [failed, setFailed] = useState(false)
+  const [done, setDone] = useState(false)
+  const passwordLabel = useT('auth.newPassword')
+
+  const onSubmit = (e: FormEvent): void => {
+    e.preventDefault()
+    const token = tokenFromLocation()
+    if (!token) { setFailed(true); return }
+    setPending(true)
+    setFailed(false)
+    void postAuth('/auth/password-reset/confirm', { token, password })
+      .then((res) => {
+        if (res.ok) setDone(true)
+        else setFailed(true)
+        setPending(false)
+      })
+      .catch(() => { setFailed(true); setPending(false) })
+  }
+
+  return (
+    <AuthShell titleId="reset.title" footer={<a href="/login"><T id="reset.toLogin" /></a>}>
+      {done ? (
+        <p className="ok" role="status"><T id="reset.done" /></p>
+      ) : (
+        <form className="auth-form" onSubmit={onSubmit}>
+          <p className="muted"><T id="reset.body" /></p>
+          <label>
+            <span><T id="auth.newPassword" /></span>
+            <input type="password" required minLength={8} aria-label={passwordLabel} value={password} onChange={(e) => setPassword(e.target.value)} />
+          </label>
+          <PasswordStrength value={password} />
+          {failed ? <p className="error-text"><T id="reset.failed" /></p> : null}
+          <button type="submit" className="btn" disabled={pending}>
+            <T id={pending ? 'auth.pending' : 'reset.submit'} />
+          </button>
+        </form>
+      )}
+    </AuthShell>
+  )
+}

package/templates/apps/frontend-auth/src/pages/signup/page.tsx

@@ -0,0 +1,60 @@
+// Sign up — URL `/signup`. Email + password → POST /auth/sign-up (registers +
+// auto signs in, setting the session cookie). A live password-strength meter is
+// advisory; the api is the authority on policy.
+import type { ReactNode } from 'react'
+import { useState, type FormEvent } from 'react'
+import type { PageMeta } from '@voltro/web'
+import { T, useT } from '@voltro/i18n'
+import { AuthShell } from '../../components/AuthShell'
+import { PasswordStrength } from '../../components/PasswordStrength'
+import { AUTH_HOME } from '../../config'
+import { postAuth } from '../../lib/auth'
+import { nextFromLocation } from '../../lib/redirect'
+import { getCatalog } from '../../locales'
+
+export const renderMode = 'static' as const
+
+export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
+  title: getCatalog(locale)['meta.signup.title'],
+})
+
+export default function Signup(): ReactNode {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [pending, setPending] = useState(false)
+  const [failed, setFailed] = useState(false)
+  const emailLabel = useT('auth.email')
+  const passwordLabel = useT('auth.password')
+
+  const onSubmit = (e: FormEvent): void => {
+    e.preventDefault()
+    setPending(true)
+    setFailed(false)
+    void postAuth('/auth/sign-up', { email, password })
+      .then((res) => {
+        if (res.ok) window.location.assign(nextFromLocation(AUTH_HOME))
+        else { setFailed(true); setPending(false) }
+      })
+      .catch(() => { setFailed(true); setPending(false) })
+  }
+
+  return (
+    <AuthShell titleId="signup.title" footer={<a href="/login"><T id="signup.toLogin" /></a>}>
+      <form className="auth-form" onSubmit={onSubmit}>
+        <label>
+          <span><T id="auth.email" /></span>
+          <input type="email" required aria-label={emailLabel} value={email} onChange={(e) => setEmail(e.target.value)} />
+        </label>
+        <label>
+          <span><T id="auth.password" /></span>
+          <input type="password" required minLength={8} aria-label={passwordLabel} value={password} onChange={(e) => setPassword(e.target.value)} />
+        </label>
+        <PasswordStrength value={password} />
+        {failed ? <p className="error-text"><T id="auth.error" /></p> : null}
+        <button type="submit" className="btn" disabled={pending}>
+          <T id={pending ? 'auth.pending' : 'signup.submit'} />
+        </button>
+      </form>
+    </AuthShell>
+  )
+}