@actuate-media/cms-admin 0.27.0 → 0.29.0

package/src/views/settings/AccessProtectionCard.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+import { useId, useState } from 'react'
+import { Check, X } from 'lucide-react'
+import {
+  validateIpRange,
+  type IpAllowlistStatus,
+  type SecretsStatus,
+  type SecuritySourceMetadata,
+} from '@actuate-media/cms-core/security-center'
+import { SettingsSourceBadge } from './components.js'
+import { SecurityCard, StatusRow } from './securityPrimitives.js'
+
+export function AccessProtectionCard({
+  ipAllowlist,
+  secrets,
+  csrfEnabled,
+  uploadValidation,
+  sources,
+  onNavigate,
+}: {
+  ipAllowlist: IpAllowlistStatus
+  secrets: SecretsStatus
+  csrfEnabled: boolean
+  uploadValidation: boolean
+  sources: Record<string, SecuritySourceMetadata>
+  onNavigate?: (path: string) => void
+}) {
+  const headingId = useId()
+  const ipTestId = useId()
+  const [ipTest, setIpTest] = useState('')
+  const ipTestValid = ipTest.trim() === '' ? null : validateIpRange(ipTest)
+
+  const distributed = secrets.rateLimitBackend === 'distributed'
+
+  return (
+    <SecurityCard
+      headingId={headingId}
+      title="Access & Request Protection"
+      description="Network-level access restrictions and request-level protections. These are enforced by the platform; edit network rules in config."
+    >
+      {/* ── Access restrictions ─────────────────────────────────────────── */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between gap-2">
+          <span className="text-foreground text-sm font-medium">Admin IP allowlist</span>
+          <SettingsSourceBadge meta={sources.ipAllowlist} />
+        </div>
+        <StatusRow
+          status={ipAllowlist.enabled ? 'pass' : 'unknown'}
+          label="Status"
+          value={ipAllowlist.enabled ? `${ipAllowlist.ranges.length} range(s)` : 'Not configured'}
+        />
+        {ipAllowlist.currentIp && (
+          <StatusRow
+            status={
+              ipAllowlist.currentIpAllowed === null
+                ? 'unknown'
+                : ipAllowlist.currentIpAllowed
+                  ? 'pass'
+                  : 'fail'
+            }
+            label="Your current IP"
+            value={
+              <span className="font-mono text-xs">
+                {ipAllowlist.currentIp}
+                {ipAllowlist.currentIpAllowed === false && ' (blocked)'}
+              </span>
+            }
+          />
+        )}
+        {ipAllowlist.enabled && (
+          <div className="text-muted-foreground flex flex-wrap gap-1.5 pt-1">
+            {ipAllowlist.ranges.map((r) => (
+              <code key={r} className="bg-muted rounded px-1.5 py-0.5 font-mono text-xs">
+                {r}
+              </code>
+            ))}
+          </div>
+        )}
+        <div className="pt-1">
+          <label htmlFor={ipTestId} className="text-muted-foreground mb-1 block text-sm">
+            Validate an IP or CIDR range
+          </label>
+          <div className="flex items-center gap-2">
+            <input
+              id={ipTestId}
+              type="text"
+              value={ipTest}
+              onChange={(e) => setIpTest(e.target.value)}
+              placeholder="e.g. 203.0.113.0/24"
+              className="border-border bg-input-background text-foreground focus-visible:ring-ring w-full max-w-xs rounded-md border px-3 py-1.5 font-mono text-sm focus-visible:ring-2 focus-visible:outline-none"
+            />
+            {ipTestValid === true && (
+              <span className="text-success flex items-center gap-1 text-sm">
+                <Check size={15} aria-hidden="true" /> Valid
+              </span>
+            )}
+            {ipTestValid === false && (
+              <span className="text-destructive flex items-center gap-1 text-sm">
+                <X size={15} aria-hidden="true" /> Invalid
+              </span>
+            )}
+          </div>
+          <p className="text-muted-foreground mt-1 text-xs">
+            Add validated ranges to <code className="font-mono">admin.ipAllowlist</code> in
+            actuate.config.ts; the middleware enforces them.
+          </p>
+        </div>
+      </div>
+
+      {/* ── Request protection ──────────────────────────────────────────── */}
+      <div className="border-border mt-4 space-y-2 border-t pt-4">
+        <StatusRow
+          status={csrfEnabled ? 'pass' : 'fail'}
+          label="CSRF protection"
+          value={csrfEnabled ? 'Enabled' : 'Disabled'}
+          badge={<SettingsSourceBadge meta={sources.csrf} />}
+        />
+        <StatusRow
+          status={distributed ? 'pass' : 'warning'}
+          label="Rate limiting"
+          value={distributed ? 'Distributed (Upstash)' : 'In-memory'}
+          badge={<SettingsSourceBadge meta={sources.rateLimiting} />}
+        />
+        <StatusRow
+          status={uploadValidation ? 'pass' : 'warning'}
+          label="Upload validation"
+          value="MIME + magic bytes + SVG sanitization"
+          badge={<SettingsSourceBadge meta={sources.uploadValidation} />}
+        />
+        {onNavigate && (
+          <button
+            type="button"
+            onClick={() => onNavigate('/media')}
+            className="text-brand mt-1 text-sm hover:underline"
+          >
+            Manage upload rules in Media →
+          </button>
+        )}
+      </div>
+    </SecurityCard>
+  )
+}

package/src/views/settings/AuthMfaCard.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import { useId, useState } from 'react'
+import { ShieldCheck } from 'lucide-react'
+import { MFA_GRACE_PERIOD_OPTIONS } from '@actuate-media/cms-core/security-center'
+import { ConfirmDangerousSettingDialog, SettingsToggleRow } from './components.js'
+import { SecurityCard, StatusRow } from './securityPrimitives.js'
+import type { SecurityForm } from './useSecuritySettings.js'
+
+function graceLabel(days: number): string {
+  if (days === 0) return 'Immediately'
+  if (days === 1) return '1 day'
+  return `${days} days`
+}
+
+export function AuthMfaCard({
+  form,
+  setField,
+  canEdit,
+  viewerHasMfa,
+  withMfa,
+  totalAdmins,
+  onNavigate,
+}: {
+  form: SecurityForm
+  setField: <K extends keyof SecurityForm>(key: K, value: SecurityForm[K]) => void
+  canEdit: boolean
+  viewerHasMfa: boolean
+  withMfa: number
+  totalAdmins: number
+  onNavigate?: (path: string) => void
+}) {
+  const headingId = useId()
+  const graceId = useId()
+  const [confirmEnable, setConfirmEnable] = useState(false)
+
+  function requestMfaToggle(value: boolean) {
+    if (value && !form.mfaRequired) {
+      setConfirmEnable(true)
+      return
+    }
+    setField('mfaRequired', value)
+  }
+
+  // Lockout-safe: the toggle can't be turned on until the acting admin has
+  // their own MFA configured (the server enforces this too).
+  const mfaToggleDisabled = !canEdit || (!form.mfaRequired && !viewerHasMfa)
+
+  return (
+    <SecurityCard
+      headingId={headingId}
+      title="Authentication & MFA"
+      description="Require multi-factor authentication for admin accounts and control the enrollment window."
+    >
+      <div className="space-y-4">
+        <SettingsToggleRow
+          label="Require MFA for admin users"
+          description="Admins must set up a TOTP authenticator app. Existing admins are prompted to enroll within the grace period."
+          checked={form.mfaRequired}
+          disabled={mfaToggleDisabled}
+          onChange={requestMfaToggle}
+        />
+
+        <div className="flex items-center justify-between gap-4">
+          <label htmlFor={graceId} className="flex-1">
+            <span className="text-foreground text-base font-medium">Enrollment grace period</span>
+            <p className="text-muted-foreground mt-0.5 text-sm">
+              How long existing admins have to set up MFA before it is enforced.
+            </p>
+          </label>
+          <select
+            id={graceId}
+            value={form.mfaGracePeriodDays}
+            disabled={!canEdit || !form.mfaRequired}
+            onChange={(e) => setField('mfaGracePeriodDays', Number(e.target.value))}
+            className="border-border bg-input-background text-foreground focus-visible:ring-ring rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {MFA_GRACE_PERIOD_OPTIONS.map((d) => (
+              <option key={d} value={d}>
+                {graceLabel(d)}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div className="border-border mt-4 space-y-2 border-t pt-4">
+        <StatusRow
+          status={viewerHasMfa ? 'pass' : 'warning'}
+          label="Your account"
+          value={viewerHasMfa ? 'MFA enabled' : 'MFA not set up'}
+        />
+        {!viewerHasMfa && (
+          <div className="space-y-2">
+            <p className="text-muted-foreground text-sm">
+              Set up MFA on your own account before requiring it for everyone, or you may lock
+              yourself out.
+            </p>
+            {onNavigate && (
+              <button
+                type="button"
+                onClick={() => onNavigate('/profile')}
+                className="border-border text-foreground hover:bg-accent inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors"
+              >
+                <ShieldCheck size={15} aria-hidden="true" />
+                Set up MFA
+              </button>
+            )}
+          </div>
+        )}
+        <StatusRow
+          status={totalAdmins === 0 ? 'unknown' : withMfa === totalAdmins ? 'pass' : 'warning'}
+          label="Admin MFA coverage"
+          value={totalAdmins === 0 ? 'No admins' : `${withMfa} of ${totalAdmins} admins`}
+        />
+      </div>
+
+      <ConfirmDangerousSettingDialog
+        open={confirmEnable}
+        title="Require MFA for all admin users?"
+        description={`Admins without MFA will be prompted to enroll and must complete setup within the grace period (${graceLabel(
+          form.mfaGracePeriodDays,
+        )}). Make sure your own account has MFA configured first.`}
+        confirmLabel="Require MFA"
+        onConfirm={() => {
+          setField('mfaRequired', true)
+          setConfirmEnable(false)
+        }}
+        onCancel={() => setConfirmEnable(false)}
+      />
+    </SecurityCard>
+  )
+}

package/src/views/settings/SecretsAuditCard.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import { useId } from 'react'
+import type {
+  ApiKeysSecuritySummary,
+  CheckStatus,
+  SecretsStatus,
+  SecuritySourceMetadata,
+  UsersSecuritySummary,
+} from '@actuate-media/cms-core/security-center'
+import { SettingsSourceBadge } from './components.js'
+import { SecurityCard, StatusRow } from './securityPrimitives.js'
+
+function secretValue(status: CheckStatus): string {
+  switch (status) {
+    case 'pass':
+      return 'Configured'
+    case 'warning':
+      return 'Not configured'
+    case 'fail':
+      return 'Missing / invalid'
+    default:
+      return 'Unknown'
+  }
+}
+
+export function SecretsAuditCard({
+  secrets,
+  auditEnabled,
+  failedLogins24h,
+  users,
+  apiKeys,
+  sources,
+  onNavigate,
+}: {
+  secrets: SecretsStatus
+  auditEnabled: boolean
+  failedLogins24h: number
+  users: UsersSecuritySummary
+  apiKeys: ApiKeysSecuritySummary
+  sources: Record<string, SecuritySourceMetadata>
+  onNavigate?: (path: string) => void
+}) {
+  const headingId = useId()
+
+  return (
+    <SecurityCard
+      headingId={headingId}
+      title="Secrets, Encryption & Audit"
+      description="Platform secret status (values are never shown), audit logging, and cross-module risk."
+    >
+      <div className="space-y-2">
+        <StatusRow
+          status={secrets.cmsSecret}
+          label="CMS signing secret"
+          value={secretValue(secrets.cmsSecret)}
+          badge={<SettingsSourceBadge meta={sources.cmsSecret} />}
+        />
+        <StatusRow
+          status={secrets.encryptionKey}
+          label="Encryption key"
+          value={secretValue(secrets.encryptionKey)}
+          badge={<SettingsSourceBadge meta={sources.encryptionKey} />}
+        />
+        <StatusRow status="pass" label="API keys hashed at rest" value="Yes" />
+        <StatusRow
+          status={secrets.webhookSecretsEncrypted ? 'pass' : 'warning'}
+          label="Webhook secrets encrypted"
+          value={secrets.webhookSecretsEncrypted ? 'Yes' : 'Plaintext fallback'}
+        />
+      </div>
+
+      <div className="border-border mt-4 space-y-2 border-t pt-4">
+        <StatusRow
+          status={auditEnabled ? 'pass' : 'warning'}
+          label="Audit logging"
+          value={auditEnabled ? 'Enabled' : 'Disabled'}
+          badge={<SettingsSourceBadge meta={sources.audit} />}
+        />
+        <StatusRow
+          status={failedLogins24h >= 20 ? 'warning' : 'pass'}
+          label="Failed logins (24h)"
+          value={String(failedLogins24h)}
+        />
+      </div>
+
+      {/* Cross-module summaries — link out, never duplicate management here. */}
+      <div className="border-border mt-4 space-y-3 border-t pt-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="text-sm">
+            <p className="text-foreground font-medium">Users</p>
+            <p className="text-muted-foreground">
+              {users.totalAdmins} admin{users.totalAdmins === 1 ? '' : 's'},{' '}
+              {users.adminsWithoutMfa} without MFA
+              {users.inactive > 0 ? `, ${users.inactive} inactive` : ''}
+            </p>
+          </div>
+          {onNavigate && (
+            <button
+              type="button"
+              onClick={() => onNavigate('/settings?tab=users')}
+              className="text-brand shrink-0 text-sm hover:underline"
+            >
+              Review users →
+            </button>
+          )}
+        </div>
+        <div className="flex items-start justify-between gap-3">
+          <div className="text-sm">
+            <p className="text-foreground font-medium">API keys</p>
+            <p className="text-muted-foreground">
+              {apiKeys.active} active, {apiKeys.broadScope} broad-scope, {apiKeys.withoutExpiration}{' '}
+              without expiry
+            </p>
+          </div>
+          {onNavigate && (
+            <button
+              type="button"
+              onClick={() => onNavigate('/settings?tab=api-keys')}
+              className="text-brand shrink-0 text-sm hover:underline"
+            >
+              Review API keys →
+            </button>
+          )}
+        </div>
+      </div>
+    </SecurityCard>
+  )
+}

package/src/views/settings/SecurityStatusCard.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import { useId } from 'react'
+import { Shield, ShieldAlert, ShieldCheck, ShieldX } from 'lucide-react'
+import type { SecurityStatus, SecurityWarning } from '@actuate-media/cms-core/security-center'
+import { CheckIcon } from './securityPrimitives.js'
+
+const LEVEL_STYLES: Record<
+  SecurityStatus['status'],
+  { pill: string; Icon: typeof Shield; word: string }
+> = {
+  secure: {
+    pill: 'bg-success/15 text-success border-success/30',
+    Icon: ShieldCheck,
+    word: 'Secure',
+  },
+  needs_attention: {
+    pill: 'bg-warning/15 text-warning border-warning/30',
+    Icon: ShieldAlert,
+    word: 'Needs attention',
+  },
+  at_risk: {
+    pill: 'bg-destructive/15 text-destructive border-destructive/30',
+    Icon: ShieldX,
+    word: 'At risk',
+  },
+  unknown: { pill: 'bg-muted text-muted-foreground border-border', Icon: Shield, word: 'Unknown' },
+}
+
+const SEVERITY_STYLES: Record<SecurityWarning['severity'], string> = {
+  critical: 'border-destructive/30 bg-destructive/10 text-destructive',
+  warning: 'border-warning/30 bg-warning/10 text-warning',
+  info: 'border-border bg-muted text-muted-foreground',
+}
+
+export function SecurityStatusCard({
+  status,
+  onNavigate,
+}: {
+  status: SecurityStatus
+  onNavigate?: (path: string) => void
+}) {
+  const headingId = useId()
+  const style = LEVEL_STYLES[status.status]
+  const { Icon } = style
+
+  return (
+    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
+      <div className="mb-1 flex items-start justify-between gap-3">
+        <h3 id={headingId} className="text-foreground text-base font-medium">
+          Security Status
+        </h3>
+        <span
+          className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-sm font-medium ${style.pill}`}
+        >
+          <Icon size={15} aria-hidden="true" />
+          {/* Visible text label means the status never relies on color alone. */}
+          {style.word}
+        </span>
+      </div>
+      <p className="text-muted-foreground mb-4 text-sm">{status.description}</p>
+
+      <div className="grid grid-cols-1 gap-x-6 gap-y-1 sm:grid-cols-2">
+        {status.checks.map((check) => (
+          <button
+            key={check.key}
+            type="button"
+            disabled={!check.actionHref || !onNavigate}
+            onClick={() => check.actionHref && onNavigate?.(check.actionHref)}
+            className="enabled:hover:bg-accent/50 flex items-center justify-between gap-3 rounded-md py-1.5 text-left text-sm disabled:cursor-default"
+          >
+            <span className="flex items-center gap-2">
+              <CheckIcon status={check.status} />
+              <span className="text-foreground">{check.label}</span>
+            </span>
+            {check.value !== undefined && (
+              <span className="text-muted-foreground text-right">{check.value}</span>
+            )}
+          </button>
+        ))}
+      </div>
+
+      {status.warnings.length > 0 && (
+        <div className="mt-4 space-y-2" aria-live="polite">
+          {status.warnings.map((w) => (
+            <div
+              key={w.id}
+              role="note"
+              className={`flex items-start justify-between gap-3 rounded-lg border p-3 text-sm ${SEVERITY_STYLES[w.severity]}`}
+            >
+              <div>
+                <p className="font-medium">{w.title}</p>
+                <p className="mt-0.5 opacity-90">{w.description}</p>
+              </div>
+              {w.actionHref && w.actionLabel && onNavigate && (
+                <button
+                  type="button"
+                  onClick={() => onNavigate(w.actionHref!)}
+                  className="shrink-0 self-center rounded-md border border-current/30 px-2.5 py-1 text-xs font-medium hover:opacity-80"
+                >
+                  {w.actionLabel}
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}

package/src/views/settings/SecurityTab.tsx

@@ -0,0 +1,163 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Loader2, ShieldAlert } from 'lucide-react'
+import { SettingsSaveBar, SettingsValidationSummary } from './components.js'
+import { AccessProtectionCard } from './AccessProtectionCard.js'
+import { AuthMfaCard } from './AuthMfaCard.js'
+import { SecretsAuditCard } from './SecretsAuditCard.js'
+import { SecurityStatusCard } from './SecurityStatusCard.js'
+import { SessionPolicyCard } from './SessionPolicyCard.js'
+import { useSecuritySettings } from './useSecuritySettings.js'
+
+function CardSkeleton() {
+  return (
+    <div className="border-border bg-card animate-pulse rounded-lg border p-4">
+      <div className="bg-muted mb-3 h-4 w-40 rounded" />
+      <div className="bg-muted mb-4 h-3 w-72 rounded" />
+      <div className="space-y-3">
+        <div className="bg-muted h-3 w-full rounded" />
+        <div className="bg-muted h-3 w-2/3 rounded" />
+      </div>
+    </div>
+  )
+}
+
+export function SecurityTab({
+  role,
+  onNavigate,
+}: {
+  role?: string
+  onNavigate?: (path: string) => void
+}) {
+  const canEdit = role === 'ADMIN'
+  const {
+    loading,
+    loadError,
+    data,
+    form,
+    setField,
+    dirty,
+    issues,
+    hasErrors,
+    saveState,
+    save,
+    reset,
+    revokeState,
+    revokeAllOtherSessions,
+  } = useSecuritySettings(canEdit)
+
+  // Deep-link support: /settings?tab=security&section=sessions|ip-allowlist|audit
+  useEffect(() => {
+    if (loading || typeof window === 'undefined') return
+    const section = new URLSearchParams(window.location.search).get('section')
+    if (!section) return
+    const el = document.getElementById(`security-${section}`)
+    el?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }, [loading])
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <CardSkeleton />
+        <CardSkeleton />
+        <CardSkeleton />
+      </div>
+    )
+  }
+
+  if (loadError || !data) {
+    const forbidden = /forbidden|permission|insufficient/i.test(loadError ?? '')
+    return (
+      <div className="border-border bg-card text-muted-foreground flex items-start gap-3 rounded-lg border p-6 text-sm">
+        <ShieldAlert size={20} className="text-warning mt-0.5 shrink-0" aria-hidden="true" />
+        <div>
+          <p className="text-foreground font-medium">
+            {forbidden
+              ? 'You do not have access to security settings'
+              : 'Security settings unavailable'}
+          </p>
+          <p className="mt-1">
+            {forbidden
+              ? 'Ask an administrator to review the Security tab.'
+              : (loadError ?? 'The security service could not be reached. Try again shortly.')}
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4 pb-4">
+      <SecurityStatusCard status={data.status} onNavigate={onNavigate} />
+
+      {issues.length > 0 && <SettingsValidationSummary issues={issues} />}
+
+      {!canEdit && (
+        <p className="text-muted-foreground text-sm">
+          You have read-only access. Only administrators can change security settings.
+        </p>
+      )}
+
+      <AuthMfaCard
+        form={form}
+        setField={setField}
+        canEdit={canEdit}
+        viewerHasMfa={data.viewerHasMfa}
+        withMfa={data.users.withMfa}
+        totalAdmins={data.users.totalAdmins}
+        onNavigate={onNavigate}
+      />
+
+      <div id="security-sessions">
+        <SessionPolicyCard
+          form={form}
+          setField={setField}
+          canEdit={canEdit}
+          sessionMaxAgeHours={data.sessionMaxAgeHours}
+          activeSessions={data.activeSessions}
+          revokeState={revokeState}
+          onRevokeAll={() => void revokeAllOtherSessions()}
+        />
+      </div>
+
+      <div id="security-ip-allowlist">
+        <AccessProtectionCard
+          ipAllowlist={data.ipAllowlist}
+          secrets={data.secrets}
+          csrfEnabled={data.csrfEnabled}
+          uploadValidation={data.uploadValidation}
+          sources={data.sources}
+          onNavigate={onNavigate}
+        />
+      </div>
+
+      <div id="security-audit">
+        <SecretsAuditCard
+          secrets={data.secrets}
+          auditEnabled={data.auditEnabled}
+          failedLogins24h={data.failedLogins24h}
+          users={data.users}
+          apiKeys={data.apiKeys}
+          sources={data.sources}
+          onNavigate={onNavigate}
+        />
+      </div>
+
+      {saveState === 'error' && (
+        <p className="text-destructive text-sm" role="alert">
+          Failed to save security settings. Please try again.
+        </p>
+      )}
+
+      <SettingsSaveBar
+        dirty={dirty}
+        canEdit={canEdit}
+        hasErrors={hasErrors}
+        saveState={saveState}
+        onSave={() => void save()}
+        onReset={reset}
+      />
+    </div>
+  )
+}