@meith/web 0.16.0

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

@@ -0,0 +1,151 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import {
+  subscribeAction,
+  unsubscribeAction,
+  unsubscribeByTokenAction,
+} from '@/server/subscription-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 QUIET_BUTTON =
+  'inline-flex h-9 items-center justify-center rounded-md border border-border px-3 text-sm font-medium transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+const GHOST_BUTTON =
+  'inline-flex h-9 items-center justify-center rounded-md px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+const FIELD =
+  'rounded-md border border-border bg-background px-2 py-1 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+export interface ModeOption {
+  readonly value: string
+  readonly label: string
+}
+
+export function FollowForm({
+  target,
+  targetId,
+  mode,
+  modes,
+  back,
+  label,
+  copy,
+}: {
+  target: 'thread' | 'forum'
+  targetId: number
+  mode: string | null
+  modes: readonly ModeOption[]
+  back: string
+  label: string
+  copy: Copy
+}) {
+  const [state, action] = useActionState(subscribeAction, EMPTY_STATE)
+  const [stopState, stopAction] = useActionState(unsubscribeAction, EMPTY_STATE)
+
+  return (
+    <section aria-label={label} className="flex flex-col gap-2">
+      <FormError message={state.error ?? stopState.error} />
+
+      <div className="flex flex-wrap items-center gap-2">
+        <form action={action} className="flex flex-wrap items-center gap-2">
+          <input type="hidden" name="target" value={target} />
+          <input type="hidden" name="targetId" value={targetId} />
+          <input type="hidden" name="back" value={back} />
+
+          <label className="text-sm">
+            <span className="mr-2">
+              {mode === null ? label : fromCopy(copy, 'accountForm.follow.notifyMe')}
+            </span>
+            <select
+              name="mode"
+              className={FIELD}
+              defaultValue={mode ?? 'instant'}
+              aria-label={fromCopy(copy, 'accountForm.follow.frequency')}
+            >
+              {modes.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <button type="submit" className={QUIET_BUTTON}>
+            {mode === null
+              ? fromCopy(copy, 'accountForm.follow.follow')
+              : fromCopy(copy, 'accountForm.follow.save')}
+          </button>
+        </form>
+
+        {mode !== null && (
+          <form action={stopAction}>
+            <input type="hidden" name="target" value={target} />
+            <input type="hidden" name="targetId" value={targetId} />
+            <input type="hidden" name="back" value={back} />
+            <button type="submit" className={GHOST_BUTTON}>
+              {fromCopy(copy, 'accountForm.follow.stop')}
+            </button>
+          </form>
+        )}
+      </div>
+    </section>
+  )
+}
+
+export function SubscriptionRowForm({
+  target,
+  targetId,
+  mode,
+  modes,
+  copy,
+}: {
+  target: 'thread' | 'forum'
+  targetId: number
+  mode: string
+  modes: readonly ModeOption[]
+  copy: Copy
+}) {
+  return (
+    <FollowForm
+      target={target}
+      targetId={targetId}
+      mode={mode}
+      modes={modes}
+      back="/subscriptions"
+      label={fromCopy(copy, 'accountForm.follow.notifyMe')}
+      copy={copy}
+    />
+  )
+}
+
+export function UnsubscribeConfirmForm({
+  token,
+  description,
+  copy,
+}: {
+  token: string
+  description: string
+  copy: Copy
+}) {
+  const [state, action] = useActionState(unsubscribeByTokenAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-4">
+      <FormError message={state.error} />
+      <input type="hidden" name="token" value={token} />
+      <p className="text-sm">{description}</p>
+      <div>
+        <button type="submit" className={BUTTON}>
+          {fromCopy(copy, 'accountForm.follow.unsubscribe')}
+        </button>
+      </div>
+    </form>
+  )
+}

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

@@ -0,0 +1,226 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { Button } from '@meith/ui/button'
+
+import { EMPTY_STATE, type FormState } from '@/server/auth-form-state'
+import {
+  abandonTwoFactorAction,
+  beginTwoFactorAction,
+  confirmTwoFactorAction,
+  disableTwoFactorAction,
+  replaceRecoveryCodesAction,
+} from '@/server/two-factor-actions'
+import { RECOVERY_CODES_FIELD } from '@/view/two-factor'
+
+import { Field, 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 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'
+
+function RecoveryCodes({ state, copy }: { readonly state: FormState; readonly copy: Copy }) {
+  const codes = state.values?.[RECOVERY_CODES_FIELD]
+  if (codes === undefined || codes === '') return null
+
+  return (
+    <div className="flex flex-col gap-2 rounded-md border border-border bg-muted p-4">
+      <p className="text-sm font-medium">{fromCopy(copy, 'accountForm.twoFactor.recoverySave')}</p>
+      <p className="text-xs text-muted-foreground">
+        {fromCopy(copy, 'accountForm.twoFactor.recoveryBlurb')}
+      </p>
+      <ul className="grid grid-cols-2 gap-1 font-mono text-sm">
+        {codes.split('\n').map((code) => (
+          <li key={code}>{code}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export function TwoFactorSetup({
+  enrolment,
+  copy,
+}: {
+  readonly enrolment: { readonly secret: string; readonly uri: string } | null
+  readonly copy: Copy
+}) {
+  const [state, action] = useActionState(confirmTwoFactorAction, EMPTY_STATE)
+  const [abandonState, abandon] = useActionState(abandonTwoFactorAction, EMPTY_STATE)
+
+  if (state.values?.[RECOVERY_CODES_FIELD] !== undefined || enrolment === null) {
+    return (
+      <section className={CARD}>
+        <h2 className="text-lg font-semibold tracking-tight">
+          {fromCopy(copy, 'accountForm.twoFactor.enabledTitle')}
+        </h2>
+        <RecoveryCodes state={state} copy={copy} />
+        <p className="text-xs text-muted-foreground">
+          {copy['accountForm.twoFactor.writtenDownLead']}
+          <a href="/usercp/security" className="underline underline-offset-4">
+            {fromCopy(copy, 'accountForm.twoFactor.backToSecurity')}
+          </a>
+          {copy['accountForm.twoFactor.writtenDownTail']}
+        </p>
+      </section>
+    )
+  }
+
+  const { secret, uri } = enrolment
+
+  return (
+    <section className={CARD}>
+      <h2 className="text-lg font-semibold tracking-tight">
+        {fromCopy(copy, 'accountForm.twoFactor.setupTitle')}
+      </h2>
+
+      <ol className="flex list-decimal flex-col gap-3 pl-5 text-sm">
+        <li>
+          {copy['accountForm.twoFactor.step1Lead']}
+          <a href={uri} className="underline underline-offset-4">
+            {fromCopy(copy, 'accountForm.twoFactor.step1Link')}
+          </a>
+          {copy['accountForm.twoFactor.step1Tail']}
+        </li>
+        <li>
+          {fromCopy(copy, 'accountForm.twoFactor.step2')}
+          <code className="mt-1 block break-all rounded-md border border-border bg-muted px-3 py-2 font-mono text-sm">
+            {secret}
+          </code>
+        </li>
+        <li>{fromCopy(copy, 'accountForm.twoFactor.step3')}</li>
+      </ol>
+
+      <form action={action} className="flex flex-col gap-4">
+        <FormError message={state.error} />
+        <Field
+          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">
+          <button type="submit" className={BUTTON}>
+            {fromCopy(copy, 'accountForm.twoFactor.turnOn')}
+          </button>
+        </div>
+      </form>
+
+      <form action={abandon}>
+        <FormError message={abandonState.error} />
+        <Button type="submit" variant="ghost" size="sm">
+          {fromCopy(copy, 'accountForm.twoFactor.cancel')}
+        </Button>
+      </form>
+    </section>
+  )
+}
+
+export function TwoFactorPanel({
+  enrolled,
+  required,
+  hasPassword,
+  recoveryCodesLeft,
+  copy,
+}: {
+  readonly enrolled: boolean
+  readonly required: boolean
+  readonly hasPassword: boolean
+  readonly recoveryCodesLeft: number
+  readonly copy: Copy
+}) {
+  const [replaceState, replace] = useActionState(replaceRecoveryCodesAction, EMPTY_STATE)
+  const [disableState, disable] = useActionState(disableTwoFactorAction, EMPTY_STATE)
+  const [beginState, begin] = useActionState(beginTwoFactorAction, EMPTY_STATE)
+
+  if (!enrolled) {
+    return (
+      <section className={CARD}>
+        <h2 className="text-lg font-semibold tracking-tight">
+          {fromCopy(copy, 'accountForm.twoFactor.title')}
+        </h2>
+        <p className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'accountForm.twoFactor.blurb')}
+          {required ? <> {copy['accountForm.twoFactor.requiredBlurb']}</> : null}
+        </p>
+        <FormError message={beginState.error} />
+        <form action={begin}>
+          <button type="submit" className={BUTTON}>
+            {fromCopy(copy, 'accountForm.twoFactor.begin')}
+          </button>
+        </form>
+      </section>
+    )
+  }
+
+  const proof = (which: string) =>
+    hasPassword ? (
+      <Field
+        id={`${which}-password`}
+        label={fromCopy(copy, 'accountForm.twoFactor.passwordLabel')}
+        name="password"
+        type="password"
+        autoComplete="current-password"
+      />
+    ) : (
+      <Field
+        id={`${which}-code`}
+        label={fromCopy(copy, 'accountForm.twoFactor.codeProofLabel')}
+        name="code"
+        autoComplete="one-time-code"
+        hint={fromCopy(copy, 'accountForm.twoFactor.codeProofHint')}
+      />
+    )
+
+  return (
+    <section className={CARD}>
+      <h2 className="text-lg font-semibold tracking-tight">
+        {fromCopy(copy, 'accountForm.twoFactor.title')}
+      </h2>
+      <p className="text-sm">
+        {copy['accountForm.twoFactor.statusLead']}
+        <strong>{copy['accountForm.twoFactor.codes']}</strong>
+        {copy['accountForm.twoFactor.statusTail']}
+        {recoveryCodesLeft === 0 ? <> {copy['accountForm.twoFactor.exhausted']}</> : null}
+      </p>
+
+      <RecoveryCodes state={replaceState} copy={copy} />
+
+      <form action={replace} className="flex flex-col gap-3 border-t border-border pt-4">
+        <FormError message={replaceState.error} />
+        <p className="text-sm font-medium">
+          {fromCopy(copy, 'accountForm.twoFactor.replaceTitle')}
+        </p>
+        <p className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'accountForm.twoFactor.replaceBlurb')}
+        </p>
+        {proof('replace')}
+        <div>
+          <button type="submit" className={BUTTON}>
+            {fromCopy(copy, 'accountForm.twoFactor.replaceSubmit')}
+          </button>
+        </div>
+      </form>
+
+      {required ? (
+        <p className="border-t border-border pt-4 text-xs text-muted-foreground">
+          {fromCopy(copy, 'accountForm.twoFactor.requiredOff')}
+        </p>
+      ) : (
+        <form action={disable} className="flex flex-col gap-3 border-t border-border pt-4">
+          <FormError message={disableState.error} />
+          <p className="text-sm font-medium">{fromCopy(copy, 'accountForm.twoFactor.offTitle')}</p>
+          {proof('disable')}
+          <div>
+            <Button type="submit" variant="destructive">
+              {fromCopy(copy, 'accountForm.twoFactor.offSubmit')}
+            </Button>
+          </div>
+        </form>
+      )}
+    </section>
+  )
+}