@meith/web 0.16.0

package/proxy.ts

@@ -0,0 +1,160 @@
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { env } from '@meith/core/env'
+
+import { contentSecurityPolicy, newNonce, readsAsAsset } from './src/server/content-security-policy'
+import {
+  DEV_GUEST_COOKIE,
+  DEV_REMEMBER_COOKIE,
+  DEV_SESSION_COOKIE,
+  GUEST_COOKIE,
+  GUEST_COOKIE_DAYS,
+  guestCookie,
+  guestCookieName,
+  REMEMBER_COOKIE,
+  SESSION_COOKIE,
+} from './src/server/cookies'
+import {
+  FRESH_GUEST_HEADER,
+  NONCE_HEADER,
+  PATH_HEADER,
+  QUERY_HEADER,
+} from './src/server/location-header'
+import {
+  PREFERENCE_COOKIE_MAX_AGE,
+  THEME_COOKIE,
+  THEME_QUERY,
+  themeFromQuery,
+} from './src/view/theme-preference'
+
+export const PROTECTED_PREFIXES = [
+  '/usercp',
+  '/messages',
+  '/notifications',
+  '/subscriptions',
+  '/moderation',
+  '/modcp',
+  '/admin',
+]
+
+const RESUME_PATH = '/auth/resume'
+
+const DAY_MS = 86_400_000
+
+const CSP_HEADER = 'content-security-policy'
+
+interface Policy {
+  readonly nonce: string
+  readonly value: string
+}
+
+/**
+ * Passes the request through, and hands a reader something to be counted by.
+ *
+ * The cookie is minted here because the Edge is the only place that can set one
+ * on an ordinary page response — a render cannot. The row it stands for is
+ * written by the render, which has the database this runtime does not.
+ *
+ * Whether the client *returned* the cookie is the load-bearing part, and it
+ * cannot be read downstream: Next reflects a cookie set here into the request
+ * the render sees, so a first-ever visit is indistinguishable from a returning
+ * one by cookie alone. Hence the header — set when the cookie is new, deleted
+ * otherwise, so a crawler that never keeps one is never counted and a client
+ * cannot supply its own.
+ */
+function withPath(req: NextRequest, policy: Policy): NextResponse {
+  const fresh = !req.cookies.has(GUEST_COOKIE) && !req.cookies.has(DEV_GUEST_COOKIE)
+
+  const headers = new Headers(req.headers)
+  headers.set(NONCE_HEADER, policy.nonce)
+  headers.set(CSP_HEADER, policy.value)
+  headers.set(PATH_HEADER, req.nextUrl.pathname)
+  if (req.nextUrl.search === '') headers.delete(QUERY_HEADER)
+  else headers.set(QUERY_HEADER, req.nextUrl.search)
+  if (fresh) headers.set(FRESH_GUEST_HEADER, '1')
+  else headers.delete(FRESH_GUEST_HEADER)
+
+  const res = NextResponse.next({ request: { headers } })
+  if (!fresh) return res
+
+  const secure = req.nextUrl.protocol === 'https:'
+  res.cookies.set(
+    guestCookieName(secure),
+    crypto.randomUUID(),
+    guestCookie(new Date(Date.now() + GUEST_COOKIE_DAYS * DAY_MS), secure),
+  )
+  return res
+}
+
+function isProtected(pathname: string): boolean {
+  return PROTECTED_PREFIXES.some((p) => pathname === p || pathname.startsWith(`${p}/`))
+}
+
+function themeRedirect(req: NextRequest): NextResponse | null {
+  if (req.method !== 'GET') return null
+
+  const requested = themeFromQuery(req.nextUrl.searchParams.get(THEME_QUERY))
+  if (requested === null) return null
+
+  const url = req.nextUrl.clone()
+  url.searchParams.delete(THEME_QUERY)
+
+  const res = NextResponse.redirect(url)
+  res.cookies.set(THEME_COOKIE, requested, {
+    path: '/',
+    maxAge: PREFERENCE_COOKIE_MAX_AGE,
+    sameSite: 'lax',
+    httpOnly: false,
+  })
+  return res
+}
+
+function triage(req: NextRequest, policy: Policy): NextResponse {
+  const themed = themeRedirect(req)
+  if (themed !== null) return themed
+
+  const { pathname, search } = req.nextUrl
+  const hasSession = req.cookies.has(SESSION_COOKIE) || req.cookies.has(DEV_SESSION_COOKIE)
+  const hasRemember = req.cookies.has(REMEMBER_COOKIE) || req.cookies.has(DEV_REMEMBER_COOKIE)
+
+  if (hasSession) return withPath(req, policy)
+
+  if (hasRemember && pathname !== RESUME_PATH) {
+    const url = req.nextUrl.clone()
+    url.pathname = RESUME_PATH
+    url.search = ''
+    url.searchParams.set('next', `${pathname}${search}`)
+    return NextResponse.redirect(url)
+  }
+
+  if (!hasRemember && isProtected(pathname)) {
+    const url = req.nextUrl.clone()
+    url.pathname = '/login'
+    url.search = ''
+    url.searchParams.set('next', `${pathname}${search}`)
+    return NextResponse.redirect(url)
+  }
+
+  return withPath(req, policy)
+}
+
+export function proxy(req: NextRequest): NextResponse {
+  const nonce = newNonce()
+  const policy: Policy = {
+    nonce,
+    value: contentSecurityPolicy({
+      nonce,
+      development: env.NODE_ENV !== 'production',
+      remoteImages: env.REMOTE_IMAGES,
+    }),
+  }
+
+  const res = readsAsAsset(req.nextUrl.pathname) ? NextResponse.next() : triage(req, policy)
+
+  res.headers.set(CSP_HEADER, policy.value)
+  return res
+}
+
+export const config = {
+  matcher: ['/((?!_next/static|_next/image).*)'],
+}

package/src/components/account/active-sessions.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { Button } from '@meith/ui/button'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { revokeOtherSessionsAction, revokeSessionAction } from '@/server/session-actions'
+
+import { FormError } from '../auth/form-controls'
+import { type Copy, fromCopy } from '../shell/copy'
+
+const CARD = 'flex flex-col gap-4 rounded-lg border border-border bg-card p-5'
+
+const ROW =
+  'flex flex-wrap items-center justify-between gap-3 rounded-md border border-border px-3 py-2'
+
+export interface SessionView {
+  readonly id: number
+  readonly device: string
+  readonly detail: string
+  readonly current: boolean
+}
+
+export function ActiveSessions({
+  sessions,
+  copy,
+}: {
+  readonly sessions: readonly SessionView[]
+  readonly copy: Copy
+}) {
+  const [revokeState, revoke] = useActionState(revokeSessionAction, EMPTY_STATE)
+  const [allState, revokeAll] = useActionState(revokeOtherSessionsAction, EMPTY_STATE)
+
+  const others = sessions.filter((session) => !session.current).length
+
+  return (
+    <section className={CARD}>
+      <div className="flex flex-col gap-1">
+        <h2 className="text-lg font-semibold tracking-tight">
+          {fromCopy(copy, 'accountForm.sessions.title')}
+        </h2>
+        <p className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'accountForm.sessions.blurb')}
+        </p>
+      </div>
+
+      <FormError message={revokeState.error ?? allState.error} />
+
+      <ul className="flex flex-col gap-2">
+        {sessions.map((session) => (
+          <li key={session.id} className={ROW}>
+            <span className="flex flex-col text-sm">
+              <span className="font-medium">
+                {session.device}
+                {session.current ? (
+                  <span className="font-normal text-muted-foreground">
+                    {' '}
+                    {fromCopy(copy, 'accountForm.sessions.thisDevice')}
+                  </span>
+                ) : null}
+              </span>
+              <span className="text-xs text-muted-foreground">{session.detail}</span>
+            </span>
+
+            {session.current ? null : (
+              <form action={revoke}>
+                <input type="hidden" name="sessionId" value={session.id} />
+                <Button type="submit" variant="destructive" size="sm">
+                  {fromCopy(copy, 'accountForm.sessions.signOut')}
+                </Button>
+              </form>
+            )}
+          </li>
+        ))}
+      </ul>
+
+      {others > 0 ? (
+        <form action={revokeAll}>
+          <Button type="submit" variant="outline" size="sm">
+            {fromCopy(copy, 'accountForm.sessions.signOutElsewhere')}
+          </Button>
+        </form>
+      ) : null}
+    </section>
+  )
+}

package/src/components/account/avatar-form.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { AVATAR_BOX } from '@meith/avatars/limits'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { removeAvatarAction, saveAvatarAction } from '@/server/usercp-actions'
+
+import { FormError, SubmitButton } from '../auth/form-controls'
+import { type Copy, fromCopy } from '../shell/copy'
+
+const CARD = 'flex flex-col gap-3 rounded-lg border border-border bg-card p-4'
+
+export function AvatarForm({
+  currentUrl,
+  status,
+  failureReason,
+  locked,
+  lockedReason,
+  copy,
+}: {
+  currentUrl: string | null
+  status: 'none' | 'pending' | 'ready' | 'failed'
+  failureReason: string | null
+  locked: boolean
+  lockedReason: string | null
+  copy: Copy
+}) {
+  const [saveState, save] = useActionState(saveAvatarAction, EMPTY_STATE)
+  const [removeState, remove] = useActionState(removeAvatarAction, EMPTY_STATE)
+
+  if (locked) {
+    return (
+      <div className={CARD}>
+        <h2 className="text-lg font-semibold tracking-tight">
+          {fromCopy(copy, 'accountForm.avatar.lockedTitle')}
+        </h2>
+        <p className="text-sm text-muted-foreground">
+          {fromCopy(copy, 'accountForm.avatar.lockedBody')}
+          {lockedReason === null ? null : (
+            <>
+              {' '}
+              {copy['accountForm.locked.reasonLead']}
+              <span className="text-foreground">{lockedReason}</span>
+              {copy['accountForm.locked.reasonTail']}
+            </>
+          )}
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className={CARD}>
+        <h2 className="text-lg font-semibold tracking-tight">
+          {fromCopy(copy, 'accountForm.avatar.title')}
+        </h2>
+
+        {status === 'pending' && (
+          <p className="text-sm text-muted-foreground">
+            {fromCopy(copy, 'accountForm.avatar.pending')}
+          </p>
+        )}
+        {status === 'failed' && (
+          <p className="text-sm text-muted-foreground">
+            {failureReason ?? fromCopy(copy, 'accountForm.avatar.failed')}
+          </p>
+        )}
+
+        {currentUrl === null ? (
+          <p className="text-sm text-muted-foreground">
+            {fromCopy(copy, 'accountForm.avatar.none')}
+          </p>
+        ) : (
+          <img
+            src={currentUrl}
+            alt={fromCopy(copy, 'accountForm.avatar.title')}
+            width={AVATAR_BOX.width}
+            height={AVATAR_BOX.height}
+            className="h-24 w-24 rounded-md border border-border object-cover"
+          />
+        )}
+      </div>
+
+      <form action={save} className={CARD} noValidate>
+        <FormError message={saveState.error} />
+        <label className="flex flex-col gap-1 text-sm">
+          <span className="font-medium">{fromCopy(copy, 'accountForm.avatar.choose')}</span>
+          <input
+            type="file"
+            name="avatar"
+            accept=".png,.jpg,.jpeg"
+            className="rounded-md border border-border bg-background px-3 py-2 text-sm file:mr-3 file:rounded file:border-0 file:bg-muted file:px-3 file:py-1 file:text-sm"
+          />
+          <span className="text-xs text-muted-foreground">
+            {fromCopy(copy, 'accountForm.avatar.hint')}
+          </span>
+        </label>
+        <div>
+          <SubmitButton>{fromCopy(copy, 'accountForm.avatar.upload')}</SubmitButton>
+        </div>
+      </form>
+
+      {currentUrl !== null && (
+        <form action={remove} className={CARD} noValidate>
+          <FormError message={removeState.error} />
+          <p className="text-sm text-muted-foreground">
+            {fromCopy(copy, 'accountForm.avatar.removeBlurb')}
+          </p>
+          <div>
+            <SubmitButton>{fromCopy(copy, 'accountForm.avatar.remove')}</SubmitButton>
+          </div>
+        </form>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,76 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { Input } from '@meith/ui'
+import { Button } from '@meith/ui/button'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { proveCredentialAction } from '@/server/credential-proof-actions'
+
+import { FormError } from '../auth/form-controls'
+
+export interface CredentialProofCopy {
+  readonly codeConsumed: string
+  readonly codeLabel: string
+  readonly codeSubmit: string
+  readonly passwordLabel: string
+  readonly passwordSubmit: string
+}
+
+export function CredentialProofForm({
+  copy,
+  hasPassword,
+  hasSecondFactor,
+  next,
+}: {
+  readonly copy: CredentialProofCopy
+  readonly hasPassword: boolean
+  readonly hasSecondFactor: boolean
+  readonly next: string
+}) {
+  const [state, action] = useActionState(proveCredentialAction, EMPTY_STATE)
+
+  return (
+    <div className="flex flex-col gap-4">
+      <FormError message={state.error} />
+      {hasPassword ? (
+        <form
+          action={action}
+          className="flex flex-col gap-3 rounded-lg border border-border bg-card p-5"
+        >
+          <input type="hidden" name="method" value="password" />
+          <input type="hidden" name="next" value={next} />
+          <label className="flex flex-col gap-1 text-sm">
+            <span className="font-medium">{copy.passwordLabel}</span>
+            <Input name="password" type="password" autoComplete="current-password" required />
+          </label>
+          <div>
+            <Button type="submit" variant="primary">
+              {copy.passwordSubmit}
+            </Button>
+          </div>
+        </form>
+      ) : null}
+      {hasSecondFactor ? (
+        <form
+          action={action}
+          className="flex flex-col gap-3 rounded-lg border border-border bg-card p-5"
+        >
+          <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>
+          <p className="text-sm text-muted-foreground">{copy.codeConsumed}</p>
+          <div>
+            <Button type="submit" variant="primary">
+              {copy.codeSubmit}
+            </Button>
+          </div>
+        </form>
+      ) : null}
+    </div>
+  )
+}

package/src/components/account/logout-form.tsx

@@ -0,0 +1,14 @@
+import { logoutAction } from '@/server/auth-actions'
+
+export function LogoutForm({ label }: { label: string }) {
+  return (
+    <form action={logoutAction}>
+      <button
+        type="submit"
+        className="font-medium text-foreground hover:underline underline-offset-2"
+      >
+        {label}
+      </button>
+    </form>
+  )
+}

package/src/components/account/notification-forms.tsx

@@ -0,0 +1,157 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import {
+  markAllNotificationsReadAction,
+  markNotificationReadAction,
+  saveNotificationPreferencesAction,
+} from '@/server/notification-actions'
+
+import { FormError } from '../auth/form-controls'
+import { type Copy, fromCopy } from '../shell/copy'
+
+const BUTTON =
+  'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+const LINK_BUTTON =
+  'text-sm font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+export function MarkNotificationReadForm({
+  notificationId,
+  copy,
+}: {
+  notificationId: number
+  copy: Copy
+}) {
+  const [state, action] = useActionState(markNotificationReadAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="contents">
+      <input type="hidden" name="notificationId" value={notificationId} />
+      <FormError message={state.error} />
+      <button type="submit" className={LINK_BUTTON}>
+        {fromCopy(copy, 'accountForm.notifications.markRead')}
+      </button>
+    </form>
+  )
+}
+
+export function MarkAllNotificationsReadForm({ unread, copy }: { unread: number; copy: Copy }) {
+  const [state, action] = useActionState(markAllNotificationsReadAction, EMPTY_STATE)
+
+  if (unread === 0) return null
+
+  return (
+    <form action={action}>
+      <FormError message={state.error} />
+      <button type="submit" className={BUTTON}>
+        {fromCopy(copy, 'accountForm.notifications.markAllRead')}
+      </button>
+    </form>
+  )
+}
+
+export interface PreferenceRow {
+  readonly kind: string
+  readonly title: string
+  readonly description: string
+  readonly email: boolean
+  readonly push: boolean
+}
+
+const CHECKBOX =
+  'size-4 rounded border-border focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+export function NotificationPreferencesForm({
+  rows,
+  push,
+  copy,
+}: {
+  rows: readonly PreferenceRow[]
+  push: boolean
+  copy: Copy
+}) {
+  const [state, action] = useActionState(saveNotificationPreferencesAction, EMPTY_STATE)
+
+  return (
+    <form
+      action={action}
+      className="flex flex-col gap-5 rounded-lg border border-border bg-card p-5"
+    >
+      <FormError message={state.error} />
+
+      <fieldset className={push ? 'flex flex-col gap-5' : 'flex flex-col gap-4'}>
+        <legend className="text-sm font-medium">
+          {fromCopy(
+            copy,
+            push ? 'accountForm.notifications.channels' : 'accountForm.notifications.legend',
+          )}
+        </legend>
+
+        {rows.map((row) =>
+          push ? (
+            <div
+              key={row.kind}
+              className="flex flex-col gap-2 text-sm sm:flex-row sm:items-start sm:justify-between sm:gap-6"
+            >
+              <span className="sm:flex-1">
+                <span className="font-medium">{row.title}</span>
+                <span className="block text-muted-foreground">{row.description}</span>
+              </span>
+
+              <span className="flex shrink-0 items-center gap-5">
+                <label className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <input
+                    type="checkbox"
+                    name="email"
+                    value={row.kind}
+                    defaultChecked={row.email}
+                    className={CHECKBOX}
+                  />
+                  {fromCopy(copy, 'accountForm.notifications.email')}
+                </label>
+
+                <label className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <input
+                    type="checkbox"
+                    name="push"
+                    value={row.kind}
+                    defaultChecked={row.push}
+                    className={CHECKBOX}
+                  />
+                  {fromCopy(copy, 'accountForm.notifications.push')}
+                </label>
+              </span>
+            </div>
+          ) : (
+            <label key={row.kind} className="flex items-start gap-3 text-sm">
+              <input
+                type="checkbox"
+                name="email"
+                value={row.kind}
+                defaultChecked={row.email}
+                className={`mt-1 ${CHECKBOX}`}
+              />
+              <span>
+                <span className="font-medium">{row.title}</span>
+                <span className="block text-muted-foreground">{row.description}</span>
+              </span>
+            </label>
+          ),
+        )}
+      </fieldset>
+
+      <p className="text-xs text-muted-foreground">
+        {fromCopy(copy, 'accountForm.notifications.blurb')}
+      </p>
+
+      <div>
+        <button type="submit" className={BUTTON}>
+          {fromCopy(copy, 'accountForm.notifications.submit')}
+        </button>
+      </div>
+    </form>
+  )
+}

package/src/components/account/passkey-enrol.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { Alert, AlertDescription, Input } from '@meith/ui'
+import { Button } from '@meith/ui/button'
+
+import { enrolPasskey, passkeyMessage, passkeysAvailable } from '@/components/auth/passkey-client'
+
+import { type Copy, fromCopy } from '../shell/copy'
+
+export function PasskeyEnrol({ copy }: { readonly copy: Copy }) {
+  const [available, setAvailable] = useState<boolean | null>(null)
+  const [label, setLabel] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    setAvailable(passkeysAvailable())
+  }, [])
+
+  if (available === false) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        {fromCopy(copy, 'accountForm.passkey.unsupported')}
+      </p>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {error === null ? null : (
+        <Alert tone="error">
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'accountForm.passkey.label')}</span>
+        <Input
+          value={label}
+          maxLength={60}
+          placeholder={fromCopy(copy, 'accountForm.passkey.placeholder')}
+          onChange={(event) => setLabel(event.target.value)}
+        />
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'accountForm.passkey.hint')}
+        </span>
+      </label>
+
+      <div>
+        <Button
+          type="button"
+          variant="primary"
+          disabled={busy || available === null}
+          onClick={() => {
+            setError(null)
+            setBusy(true)
+            enrolPasskey(label, copy)
+              .then(() => {
+                window.location.assign('/usercp/security?passkey=added')
+              })
+              .catch((problem: unknown) => {
+                const message = passkeyMessage(problem, copy)
+                if (message.includes('recent verification')) {
+                  window.location.assign('/usercp/security/verify?next=%2Fusercp%2Fsecurity')
+                  return
+                }
+                setError(message)
+                setBusy(false)
+              })
+          }}
+        >
+          {busy
+            ? fromCopy(copy, 'authForm.passkey.waiting')
+            : fromCopy(copy, 'accountForm.passkey.submit')}
+        </Button>
+      </div>
+    </div>
+  )
+}