@meith/web 0.16.0

package/src/server/auth-mail.ts

@@ -0,0 +1,104 @@
+import 'server-only'
+
+import { VERIFICATION_TTL_HOURS } from '@meith/accounts'
+import { logger } from '@meith/core'
+import type { Translator } from '@meith/i18n'
+import { absoluteUrl, type MailBody, renderMail } from '@meith/mail'
+
+import { AUTH_CONFIG } from './auth-config'
+import { brandedFor } from './mail-brand'
+import { sendBoardMail } from './mail-send'
+
+const VERIFY_PATH = '/verify'
+const RESET_PATH = '/reset/confirm'
+
+const FALLBACK_KEY = 'authMail.boardFallback'
+
+async function send(input: {
+  readonly email: string
+  readonly body: (board: string, link: string | null) => MailBody
+  readonly path: string
+  readonly token: string
+  readonly t: Translator
+  readonly failure: string
+  readonly template: string
+}): Promise<void> {
+  const { brand, boardName } = await brandedFor(input.t, FALLBACK_KEY)
+  const link = absoluteUrl(brand.boardUrl, `${input.path}?token=${encodeURIComponent(input.token)}`)
+
+  const mail = renderMail({ brand, t: input.t, body: input.body(boardName, link) })
+  const fromName = brand.fromName ?? ''
+
+  try {
+    await sendBoardMail(input.template, {
+      to: input.email,
+      subject: mail.subject,
+      text: mail.text,
+      html: mail.html,
+      ...(fromName === '' ? {} : { fromName }),
+    })
+  } catch (err) {
+    logger({ module: 'auth' }).error({ err }, input.failure)
+    throw err
+  }
+}
+
+export async function sendVerificationEmail(input: {
+  readonly token: string
+  readonly email: string
+  readonly username: string
+  readonly t: Translator
+}): Promise<void> {
+  const { t } = input
+
+  await send({
+    email: input.email,
+    path: VERIFY_PATH,
+    token: input.token,
+    t,
+    failure: 'could not send a verification e-mail',
+    template: 'auth.verify',
+    body: (board, link) => ({
+      title: t.t('authMail.verify.subject'),
+      greeting: t.t('authMail.greeting', { username: input.username }),
+      paragraphs: [
+        t.t('authMail.verify.intro', { board }),
+        ...(link === null ? [t.t('authMail.verify.noLink', { board })] : []),
+        t.t('authMail.verify.ignore'),
+      ],
+      ...(link === null ? {} : { action: { label: t.t('authMail.verify.action'), href: link } }),
+      note: t.t('authMail.linkHours', { hours: VERIFICATION_TTL_HOURS }),
+      footer: [{ text: t.t('mail.footer.sentBy', { board }) }],
+    }),
+  })
+}
+
+export async function sendPasswordResetEmail(input: {
+  readonly token: string
+  readonly email: string
+  readonly username: string
+  readonly t: Translator
+}): Promise<void> {
+  const { t } = input
+
+  await send({
+    email: input.email,
+    path: RESET_PATH,
+    token: input.token,
+    t,
+    failure: 'could not send a password reset e-mail',
+    template: 'auth.reset',
+    body: (board, link) => ({
+      title: t.t('authMail.reset.subject'),
+      greeting: t.t('authMail.greeting', { username: input.username }),
+      paragraphs: [
+        t.t('authMail.reset.intro', { board }),
+        ...(link === null ? [t.t('authMail.reset.noLink', { board })] : []),
+        t.t('authMail.reset.ignore'),
+      ],
+      ...(link === null ? {} : { action: { label: t.t('authMail.reset.action'), href: link } }),
+      note: t.t('authMail.linkMinutes', { minutes: AUTH_CONFIG.resetTokenTtlMinutes }),
+      footer: [{ text: t.t('mail.footer.sentBy', { board }) }],
+    }),
+  })
+}

package/src/server/avatars.ts

@@ -0,0 +1,83 @@
+import { msg } from '@meith/i18n'
+import 'server-only'
+
+import { cache } from 'react'
+
+import type { Actor } from '@meith/authorization'
+import {
+  AvatarService,
+  avatarUrl,
+  avatarVisible,
+  NO_AVATAR,
+  type StoredAvatar,
+} from '@meith/avatars'
+import { ForbiddenError } from '@meith/core'
+import { drivers } from '@meith/drivers'
+import { imageProcessor } from '@meith/drivers/images'
+
+import { getContainer } from './container'
+
+export const AVATAR_FIELD = 'avatar'
+
+export function avatarService(): AvatarService | null {
+  const { avatars } = getContainer()
+  if (avatars === null) return null
+
+  return new AvatarService({
+    avatars,
+    files: drivers().files,
+    images: imageProcessor,
+  })
+}
+
+export async function avatarFor(userId: number): Promise<StoredAvatar> {
+  const { avatars } = getContainer()
+  if (avatars === null) return NO_AVATAR
+  return (await avatars.find(userId)) ?? NO_AVATAR
+}
+
+export const avatarsFor = cache(
+  async (userIds: readonly number[]): Promise<ReadonlyMap<number, string>> => {
+    const { avatars } = getContainer()
+    if (avatars === null || userIds.length === 0) return new Map()
+
+    const stored = await avatars.readMany(userIds)
+    const urls = new Map<number, string>()
+    for (const [userId, avatar] of stored) {
+      const url = avatarUrl(userId, avatar)
+      if (url !== null) urls.set(userId, url)
+    }
+    return urls
+  },
+)
+
+export function canUploadAvatar(actor: Actor): boolean {
+  const { authorizer } = getContainer()
+  return avatarService() !== null && actor.userId !== null && authorizer.can(actor, 'avatar.upload')
+}
+
+export async function resolveAvatar(
+  actor: Actor,
+  userId: number,
+): Promise<{ readonly key: string } | null> {
+  const { avatars, authorizer } = getContainer()
+  if (avatars === null) return null
+
+  if (!authorizer.can(actor, 'profile.view')) return null
+
+  const avatar = await avatars.find(userId)
+  if (avatar === null || !avatarVisible(avatar) || avatar.key === null) return null
+
+  return { key: avatar.key }
+}
+
+export function requireAvatarService(actor: Actor): AvatarService {
+  const service = avatarService()
+  if (service === null) {
+    throw new ForbiddenError(msg('error.app.board-accept-avatar-uploads'))
+  }
+  if (actor.userId === null) {
+    throw new ForbiddenError(msg('error.app.must-logged-change-avatar'))
+  }
+  return service
+}

package/src/server/board-latest-actions.ts

@@ -0,0 +1,7 @@
+'use server'
+
+import { renderLatestPanels } from './board-latest'
+
+export async function refreshLatestPanels(): Promise<React.ReactNode> {
+  return renderLatestPanels()
+}

package/src/server/board-latest.tsx

@@ -0,0 +1,103 @@
+import 'server-only'
+
+import type { Actor } from '@meith/authorization'
+import { contentScopeFrom } from '@meith/core'
+import { getDb, type LatestScope, PostgresLatestRepository } from '@meith/db'
+import { requireSlot, slotCopy } from '@meith/theme-kit'
+
+import { getTranslator } from '@/server/i18n'
+import { buildLatestPostsModel, buildLatestThreadsModel } from '@/view/board-latest'
+import { distinctUserIds } from '@/view/member-identity'
+
+import { getContainer } from './container'
+import { activeWordFilter } from './content-admin'
+import { getActor } from './context'
+import { identitiesFor } from './group-identity'
+import { filterView, viewerRef } from './plugin-view'
+import { currentTheme } from './theme'
+import { getViewerPreferences } from './viewer-preferences'
+
+export const LATEST_ROWS = 5
+
+export const LATEST_REFRESH_SECONDS = 60
+
+export function latestRepository(): PostgresLatestRepository | null {
+  return getContainer().dataSource === 'postgres' ? new PostgresLatestRepository(getDb()) : null
+}
+
+export async function latestScopeFor(actor: Actor): Promise<LatestScope> {
+  const { authorizer } = getContainer()
+  const staff = actor.global.isAdministrator === true || actor.global.isSuperModerator === true
+
+  return {
+    ...(await authorizer.threadAudience(actor)),
+    content: contentScopeFrom({ seesUnapproved: staff, seesDeleted: staff }),
+  }
+}
+
+export async function renderLatestPanels(): Promise<React.ReactNode> {
+  const repo = latestRepository()
+  if (repo === null) return null
+
+  const actor = await getActor()
+  const now = new Date()
+  const translator = await getTranslator()
+
+  let threadRows: Awaited<ReturnType<PostgresLatestRepository['threads']>>
+  let postRows: Awaited<ReturnType<PostgresLatestRepository['posts']>>
+  try {
+    const scope = await latestScopeFor(actor)
+    ;[threadRows, postRows] = await Promise.all([
+      repo.threads(LATEST_ROWS, scope),
+      repo.posts(LATEST_ROWS, scope),
+    ])
+  } catch {
+    return null
+  }
+
+  const _preferences = await getViewerPreferences()
+  const identities = await identitiesFor(
+    distinctUserIds([
+      ...threadRows.map((row) => row.authorUserId),
+      ...postRows.map((row) => row.authorUserId),
+    ]),
+  )
+
+  const wordFilter = await activeWordFilter()
+
+  const theme = await currentTheme()
+  const LatestThreads = requireSlot(theme, 'LatestThreads')
+  const LatestPosts = requireSlot(theme, 'LatestPosts')
+
+  const context = viewerRef(actor)
+  const [threads, posts] = await Promise.all([
+    filterView(
+      'view.latest-threads',
+      buildLatestThreadsModel({
+        rows: threadRows,
+        now,
+        t: translator,
+        identities,
+      }),
+      context,
+    ),
+    filterView(
+      'view.latest-posts',
+      buildLatestPostsModel({
+        rows: postRows,
+        now,
+        t: translator,
+        identities,
+        wordFilter,
+      }),
+      context,
+    ),
+  ])
+
+  return (
+    <>
+      <LatestThreads {...threads} copy={slotCopy(theme, 'LatestThreads', translator)} />
+      <LatestPosts {...posts} copy={slotCopy(theme, 'LatestPosts', translator)} />
+    </>
+  )
+}

package/src/server/board-offline.ts

@@ -0,0 +1,23 @@
+import 'server-only'
+
+import type { Actor } from '@meith/authorization'
+
+import { getContainer } from './container'
+import { getActor } from './context'
+import { tr } from './i18n'
+import { getSettings } from './settings'
+
+export interface BoardOffline {
+  readonly message: string
+}
+
+export async function boardOffline(viewer?: Actor): Promise<BoardOffline | null> {
+  const settings = await getSettings()
+  if (settings.get('board.offline') !== true) return null
+
+  const actor = viewer ?? (await getActor())
+  if (getContainer().authorizer.can(actor, 'board.viewOffline')) return null
+
+  const message = settings.get('board.offline_message').trim()
+  return { message: message === '' ? await tr('offline.fallback') : message }
+}

package/src/server/board-url.ts

@@ -0,0 +1,14 @@
+import 'server-only'
+
+import { env } from '@meith/core'
+import { type BoardUrlResolution, resolveBoardUrl } from '@meith/settings'
+
+import { getSettings } from './settings'
+
+export async function boardUrlResolution(): Promise<BoardUrlResolution> {
+  return resolveBoardUrl({ environment: env, settings: await getSettings() })
+}
+
+export async function boardUrl(): Promise<string> {
+  return (await boardUrlResolution()).url
+}

package/src/server/brand-assets.ts

@@ -0,0 +1,151 @@
+import 'server-only'
+
+import { drivers } from '@meith/drivers'
+import { DARK_TOKENS, LIGHT_TOKENS } from '@meith/theme-default'
+import { colourToHex } from '@meith/theme-kit'
+
+import { BOARD_TITLE } from '@/view/shell'
+
+import { logoKey } from './branding'
+import { contentTypeFor } from './image-upload'
+import { getSettings } from './settings'
+import { getBoardThemeStyle } from './theme-runtime'
+import type { ThemeTokens } from './theme-style'
+
+export type BrandScheme = 'light' | 'dark'
+
+export interface BrandPalette {
+  readonly background: string
+  readonly foreground: string
+  readonly primary: string
+  readonly primaryForeground: string
+  readonly muted: string
+  readonly border: string
+}
+
+export interface BrandInfo {
+  readonly title: string
+  readonly description: string
+  readonly initials: string
+  readonly light: BrandPalette
+  readonly dark: BrandPalette
+}
+
+const EMBEDDABLE_LOGO_TYPES = new Set(['image/png', 'image/jpeg'])
+
+const MAX_EMBEDDED_LOGO_BYTES = 192 * 1024
+
+const DESCRIPTION_LIMIT = 160
+
+const MARK_FONT_STACK = 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
+
+function hex(value: string | undefined, fallback: string | undefined, ultimate: string): string {
+  return (
+    (value !== undefined ? colourToHex(value) : null) ??
+    (fallback !== undefined ? colourToHex(fallback) : null) ??
+    ultimate
+  )
+}
+
+function paletteFor(
+  tokens: Readonly<Record<string, string>>,
+  defaults: Readonly<Record<string, string>>,
+): BrandPalette {
+  return {
+    background: hex(tokens.background, defaults.background, '#ffffff'),
+    foreground: hex(tokens.foreground, defaults.foreground, '#111111'),
+    primary: hex(tokens.primary, defaults.primary, '#111111'),
+    primaryForeground: hex(tokens['primary-foreground'], defaults['primary-foreground'], '#ffffff'),
+    muted: hex(tokens['muted-foreground'], defaults['muted-foreground'], '#666666'),
+    border: hex(tokens.border, defaults.border, '#dddddd'),
+  }
+}
+
+export function brandInitials(name: string): string {
+  const words = name
+    .trim()
+    .split(/\s+/)
+    .filter((word) => word.length > 0)
+  if (words.length === 0) return '?'
+
+  const first = Array.from(words[0] ?? '')[0] ?? ''
+  const second = words.length > 1 ? (Array.from(words[1] ?? '')[0] ?? '') : ''
+  const letters = `${first}${second}`
+  return letters === '' ? '?' : letters.toUpperCase()
+}
+
+export function trimDescription(description: string): string {
+  const clean = description.trim()
+  if (clean.length <= DESCRIPTION_LIMIT) return clean
+  return `${clean.slice(0, DESCRIPTION_LIMIT - 1).trimEnd()}…`
+}
+
+export async function loadBrandInfo(): Promise<BrandInfo> {
+  let title = BOARD_TITLE
+  let description = ''
+  let tokens: ThemeTokens = { light: LIGHT_TOKENS, dark: DARK_TOKENS }
+
+  try {
+    const settings = await getSettings()
+    title = settings.get('board.name').trim() || BOARD_TITLE
+    description = settings.get('board.description').trim()
+  } catch {
+    /* ignore */
+  }
+
+  try {
+    tokens = (await getBoardThemeStyle()).defaultTokens
+  } catch {
+    /* ignore */
+  }
+
+  return {
+    title,
+    description: trimDescription(description),
+    initials: brandInitials(title),
+    light: paletteFor(tokens.light, LIGHT_TOKENS),
+    dark: paletteFor(tokens.dark, DARK_TOKENS),
+  }
+}
+
+export async function loadLogoDataUri(scheme: BrandScheme): Promise<string | null> {
+  try {
+    const key = (await logoKey(scheme)) ?? (await logoKey(scheme === 'light' ? 'dark' : 'light'))
+    if (key === null) return null
+
+    const type = contentTypeFor(key)
+    if (!EMBEDDABLE_LOGO_TYPES.has(type)) return null
+
+    const bytes = await drivers().files.get(key)
+    if (bytes === undefined || bytes.byteLength === 0) return null
+    if (bytes.byteLength > MAX_EMBEDDED_LOGO_BYTES) return null
+
+    return `data:${type};base64,${Buffer.from(bytes).toString('base64')}`
+  } catch {
+    return null
+  }
+}
+
+function escapeXml(value: string): string {
+  return value
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;')
+}
+
+export function buildFaviconSvg(info: BrandInfo): string {
+  const label = escapeXml(info.initials)
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">`,
+    `<style>`,
+    `.brand-bg{fill:${info.light.primary}}.brand-fg{fill:${info.light.primaryForeground}}`,
+    `@media(prefers-color-scheme:dark){`,
+    `.brand-bg{fill:${info.dark.primary}}.brand-fg{fill:${info.dark.primaryForeground}}}`,
+    `</style>`,
+    `<rect class="brand-bg" width="64" height="64" rx="14"/>`,
+    `<text class="brand-fg" x="32" y="35" text-anchor="middle" dominant-baseline="central" font-family="${MARK_FONT_STACK}" font-size="34" font-weight="700">${label}</text>`,
+    `</svg>`,
+  ].join('')
+}

package/src/server/brand-mark.tsx

@@ -0,0 +1,110 @@
+import 'server-only'
+
+import { ImageResponse } from 'next/og'
+import type { ReactElement } from 'react'
+
+import { type BrandInfo, loadBrandInfo, loadLogoDataUri } from './brand-assets'
+
+interface MarkOptions {
+  readonly size: number
+  readonly maskable?: boolean
+}
+
+function markElement(info: BrandInfo, logo: string | null, options: MarkOptions): ReactElement {
+  const palette = info.light
+  const safeArea = options.maskable ? 0.62 : 0.76
+  const box = Math.round(options.size * safeArea)
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: palette.background,
+      }}
+    >
+      {logo === null ? (
+        <div
+          style={{
+            display: 'flex',
+            fontSize: Math.round(box * 0.72),
+            fontWeight: 700,
+            color: palette.primary,
+          }}
+        >
+          {info.initials}
+        </div>
+      ) : (
+        <img src={logo} width={box} height={box} style={{ objectFit: 'contain' }} alt="" />
+      )}
+    </div>
+  )
+}
+
+function socialElement(info: BrandInfo, logo: string | null): ReactElement {
+  const palette = info.light
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        background: palette.background,
+        padding: '80px',
+      }}
+    >
+      {logo !== null && (
+        <img src={logo} height={112} style={{ objectFit: 'contain', marginBottom: 44 }} alt="" />
+      )}
+      <div
+        style={{
+          display: 'flex',
+          fontSize: 74,
+          fontWeight: 700,
+          color: palette.foreground,
+          lineHeight: 1.05,
+        }}
+      >
+        {info.title}
+      </div>
+      {info.description !== '' && (
+        <div style={{ display: 'flex', fontSize: 34, color: palette.muted, marginTop: 28 }}>
+          {info.description}
+        </div>
+      )}
+      <div
+        style={{
+          display: 'flex',
+          width: 184,
+          height: 14,
+          background: palette.primary,
+          borderRadius: 7,
+          marginTop: 48,
+        }}
+      />
+    </div>
+  )
+}
+
+export async function renderBrandMark(size: number, maskable = false): Promise<ImageResponse> {
+  const info = await loadBrandInfo()
+  const logo = await loadLogoDataUri('light')
+
+  return new ImageResponse(markElement(info, logo, { size, maskable }), {
+    width: size,
+    height: size,
+  })
+}
+
+export async function renderBrandSocial(): Promise<ImageResponse> {
+  const info = await loadBrandInfo()
+  const logo = await loadLogoDataUri('light')
+
+  return new ImageResponse(socialElement(info, logo), { width: 1200, height: 630 })
+}

package/src/server/branding-actions.ts

@@ -0,0 +1,53 @@
+'use server'
+
+import { ValidationError } from '@meith/core'
+import { msg } from '@meith/i18n'
+
+import { recordAdminAction, requireAdmin } from './admin'
+import type { FormState } from './auth-form-state'
+import { isLogoScheme, LOGO_FIELD, removeLogo, saveLogo } from './branding'
+import { formStateReporter } from './form-state-reporter'
+
+const toFormState = formStateReporter('branding', 'logo write failed')
+
+function scheme(form: FormData): 'light' | 'dark' {
+  const value = form.get('scheme')
+  if (!isLogoScheme(value)) throw new ValidationError(msg('error.app.such-logo'))
+  return value
+}
+
+export async function saveLogoAction(_prev: FormState, form: FormData): Promise<FormState> {
+  try {
+    await requireAdmin()
+    const target = scheme(form)
+
+    const file = form.get(LOGO_FIELD)
+    if (!(file instanceof File) || file.size === 0) {
+      throw new ValidationError(msg('error.app.choose-image-first'))
+    }
+
+    await saveLogo(target, file)
+    await recordAdminAction({
+      action: 'branding.logo_saved',
+      detail: { scheme: target, bytes: file.size },
+    })
+
+    return { notice: 'saved' }
+  } catch (err) {
+    return toFormState(err)
+  }
+}
+
+export async function removeLogoAction(_prev: FormState, form: FormData): Promise<FormState> {
+  try {
+    await requireAdmin()
+    const target = scheme(form)
+
+    await removeLogo(target)
+    await recordAdminAction({ action: 'branding.logo_removed', detail: { scheme: target } })
+
+    return { notice: 'removed' }
+  } catch (err) {
+    return toFormState(err)
+  }
+}