@meith/web 0.16.0

package/app/(board)/usercp/options/page.tsx

@@ -0,0 +1,56 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { OptionsForm } from '@/components/account/usercp-forms'
+import { BoardNotice } from '@/components/shell/board-notice'
+import { PanelPage } from '@/components/shell/panel-page'
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { catalogs, getTranslator, tr } from '@/server/i18n'
+import { getSettings } from '@/server/settings'
+import { optionsFormCopy } from '@/view/account-copy'
+import { localeChoices, optionsFormValues, timezoneChoices, userCpNotice } from '@/view/usercp'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.options') }
+}
+
+export default async function OptionsPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ saved?: string }>
+}) {
+  const query = await searchParams
+  const actor = await getActor()
+  const { memberSettings } = getContainer()
+  if (actor.userId === null || memberSettings === null) notFound()
+
+  const settings = await memberSettings.read(actor.userId)
+  if (settings === null) notFound()
+
+  const board = await getSettings()
+  const values = optionsFormValues(settings)
+  const notice = userCpNotice(query, await getTranslator())
+
+  return (
+    <PanelPage
+      title={await tr('page.options')}
+      lede={await tr('page.language-timezone-how-much-thread')}
+    >
+      {notice !== null && (
+        <BoardNotice kind={notice.kind} message={notice.message} dismissHref="/usercp/options" />
+      )}
+
+      <OptionsForm
+        {...values}
+        timezones={timezoneChoices(await getTranslator())}
+        locales={localeChoices(catalogs.locales, await getTranslator())}
+        copy={optionsFormCopy(
+          board.get('display.posts_per_page'),
+          board.get('display.threads_per_page'),
+          await getTranslator(),
+        )}
+      />
+    </PanelPage>
+  )
+}

package/app/(board)/usercp/page.tsx

@@ -0,0 +1,71 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { BoardNotice } from '@/components/shell/board-notice'
+import { PanelSectionGrid, PanelWaitingList } from '@/components/shell/panel-overview'
+import { PanelPage, PanelSection } from '@/components/shell/panel-page'
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { unreadMessageCount } from '@/server/messages'
+import { unreadNotificationCount } from '@/server/notifications'
+import { panelSectionCopy } from '@/view/panel-nav'
+import { USERCP_SECTIONS } from '@/view/usercp-nav'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.control-panel-2') }
+}
+
+export default async function UserCpPage() {
+  const actor = await getActor()
+  const { memberSettings } = getContainer()
+  if (actor.userId === null || memberSettings === null) notFound()
+
+  const translator = await getTranslator()
+
+  const [messages, notifications] = await Promise.all([
+    unreadMessageCount(actor.userId),
+    unreadNotificationCount(actor.userId),
+  ])
+
+  return (
+    <PanelPage
+      title={await tr('page.control-panel-2')}
+      lede={await tr('page.everything-about-account-that-decide')}
+      gap="loose"
+    >
+      <BoardNotice
+        kind="info"
+        message={translator.t('board.usercp.profilePrivacy')}
+        dismissHref={null}
+      />
+
+      <PanelSection id="waiting-heading" title={await tr('page.waiting-for')}>
+        <PanelWaitingList
+          items={[
+            {
+              count: messages,
+              one: translator.t('board.usercp.unreadMessage', { count: 1 }),
+              many: translator.t('board.usercp.unreadMessage', { count: 2 }),
+              href: '/messages',
+              action: translator.t('board.usercp.read'),
+            },
+            {
+              count: notifications,
+              one: translator.t('board.usercp.unreadNotification', { count: 1 }),
+              many: translator.t('board.usercp.unreadNotification', { count: 2 }),
+              href: '/notifications',
+              action: translator.t('board.usercp.open'),
+            },
+          ]}
+          emptyTitle={translator.t('board.usercp.emptyTitle')}
+          emptyDescription={translator.t('board.usercp.emptyDescription')}
+        />
+      </PanelSection>
+
+      <PanelSection id="sections-heading" title={await tr('page.sections')}>
+        <PanelSectionGrid sections={panelSectionCopy(USERCP_SECTIONS, translator)} />
+      </PanelSection>
+    </PanelPage>
+  )
+}

package/app/(board)/usercp/profile/page.tsx

@@ -0,0 +1,81 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { DisplayGroupForm, ProfileForm } from '@/components/account/usercp-forms'
+import { BoardNotice } from '@/components/shell/board-notice'
+import { PanelPage } from '@/components/shell/panel-page'
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { profileFieldService, viewerFieldContext } from '@/server/profile-fields'
+import { displayGroupFormCopy, profileFormCopy } from '@/view/account-copy'
+import {
+  customFieldInputs,
+  displayGroupChoices,
+  profileFormValues,
+  userCpNotice,
+} from '@/view/usercp'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.profile') }
+}
+
+export default async function ProfileSettingsPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ saved?: string }>
+}) {
+  const query = await searchParams
+  const actor = await getActor()
+  const { memberSettings } = getContainer()
+  if (actor.userId === null || memberSettings === null) notFound()
+
+  const settings = await memberSettings.read(actor.userId)
+  if (settings === null) notFound()
+
+  const values = profileFormValues(settings)
+  const groups = displayGroupChoices(
+    await memberSettings.groupsHeldBy(actor.userId),
+    settings.displayGroupId,
+  )
+
+  const fields = profileFieldService()
+  const context = await viewerFieldContext()
+  const customFields =
+    fields === null || context === null
+      ? []
+      : customFieldInputs(await fields.editableFor(actor.userId, context))
+  const notice = userCpNotice(query, await getTranslator())
+
+  return (
+    <PanelPage
+      title={await tr('page.profile')}
+      lede={
+        <>
+          Shown on{' '}
+          <a
+            href={`/member/${settings.userId}`}
+            className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+          >
+            your public profile
+          </a>
+          .
+        </>
+      }
+    >
+      {notice !== null && (
+        <BoardNotice kind={notice.kind} message={notice.message} dismissHref="/usercp/profile" />
+      )}
+
+      <ProfileForm
+        {...values}
+        customFields={customFields}
+        copy={profileFormCopy(await getTranslator())}
+      />
+
+      {groups.choices.length > 1 && (
+        <DisplayGroupForm {...groups} copy={displayGroupFormCopy(await getTranslator())} />
+      )}
+    </PanelPage>
+  )
+}

package/app/(board)/usercp/security/page.tsx

@@ -0,0 +1,238 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { PASSKEY_LIMIT, providerLabel } from '@meith/accounts'
+
+import { ActiveSessions, type SessionView } from '@/components/account/active-sessions'
+import { PasskeyEnrol } from '@/components/account/passkey-enrol'
+import { type ActivityView, SecurityActivity } from '@/components/account/security-activity'
+import {
+  type LinkedIdentityView,
+  LinkedSignIns,
+  type OfferedProvider,
+  PasskeyList,
+  type PasskeyView,
+} from '@/components/account/sign-in-methods'
+import { TwoFactorPanel, TwoFactorSetup } from '@/components/account/two-factor-forms'
+import { EmailForm, PasswordForm } from '@/components/account/usercp-forms'
+import { BoardNotice } from '@/components/shell/board-notice'
+import { PanelPage } from '@/components/shell/panel-page'
+import { boardAuthConfig } from '@/server/auth-config'
+import { memberSecurityActivity } from '@/server/auth-events'
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { memberManagedSignIns, passkeysEnabled, signInProviders } from '@/server/federation'
+import { getTranslator, tr } from '@/server/i18n'
+import { currentSessionId } from '@/server/session-actions'
+import { pendingEnrolment, secondFactorPosture, twoFactorState } from '@/server/two-factor'
+import {
+  activeSessionsCopy,
+  activityDetailLabel,
+  emailFormCopy,
+  linkedUsageLabel,
+  passkeyUsageLabel,
+  passwordFormCopy,
+  securityActivityCopy,
+  sessionDetailLabel,
+  signInMethodsCopy,
+  twoFactorFormsCopy,
+} from '@/view/account-copy'
+import { passkeyEnrolCopy } from '@/view/auth-copy'
+import { authEventLabel, describeAddress, describeDevice } from '@/view/security-activity'
+import { ssoNotice } from '@/view/sso-notices'
+import { formatDate, formatTime } from '@/view/time'
+import { userCpNotice } from '@/view/usercp'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.account-security') }
+}
+
+const NOTICE_KEYS: Record<string, string> = {
+  'passkey:added': 'securityNotice.passkeyAdded',
+  'passkey:removed': 'securityNotice.passkeyRemoved',
+  'factor:setup': 'securityNotice.factorSetup',
+  'factor:off': 'securityNotice.factorOff',
+  'sessions:revoked': 'securityNotice.sessionRevoked',
+  'sessions:elsewhere': 'securityNotice.sessionsElsewhere',
+}
+
+interface SecurityQuery {
+  changed?: string
+  sent?: string
+  confirmed?: string
+  failed?: string
+  sso?: string
+  passkey?: string
+  factor?: string
+  sessions?: string
+}
+
+export default async function SecurityPage({
+  searchParams,
+}: {
+  searchParams: Promise<SecurityQuery>
+}) {
+  const query = await searchParams
+  const actor = await getActor()
+  const { memberSettings, accountStore } = getContainer()
+  if (actor.userId === null || memberSettings === null) notFound()
+
+  const settings = await memberSettings.read(actor.userId)
+  if (settings === null) notFound()
+
+  const notice = await pageNotice(query)
+
+  const manageable = await memberManagedSignIns()
+  const providers = await signInProviders()
+  const passkeys = await passkeysEnabled()
+
+  const translator = await getTranslator()
+  const on = (at: Date | null): string | null =>
+    at === null ? null : formatDate(at, translator).label
+
+  const account = await accountStore.accounts.findById(actor.userId)
+  const hasPassword = account !== null && account.passwordHash !== null
+
+  const posture = await secondFactorPosture(actor.userId)
+  const factor = await twoFactorState(actor.userId)
+  const manageFactor = posture.offered || factor.enrolled
+
+  const enrolment = factor.pending ? await pendingEnrolment(actor.userId) : null
+
+  const settingUp = factor.pending || query.factor === 'setup'
+
+  const linked = await accountStore.identities.listForUser(actor.userId)
+  const labels = new Map<string, string>(providers.map((provider) => [provider.id, provider.label]))
+
+  const linkedView: readonly LinkedIdentityView[] = linked.map((identity) => ({
+    id: identity.id,
+    provider: identity.provider,
+    label: labels.get(identity.provider) ?? providerLabel(identity.provider),
+    detail: identity.label,
+    usage: linkedUsageLabel(on(identity.linkedAt) ?? '', on(identity.lastUsedAt), translator),
+  }))
+
+  const offered: readonly OfferedProvider[] = providers
+    .filter((provider) => !linked.some((identity) => identity.provider === provider.id))
+    .map((provider) => ({
+      id: provider.id,
+      cta: translator.t('accountForm.linked.link', { provider: provider.label }),
+    }))
+
+  const held = passkeys ? await accountStore.passkeys.listForUser(actor.userId) : []
+  const passkeyView: readonly PasskeyView[] = held.map((passkey) => ({
+    id: passkey.id,
+    label: passkey.label,
+    usage: passkeyUsageLabel(on(passkey.createdAt) ?? '', on(passkey.lastUsedAt), translator),
+  }))
+
+  const rightNow = new Date()
+  const when = (at: Date): string => formatTime(at, rightNow, translator).label
+
+  const thisSession = await currentSessionId()
+  const sessionView: readonly SessionView[] = (
+    await accountStore.sessions.listActiveForUser(actor.userId, rightNow)
+  ).map((session) => ({
+    id: session.id,
+    device: describeDevice(session.userAgent, translator),
+    detail: sessionDetailLabel(
+      describeAddress(session.ipPrefix),
+      when(session.createdAt),
+      when(session.lastSeenAt),
+      translator,
+    ),
+    current: session.id === thisSession,
+  }))
+
+  const activity: readonly ActivityView[] = (await memberSecurityActivity(actor.userId)).map(
+    (event) => ({
+      id: event.id,
+      label: authEventLabel(event.kind, translator),
+      detail: activityDetailLabel(
+        when(event.at),
+        describeDevice(event.userAgent, translator),
+        describeAddress(event.ipPrefix),
+        translator,
+      ),
+    }),
+  )
+
+  const anywhereToSignIn = providers.length > 0 || linked.length > 0
+
+  return (
+    <PanelPage
+      title={await tr('page.account-security')}
+      lede={await tr('page.changing-either-e-mail-address-password')}
+    >
+      {notice !== null && (
+        <BoardNotice kind={notice.kind} message={notice.message} dismissHref="/usercp/security" />
+      )}
+
+      <PasswordForm
+        minLength={(await boardAuthConfig()).minPasswordLength}
+        copy={passwordFormCopy(translator)}
+      />
+      <EmailForm email={settings.email} copy={emailFormCopy(translator)} />
+
+      {manageFactor &&
+        (settingUp ? (
+          <TwoFactorSetup
+            enrolment={enrolment}
+            copy={twoFactorFormsCopy(factor.recoveryCodesLeft, translator)}
+          />
+        ) : (
+          <TwoFactorPanel
+            enrolled={factor.enrolled}
+            required={posture.required}
+            hasPassword={hasPassword}
+            recoveryCodesLeft={factor.recoveryCodesLeft}
+            copy={twoFactorFormsCopy(factor.recoveryCodesLeft, translator)}
+          />
+        ))}
+
+      {anywhereToSignIn && (
+        <LinkedSignIns
+          linked={linkedView}
+          offered={offered}
+          manageable={manageable}
+          copy={signInMethodsCopy(translator)}
+        />
+      )}
+
+      {passkeys && (
+        <PasskeyList
+          passkeys={passkeyView}
+          manageable={manageable}
+          copy={signInMethodsCopy(translator)}
+        >
+          <PasskeyEnrol copy={passkeyEnrolCopy(PASSKEY_LIMIT, await getTranslator())} />
+        </PasskeyList>
+      )}
+
+      <ActiveSessions sessions={sessionView} copy={activeSessionsCopy(translator)} />
+
+      <SecurityActivity events={activity} copy={securityActivityCopy(translator)} />
+    </PanelPage>
+  )
+}
+
+async function pageNotice(
+  query: SecurityQuery,
+): Promise<{ kind: 'info' | 'warning'; message: string } | null> {
+  const federated = ssoNotice(query.sso, await getTranslator())
+  if (federated !== null) return federated
+
+  for (const [key, value] of [
+    ['passkey', query.passkey],
+    ['factor', query.factor],
+    ['sessions', query.sessions],
+  ] as const) {
+    if (value === undefined) continue
+
+    const messageKey = NOTICE_KEYS[`${key}:${value}`]
+    if (messageKey !== undefined)
+      return { kind: 'info', message: (await getTranslator()).t(messageKey) }
+  }
+
+  return userCpNotice(query, await getTranslator())
+}

package/app/(board)/usercp/security/verify/page.tsx

@@ -0,0 +1,92 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { CredentialProofForm } from '@/components/account/credential-proof-form'
+import { PasskeyProofButton } from '@/components/account/passkey-proof-button'
+import { PanelPage } from '@/components/shell/panel-page'
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { signInProviders } from '@/server/federation'
+import { getTranslator } from '@/server/i18n'
+import { isSafeLocalPath } from '@/server/safe-path'
+import { twoFactorState } from '@/server/two-factor'
+import { passkeyEnrolCopy } from '@/view/auth-copy'
+
+export async function generateMetadata(): Promise<Metadata> {
+  const tr = await getTranslator()
+  return { title: tr.t('credentialProof.title') }
+}
+
+export default async function VerifySecurityPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ next?: string }>
+}) {
+  const actor = await getActor()
+  if (actor.userId === null) notFound()
+
+  const query = await searchParams
+  const next =
+    query.next !== undefined && isSafeLocalPath(query.next) ? query.next : '/usercp/security'
+  const tr = await getTranslator()
+  const { accountStore } = getContainer()
+  const [account, factor, identities, providers, passkeys] = await Promise.all([
+    accountStore.accounts.findById(actor.userId),
+    twoFactorState(actor.userId),
+    accountStore.identities.listForUser(actor.userId),
+    signInProviders(),
+    accountStore.passkeys.listForUser(actor.userId),
+  ])
+
+  return (
+    <PanelPage title={tr.t('credentialProof.title')} lede={tr.t('credentialProof.lede')}>
+      <CredentialProofForm
+        copy={{
+          codeConsumed: tr.t('credentialProof.codeConsumed'),
+          codeLabel: tr.t('credentialProof.codeLabel'),
+          codeSubmit: tr.t('credentialProof.codeSubmit'),
+          passwordLabel: tr.t('credentialProof.passwordLabel'),
+          passwordSubmit: tr.t('credentialProof.passwordSubmit'),
+        }}
+        hasPassword={account?.passwordHash !== null && account !== null}
+        hasSecondFactor={factor.enrolled}
+        next={next}
+      />
+
+      {passkeys.length > 0 ? (
+        <PasskeyProofButton
+          next={next}
+          copy={passkeyEnrolCopy(1, tr)}
+          waitingLabel={tr.t('credentialProof.passkeyWaiting')}
+          verifyLabel={tr.t('credentialProof.passkeySubmit')}
+        />
+      ) : null}
+
+      {identities.length > 0 ? (
+        <section className="flex flex-col gap-3 rounded-lg border border-border bg-card p-5">
+          <h2 className="text-lg font-semibold tracking-tight">
+            {tr.t('credentialProof.linkedTitle')}
+          </h2>
+          <div className="flex flex-wrap gap-2">
+            {identities.map((identity) => {
+              const provider = providers.find((candidate) => candidate.id === identity.provider)
+              if (provider === undefined) return null
+              return (
+                <form key={identity.id} method="post" action={`/auth/sso/${identity.provider}`}>
+                  <input type="hidden" name="mode" value="credential-proof" />
+                  <input type="hidden" name="next" value={next} />
+                  <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"
+                  >
+                    {tr.t('credentialProof.ssoSubmit', { provider: provider.label })}
+                  </button>
+                </form>
+              )
+            })}
+          </div>
+        </section>
+      ) : null}
+    </PanelPage>
+  )
+}

package/app/(board)/usercp/signature/page.tsx

@@ -0,0 +1,67 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { signatureLimit } from '@meith/signatures'
+
+import { SignatureForm } from '@/components/account/usercp-forms'
+import { BoardNotice } from '@/components/shell/board-notice'
+import { PanelPage } from '@/components/shell/panel-page'
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { renderSignature, signatureStore, viewerSignatureLimits } from '@/server/signatures'
+import { signatureFormCopy } from '@/view/account-copy'
+import { userCpNotice } from '@/view/usercp'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.signature') }
+}
+
+export default async function SignaturePage({
+  searchParams,
+}: {
+  searchParams: Promise<{ saved?: string }>
+}) {
+  const query = await searchParams
+  const actor = await getActor()
+  const store = signatureStore()
+
+  if (actor.userId === null || store === null) notFound()
+
+  const limits = await viewerSignatureLimits()
+  if (!limits.canUse) notFound()
+
+  const stored = await store.read(actor.userId)
+  if (stored === null) notFound()
+
+  const notice = userCpNotice(query, await getTranslator())
+  const preview = await renderSignature(actor.userId, stored)
+
+  return (
+    <PanelPage
+      title={await tr('page.signature')}
+      lede={await tr('page.shown-under-every-post-have')}
+    >
+      {notice !== null && (
+        <BoardNotice kind={notice.kind} message={notice.message} dismissHref="/usercp/signature" />
+      )}
+
+      <SignatureForm
+        signature={stored.signature}
+        maxLength={signatureLimit(limits)}
+        locked={stored.locked}
+        lockedReason={stored.lockedReason}
+        copy={signatureFormCopy(signatureLimit(limits), await getTranslator())}
+      />
+
+      {preview !== null && (
+        <section className="flex flex-col gap-2">
+          <h2 className="text-sm font-medium">{await tr('page.how-it-looks')}</h2>
+          <div
+            className="rounded-lg border border-border bg-card p-4 text-sm"
+            dangerouslySetInnerHTML={{ __html: preview }}
+          />
+        </section>
+      )}
+    </PanelPage>
+  )
+}