@meith/web 0.16.0

package/src/components/account/passkey-proof-button.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { useState } from 'react'
+
+import { Button } from '@meith/ui/button'
+
+import { passkeyMessage, proveWithPasskey } from '@/components/auth/passkey-client'
+
+import type { Copy } from '../shell/copy-record'
+
+export function PasskeyProofButton({
+  next,
+  copy,
+  waitingLabel,
+  verifyLabel,
+}: {
+  readonly next: string
+  readonly copy: Copy
+  readonly waitingLabel: string
+  readonly verifyLabel: string
+}) {
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  return (
+    <div className="flex flex-col items-start gap-2 rounded-lg border border-border bg-card p-5">
+      <Button
+        type="button"
+        variant="primary"
+        disabled={busy}
+        onClick={() => {
+          setBusy(true)
+          setError(null)
+          proveWithPasskey(next, copy)
+            .then((target) => window.location.assign(target))
+            .catch((problem: unknown) => {
+              setError(passkeyMessage(problem, copy))
+              setBusy(false)
+            })
+        }}
+      >
+        {busy ? waitingLabel : verifyLabel}
+      </Button>
+      {error === null ? null : <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  )
+}

package/src/components/account/push-device-form.tsx

@@ -0,0 +1,193 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+
+import { subscribeToPushAction, unsubscribeFromPushAction } from '@/server/push-actions'
+
+import { FormError, FormNotice } 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 disabled:opacity-60'
+
+type Status = 'checking' | 'unsupported' | 'blocked' | 'off' | 'on' | 'working'
+
+function applicationServerKey(publicKey: string): Uint8Array<ArrayBuffer> {
+  const padded = publicKey.replace(/-/g, '+').replace(/_/g, '/')
+  const raw = atob(padded + '='.repeat((4 - (padded.length % 4)) % 4))
+
+  const bytes = new Uint8Array(raw.length)
+  for (let index = 0; index < raw.length; index += 1) bytes[index] = raw.charCodeAt(index)
+  return bytes
+}
+
+function keyOf(subscription: PushSubscription, name: 'p256dh' | 'auth'): string {
+  const key = subscription.getKey(name)
+  if (key === null) return ''
+
+  let binary = ''
+  for (const byte of new Uint8Array(key)) binary += String.fromCharCode(byte)
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+}
+
+export function PushDeviceForm({ publicKey, copy }: { publicKey: string; copy: Copy }) {
+  const [status, setStatus] = useState<Status>('checking')
+  const [error, setError] = useState<string | undefined>(undefined)
+  const [notice, setNotice] = useState<string | undefined>(undefined)
+
+  const supported =
+    typeof navigator !== 'undefined' &&
+    'serviceWorker' in navigator &&
+    'PushManager' in window &&
+    'Notification' in window
+
+  useEffect(() => {
+    if (!supported) {
+      setStatus('unsupported')
+      return
+    }
+
+    let cancelled = false
+
+    void (async () => {
+      try {
+        const registration = await navigator.serviceWorker.register('/sw.js', {
+          scope: '/',
+          updateViaCache: 'none',
+        })
+        const subscription = await registration.pushManager.getSubscription()
+        if (cancelled) return
+
+        if (subscription !== null) {
+          await subscribeToPushAction({
+            endpoint: subscription.endpoint,
+            p256dh: keyOf(subscription, 'p256dh'),
+            auth: keyOf(subscription, 'auth'),
+          })
+          if (!cancelled) setStatus('on')
+          return
+        }
+
+        setStatus(Notification.permission === 'denied' ? 'blocked' : 'off')
+      } catch {
+        if (!cancelled) setStatus('unsupported')
+      }
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [supported])
+
+  const subscribe = useCallback(async () => {
+    setError(undefined)
+    setNotice(undefined)
+    setStatus('working')
+
+    try {
+      const permission = await Notification.requestPermission()
+      if (permission !== 'granted') {
+        setStatus(permission === 'denied' ? 'blocked' : 'off')
+        return
+      }
+
+      const registration = await navigator.serviceWorker.ready
+      const subscription = await registration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: applicationServerKey(publicKey),
+      })
+
+      const result = await subscribeToPushAction({
+        endpoint: subscription.endpoint,
+        p256dh: keyOf(subscription, 'p256dh'),
+        auth: keyOf(subscription, 'auth'),
+      })
+
+      if (result.error !== undefined) {
+        await subscription.unsubscribe()
+        setError(result.error)
+        setStatus('off')
+        return
+      }
+
+      setNotice(result.notice)
+      setStatus('on')
+    } catch {
+      setError(fromCopy(copy, 'accountForm.push.failed'))
+      setStatus('off')
+    }
+  }, [copy, publicKey])
+
+  const unsubscribe = useCallback(async () => {
+    setError(undefined)
+    setNotice(undefined)
+    setStatus('working')
+
+    try {
+      const registration = await navigator.serviceWorker.ready
+      const subscription = await registration.pushManager.getSubscription()
+
+      if (subscription !== null) {
+        const result = await unsubscribeFromPushAction(subscription.endpoint)
+        await subscription.unsubscribe()
+        if (result.error !== undefined) {
+          setError(result.error)
+          setStatus('on')
+          return
+        }
+        setNotice(result.notice)
+      }
+
+      setStatus('off')
+    } catch {
+      setError(fromCopy(copy, 'accountForm.push.failed'))
+      setStatus('on')
+    }
+  }, [copy])
+
+  return (
+    <section className="flex flex-col gap-3 rounded-lg border border-border bg-card p-5">
+      <h2 className="text-sm font-medium">{fromCopy(copy, 'accountForm.push.heading')}</h2>
+
+      <FormError message={error} />
+      <FormNotice message={notice} />
+
+      <p className="text-sm text-muted-foreground">
+        {fromCopy(
+          copy,
+          status === 'checking'
+            ? 'form.working'
+            : status === 'unsupported'
+              ? 'accountForm.push.unsupported'
+              : status === 'blocked'
+                ? 'accountForm.push.blocked'
+                : status === 'on'
+                  ? 'accountForm.push.subscribed'
+                  : 'accountForm.push.unsubscribed',
+        )}
+      </p>
+
+      {(status === 'off' || status === 'on' || status === 'working') && (
+        <div>
+          <button
+            type="button"
+            className={BUTTON}
+            disabled={status === 'working'}
+            onClick={status === 'on' ? unsubscribe : subscribe}
+          >
+            {fromCopy(
+              copy,
+              status === 'working'
+                ? 'form.working'
+                : status === 'on'
+                  ? 'accountForm.push.unsubscribe'
+                  : 'accountForm.push.subscribe',
+            )}
+          </button>
+        </div>
+      )}
+
+      <p className="text-xs text-muted-foreground">{fromCopy(copy, 'accountForm.push.blurb')}</p>
+    </section>
+  )
+}

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

@@ -0,0 +1,69 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { removeRelationAction, setRelationAction } from '@/server/relation-actions'
+
+import { FormError } from '../auth/form-controls'
+
+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'
+
+const QUIET_BUTTON =
+  'text-sm text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+export function SetRelationForm({
+  userId,
+  username,
+  kind,
+  returnTo,
+  label,
+}: {
+  userId: number
+  username: string
+  kind: 'buddy' | 'ignore'
+  returnTo: string
+  label: string
+}) {
+  const [state, action] = useActionState(setRelationAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="inline-flex flex-col gap-1">
+      <FormError message={state.error} />
+      <input type="hidden" name="userId" value={userId} />
+      <input type="hidden" name="username" value={username} />
+      <input type="hidden" name="kind" value={kind} />
+      <input type="hidden" name="returnTo" value={returnTo} />
+      <button type="submit" className={kind === 'buddy' ? LINK_BUTTON : QUIET_BUTTON}>
+        {label}
+      </button>
+    </form>
+  )
+}
+
+export function RemoveRelationForm({
+  userId,
+  username,
+  returnTo,
+  label = 'Remove',
+}: {
+  userId: number
+  username: string
+  returnTo: string
+  label?: string
+}) {
+  const [state, action] = useActionState(removeRelationAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="inline-flex flex-col gap-1">
+      <FormError message={state.error} />
+      <input type="hidden" name="userId" value={userId} />
+      <input type="hidden" name="username" value={username} />
+      <input type="hidden" name="returnTo" value={returnTo} />
+      <button type="submit" className={QUIET_BUTTON}>
+        {label}
+      </button>
+    </form>
+  )
+}

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

@@ -0,0 +1,124 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { rateMemberAction, withdrawRatingAction } from '@/server/reputation-actions'
+
+import { FormError } from '../auth/form-controls'
+import { type Copy, fromCopy } from '../shell/copy'
+
+const FIELD =
+  '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'
+
+const CARD = 'flex flex-col gap-3 rounded-lg border border-border bg-card p-5'
+
+const CHOICE =
+  'inline-flex h-9 items-center justify-center rounded-md border border-border px-4 text-sm font-medium hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+export function RateMemberForm({
+  userId,
+  postId = null,
+  returnTo,
+  allowNegative,
+  commentRequired,
+  existingComment = null,
+  existingPoints = null,
+  remainingLabel = null,
+  copy,
+}: {
+  userId: number
+  postId?: number | null
+  returnTo: string
+  allowNegative: boolean
+  commentRequired: boolean
+  existingComment?: string | null
+  existingPoints?: number | null
+  remainingLabel?: string | null
+  copy: Copy
+}) {
+  const [state, action] = useActionState(rateMemberAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className={CARD}>
+      <FormError message={state.error} />
+      <input type="hidden" name="userId" value={userId} />
+      {postId === null ? null : <input type="hidden" name="postId" value={postId} />}
+      <input type="hidden" name="returnTo" value={returnTo} />
+
+      <h2 className="text-lg font-semibold tracking-tight">
+        {existingPoints === null
+          ? fromCopy(copy, 'accountForm.rate.title')
+          : fromCopy(copy, 'accountForm.rate.changeTitle')}
+      </h2>
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">
+          {commentRequired
+            ? fromCopy(copy, 'accountForm.rate.why')
+            : fromCopy(copy, 'accountForm.rate.whyOptional')}
+        </span>
+        <textarea
+          name="comment"
+          defaultValue={state.values?.comment ?? existingComment ?? ''}
+          className={FIELD}
+          rows={3}
+          maxLength={500}
+          required={commentRequired}
+        />
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'accountForm.rate.whyHint')}
+        </span>
+      </label>
+
+      <div className="flex flex-wrap items-center gap-2">
+        <button type="submit" name="points" value="1" className={CHOICE}>
+          {allowNegative
+            ? fromCopy(copy, 'accountForm.rate.positive')
+            : fromCopy(copy, 'accountForm.rate.thanks')}
+        </button>
+        <button type="submit" name="points" value="0" className={CHOICE}>
+          {allowNegative
+            ? fromCopy(copy, 'accountForm.rate.neutral')
+            : fromCopy(copy, 'accountForm.rate.justComment')}
+        </button>
+        {allowNegative && (
+          <button type="submit" name="points" value="-1" className={CHOICE}>
+            {fromCopy(copy, 'accountForm.rate.negative')}
+          </button>
+        )}
+      </div>
+
+      {remainingLabel !== null && <p className="text-xs text-muted-foreground">{remainingLabel}</p>}
+    </form>
+  )
+}
+
+export function WithdrawRatingForm({
+  ratingId,
+  userId,
+  returnTo,
+  copy,
+}: {
+  ratingId: number
+  userId: number
+  returnTo: string
+  copy: Copy
+}) {
+  const [state, action] = useActionState(withdrawRatingAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="inline-flex flex-col gap-1">
+      <FormError message={state.error} />
+      <input type="hidden" name="ratingId" value={ratingId} />
+      <input type="hidden" name="userId" value={userId} />
+      <input type="hidden" name="returnTo" value={returnTo} />
+      <button
+        type="submit"
+        className="text-xs text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+      >
+        {fromCopy(copy, 'accountForm.rate.withdraw')}
+      </button>
+    </form>
+  )
+}

package/src/components/account/security-activity.tsx

@@ -0,0 +1,46 @@
+import { type Copy, fromCopy } from '../shell/copy-record'
+
+export interface ActivityView {
+  readonly id: number
+  readonly label: string
+  readonly detail: string
+}
+
+export function SecurityActivity({
+  events,
+  copy,
+}: {
+  readonly events: readonly ActivityView[]
+  readonly copy: Copy
+}) {
+  return (
+    <section className="flex flex-col gap-4 rounded-lg border border-border bg-card p-5">
+      <div className="flex flex-col gap-1">
+        <h2 className="text-lg font-semibold tracking-tight">
+          {fromCopy(copy, 'accountForm.activity.title')}
+        </h2>
+        <p className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'accountForm.activity.blurb')}
+        </p>
+      </div>
+
+      {events.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          {fromCopy(copy, 'accountForm.activity.none')}
+        </p>
+      ) : (
+        <ul className="flex flex-col gap-2">
+          {events.map((event) => (
+            <li
+              key={event.id}
+              className="flex flex-wrap items-baseline justify-between gap-2 border-b border-border pb-2 text-sm last:border-0 last:pb-0"
+            >
+              <span className="font-medium">{event.label}</span>
+              <span className="text-xs text-muted-foreground">{event.detail}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  )
+}

package/src/components/account/sign-in-methods.tsx

@@ -0,0 +1,166 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { Button } from '@meith/ui/button'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { removePasskeyAction, unlinkIdentityAction } from '@/server/federation-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 LinkedIdentityView {
+  readonly id: number
+  readonly provider: string
+  readonly label: string
+  readonly detail: string | null
+  readonly usage: string
+}
+
+export interface PasskeyView {
+  readonly id: number
+  readonly label: string
+  readonly usage: string
+}
+
+export interface OfferedProvider {
+  readonly id: string
+  readonly cta: string
+}
+
+export function LinkedSignIns({
+  linked,
+  offered,
+  manageable,
+  copy,
+}: {
+  readonly linked: readonly LinkedIdentityView[]
+  readonly offered: readonly OfferedProvider[]
+  readonly manageable: boolean
+  readonly copy: Copy
+}) {
+  const [state, action] = useActionState(unlinkIdentityAction, EMPTY_STATE)
+
+  return (
+    <section className={CARD}>
+      <div className="flex flex-col gap-1">
+        <h2 className="text-lg font-semibold tracking-tight">
+          {fromCopy(copy, 'accountForm.linked.title')}
+        </h2>
+        <p className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'accountForm.linked.blurb')}
+        </p>
+      </div>
+
+      <FormError message={state.error} />
+
+      {linked.length === 0 ? (
+        <p className="text-sm text-muted-foreground">{fromCopy(copy, 'accountForm.linked.none')}</p>
+      ) : (
+        <ul className="flex flex-col gap-2">
+          {linked.map((identity) => (
+            <li key={identity.id} className={ROW}>
+              <span className="flex flex-col text-sm">
+                <span className="font-medium">
+                  {identity.label}
+                  {identity.detail === null ? null : (
+                    <span className="font-normal text-muted-foreground"> — {identity.detail}</span>
+                  )}
+                </span>
+                <span className="text-xs text-muted-foreground">{identity.usage}</span>
+              </span>
+
+              {manageable ? (
+                <form action={action}>
+                  <input type="hidden" name="identityId" value={identity.id} />
+                  <Button type="submit" variant="destructive" size="sm">
+                    {fromCopy(copy, 'accountForm.linked.unlink')}
+                  </Button>
+                </form>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {manageable && offered.length > 0 ? (
+        <div className="flex flex-wrap gap-2">
+          {offered.map((provider) => (
+            <form key={provider.id} method="post" action={`/auth/sso/${provider.id}`}>
+              <input type="hidden" name="mode" value="link" />
+              <button
+                type="submit"
+                className="inline-flex h-9 items-center rounded-md border border-border bg-card px-3 text-sm font-medium hover:bg-muted"
+              >
+                {provider.cta}
+              </button>
+            </form>
+          ))}
+        </div>
+      ) : null}
+    </section>
+  )
+}
+
+export function PasskeyList({
+  passkeys,
+  manageable,
+  copy,
+  children,
+}: {
+  readonly passkeys: readonly PasskeyView[]
+  readonly manageable: boolean
+  readonly copy: Copy
+  readonly children?: React.ReactNode
+}) {
+  const [state, action] = useActionState(removePasskeyAction, EMPTY_STATE)
+
+  return (
+    <section className={CARD}>
+      <div className="flex flex-col gap-1">
+        <h2 className="text-lg font-semibold tracking-tight">
+          {fromCopy(copy, 'accountForm.passkeys.title')}
+        </h2>
+        <p className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'accountForm.passkeys.blurb')}
+        </p>
+      </div>
+
+      <FormError message={state.error} />
+
+      {passkeys.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          {fromCopy(copy, 'accountForm.passkeys.none')}
+        </p>
+      ) : (
+        <ul className="flex flex-col gap-2">
+          {passkeys.map((passkey) => (
+            <li key={passkey.id} className={ROW}>
+              <span className="flex flex-col text-sm">
+                <span className="font-medium">{passkey.label}</span>
+                <span className="text-xs text-muted-foreground">{passkey.usage}</span>
+              </span>
+
+              {manageable ? (
+                <form action={action}>
+                  <input type="hidden" name="passkeyId" value={passkey.id} />
+                  <Button type="submit" variant="destructive" size="sm">
+                    {fromCopy(copy, 'accountForm.passkeys.remove')}
+                  </Button>
+                </form>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {manageable ? children : null}
+    </section>
+  )
+}