@actuate-media/cms-admin 0.28.0 → 0.30.0

package/src/AdminRoot.tsx

@@ -4,12 +4,13 @@ import { useState, useMemo, useEffect, useRef, useCallback } from 'react'
 import { toast } from 'sonner'
 import { Layout } from './layout/Layout.js'
 import { useAdminRouter } from './router/index.js'
-import { ensureCsrfToken } from './lib/api.js'
+import { cmsApi, ensureCsrfToken } from './lib/api.js'
 import { Dashboard } from './views/Dashboard.js'
 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,7 +57,23 @@ 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 }>
+  /**
+   * Clears the consumer-held session (e.g. `setSession(null)`) after the admin
+   * has revoked the server-side session. Server revocation + cookie clearing is
+   * handled inside the admin, so consumers only need to reset their local state.
+   */
+  onLogout?: () => void | Promise<void>
   captchaConfig?: { provider: 'recaptcha' | 'turnstile' | 'none'; siteKey: string | null }
 }
 
@@ -68,11 +85,26 @@ function AdminShell({
   setupRequired,
   onSetupComplete,
   onLogin,
+  onVerifyTotp,
+  onLogout,
   captchaConfig,
 }: AdminRootProps) {
   const { currentPath, navigate, matchRoute, buildHref } = useAdminRouter(basePath, initialPath)
   const [shortcutHelpOpen, setShortcutHelpOpen] = useState(false)
 
+  // Sign out: revoke the server-side session (and clear the cookie) first, then
+  // let the consumer drop its local session state. We clear local state even if
+  // the network call fails so a user is never stuck "logged in" in the UI.
+  const handleLogout = useCallback(async () => {
+    try {
+      await cmsApi('/auth/logout', { method: 'POST' })
+    } catch {
+      // Best-effort: proceed to clear client state regardless.
+    }
+    navigate(initialPath)
+    await onLogout?.()
+  }, [navigate, initialPath, onLogout])
+
   // Open a preview route in a new browser tab so it behaves like a normal,
   // shareable page (its own URL, no admin chrome — see the standalone branch
   // below). The blank tab is opened synchronously inside the click gesture so
@@ -197,6 +229,7 @@ function AdminShell({
       return (
         <Login
           onLogin={onLogin}
+          onVerifyTotp={onVerifyTotp}
           onNavigate={navigate}
           captchaConfig={captchaConfig}
           branding={branding}
@@ -437,6 +470,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 +504,7 @@ function AdminShell({
       'widgets',
       'users',
       'settings',
+      'profile',
       'page-builder',
       'collections',
       // `pages` is reserved so the Pages list/editor/tag routes above
@@ -577,7 +615,13 @@ function AdminShell({
   }
 
   return (
-    <Layout config={config} session={session} currentPath={currentPath} onNavigate={navigate}>
+    <Layout
+      config={config}
+      session={session}
+      currentPath={currentPath}
+      onNavigate={navigate}
+      onLogout={handleLogout}
+    >
       <ErrorBoundary>{renderView()}</ErrorBoundary>
       {shortcutHelpOpen && <ShortcutHelp onClose={() => setShortcutHelpOpen(false)} />}
     </Layout>

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

package/src/__tests__/views/settings-save-footer.render.test.tsx

@@ -0,0 +1,63 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+
+/**
+ * Regression: the shared "Save Changes" footer must only render on tabs that
+ * actually persist through `handleSave` (currently just Layout, which writes
+ * `defaultLayout` into the settings global). On self-managed tabs like SEO it
+ * was rendering a footer whose click toasted "Settings saved successfully!"
+ * while persisting none of the tab's edits — misleading, no-op UI.
+ */
+const SEO_CONFIG = {
+  static: { site: null },
+  overrides: { site: {}, collections: {} },
+  effective: { site: { siteUrl: 'https://example.com' } },
+  collections: [],
+}
+
+const cmsApi = vi.fn(async (endpoint: string, options?: { method?: string }) => {
+  const method = options?.method ?? 'GET'
+  if (endpoint === '/globals/settings' && method === 'GET') {
+    return { data: { siteTitle: 'Actuate Media' }, status: 200 }
+  }
+  if (endpoint === '/seo/config' && method === 'GET') {
+    return { data: SEO_CONFIG, status: 200 }
+  }
+  if (endpoint.startsWith('/collections/')) {
+    return { data: { docs: [] }, status: 200 }
+  }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({ cmsApi: (e: string, o?: unknown) => cmsApi(e, o as any) }))
+
+const { Settings } = await import('../../views/Settings.js')
+
+const LAYOUT_CONFIG = {
+  layout: { regions: { header: { collection: 'headers', label: 'Header' } } },
+}
+const SESSION = { user: { role: 'ADMIN' } }
+
+beforeEach(() => {
+  cmsApi.mockClear()
+})
+
+describe('Settings shared save footer', () => {
+  it('does NOT render the global "Save Changes" footer on the self-managed SEO tab', async () => {
+    render(<Settings config={LAYOUT_CONFIG} session={SESSION} initialTab="seo" />)
+
+    // The SEO panel owns its own persistence ("Save SEO defaults").
+    expect(
+      (await screen.findAllByRole('button', { name: 'Save SEO defaults' })).length,
+    ).toBeGreaterThan(0)
+    // The shared footer ("Save Changes") must be absent here.
+    expect(screen.queryByRole('button', { name: 'Save Changes' })).toBeNull()
+  })
+
+  it('renders the global "Save Changes" footer on the Layout tab', async () => {
+    render(<Settings config={LAYOUT_CONFIG} session={SESSION} initialTab="layout" />)
+
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Save Changes' })).toBeTruthy())
+  })
+})

package/src/components/Breadcrumbs.tsx

@@ -14,6 +14,7 @@ const LABEL_MAP: Record<string, string> = {
   users: 'Users',
   'script-tags': 'Script Tags',
   settings: 'Settings',
+  profile: 'Your Profile',
   collections: 'Collections',
   submissions: 'Submissions',
   new: 'New',

package/src/layout/Header.tsx

@@ -24,9 +24,17 @@ export interface HeaderProps {
    * on view-change.
    */
   pageActions?: ReactNode
+  /** Signs the user out (revokes the server session + clears local state). */
+  onLogout?: () => void
 }
 
-export function Header({ onToggleSidebar, session, onNavigate, pageActions }: HeaderProps) {
+export function Header({
+  onToggleSidebar,
+  session,
+  onNavigate,
+  onLogout,
+  pageActions,
+}: HeaderProps) {
   const [showCommandPalette, setShowCommandPalette] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
   const { resolvedTheme, setTheme } = useTheme()
@@ -152,7 +160,7 @@ export function Header({ onToggleSidebar, session, onNavigate, pageActions }: He
                 <DropdownMenu.Separator className="bg-border my-1 h-px" />
                 <DropdownMenu.Item
                   className="text-destructive hover:bg-accent flex cursor-pointer items-center gap-2 rounded px-3 py-2 text-sm outline-none"
-                  onSelect={() => onNavigate('/logout')}
+                  onSelect={() => onLogout?.()}
                 >
                   Logout
                 </DropdownMenu.Item>

package/src/layout/Layout.tsx

@@ -13,6 +13,7 @@ export interface LayoutProps {
   session: any
   currentPath: string
   onNavigate: (path: string) => void
+  onLogout?: () => void
   children: ReactNode
 }
 
@@ -30,7 +31,14 @@ export interface LayoutProps {
  * instead. The previous flex + `fixed`↔`static` toggle caused recurring
  * sidebar-overlap bugs; the grid-based primitive is the contract.
  */
-export function Layout({ config, session, currentPath, onNavigate, children }: LayoutProps) {
+export function Layout({
+  config,
+  session,
+  currentPath,
+  onNavigate,
+  onLogout,
+  children,
+}: LayoutProps) {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
 
@@ -63,6 +71,7 @@ export function Layout({ config, session, currentPath, onNavigate, children }: L
             onToggleSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
             session={session}
             onNavigate={onNavigate}
+            onLogout={onLogout}
             pageActions={pageActions}
           />
         }