@meith/web 0.16.0

package/src/components/admin/api-token-forms.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { issueApiTokenAction, revokeApiTokenAction } from '@/server/api-token-actions'
+import { EMPTY_STATE } from '@/server/auth-form-state'
+
+import { FormError, SubmitButton } from '../auth/form-controls'
+import { type Copy, fromCopy } from '../shell/copy'
+
+export function IssueTokenForm({ scopes, copy }: { scopes: readonly string[]; copy: Copy }) {
+  const [state, action] = useActionState(issueApiTokenAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-4">
+      <FormError message={state.error} />
+
+      {state.notice === 'issued' && state.values?.token !== undefined && (
+        <div
+          role="status"
+          className="flex flex-col gap-2 rounded-md border border-accent bg-post-highlight px-3 py-3"
+        >
+          <p className="text-sm font-semibold">{fromCopy(copy, 'adminPanel.token.copyNow')}</p>
+          <code className="block overflow-x-auto rounded-sm bg-card px-2 py-1 font-mono text-sm">
+            {state.values.token}
+          </code>
+        </div>
+      )}
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'adminPanel.token.name')}</span>
+        <input
+          name="name"
+          required
+          maxLength={80}
+          placeholder={fromCopy(copy, 'adminPanel.token.namePlaceholder')}
+          className="rounded-sm border border-input bg-card px-2 py-1"
+        />
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'adminPanel.token.nameHint')}
+        </span>
+      </label>
+
+      <fieldset className="flex flex-col gap-2">
+        <legend className="text-sm font-medium">{fromCopy(copy, 'adminPanel.token.scopes')}</legend>
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'adminPanel.token.scopesHint')}
+        </span>
+        <div className="flex flex-wrap gap-x-4 gap-y-2">
+          {scopes.map((scope) => (
+            <label key={scope} className="flex items-center gap-2 text-sm">
+              <input type="checkbox" name="scopes" value={scope} />
+              <code className="font-mono text-xs">{scope}</code>
+            </label>
+          ))}
+        </div>
+      </fieldset>
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'adminPanel.token.expiresInDays')}</span>
+        <input
+          name="expiresInDays"
+          inputMode="numeric"
+          placeholder={fromCopy(copy, 'adminPanel.token.expiresPlaceholder')}
+          className="w-56 rounded-sm border border-input bg-card px-2 py-1"
+        />
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'adminPanel.token.expiresHint')}
+        </span>
+      </label>
+
+      <SubmitButton>{fromCopy(copy, 'adminPanel.token.issue')}</SubmitButton>
+    </form>
+  )
+}
+
+export function RevokeTokenForm({ tokenId, copy }: { tokenId: number; copy: Copy }) {
+  const [state, action] = useActionState(revokeApiTokenAction, EMPTY_STATE)
+
+  return (
+    <form action={action}>
+      <input type="hidden" name="tokenId" value={tokenId} />
+      <SubmitButton>{fromCopy(copy, 'adminPanel.token.revoke')}</SubmitButton>
+      {state.error !== undefined && (
+        <span className="ml-2 text-xs text-destructive">{state.error}</span>
+      )}
+    </form>
+  )
+}

package/src/components/admin/badge-forms.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { cn } from '@meith/ui'
+
+import { PANEL_CARD } from '@/components/shell/panel-list'
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { removeBadgeAction, saveBadgeAction } from '@/server/group-badge-actions'
+
+import { FormError, SubmitButton } from '../auth/form-controls'
+import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+
+const GHOST =
+  'inline-flex h-8 items-center justify-center rounded-md border border-border px-3 text-xs font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+export function BadgeUploadForm({
+  groupId,
+  scheme,
+  label,
+  src,
+  maxKib,
+  copy,
+}: {
+  groupId: number
+  scheme: 'light' | 'dark'
+  label: string
+  src: string | null
+  maxKib: number
+  copy: Copy
+}) {
+  const [saved, saveAction] = useActionState(saveBadgeAction, EMPTY_STATE)
+  const [removed, removeAction] = useActionState(removeBadgeAction, EMPTY_STATE)
+
+  const id = `badge-${groupId}-${scheme}`
+
+  return (
+    <div className={cn(PANEL_CARD, 'gap-3 p-3')}>
+      <h3 className="text-sm font-medium">{label}</h3>
+
+      <FormError message={saved.error ?? removed.error} />
+      {(saved.notice === 'saved' || removed.notice === 'removed') && (
+        <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
+          {saved.notice === 'saved'
+            ? fromCopy(copy, 'admin.saved')
+            : fromCopy(copy, 'adminPanel.badge.removed')}
+        </p>
+      )}
+
+      <div
+        className={`flex min-h-12 items-center justify-center rounded-md border border-border bg-card p-2 ${
+          scheme === 'dark' ? 'dark' : ''
+        }`}
+      >
+        {src === null ? (
+          <span className="text-xs text-muted-foreground">
+            {fromCopy(copy, 'adminPanel.badge.noBadge')}
+          </span>
+        ) : (
+          <img src={src} alt="" className="h-5 w-auto max-w-24 object-contain" />
+        )}
+      </div>
+
+      <form action={saveAction} className="flex flex-col gap-2">
+        <input type="hidden" name="groupId" value={groupId} />
+        <input type="hidden" name="scheme" value={scheme} />
+        <label htmlFor={id} className="sr-only">
+          {formatFromCopy(copy, 'adminPanel.badge.labelSr', { label })}
+        </label>
+        <input
+          id={id}
+          type="file"
+          name="badge"
+          accept="image/png,image/jpeg,image/webp,image/svg+xml"
+          required
+          className="w-full text-xs file:mr-3 file:rounded-md file:border file:border-border file:bg-background file:px-3 file:py-1.5 file:text-xs file:font-medium"
+        />
+        <p className="text-xs text-muted-foreground">
+          {formatFromCopy(copy, 'adminPanel.badge.formats', { maxKib })}
+        </p>
+        <div>
+          <SubmitButton>{fromCopy(copy, 'adminPanel.badge.upload')}</SubmitButton>
+        </div>
+      </form>
+
+      {src !== null && (
+        <form action={removeAction}>
+          <input type="hidden" name="groupId" value={groupId} />
+          <input type="hidden" name="scheme" value={scheme} />
+          <button type="submit" className={GHOST}>
+            {fromCopy(copy, 'admin.remove')}
+          </button>
+        </form>
+      )}
+    </div>
+  )
+}

package/src/components/admin/branding-forms.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { PANEL_CARD } from '@/components/shell/panel-list'
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { removeLogoAction, saveLogoAction } from '@/server/branding-actions'
+
+import { FormError, SubmitButton } from '../auth/form-controls'
+import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+
+export interface LogoSlot {
+  readonly scheme: 'light' | 'dark'
+  readonly label: string
+  readonly hint: string
+  readonly src: string | null
+}
+
+const GHOST =
+  'inline-flex h-8 items-center justify-center rounded-md border border-border px-3 text-xs font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+export function LogoUploadForm({
+  slot,
+  maxKib,
+  copy,
+}: {
+  slot: LogoSlot
+  maxKib: number
+  copy: Copy
+}) {
+  const [saved, saveAction] = useActionState(saveLogoAction, EMPTY_STATE)
+  const [removed, removeAction] = useActionState(removeLogoAction, EMPTY_STATE)
+
+  const id = `logo-${slot.scheme}`
+
+  return (
+    <div className={PANEL_CARD}>
+      <div className="flex flex-col gap-1">
+        <h3 className="text-sm font-medium">{slot.label}</h3>
+        <p className="text-xs text-muted-foreground">{slot.hint}</p>
+      </div>
+
+      <FormError message={saved.error ?? removed.error} />
+      {saved.notice === 'saved' && (
+        <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
+          {fromCopy(copy, 'adminPanel.branding.saved')}
+        </p>
+      )}
+      {removed.notice === 'removed' && (
+        <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
+          {fromCopy(copy, 'adminPanel.branding.removed')}
+        </p>
+      )}
+
+      <div
+        className={`flex min-h-16 items-center justify-center rounded-md border border-border bg-card p-3 ${
+          slot.scheme === 'dark' ? 'dark' : ''
+        }`}
+      >
+        {slot.src === null ? (
+          <span className="text-xs text-muted-foreground">
+            {fromCopy(copy, 'adminPanel.branding.nothing')}
+          </span>
+        ) : (
+          <img src={slot.src} alt="" className="h-8 w-auto max-w-48 object-contain" />
+        )}
+      </div>
+
+      <form action={saveAction} className="flex flex-col gap-2">
+        <input type="hidden" name="scheme" value={slot.scheme} />
+        <label htmlFor={id} className="sr-only">
+          {slot.label}
+        </label>
+        <input
+          id={id}
+          type="file"
+          name="logo"
+          accept="image/png,image/jpeg,image/webp,image/svg+xml"
+          required
+          className="w-full text-xs file:mr-3 file:rounded-md file:border file:border-border file:bg-background file:px-3 file:py-1.5 file:text-xs file:font-medium"
+        />
+        <p className="text-xs text-muted-foreground">
+          {formatFromCopy(copy, 'adminPanel.branding.formats', { maxKib })}
+        </p>
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="min-w-32">
+            <SubmitButton>{fromCopy(copy, 'adminPanel.branding.upload')}</SubmitButton>
+          </span>
+        </div>
+      </form>
+
+      {slot.src !== null && (
+        <form action={removeAction}>
+          <input type="hidden" name="scheme" value={slot.scheme} />
+          <button type="submit" className={GHOST}>
+            {fromCopy(copy, 'admin.remove')}
+          </button>
+        </form>
+      )}
+    </div>
+  )
+}