@meith/web 0.16.0

package/app/admin/antispam/page.tsx

@@ -0,0 +1,155 @@
+import type { Metadata } from 'next'
+
+import { cn } from '@meith/ui'
+
+import { CaptchaQuestionRowForm, NewCaptchaQuestionForm } from '@/components/admin/content-forms'
+import { PANEL_CARD } from '@/components/shell/panel-list'
+import { PanelPage } from '@/components/shell/panel-page'
+import { adminPageContext } from '@/server/admin'
+import { captchaQuestionRepository } from '@/server/antispam'
+import { getTranslator, tr } from '@/server/i18n'
+import { getSettings } from '@/server/settings'
+import { contentAdminCopy } from '@/view/admin-content-copy'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.anti-spam') }
+}
+
+export default async function AdminAntispamPage() {
+  if ((await adminPageContext()) === null) return null
+
+  const repository = captchaQuestionRepository()
+  const settings = await getSettings()
+
+  const mode = settings.get('antispam.captcha_mode')
+  const questions = repository === null ? [] : await repository.list()
+  const usable = questions.filter((question) => question.enabled && question.answers.length > 0)
+
+  const translator = await getTranslator()
+  const copy = contentAdminCopy(translator)
+
+  return (
+    <PanelPage
+      title={await tr('page.anti-spam')}
+      lede={
+        <>
+          The thresholds are in{' '}
+          <a
+            href="/admin/settings?group=antispam"
+            className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+          >
+            {await tr('page.settings-anti-spam')}
+          </a>
+          {translator.t('adminAntispam.ledeEnd')}
+        </>
+      }
+      gap="loose"
+    >
+      {mode === 'question' && usable.length === 0 && (
+        <p className="rounded-lg border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm">
+          <strong>{await tr('page.challenge-switched-there-nothing-ask')}</strong>{' '}
+          {translator.t('adminAntispam.emptyChallenge')}
+        </p>
+      )}
+
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">
+          {await tr('page.registration-questions')}
+        </h2>
+        <p className="text-sm text-muted-foreground">
+          {translator.t('adminAntispam.questionsBefore')}{' '}
+          <strong>{await tr('page.ask-question')}</strong>
+          {translator.t('adminAntispam.questionsAfter')}
+        </p>
+        <p className="text-xs text-muted-foreground">
+          {translator.t('adminAntispam.answersBefore')}{' '}
+          <strong>{translator.t('adminAntispam.notSecret')}</strong>
+          {translator.t('adminAntispam.answersAfter')}
+        </p>
+
+        {repository === null ? (
+          <p className="text-sm text-muted-foreground">
+            {await tr('page.this-board-running-in-memory-sample-9')}
+          </p>
+        ) : (
+          <>
+            {questions.length === 0 ? (
+              <p className="text-sm text-muted-foreground">
+                {await tr('page.none-yet-challenge-asks-nothing')}
+              </p>
+            ) : (
+              <div className="flex flex-col divide-y divide-border">
+                {questions.map((question) => (
+                  <CaptchaQuestionRowForm key={question.id} question={question} copy={copy} />
+                ))}
+              </div>
+            )}
+
+            <div className="border-t border-border pt-3">
+              <NewCaptchaQuestionForm copy={copy} />
+            </div>
+          </>
+        )}
+      </section>
+
+      <section className={cn(PANEL_CARD, 'text-sm')}>
+        <h2 className="font-heading text-lg font-semibold">
+          {await tr('page.what-each-control-worth')}
+        </h2>
+        <dl className="flex flex-col gap-3 text-muted-foreground">
+          <div>
+            <dt className="font-medium text-foreground">{await tr('page.hidden-field-trap')}</dt>
+            <dd>{translator.t('adminAntispam.hiddenFieldHint')}</dd>
+          </div>
+          <div>
+            <dt className="font-medium text-foreground">{await tr('page.minimum-fill-time')}</dt>
+            <dd>{translator.t('adminAntispam.minimumTimeHint')}</dd>
+          </div>
+          <div>
+            <dt className="font-medium text-foreground">{await tr('page.question')}</dt>
+            <dd>{translator.t('adminAntispam.questionHint')}</dd>
+          </div>
+          <div>
+            <dt className="font-medium text-foreground">
+              {translator.t('adminAntispam.firstPosts')}
+            </dt>
+            <dd>
+              {translator.t('adminAntispam.firstPostsBefore')}{' '}
+              <a
+                href="/modcp"
+                className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+              >
+                {translator.t('adminAntispam.moderationQueue')}
+              </a>
+              {translator.t('adminAntispam.firstPostsAfter')}
+            </dd>
+          </div>
+          <div>
+            <dt className="font-medium text-foreground">{await tr('page.hourly-limits')}</dt>
+            <dd>
+              {translator.t('adminAntispam.hourlyBefore')}{' '}
+              <em>{translator.t('adminAntispam.different')}</em>
+              {translator.t('adminAntispam.hourlyBetween')}{' '}
+              <strong>{translator.t('adminAntispam.bypassFlood')}</strong>
+              {translator.t('adminAntispam.hourlyAfter')}
+            </dd>
+          </div>
+        </dl>
+      </section>
+
+      <section className={cn(PANEL_CARD, 'gap-2 text-sm')}>
+        <h2 className="font-heading text-lg font-semibold">
+          {await tr('page.using-hosted-captcha')}
+        </h2>
+        <p className="text-muted-foreground">{translator.t('adminAntispam.hostedHint')}</p>
+        <p className="text-muted-foreground">
+          {translator.t('adminAntispam.providerBefore')}{' '}
+          <code className="text-xs">CaptchaProvider</code>
+          {translator.t('adminAntispam.providerBetween')}{' '}
+          <code className="text-xs">packages/antispam</code>
+          {translator.t('adminAntispam.providerEnd')}
+        </p>
+      </section>
+    </PanelPage>
+  )
+}

package/app/admin/api/marketplace/screenshot/route.ts

@@ -0,0 +1,68 @@
+import type { NextRequest } from 'next/server'
+
+import { requireAdmin } from '@/server/admin'
+import { marketplaceScreenshotUrl } from '@/server/marketplace-admin'
+
+export const dynamic = 'force-dynamic'
+
+const TIMEOUT_MS = 10_000
+const MAX_BYTES = 5_000_000
+
+function fail(status: number, message: string): Response {
+  return new Response(message, {
+    status,
+    headers: { 'Content-Type': 'text/plain', 'Cache-Control': 'no-store' },
+  })
+}
+
+/**
+ * Streams one marketplace screenshot to the admin panel. The board fetches
+ * it, not the browser — this is the "proxied" half of "screenshots proxied
+ * or linked from the feed's own host only" (see docs/marketplace.md and the
+ * MEI-80 issue). `key` and `index` are looked up against the currently
+ * cached feed rather than trusted as a URL themselves, so nothing this route
+ * fetches is ever chosen by the caller.
+ */
+export async function GET(request: NextRequest): Promise<Response> {
+  try {
+    await requireAdmin()
+  } catch {
+    return fail(403, 'Enter the control panel and try again.')
+  }
+
+  const key = request.nextUrl.searchParams.get('key') ?? ''
+  const index = Number(request.nextUrl.searchParams.get('index') ?? '')
+  if (key === '' || !Number.isInteger(index) || index < 0) {
+    return fail(400, 'A screenshot needs a listing key and an index.')
+  }
+
+  const url = await marketplaceScreenshotUrl(key, index)
+  if (url === null) return fail(404, 'No such screenshot.')
+
+  const controller = new AbortController()
+  const timeout = setTimeout(() => controller.abort(), TIMEOUT_MS)
+
+  try {
+    const upstream = await fetch(url, {
+      signal: controller.signal,
+      headers: { accept: 'image/png' },
+    })
+    if (!upstream.ok) return fail(502, 'The catalog host did not answer with the screenshot.')
+
+    const bytes = await upstream.arrayBuffer()
+    if (bytes.byteLength > MAX_BYTES) return fail(502, 'The screenshot was larger than expected.')
+
+    return new Response(bytes, {
+      headers: {
+        'Content-Type': 'image/png',
+        'X-Content-Type-Options': 'nosniff',
+        'Content-Security-Policy': "default-src 'none'; sandbox",
+        'Cache-Control': 'private, max-age=3600',
+      },
+    })
+  } catch {
+    return fail(502, 'Could not reach the catalog host.')
+  } finally {
+    clearTimeout(timeout)
+  }
+}

package/app/admin/api/plugins/[key]/[...path]/route.ts

@@ -0,0 +1,27 @@
+import type { NextRequest } from 'next/server'
+
+import { dispatchPluginRoute } from '@/server/plugin-routes'
+
+export const dynamic = 'force-dynamic'
+
+async function handle(
+  request: NextRequest,
+  params: Promise<{ key: string; path: string[] }>,
+): Promise<Response> {
+  const { key, path } = await params
+  return dispatchPluginRoute(request, key, path, 'admin')
+}
+
+export async function GET(
+  request: NextRequest,
+  context: { params: Promise<{ key: string; path: string[] }> },
+): Promise<Response> {
+  return handle(request, context.params)
+}
+
+export async function POST(
+  request: NextRequest,
+  context: { params: Promise<{ key: string; path: string[] }> },
+): Promise<Response> {
+  return handle(request, context.params)
+}

package/app/admin/api-tokens/page.tsx

@@ -0,0 +1,129 @@
+import type { Metadata } from 'next'
+
+import { IssueTokenForm, RevokeTokenForm } from '@/components/admin/api-token-forms'
+import { PanelPage } from '@/components/shell/panel-page'
+import { adminPageContext } from '@/server/admin'
+import { buildApiTokenView } from '@/server/api-tokens-admin'
+import { getTranslator, tr } from '@/server/i18n'
+import { apiTokenFormsCopy } from '@/view/admin-panel-copy'
+import { formatTime } from '@/view/time'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.api-tokens') }
+}
+
+export default async function AdminApiTokensPage() {
+  if ((await adminPageContext()) === null) return null
+
+  const now = new Date()
+  const translator = await getTranslator()
+  const copy = apiTokenFormsCopy(translator)
+  const view = await buildApiTokenView(now)
+  const stateLabels = {
+    expired: translator.t('adminApiTokens.state.expired'),
+    live: translator.t('adminApiTokens.state.live'),
+    revoked: translator.t('adminApiTokens.state.revoked'),
+  }
+
+  if (view === null) {
+    return (
+      <PanelPage title={await tr('page.api-tokens')}>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {await tr('page.this-board-running-in-memory-sample-b')}
+        </p>
+      </PanelPage>
+    )
+  }
+
+  return (
+    <PanelPage
+      title={await tr('page.api-tokens')}
+      lede={
+        <>
+          {translator.t('adminApiTokens.ledeBefore')}{' '}
+          <code className="font-mono text-xs">/api/v1</code>
+          {translator.t('adminApiTokens.ledeAfter')}
+        </>
+      }
+      gap="loose"
+    >
+      <section className="flex flex-col gap-3">
+        <h2 className="font-heading text-lg font-semibold">{await tr('page.issue-token')}</h2>
+        <IssueTokenForm scopes={view.scopes} copy={copy} />
+      </section>
+
+      <section className="flex flex-col gap-3">
+        <h2 className="font-heading text-lg font-semibold">{await tr('page.existing-tokens')}</h2>
+
+        {view.tokens.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            {await tr('page.no-tokens-have-been-issued')}
+          </p>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full border-collapse text-sm">
+              <thead>
+                <tr className="border-b border-border text-left">
+                  <th scope="col" className="py-2 pr-3 font-medium">
+                    {translator.t('adminApiTokens.name')}
+                  </th>
+                  <th scope="col" className="py-2 pr-3 font-medium">
+                    {translator.t('adminApiTokens.owner')}
+                  </th>
+                  <th scope="col" className="py-2 pr-3 font-medium">
+                    {translator.t('adminApiTokens.prefix')}
+                  </th>
+                  <th scope="col" className="py-2 pr-3 font-medium">
+                    {translator.t('adminApiTokens.scopes')}
+                  </th>
+                  <th scope="col" className="py-2 pr-3 font-medium">
+                    {await tr('page.last-used')}
+                  </th>
+                  <th scope="col" className="py-2 pr-3 font-medium">
+                    {translator.t('adminApiTokens.state')}
+                  </th>
+                  <th scope="col" className="py-2 font-medium">
+                    <span className="sr-only">{translator.t('adminApiTokens.actions')}</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {view.tokens.map((token) => (
+                  <tr key={token.id} className="border-b border-border align-top">
+                    <td className="py-2 pr-3">{token.name}</td>
+                    <td className="py-2 pr-3">{token.username}</td>
+                    <td className="py-2 pr-3 font-mono text-xs">{token.lookup}</td>
+                    <td className="py-2 pr-3 font-mono text-xs">{token.scopes.join(' ')}</td>
+                    <td className="py-2 pr-3">
+                      {token.lastUsedAt === null
+                        ? translator.t('adminApiTokens.never')
+                        : formatTime(token.lastUsedAt, now, translator).label}
+                    </td>
+                    <td className="py-2 pr-3">
+                      <span
+                        className={
+                          token.state === 'live'
+                            ? 'text-moderation-approved'
+                            : token.state === 'expired'
+                              ? 'text-thread-unapproved'
+                              : 'text-muted-foreground'
+                        }
+                      >
+                        {stateLabels[token.state]}
+                      </span>
+                    </td>
+                    <td className="py-2">
+                      {token.state === 'revoked' ? null : (
+                        <RevokeTokenForm tokenId={token.id} copy={copy} />
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+    </PanelPage>
+  )
+}

package/app/admin/content/announcements/page.tsx

@@ -0,0 +1,110 @@
+import type { Metadata } from 'next'
+
+import { cn } from '@meith/ui'
+
+import {
+  AnnouncementRowForm,
+  type AnnouncementValues,
+  type ForumChoice,
+  NewAnnouncementForm,
+} from '@/components/admin/content-forms'
+import { PANEL_CARD, PANEL_LIST, PANEL_NOTE } from '@/components/shell/panel-list'
+import { PanelPage } from '@/components/shell/panel-page'
+import { adminPageContext } from '@/server/admin'
+import { announcementRepository } from '@/server/announcements'
+import { getContainer } from '@/server/container'
+import { getTranslator, tr } from '@/server/i18n'
+import { contentAdminCopy } from '@/view/admin-content-copy'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.announcements') }
+}
+
+export default async function AdminAnnouncementsPage() {
+  if ((await adminPageContext()) === null) return null
+
+  const repository = announcementRepository()
+  if (repository === null) {
+    return (
+      <PanelPage title={await tr('page.announcements')}>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {await tr('page.this-board-running-in-memory-sample-5')}
+        </p>
+      </PanelPage>
+    )
+  }
+
+  const { forums } = getContainer()
+  const [rows, tree] = await Promise.all([repository.list(), forums.listListing()])
+
+  const choices: readonly ForumChoice[] = tree
+    .filter((row) => row.type === 'forum')
+    .map((row) => ({
+      id: row.id,
+      label: `${' '.repeat(row.depth)}${row.title}`,
+    }))
+
+  const forInput = (at: Date | null): string => (at === null ? '' : at.toISOString().slice(0, 16))
+
+  const now = new Date()
+
+  const translator = await getTranslator()
+  const copy = contentAdminCopy(translator)
+
+  return (
+    <PanelPage
+      back={{ href: '/admin/content', label: translator.t('page.content') }}
+      title={await tr('page.announcements')}
+      lede={translator.t('adminAnnouncements.lede')}
+      gap="loose"
+    >
+      {rows.length === 0 ? (
+        <p className={PANEL_NOTE}>{await tr('page.none-board-shows-no-announcements')}</p>
+      ) : (
+        <section className={cn(PANEL_LIST, 'px-4')}>
+          {rows.map((row) => {
+            const live =
+              row.enabled && row.startsAt <= now && (row.endsAt === null || row.endsAt > now)
+            const state = !row.enabled
+              ? translator.t('adminAnnouncements.state.off')
+              : row.startsAt > now
+                ? translator.t('adminAnnouncements.state.scheduled')
+                : row.endsAt !== null && row.endsAt <= now
+                  ? translator.t('adminAnnouncements.state.expired')
+                  : translator.t('adminAnnouncements.state.showing')
+
+            const values: AnnouncementValues = {
+              id: row.id,
+              forumId: row.forumId,
+              title: row.title,
+              message: row.message,
+              startsAtInput: forInput(row.startsAt),
+              endsAtInput: forInput(row.endsAt),
+              enabled: row.enabled,
+            }
+
+            return (
+              <div key={row.id} className="flex flex-col gap-1">
+                <p className="pt-4 text-xs text-muted-foreground">
+                  <span className={live ? 'font-medium text-foreground' : 'font-medium'}>
+                    {state}
+                  </span>
+                  {' · '}
+                  {row.forumTitle ?? translator.t('adminAnnouncements.wholeBoard')}
+                  {row.authorUsername !== '' &&
+                    translator.t('adminAnnouncements.by', { username: row.authorUsername })}
+                </p>
+                <AnnouncementRowForm announcement={values} forums={choices} copy={copy} />
+              </div>
+            )
+          })}
+        </section>
+      )}
+
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">{await tr('page.new-announcement')}</h2>
+        <NewAnnouncementForm forums={choices} copy={copy} />
+      </section>
+    </PanelPage>
+  )
+}