@actuate-media/cms-admin 0.27.0 → 0.28.0

package/dist/views/settings/useSecuritySettings.js

@@ -0,0 +1,154 @@
+'use client';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { validateSecuritySettings, } from '@actuate-media/cms-core/security-center';
+import { cmsApi } from '../../lib/api.js';
+const EMPTY_FORM = {
+    mfaRequired: false,
+    mfaGracePeriodDays: 7,
+    maxConcurrentSessions: 5,
+};
+function formFromSettings(s) {
+    return {
+        mfaRequired: s.mfa.required,
+        mfaGracePeriodDays: s.mfa.gracePeriodDays,
+        maxConcurrentSessions: s.session.maxConcurrentSessions,
+    };
+}
+function formToSettings(f) {
+    return {
+        mfa: { required: f.mfaRequired, gracePeriodDays: f.mfaGracePeriodDays },
+        session: { maxConcurrentSessions: f.maxConcurrentSessions },
+    };
+}
+/**
+ * Loads the Security Center (`GET /security`) — computed posture, cross-module
+ * summaries, secret/encryption verdicts — and tracks the small editable policy
+ * (MFA requirement + grace, concurrent-session cap). Save is lockout-safe: the
+ * client mirrors the server's MFA guard so the operator gets immediate feedback,
+ * and the server re-checks authoritatively.
+ */
+export function useSecuritySettings(canEdit) {
+    const [loading, setLoading] = useState(true);
+    const [loadError, setLoadError] = useState(null);
+    const [data, setData] = useState(null);
+    const [baseline, setBaseline] = useState(EMPTY_FORM);
+    const [form, setForm] = useState(EMPTY_FORM);
+    const [saveState, setSaveState] = useState('idle');
+    const [saveError, setSaveError] = useState(null);
+    const [revokeState, setRevokeState] = useState('idle');
+    const [reloadKey, setReloadKey] = useState(0);
+    useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        setLoadError(null);
+        cmsApi('/security')
+            .then((res) => {
+            if (cancelled)
+                return;
+            if (res.error || !res.data) {
+                setLoadError(res.error ?? 'Failed to load security settings.');
+                return;
+            }
+            setData(res.data);
+            const f = formFromSettings(res.data.settings);
+            setBaseline(f);
+            setForm(f);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setLoadError('Failed to load security settings.');
+        })
+            .finally(() => {
+            if (!cancelled)
+                setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [reloadKey]);
+    const setField = useCallback((key, value) => {
+        setForm((prev) => ({ ...prev, [key]: value }));
+        setSaveState('idle');
+    }, []);
+    const dirty = useMemo(() => Object.keys(form).some((k) => form[k] !== baseline[k]), [form, baseline]);
+    const issues = useMemo(() => {
+        const list = validateSecuritySettings(formToSettings(form));
+        // Client mirror of the server's lockout-safe MFA guard: block enabling
+        // org-wide MFA when the current admin has not set up MFA themselves.
+        if (form.mfaRequired && !baseline.mfaRequired && data && !data.viewerHasMfa) {
+            list.push({
+                field: 'mfaRequired',
+                message: 'Set up MFA for your own account before requiring it for everyone — otherwise you would lock yourself out.',
+                severity: 'error',
+            });
+        }
+        return list;
+    }, [form, baseline.mfaRequired, data]);
+    const hasErrors = issues.some((i) => i.severity === 'error');
+    const save = useCallback(async () => {
+        if (!canEdit || hasErrors || !dirty)
+            return;
+        setSaveState('saving');
+        setSaveError(null);
+        try {
+            const res = await cmsApi('/security', {
+                method: 'PUT',
+                body: JSON.stringify(formToSettings(form)),
+            });
+            if (res.error || !res.data)
+                throw new Error(res.error ?? 'Failed to save security settings.');
+            setData(res.data);
+            const f = formFromSettings(res.data.settings);
+            setBaseline(f);
+            setForm(f);
+            setSaveState('success');
+        }
+        catch (err) {
+            setSaveState('error');
+            setSaveError(err instanceof Error ? err.message : 'Failed to save security settings.');
+        }
+    }, [canEdit, hasErrors, dirty, form]);
+    const reset = useCallback(() => {
+        setForm(baseline);
+        setSaveState('idle');
+        setSaveError(null);
+    }, [baseline]);
+    const refetch = useCallback(() => setReloadKey((k) => k + 1), []);
+    const revokeAllOtherSessions = useCallback(async () => {
+        setRevokeState('working');
+        try {
+            const res = await cmsApi('/security/sessions/revoke-all', {
+                method: 'POST',
+            });
+            if (res.error)
+                throw new Error(res.error);
+            setRevokeState('done');
+            // Refresh the active-session count.
+            setReloadKey((k) => k + 1);
+            return res.data?.revoked ?? 0;
+        }
+        catch {
+            setRevokeState('error');
+            return null;
+        }
+    }, []);
+    return {
+        loading,
+        loadError,
+        data,
+        form,
+        setField,
+        dirty,
+        issues,
+        hasErrors,
+        canEdit,
+        saveState,
+        saveError,
+        save,
+        reset,
+        refetch,
+        revokeState,
+        revokeAllOtherSessions,
+    };
+}
+//# sourceMappingURL=useSecuritySettings.js.map

package/dist/views/settings/useSecuritySettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSecuritySettings.js","sourceRoot":"","sources":["../../../src/views/settings/useSecuritySettings.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actuate-media/cms-admin",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/actuate-media/actuatecms.git",
@@ -87,7 +87,7 @@
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.0",
     "vitest": "^4.1.0",
-    "@actuate-media/cms-core": "0.36.0",
+    "@actuate-media/cms-core": "0.37.0",
     "@actuate-media/component-blocks": "0.2.0"
   },
   "scripts": {

package/src/__tests__/views/security-settings.render.test.tsx

@@ -0,0 +1,212 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+// The Security tab reads `/security` (computed posture + summaries + editable
+// policy), saves via PUT `/security`, and revokes sessions via POST.
+let securityData: any
+
+const cmsApi = vi.fn(async (endpoint: string, options?: { method?: string; body?: unknown }) => {
+  const method = options?.method ?? 'GET'
+  if (endpoint === '/security' && method === 'GET') return { data: securityData, status: 200 }
+  if (endpoint === '/security' && method === 'PUT') {
+    const body = JSON.parse(String(options?.body ?? '{}'))
+    securityData = {
+      ...securityData,
+      settings: {
+        mfa: { required: body.mfa.required, gracePeriodDays: body.mfa.gracePeriodDays },
+        session: { maxConcurrentSessions: body.session.maxConcurrentSessions },
+      },
+    }
+    return { data: securityData, status: 200 }
+  }
+  if (endpoint === '/security/sessions/revoke-all' && method === 'POST')
+    return { data: { revoked: 2 }, status: 200 }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({ cmsApi: (e: string, o?: unknown) => cmsApi(e, o as any) }))
+
+const { SecurityTab } = await import('../../views/settings/SecurityTab.js')
+
+function baseData(overrides: Record<string, unknown> = {}) {
+  return {
+    settings: {
+      mfa: { required: false, gracePeriodDays: 7 },
+      session: { maxConcurrentSessions: 5 },
+    },
+    status: {
+      status: 'needs_attention',
+      score: 88,
+      label: 'Needs attention',
+      description: 'Some recommended controls are missing.',
+      checks: [
+        { key: 'mfa', label: 'MFA coverage', status: 'warning', value: '1 of 2 admins' },
+        { key: 'csrf', label: 'CSRF protection', status: 'pass', value: 'Enabled' },
+      ],
+      warnings: [
+        {
+          id: 'mfa-not-required',
+          severity: 'warning',
+          category: 'auth',
+          title: 'MFA is not required in production',
+          description: 'Requiring MFA reduces account-takeover risk.',
+        },
+      ],
+      lastCheckedAt: '2026-06-01T00:00:00.000Z',
+    },
+    users: {
+      totalUsers: 3,
+      totalAdmins: 2,
+      withMfa: 1,
+      withoutMfa: 2,
+      adminsWithoutMfa: 1,
+      inactive: 0,
+    },
+    apiKeys: { active: 1, withoutExpiration: 0, broadScope: 0, staleUnused90d: 0 },
+    secrets: {
+      cmsSecret: 'pass',
+      encryptionKey: 'pass',
+      rateLimitBackend: 'distributed',
+      apiKeysHashed: true,
+      webhookSecretsEncrypted: true,
+    },
+    ipAllowlist: {
+      enabled: false,
+      source: 'none',
+      ranges: [],
+      currentIp: '1.2.3.4',
+      currentIpAllowed: null,
+    },
+    failedLogins24h: 0,
+    activeSessions: 2,
+    csrfEnabled: true,
+    uploadValidation: true,
+    auditEnabled: true,
+    sessionMaxAgeHours: 168,
+    viewerHasMfa: true,
+    environment: 'production',
+    sources: {
+      ipAllowlist: { source: 'config', editable: false },
+      csrf: { source: 'computed', editable: false },
+      rateLimiting: { source: 'environment', editable: false },
+      uploadValidation: { source: 'computed', editable: false },
+      cmsSecret: { source: 'environment', editable: false },
+      encryptionKey: { source: 'environment', editable: false },
+      audit: { source: 'computed', editable: false },
+    },
+    ...overrides,
+  }
+}
+
+beforeEach(() => {
+  cmsApi.mockClear()
+  securityData = baseData()
+})
+
+describe('SecurityTab', () => {
+  it('renders the status card and all security sections with a disabled save bar', async () => {
+    render(<SecurityTab role="ADMIN" />)
+
+    await screen.findByText('Security Status')
+    expect(screen.getByText('Authentication & MFA')).toBeTruthy()
+    expect(screen.getByText('Session Policy')).toBeTruthy()
+    expect(screen.getByText('Access & Request Protection')).toBeTruthy()
+    expect(screen.getByText('Secrets, Encryption & Audit')).toBeTruthy()
+    // Status badge + warning surfaced.
+    expect(screen.getByText('Needs attention')).toBeTruthy()
+    expect(screen.getByText('MFA is not required in production')).toBeTruthy()
+    expect(
+      (screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement).disabled,
+    ).toBe(true)
+  })
+
+  it('enables Save when concurrent-session cap changes and persists via PUT /security', async () => {
+    render(<SecurityTab role="ADMIN" />)
+    await screen.findByText('Security Status')
+
+    const select = screen.getByLabelText(/Maximum concurrent sessions/) as HTMLSelectElement
+    fireEvent.change(select, { target: { value: '3' } })
+
+    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    expect(save.disabled).toBe(false)
+    fireEvent.click(save)
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/security',
+        expect.objectContaining({
+          method: 'PUT',
+          body: expect.stringContaining('"maxConcurrentSessions":3'),
+        }),
+      ),
+    )
+  })
+
+  it('blocks enabling Require MFA (lockout-safe) when the acting admin has no MFA', async () => {
+    securityData = baseData({ viewerHasMfa: false })
+    render(<SecurityTab role="ADMIN" />)
+    await screen.findByText('Security Status')
+
+    const toggle = screen.getByRole('switch', {
+      name: 'Require MFA for admin users',
+    }) as HTMLButtonElement
+    // Toggle is disabled until the admin sets up their own MFA.
+    expect(toggle.disabled).toBe(true)
+    expect(screen.getByText(/Set up MFA on your own account/i)).toBeTruthy()
+  })
+
+  it('confirms before requiring MFA and then persists it (admin has MFA)', async () => {
+    render(<SecurityTab role="ADMIN" />)
+    await screen.findByText('Security Status')
+
+    fireEvent.click(screen.getByRole('switch', { name: 'Require MFA for admin users' }))
+    // Confirmation dialog appears; nothing saved yet.
+    const confirm = await screen.findByRole('button', { name: 'Require MFA' })
+    fireEvent.click(confirm)
+
+    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    expect(save.disabled).toBe(false)
+    fireEvent.click(save)
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/security',
+        expect.objectContaining({
+          method: 'PUT',
+          body: expect.stringContaining('"required":true'),
+        }),
+      ),
+    )
+  })
+
+  it('revokes other sessions through a confirmation flow', async () => {
+    render(<SecurityTab role="ADMIN" />)
+    await screen.findByText('Security Status')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Revoke other sessions' }))
+    const confirm = await screen.findByRole('button', { name: 'Revoke sessions' })
+    fireEvent.click(confirm)
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/security/sessions/revoke-all',
+        expect.objectContaining({ method: 'POST' }),
+      ),
+    )
+    await screen.findByText('Other sessions revoked.')
+  })
+
+  it('is read-only for non-admin roles', async () => {
+    render(<SecurityTab role="EDITOR" />)
+    await screen.findByText('Security Status')
+
+    expect(screen.getByText(/read-only access/i)).toBeTruthy()
+    const toggle = screen.getByRole('switch', {
+      name: 'Require MFA for admin users',
+    }) as HTMLButtonElement
+    expect(toggle.disabled).toBe(true)
+    const select = screen.getByLabelText(/Maximum concurrent sessions/) as HTMLSelectElement
+    expect(select.disabled).toBe(true)
+  })
+})

package/src/views/Settings.tsx

@@ -30,6 +30,7 @@ import { RelationshipField } from '../fields/RelationshipField.js'
 import { SEOConfigPanel } from '../components/SEOConfigPanel.js'
 import { GeneralSettingsTab } from './settings/GeneralSettingsTab.js'
 import { AppearanceTab } from './settings/AppearanceTab.js'
+import { SecurityTab } from './settings/SecurityTab.js'
 import { Users as UsersView } from './Users.js'
 import { ApiKeys as ApiKeysView } from './ApiKeys.js'
 
@@ -44,7 +45,7 @@ export interface SettingsProps {
 }
 
 /** Tabs that drive their own persistence (no global "Save Changes" footer). */
-const SELF_MANAGED_TABS = new Set(['general', 'appearance', 'users', 'api-keys'])
+const SELF_MANAGED_TABS = new Set(['general', 'appearance', 'security', 'users', 'api-keys'])
 
 function readSettingsTabFromUrl(): string | null {
   if (typeof window === 'undefined') return null
@@ -59,9 +60,6 @@ export function Settings({
 }: SettingsProps = {}) {
   const { data, loading, error, refetch } = useApiData<any>('/globals/settings')
 
-  const [twoFactorEnabled, setTwoFactorEnabled] = useState(false)
-  const [sessionTimeout, setSessionTimeout] = useState(false)
-  const [ipWhitelist, setIpWhitelist] = useState(false)
   const [activeTab, setActiveTab] = useState<string>(() => readSettingsTabFromUrl() ?? initialTab)
   const [saving, setSaving] = useState(false)
 
@@ -138,9 +136,6 @@ export function Settings({
 
   useEffect(() => {
     if (data) {
-      setTwoFactorEnabled(data.twoFactorEnabled ?? false)
-      setSessionTimeout(data.sessionTimeout ?? false)
-      setIpWhitelist(data.ipWhitelist ?? false)
       setAiProvider(data.aiProvider ?? 'anthropic')
       setAiAltTags(data.aiAltTags ?? true)
       setAiMediaCategorize(data.aiMediaCategorize ?? false)
@@ -167,9 +162,6 @@ export function Settings({
       method: 'PUT',
       body: JSON.stringify({
         ...(current.data ?? {}),
-        twoFactorEnabled,
-        sessionTimeout,
-        ipWhitelist,
         aiProvider,
         aiAltTags,
         aiMediaCategorize,
@@ -351,29 +343,7 @@ export function Settings({
         )}
 
         <Tabs.Content value="security" className="space-y-4">
-          <div className="rounded-lg border border-gray-200 bg-white p-4">
-            <h3 className="mb-4 text-sm font-semibold text-gray-900">Security Settings</h3>
-            <div className="space-y-4">
-              <ToggleSetting
-                label="Two-Factor Authentication"
-                description="Require 2FA for all admin users"
-                checked={twoFactorEnabled}
-                onChange={setTwoFactorEnabled}
-              />
-              <ToggleSetting
-                label="Session Timeout"
-                description="Automatically log out inactive users after 30 minutes"
-                checked={sessionTimeout}
-                onChange={setSessionTimeout}
-              />
-              <ToggleSetting
-                label="IP Whitelist"
-                description="Only allow access from approved IP addresses"
-                checked={ipWhitelist}
-                onChange={setIpWhitelist}
-              />
-            </div>
-          </div>
+          <SecurityTab role={session?.user?.role} onNavigate={onNavigate} />
         </Tabs.Content>
 
         <Tabs.Content value="seo" className="space-y-4">

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>
+  )
+}