@actuate-media/cms-admin 0.27.0 → 0.29.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.29.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/actuate-media/actuatecms.git",
@@ -58,6 +58,7 @@
     "cmdk": "^1.1.1",
     "lowlight": "^3.0.0",
     "lucide-react": "^1.7.0",
+    "qrcode.react": "^4.2.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "recharts": "^3.8.1",
@@ -87,7 +88,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.38.0",
     "@actuate-media/component-blocks": "0.2.0"
   },
   "scripts": {

package/src/AdminRoot.tsx

@@ -10,6 +10,7 @@ import { CollectionList } from './views/CollectionList.js'
 import { DocumentEdit } from './views/DocumentEdit.js'
 import { MediaBrowser } from './views/MediaBrowser.js'
 import { Settings } from './views/Settings.js'
+import { Profile } from './views/Profile.js'
 import { Forms } from './views/Forms.js'
 import { FormEditor } from './views/FormEditor.js'
 import { FormSubmissions } from './views/FormSubmissions.js'
@@ -56,6 +57,16 @@ export interface AdminRootProps {
     email: string,
     password: string,
     captchaToken?: string,
+  ) => Promise<{
+    success: boolean
+    error?: string
+    requiresTOTP?: boolean
+    mfaPendingToken?: string
+  }>
+  /** Completes the TOTP second-factor step for accounts with MFA enabled. */
+  onVerifyTotp?: (
+    mfaPendingToken: string,
+    code: string,
   ) => Promise<{ success: boolean; error?: string }>
   captchaConfig?: { provider: 'recaptcha' | 'turnstile' | 'none'; siteKey: string | null }
 }
@@ -68,6 +79,7 @@ function AdminShell({
   setupRequired,
   onSetupComplete,
   onLogin,
+  onVerifyTotp,
   captchaConfig,
 }: AdminRootProps) {
   const { currentPath, navigate, matchRoute, buildHref } = useAdminRouter(basePath, initialPath)
@@ -197,6 +209,7 @@ function AdminShell({
       return (
         <Login
           onLogin={onLogin}
+          onVerifyTotp={onVerifyTotp}
           onNavigate={navigate}
           captchaConfig={captchaConfig}
           branding={branding}
@@ -437,6 +450,10 @@ function AdminShell({
       return <Settings onNavigate={navigate} config={config} session={session} />
     }
 
+    if (matchRoute('/profile')) {
+      return <Profile onNavigate={navigate} session={session} />
+    }
+
     // Page Builder routes — explicit /page-builder/* takes precedence over
     // the collection-derived routing below, but we ALSO route a collection
     // declared as `type: 'page'` through the Page Builder by default.
@@ -467,6 +484,7 @@ function AdminShell({
       'widgets',
       'users',
       'settings',
+      'profile',
       'page-builder',
       'collections',
       // `pages` is reserved so the Pages list/editor/tag routes above

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

@@ -0,0 +1,140 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+/**
+ * Exercises the per-user MFA enrollment loop in AccountSecurity against a
+ * mocked auth API:
+ *   GET  /auth/me           → current totpEnabled state
+ *   POST /auth/totp/setup   → provisioning URI + one-time backup codes
+ *   POST /auth/totp/verify  → flips MFA on
+ *   POST /auth/totp/disable → turns MFA off
+ */
+interface ApiCall {
+  endpoint: string
+  options?: { method?: string; headers?: Record<string, string>; body?: unknown }
+}
+
+let totpEnabled = false
+const calls: ApiCall[] = []
+
+const cmsApi = vi.fn(async (endpoint: string, options?: ApiCall['options']) => {
+  calls.push({ endpoint, options })
+  const method = options?.method ?? 'GET'
+  if (endpoint === '/auth/me') return { data: { totpEnabled }, status: 200 }
+  if (endpoint === '/auth/totp/setup' && method === 'POST') {
+    const pw = options?.headers?.['x-reauth-password']
+    if (!pw || pw === 'wrong') return { error: 'Re-authentication failed.', status: 401 }
+    return {
+      data: {
+        uri: 'otpauth://totp/Actuate%20CMS:admin@example.com?secret=ABCDEF',
+        secret: 'ABCDEF234567',
+        backupCodes: ['aaaa1111', 'bbbb2222', 'cccc3333', 'dddd4444'],
+      },
+      status: 200,
+    }
+  }
+  if (endpoint === '/auth/totp/verify' && method === 'POST') {
+    totpEnabled = true
+    return { data: { enabled: true }, status: 200 }
+  }
+  if (endpoint === '/auth/totp/disable' && method === 'POST') {
+    totpEnabled = false
+    return { data: { enabled: false }, status: 200 }
+  }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({ cmsApi: (e: string, o?: unknown) => cmsApi(e, o as any) }))
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }))
+vi.mock('qrcode.react', () => ({
+  QRCodeSVG: ({ value }: { value: string }) => <svg data-testid="qr" data-value={value} />,
+}))
+
+const { AccountSecurity } = await import('../../views/profile/AccountSecurity.js')
+
+beforeEach(() => {
+  cmsApi.mockClear()
+  calls.length = 0
+  totpEnabled = false
+})
+
+describe('AccountSecurity — enrollment', () => {
+  it('walks through reauth → QR + backup codes → verify and enables MFA', async () => {
+    render(<AccountSecurity />)
+    await screen.findByText('Not set up')
+
+    fireEvent.click(screen.getByRole('button', { name: /Set up two-factor/i }))
+
+    // Reauth step: enter current password.
+    const pw = await screen.findByLabelText('Current password')
+    fireEvent.change(pw, { target: { value: 'correct-horse' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Continue' }))
+
+    // Setup posts the password as a reauth header.
+    await waitFor(() =>
+      expect(
+        calls.some(
+          (c) =>
+            c.endpoint === '/auth/totp/setup' &&
+            c.options?.headers?.['x-reauth-password'] === 'correct-horse',
+        ),
+      ).toBe(true),
+    )
+
+    // Enrollment step shows the QR, the manual key and the backup codes.
+    await screen.findByTestId('qr')
+    expect(screen.getByText('ABCDEF234567')).toBeTruthy()
+    expect(screen.getByText('aaaa1111')).toBeTruthy()
+
+    // Verify is gated on acknowledging the backup codes + a 6-digit code.
+    const verify = screen.getByRole('button', { name: /Verify & enable/i }) as HTMLButtonElement
+    expect(verify.disabled).toBe(true)
+
+    fireEvent.click(screen.getByLabelText(/saved my backup codes/i))
+    fireEvent.change(screen.getByLabelText('Authentication code'), { target: { value: '123456' } })
+    expect(verify.disabled).toBe(false)
+    fireEvent.click(verify)
+
+    await waitFor(() =>
+      expect(
+        calls.some(
+          (c) =>
+            c.endpoint === '/auth/totp/verify' && String(c.options?.body ?? '').includes('123456'),
+        ),
+      ).toBe(true),
+    )
+    await screen.findByText('Enabled')
+  })
+
+  it('surfaces a reauth failure without advancing to the QR step', async () => {
+    render(<AccountSecurity />)
+    await screen.findByText('Not set up')
+
+    fireEvent.click(screen.getByRole('button', { name: /Set up two-factor/i }))
+    const pw = await screen.findByLabelText('Current password')
+    fireEvent.change(pw, { target: { value: 'wrong' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Continue' }))
+
+    await screen.findByText('Re-authentication failed.')
+    expect(screen.queryByTestId('qr')).toBeNull()
+  })
+})
+
+describe('AccountSecurity — disable', () => {
+  it('shows Enabled and disables with a password confirmation', async () => {
+    totpEnabled = true
+    render(<AccountSecurity />)
+    await screen.findByText('Enabled')
+
+    fireEvent.click(screen.getByRole('button', { name: /Disable two-factor/i }))
+    const pw = await screen.findByLabelText('Current password')
+    fireEvent.change(pw, { target: { value: 'correct-horse' } })
+    // The confirm button is the destructive one inside the panel.
+    const confirmButtons = screen.getAllByRole('button', { name: /Disable two-factor/i })
+    fireEvent.click(confirmButtons[confirmButtons.length - 1]!)
+
+    await waitFor(() => expect(calls.some((c) => c.endpoint === '/auth/totp/disable')).toBe(true))
+    await screen.findByText('Not set up')
+  })
+})

package/src/__tests__/views/login-mfa.render.test.tsx

@@ -0,0 +1,88 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+import { Login } from '../../views/Login.js'
+
+/**
+ * The login screen must advance to a second-factor challenge when the account
+ * has MFA enabled (`onLogin` returns `requiresTOTP` + `mfaPendingToken`), and
+ * must complete it via `onVerifyTotp` — including the backup-code fallback.
+ */
+function fillCredentials() {
+  fireEvent.change(screen.getByLabelText('Email Address'), {
+    target: { value: 'admin@example.com' },
+  })
+  fireEvent.change(screen.getByLabelText('Password'), { target: { value: 'pw' } })
+}
+
+describe('Login — MFA challenge', () => {
+  it('shows the TOTP step after the password step requires it', async () => {
+    const onLogin = vi.fn(async () => ({
+      success: false,
+      requiresTOTP: true,
+      mfaPendingToken: 'pending-token',
+    }))
+    const onVerifyTotp = vi.fn(async () => ({ success: true }))
+
+    render(<Login onLogin={onLogin} onVerifyTotp={onVerifyTotp} />)
+    fillCredentials()
+    fireEvent.click(screen.getByRole('button', { name: 'Sign In' }))
+
+    await screen.findByText('Two-factor authentication')
+
+    fireEvent.change(screen.getByLabelText('Authentication code'), { target: { value: '654321' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Verify' }))
+
+    await waitFor(() => expect(onVerifyTotp).toHaveBeenCalledWith('pending-token', '654321'))
+  })
+
+  it('supports the backup-code fallback', async () => {
+    const onLogin = vi.fn(async () => ({
+      success: false,
+      requiresTOTP: true,
+      mfaPendingToken: 'pending-token',
+    }))
+    const onVerifyTotp = vi.fn(async () => ({ success: true }))
+
+    render(<Login onLogin={onLogin} onVerifyTotp={onVerifyTotp} />)
+    fillCredentials()
+    fireEvent.click(screen.getByRole('button', { name: 'Sign In' }))
+    await screen.findByText('Two-factor authentication')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Use a backup code' }))
+    fireEvent.change(screen.getByLabelText('Backup code'), { target: { value: 'aaaa1111' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Verify' }))
+
+    await waitFor(() => expect(onVerifyTotp).toHaveBeenCalledWith('pending-token', 'aaaa1111'))
+  })
+
+  it('shows an error returned from the verify step', async () => {
+    const onLogin = vi.fn(async () => ({
+      success: false,
+      requiresTOTP: true,
+      mfaPendingToken: 'pending-token',
+    }))
+    const onVerifyTotp = vi.fn(async () => ({ success: false, error: 'Invalid code' }))
+
+    render(<Login onLogin={onLogin} onVerifyTotp={onVerifyTotp} />)
+    fillCredentials()
+    fireEvent.click(screen.getByRole('button', { name: 'Sign In' }))
+    await screen.findByText('Two-factor authentication')
+
+    fireEvent.change(screen.getByLabelText('Authentication code'), { target: { value: '000000' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Verify' }))
+
+    await screen.findByText('Invalid code')
+  })
+
+  it('does not show the challenge for a normal successful login', async () => {
+    const onLogin = vi.fn(async () => ({ success: true }))
+    render(<Login onLogin={onLogin} />)
+    fillCredentials()
+    fireEvent.click(screen.getByRole('button', { name: 'Sign In' }))
+
+    await waitFor(() => expect(onLogin).toHaveBeenCalled())
+    expect(screen.queryByText('Two-factor authentication')).toBeNull()
+  })
+})