@actuate-media/cms-admin 0.26.0 → 0.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actuate-media/cms-admin",
-  "version": "0.26.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.35.0",
+    "@actuate-media/cms-core": "0.37.0",
     "@actuate-media/component-blocks": "0.2.0"
   },
   "scripts": {

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

@@ -0,0 +1,132 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+// The Appearance tab reads `/appearance` (settings + resolved brand), then on
+// save read-modify-writes `/globals/settings`. Uploads POST `/media/upload`.
+let appearanceData: any
+
+const cmsApi = vi.fn(async (endpoint: string, options?: { method?: string; body?: unknown }) => {
+  const method = options?.method ?? 'GET'
+  if (endpoint === '/appearance' && method === 'GET') return { data: appearanceData, status: 200 }
+  if (endpoint === '/globals/settings' && method === 'GET')
+    return { data: { siteTitle: 'Actuate Media' }, status: 200 }
+  if (endpoint === '/globals/settings' && method === 'PUT') return { data: {}, status: 200 }
+  if (endpoint === '/media/upload' && method === 'POST')
+    return {
+      data: { id: 'new-logo', url: 'https://cdn.example.com/x.svg', mimeType: 'image/svg+xml' },
+      status: 200,
+    }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({ cmsApi: (e: string, o?: unknown) => cmsApi(e, o as any) }))
+
+const { AppearanceTab } = await import('../../views/settings/AppearanceTab.js')
+
+function baseData(overrides: Record<string, unknown> = {}) {
+  return {
+    appearance: {
+      adminColorModeDefault: 'system',
+      adminAccentColor: 'purple',
+      sidebarDensity: 'default',
+      contentFont: 'DM Sans',
+      reduceMotion: false,
+    },
+    brand: { mode: 'inheritPublicBrand' },
+    resolved: { admin: { initials: 'AM' } },
+    assets: [],
+    siteTitle: 'Actuate Media',
+    ...overrides,
+  }
+}
+
+beforeEach(() => {
+  cmsApi.mockClear()
+  appearanceData = baseData()
+})
+
+describe('AppearanceTab', () => {
+  it('renders the branding/theme/typography cards with a clean (disabled) save bar', async () => {
+    render(<AppearanceTab role="ADMIN" />)
+
+    await screen.findByText('Branding')
+    expect(screen.getByText('Admin Theme')).toBeTruthy()
+    expect(screen.getByText('Typography & Motion')).toBeTruthy()
+    expect(screen.getByText('Brand Preview')).toBeTruthy()
+    expect(
+      (screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement).disabled,
+    ).toBe(true)
+  })
+
+  it('enables Save when the accent changes and persists appearance to the settings global', async () => {
+    render(<AppearanceTab role="ADMIN" />)
+    await screen.findByText('Branding')
+
+    fireEvent.click(screen.getByRole('radio', { name: 'Blue' }))
+    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    expect(save.disabled).toBe(false)
+
+    fireEvent.click(save)
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/globals/settings',
+        expect.objectContaining({
+          method: 'PUT',
+          body: expect.stringContaining('"adminAccentColor":"blue"'),
+        }),
+      ),
+    )
+  })
+
+  it('warns when dark mode is the default but no dark-mode logo is set', async () => {
+    appearanceData = baseData({
+      appearance: {
+        adminColorModeDefault: 'dark',
+        adminAccentColor: 'purple',
+        sidebarDensity: 'default',
+        contentFont: 'DM Sans',
+        reduceMotion: false,
+      },
+    })
+    render(<AppearanceTab role="ADMIN" />)
+
+    expect(await screen.findByText(/no dark-mode logo is set/i)).toBeTruthy()
+  })
+
+  it('uploads a logo through the Media Center and enables Save', async () => {
+    render(<AppearanceTab role="ADMIN" />)
+    await screen.findByText('Branding')
+
+    const input = screen.getByLabelText('Primary Logo') as HTMLInputElement
+    const file = new File(
+      ['<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"></svg>'],
+      'logo.svg',
+      { type: 'image/svg+xml' },
+    )
+    fireEvent.change(input, { target: { files: [file] } })
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/media/upload',
+        expect.objectContaining({ method: 'POST' }),
+      ),
+    )
+    await waitFor(() =>
+      expect(
+        (screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement).disabled,
+      ).toBe(false),
+    )
+  })
+
+  it('is read-only for non-admins', async () => {
+    render(<AppearanceTab role="EDITOR" />)
+
+    expect(await screen.findByText(/read-only access to appearance/i)).toBeTruthy()
+    // Upload control disabled.
+    expect(
+      (screen.getByRole('button', { name: /upload primary logo/i }) as HTMLButtonElement).disabled,
+    ).toBe(true)
+  })
+})

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