@actuate-media/cms-admin 0.26.0 → 0.28.0

package/src/views/settings/SecurityTab.tsx

@@ -0,0 +1,162 @@
+'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}
+      />
+
+      <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>
+  )
+}

package/src/views/settings/SessionPolicyCard.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import { useId, useState } from 'react'
+import { Loader2 } from 'lucide-react'
+import { MAX_CONCURRENT_SESSION_OPTIONS } from '@actuate-media/cms-core/security-center'
+import { ConfirmDangerousSettingDialog } from './components.js'
+import { SecurityCard, StatusRow } from './securityPrimitives.js'
+import type { SecurityForm } from './useSecuritySettings.js'
+
+function sessionsLabel(n: number): string {
+  return n === 0 ? 'Unlimited' : String(n)
+}
+
+export function SessionPolicyCard({
+  form,
+  setField,
+  canEdit,
+  sessionMaxAgeHours,
+  activeSessions,
+  revokeState,
+  onRevokeAll,
+}: {
+  form: SecurityForm
+  setField: <K extends keyof SecurityForm>(key: K, value: SecurityForm[K]) => void
+  canEdit: boolean
+  sessionMaxAgeHours: number
+  activeSessions: number
+  revokeState: 'idle' | 'working' | 'done' | 'error'
+  onRevokeAll: () => void
+}) {
+  const headingId = useId()
+  const maxId = useId()
+  const [confirmRevoke, setConfirmRevoke] = useState(false)
+
+  const maxAgeDays = Math.round(sessionMaxAgeHours / 24)
+
+  return (
+    <SecurityCard
+      headingId={headingId}
+      title="Session Policy"
+      description="Control how many sessions an account can hold and revoke active sessions."
+    >
+      <div className="space-y-4">
+        <div className="flex items-center justify-between gap-4">
+          <label htmlFor={maxId} className="flex-1">
+            <span className="text-foreground text-base font-medium">
+              Maximum concurrent sessions
+            </span>
+            <p className="text-muted-foreground mt-0.5 text-sm">
+              Oldest sessions are signed out when a user exceeds this. Choose Unlimited to disable
+              the cap.
+            </p>
+          </label>
+          <select
+            id={maxId}
+            value={form.maxConcurrentSessions}
+            disabled={!canEdit}
+            onChange={(e) => setField('maxConcurrentSessions', 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"
+          >
+            {MAX_CONCURRENT_SESSION_OPTIONS.map((n) => (
+              <option key={n} value={n}>
+                {sessionsLabel(n)}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div className="border-border mt-4 space-y-2 border-t pt-4">
+        <StatusRow status="pass" label="Active admin sessions" value={String(activeSessions)} />
+        <StatusRow
+          status="pass"
+          label="Maximum session age"
+          value={`${maxAgeDays} day${maxAgeDays === 1 ? '' : 's'}`}
+        />
+        <StatusRow status="pass" label="Revoke sessions on password change" value="Enabled" />
+      </div>
+
+      <div className="border-border mt-4 flex items-center justify-between gap-3 border-t pt-4">
+        <div>
+          <p className="text-foreground text-sm font-medium">Revoke other sessions</p>
+          <p className="text-muted-foreground text-sm">
+            Sign out every session except this one. Useful after a suspected compromise.
+          </p>
+          {revokeState === 'done' && (
+            <p className="text-success mt-1 text-sm" aria-live="polite">
+              Other sessions revoked.
+            </p>
+          )}
+          {revokeState === 'error' && (
+            <p className="text-destructive mt-1 text-sm" aria-live="polite">
+              Could not revoke sessions. Try again.
+            </p>
+          )}
+        </div>
+        <button
+          type="button"
+          disabled={!canEdit || revokeState === 'working'}
+          onClick={() => setConfirmRevoke(true)}
+          className="border-border text-foreground hover:bg-accent inline-flex shrink-0 items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {revokeState === 'working' && (
+            <Loader2 size={15} className="animate-spin" aria-hidden="true" />
+          )}
+          Revoke other sessions
+        </button>
+      </div>
+
+      <ConfirmDangerousSettingDialog
+        open={confirmRevoke}
+        title="Revoke all other sessions?"
+        description="Every active session except your current one will be signed out immediately. Those users (and your other devices) will need to sign in again."
+        confirmLabel="Revoke sessions"
+        onConfirm={() => {
+          setConfirmRevoke(false)
+          onRevokeAll()
+        }}
+        onCancel={() => setConfirmRevoke(false)}
+      />
+    </SecurityCard>
+  )
+}

package/src/views/settings/TypographyMotionCard.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { SettingsToggleRow } from './components.js'
+import { AVAILABLE_FONTS } from '../../components/ThemeProvider.js'
+import type { UseAppearanceSettings } from './useAppearanceSettings.js'
+
+export function TypographyMotionCard({
+  s,
+  canEdit,
+}: {
+  s: UseAppearanceSettings
+  canEdit: boolean
+}) {
+  return (
+    <section className="border-border bg-card rounded-lg border p-6">
+      <header className="mb-4">
+        <h3 className="text-foreground text-lg font-medium">Typography &amp; Motion</h3>
+        <p className="text-muted-foreground mt-0.5 text-sm">
+          Admin UI font and motion preferences.
+        </p>
+      </header>
+
+      <div className="space-y-5">
+        <div>
+          <label
+            htmlFor="content-font"
+            className="text-foreground mb-1 block text-base font-medium"
+          >
+            Content font
+          </label>
+          <p className="text-muted-foreground mb-2 text-sm">
+            Applies to the admin UI. Falls back to the system font if not installed.
+          </p>
+          <select
+            id="content-font"
+            value={s.appearance.font}
+            disabled={!canEdit}
+            onChange={(e) => s.setFont(e.target.value)}
+            className="border-border bg-input-background text-foreground focus-visible:ring-ring w-full max-w-md rounded-md border px-3 py-2 text-base focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
+          >
+            {AVAILABLE_FONTS.map((font) => (
+              <option key={font} value={font}>
+                {font}
+              </option>
+            ))}
+            {/* Preserve a config-defined font that isn't in the curated list. */}
+            {!AVAILABLE_FONTS.includes(s.appearance.font as (typeof AVAILABLE_FONTS)[number]) && (
+              <option value={s.appearance.font}>{s.appearance.font}</option>
+            )}
+          </select>
+        </div>
+
+        <div className="border-border border-t pt-4">
+          <SettingsToggleRow
+            label="Reduce motion"
+            description="Minimize animations and transitions across the admin. Focus and state changes are preserved."
+            checked={s.appearance.reduceMotion}
+            onChange={s.setReduceMotion}
+            disabled={!canEdit}
+          />
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/views/settings/securityPrimitives.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { AlertTriangle, Check, CircleHelp, X } from 'lucide-react'
+import type { ReactNode } from 'react'
+import type { CheckStatus } from '@actuate-media/cms-core/security-center'
+
+/** Small status icon used in check/summary rows. Text label always accompanies it. */
+export function CheckIcon({ status }: { status: CheckStatus }) {
+  switch (status) {
+    case 'pass':
+      return <Check size={15} className="text-success shrink-0" aria-hidden="true" />
+    case 'warning':
+      return <AlertTriangle size={15} className="text-warning shrink-0" aria-hidden="true" />
+    case 'fail':
+      return <X size={15} className="text-destructive shrink-0" aria-hidden="true" />
+    default:
+      return <CircleHelp size={15} className="text-muted-foreground shrink-0" aria-hidden="true" />
+  }
+}
+
+const STATUS_WORD: Record<CheckStatus, string> = {
+  pass: 'Pass',
+  warning: 'Warning',
+  fail: 'Fail',
+  unknown: 'Unknown',
+}
+
+/** A status row: icon + label on the left, value on the right. */
+export function StatusRow({
+  status,
+  label,
+  value,
+  badge,
+}: {
+  status: CheckStatus
+  label: string
+  value?: ReactNode
+  badge?: ReactNode
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3 py-1.5 text-sm">
+      <span className="flex items-center gap-2">
+        <CheckIcon status={status} />
+        {/* Screen-reader text so status is never conveyed by color/icon alone. */}
+        <span className="sr-only">{STATUS_WORD[status]}: </span>
+        <span className="text-foreground">{label}</span>
+        {badge}
+      </span>
+      {value !== undefined && <span className="text-muted-foreground text-right">{value}</span>}
+    </div>
+  )
+}
+
+/** Section wrapper matching the other settings cards. */
+export function SecurityCard({
+  headingId,
+  title,
+  description,
+  children,
+}: {
+  headingId: string
+  title: string
+  description: string
+  children: ReactNode
+}) {
+  return (
+    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
+      <h3 id={headingId} className="text-foreground mb-1 text-base font-medium">
+        {title}
+      </h3>
+      <p className="text-muted-foreground mb-4 text-sm">{description}</p>
+      {children}
+    </section>
+  )
+}