@actuate-media/cms-admin 0.48.0 → 0.49.1

package/src/LoginRoot.tsx

@@ -0,0 +1,166 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useAdminRouter } from './router/index.js'
+import { ThemeProvider } from './components/ThemeProvider.js'
+import { ISOLATION_STYLE, useRobotsNoIndex } from './lib/root-chrome.js'
+import { Login, type CaptchaConfig } from './views/Login.js'
+import { SetupWizard } from './views/SetupWizard.js'
+import { ForgotPassword } from './views/ForgotPassword.js'
+import { ResetPassword } from './views/ResetPassword.js'
+
+export interface LoginRootProps {
+  config?: any
+  /** Current session, if any. Authenticated visitors are sent to `adminPath`. */
+  session?: any
+  /** Mount path of this login screen (default: '/securelogin'). */
+  basePath?: string
+  /**
+   * Where the admin app lives (default: '/admin'). Users are sent here after
+   * signing in — and immediately, if they arrive already authenticated.
+   */
+  adminPath?: string
+  setupRequired?: boolean
+  onSetupComplete?: (data: {
+    name: string
+    email: string
+    password: string
+  }) => Promise<{ success: boolean; error?: string }>
+  onLogin: (
+    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?: CaptchaConfig
+  /**
+   * Called once a session exists (after login, or on arrival while already
+   * signed in). Defaults to a full-page navigation to `adminPath` — the admin
+   * app is a separate route mount, so a client-side route push can't reach it.
+   */
+  onAuthenticated?: (adminPath: string) => void
+}
+
+/**
+ * Standalone mount for the unauthenticated auth screens on split-login
+ * installs: login (+ MFA), setup wizard, forgot/reset password. Pair it with
+ * `<AdminRoot loginPath>` so the admin mount itself stops rendering a login
+ * form for signed-out visitors.
+ *
+ * Routes under `basePath`:
+ * - `/` — login (or the setup wizard while `setupRequired`)
+ * - `/setup` — setup wizard (first-run; falls back to login once setup is done)
+ * - `/forgot-password`, `/reset-password?token=…` — recovery flows; emailed
+ *   reset/invite links point here when `config.admin.loginPath` is set.
+ */
+export function LoginRoot({
+  config,
+  session,
+  basePath = '/securelogin',
+  adminPath = '/admin',
+  setupRequired,
+  onSetupComplete,
+  onLogin,
+  onVerifyTotp,
+  captchaConfig,
+  onAuthenticated,
+}: LoginRootProps) {
+  const defaultDarkMode = config?.admin?.branding?.darkMode
+
+  useRobotsNoIndex()
+
+  return (
+    <div style={ISOLATION_STYLE} className="actuate-admin">
+      <ThemeProvider defaultDarkMode={defaultDarkMode}>
+        <LoginShell
+          config={config}
+          session={session}
+          basePath={basePath}
+          adminPath={adminPath}
+          setupRequired={setupRequired}
+          onSetupComplete={onSetupComplete}
+          onLogin={onLogin}
+          onVerifyTotp={onVerifyTotp}
+          captchaConfig={captchaConfig}
+          onAuthenticated={onAuthenticated}
+        />
+      </ThemeProvider>
+    </div>
+  )
+}
+
+function LoginShell({
+  config,
+  session,
+  basePath = '/securelogin',
+  adminPath = '/admin',
+  setupRequired,
+  onSetupComplete,
+  onLogin,
+  onVerifyTotp,
+  captchaConfig,
+  onAuthenticated,
+}: LoginRootProps) {
+  const { navigate, matchRoute } = useAdminRouter(basePath, '/')
+
+  // Already signed in (or just signed in): hand off to the admin app. The
+  // admin is a separate route mount, so this must be a full-page navigation.
+  const authenticated = Boolean(session) && !setupRequired
+  useEffect(() => {
+    if (!authenticated) return
+    if (onAuthenticated) {
+      onAuthenticated(adminPath)
+      return
+    }
+    if (typeof window !== 'undefined') {
+      window.location.replace(adminPath)
+    }
+  }, [authenticated, adminPath, onAuthenticated])
+
+  if (authenticated) {
+    return (
+      <div className="bg-background flex min-h-screen items-center justify-center">
+        <p className="text-muted-foreground text-sm" role="status">
+          Signed in — taking you to the admin…
+        </p>
+      </div>
+    )
+  }
+
+  if (setupRequired && onSetupComplete) {
+    return (
+      <SetupWizard
+        onComplete={onSetupComplete}
+        siteName={config?.admin?.branding?.name ?? 'Actuate CMS'}
+      />
+    )
+  }
+
+  if (matchRoute('/forgot-password')) {
+    return <ForgotPassword onNavigate={navigate} />
+  }
+
+  if (matchRoute('/reset-password')) {
+    const params = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '')
+    return <ResetPassword onNavigate={navigate} token={params.get('token')} />
+  }
+
+  return (
+    <Login
+      onLogin={onLogin}
+      onVerifyTotp={onVerifyTotp}
+      onNavigate={navigate}
+      captchaConfig={captchaConfig}
+      branding={config?.admin?.branding}
+    />
+  )
+}

package/src/__tests__/components/modal.render.test.tsx

@@ -0,0 +1,57 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+/**
+ * The shared admin Modal is built on Radix Dialog. These tests pin the
+ * accessibility contract that the migration introduced: the surface is exposed
+ * as a labelled dialog, the icon-only close control has an accessible name, and
+ * Escape / close both fire `onClose`. Hand-rolled `<div>` overlays gave us none
+ * of this.
+ */
+
+const { Modal } = await import('../../components/ui/Modal.js')
+
+describe('Modal accessibility', () => {
+  it('does not render content while closed', () => {
+    render(
+      <Modal open={false} onClose={() => {}} title="Edit page">
+        <p>Body</p>
+      </Modal>,
+    )
+    expect(screen.queryByRole('dialog')).toBeNull()
+  })
+
+  it('exposes a labelled dialog with an accessible close button', () => {
+    render(
+      <Modal open onClose={() => {}} title="Edit page">
+        <p>Body</p>
+      </Modal>,
+    )
+    // The title becomes the dialog's accessible name via aria-labelledby.
+    expect(screen.getByRole('dialog', { name: 'Edit page' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Close dialog' })).toBeTruthy()
+  })
+
+  it('fires onClose when the close button is activated', () => {
+    const onClose = vi.fn()
+    render(
+      <Modal open onClose={onClose} title="Edit page">
+        <p>Body</p>
+      </Modal>,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Close dialog' }))
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('fires onClose when Escape is pressed', () => {
+    const onClose = vi.fn()
+    render(
+      <Modal open onClose={onClose} title="Edit page">
+        <p>Body</p>
+      </Modal>,
+    )
+    fireEvent.keyDown(document.body, { key: 'Escape' })
+    expect(onClose).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,115 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+
+/**
+ * Split-login mode (user request: login at a non-obvious path like
+ * /securelogin, admin app at /admin). Pins:
+ * - `LoginRoot` serves login / setup wizard / forgot-password on its own
+ *   mount and hands off to the admin app once a session exists.
+ * - `<AdminRoot loginPath>` renders a 404 lookalike for signed-out visitors
+ *   instead of a login form, so /admin doesn't advertise the CMS.
+ */
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: vi.fn(async () => ({ data: undefined })),
+  ensureCsrfToken: vi.fn(async () => undefined),
+  setApiBase: vi.fn(),
+}))
+
+// This happy-dom environment doesn't expose a functional localStorage, which
+// ThemeProvider/LocaleProvider read on mount.
+const storage = new Map<string, string>()
+vi.stubGlobal('localStorage', {
+  getItem: (k: string) => storage.get(k) ?? null,
+  setItem: (k: string, v: string) => void storage.set(k, String(v)),
+  removeItem: (k: string) => void storage.delete(k),
+  clear: () => storage.clear(),
+})
+
+const { LoginRoot } = await import('../../LoginRoot.js')
+const { AdminRoot } = await import('../../AdminRoot.js')
+
+afterEach(() => {
+  cleanup()
+  window.history.replaceState({}, '', '/')
+})
+
+const noopLogin = vi.fn(async () => ({ success: true }))
+
+describe('LoginRoot', () => {
+  it('renders the login screen for signed-out visitors', () => {
+    window.history.replaceState({}, '', '/securelogin')
+    render(<LoginRoot config={{}} session={null} onLogin={noopLogin} />)
+    expect(screen.getByText('Sign in to your account')).toBeTruthy()
+  })
+
+  it('renders the setup wizard while setup is required (first-time install)', () => {
+    window.history.replaceState({}, '', '/securelogin/setup')
+    render(
+      <LoginRoot
+        config={{ admin: { branding: { name: 'Acme' } } }}
+        session={null}
+        setupRequired
+        onSetupComplete={vi.fn(async () => ({ success: true }))}
+        onLogin={noopLogin}
+      />,
+    )
+    expect(screen.getByText('Welcome to Acme')).toBeTruthy()
+  })
+
+  it('serves the forgot-password flow under its own mount', () => {
+    window.history.replaceState({}, '', '/securelogin/forgot-password')
+    render(<LoginRoot config={{}} session={null} onLogin={noopLogin} />)
+    expect(screen.getByText('Reset Password')).toBeTruthy()
+  })
+
+  it('hands an authenticated visitor off to the admin app', async () => {
+    window.history.replaceState({}, '', '/securelogin')
+    const onAuthenticated = vi.fn()
+    render(
+      <LoginRoot
+        config={{}}
+        session={{ user: { id: 'u1' } }}
+        adminPath="/admin"
+        onLogin={noopLogin}
+        onAuthenticated={onAuthenticated}
+      />,
+    )
+    expect(screen.getByRole('status').textContent).toContain('Signed in')
+    await waitFor(() => expect(onAuthenticated).toHaveBeenCalledWith('/admin'))
+    // No login form is offered to an already-authenticated visitor.
+    expect(screen.queryByText('Sign in to your account')).toBeNull()
+  })
+})
+
+describe('AdminRoot with loginPath (hidden login)', () => {
+  it('shows a 404 lookalike instead of a login form when signed out', () => {
+    window.history.replaceState({}, '', '/admin')
+    render(<AdminRoot config={{}} session={null} loginPath="/securelogin" onLogin={noopLogin} />)
+    expect(screen.getByText('This page could not be found.')).toBeTruthy()
+    expect(screen.queryByText('Sign in to your account')).toBeNull()
+  })
+
+  it('hides the setup wizard at the admin mount too (it lives on the login mount)', () => {
+    window.history.replaceState({}, '', '/admin')
+    render(
+      <AdminRoot
+        config={{}}
+        session={null}
+        loginPath="/securelogin"
+        setupRequired
+        onSetupComplete={vi.fn(async () => ({ success: true }))}
+        onLogin={noopLogin}
+      />,
+    )
+    expect(screen.getByText('This page could not be found.')).toBeTruthy()
+    expect(screen.queryByText(/Welcome to/)).toBeNull()
+  })
+
+  it('keeps the classic inline login when loginPath is not set', () => {
+    window.history.replaceState({}, '', '/admin')
+    render(<AdminRoot config={{}} session={null} onLogin={noopLogin} />)
+    expect(screen.getByText('Sign in to your account')).toBeTruthy()
+  })
+})

package/src/components/MediaPickerModal.tsx

@@ -1,9 +1,11 @@
 'use client'
 
-import { useState, useRef } from 'react'
+import { useId, useState, useRef } from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
 import { X, Upload, Search, ImageIcon, Loader2 } from 'lucide-react'
 import { toast } from 'sonner'
 import { cmsApi } from '../lib/api.js'
+import { adminPortalContainer } from '../lib/portal-container.js'
 import { useApiData } from '../lib/useApiData.js'
 
 interface MediaItem {
@@ -60,6 +62,7 @@ export function MediaPickerModal({
   const [search, setSearch] = useState('')
   const [uploading, setUploading] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const searchId = useId()
 
   const { data, loading, refetch } = useApiData<{ data: { items: MediaItem[] } }>(
     open ? `/media?pageSize=50${search ? `&search=${encodeURIComponent(search)}` : ''}` : null,
@@ -119,132 +122,153 @@ export function MediaPickerModal({
     onClose()
   }
 
-  if (!open) return null
-
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="fixed inset-0 bg-black/40" onClick={onClose} />
-      <div className="relative mx-4 flex max-h-[80vh] w-full max-w-2xl flex-col rounded-xl bg-white shadow-2xl">
-        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
-          <h2 className="text-lg font-semibold text-gray-900">Insert Image</h2>
-          <button
-            onClick={onClose}
-            className="rounded-lg p-1.5 transition-colors hover:bg-gray-100"
-          >
-            <X className="h-5 w-5 text-gray-500" />
-          </button>
-        </div>
-
-        {!libraryOnly && (
-          <div className="flex border-b border-gray-200">
-            <button
-              onClick={() => setTab('library')}
-              className={`flex-1 px-4 py-2.5 text-sm font-medium transition-colors ${
-                tab === 'library'
-                  ? 'border-b-2 border-blue-600 text-blue-600'
-                  : 'text-gray-500 hover:text-gray-700'
-              }`}
-            >
-              Media Library
-            </button>
-            <button
-              onClick={() => setTab('upload')}
-              className={`flex-1 px-4 py-2.5 text-sm font-medium transition-colors ${
-                tab === 'upload'
-                  ? 'border-b-2 border-blue-600 text-blue-600'
-                  : 'text-gray-500 hover:text-gray-700'
-              }`}
-            >
-              Upload New
-            </button>
+    <Dialog.Root open={open} onOpenChange={(next) => !next && onClose()}>
+      <Dialog.Portal container={adminPortalContainer()}>
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/40" />
+        <Dialog.Content
+          aria-describedby={undefined}
+          className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-50 mx-4 flex max-h-[80vh] w-[calc(100%-2rem)] max-w-2xl -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl border shadow-2xl focus:outline-none"
+        >
+          <div className="border-border flex items-center justify-between border-b px-4 py-3">
+            <Dialog.Title className="text-foreground text-lg font-medium">
+              Insert Image
+            </Dialog.Title>
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                aria-label="Close media picker"
+                className="text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring rounded-lg p-1.5 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+              >
+                <X className="h-5 w-5" aria-hidden />
+              </button>
+            </Dialog.Close>
           </div>
-        )}
 
-        <div className="flex-1 overflow-y-auto p-4">
-          {libraryOnly || tab === 'library' ? (
-            <>
-              <div className="relative mb-4">
-                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
-                <input
-                  type="text"
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                  placeholder="Search images..."
-                  className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                />
-              </div>
+          {!libraryOnly && (
+            <div className="border-border flex border-b" role="tablist" aria-label="Image source">
+              <button
+                type="button"
+                role="tab"
+                aria-selected={tab === 'library'}
+                onClick={() => setTab('library')}
+                className={`flex-1 px-4 py-2.5 text-sm font-medium transition-colors ${
+                  tab === 'library'
+                    ? 'border-primary text-primary border-b-2'
+                    : 'text-muted-foreground hover:text-foreground'
+                }`}
+              >
+                Media Library
+              </button>
+              <button
+                type="button"
+                role="tab"
+                aria-selected={tab === 'upload'}
+                onClick={() => setTab('upload')}
+                className={`flex-1 px-4 py-2.5 text-sm font-medium transition-colors ${
+                  tab === 'upload'
+                    ? 'border-primary text-primary border-b-2'
+                    : 'text-muted-foreground hover:text-foreground'
+                }`}
+              >
+                Upload New
+              </button>
+            </div>
+          )}
 
-              {loading ? (
-                <div className="flex items-center justify-center py-12">
-                  <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
+          <div className="flex-1 overflow-y-auto p-4">
+            {libraryOnly || tab === 'library' ? (
+              <>
+                <div className="relative mb-4">
+                  <Search
+                    className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+                    aria-hidden
+                  />
+                  <input
+                    id={searchId}
+                    type="text"
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    placeholder="Search images..."
+                    aria-label="Search images"
+                    className="border-input bg-background text-foreground focus:ring-ring w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus:ring-2 focus:outline-none"
+                  />
                 </div>
-              ) : imageItems.length === 0 ? (
-                <div className="py-12 text-center text-sm text-gray-500">
-                  No images found. Try uploading one.
-                </div>
-              ) : (
-                <div className="grid grid-cols-3 gap-3 sm:grid-cols-4">
-                  {imageItems.map((item: MediaItem) => {
-                    const src = item.url || item.storageKey
-                    return (
-                      <button
-                        key={item.id}
-                        onClick={() => handleSelectItem(item)}
-                        title={item.filename}
-                        className="group relative aspect-square overflow-hidden rounded-lg border-2 border-gray-200 bg-gray-100 transition-colors hover:border-blue-500"
-                      >
-                        {src ? (
-                          <img
-                            src={src}
-                            alt={item.filename}
-                            loading="lazy"
-                            className="h-full w-full object-contain"
-                          />
-                        ) : (
-                          <div className="flex h-full w-full items-center justify-center">
-                            <ImageIcon className="h-8 w-8 text-gray-300" />
+
+                {loading ? (
+                  <div className="flex items-center justify-center py-12">
+                    <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" aria-hidden />
+                  </div>
+                ) : imageItems.length === 0 ? (
+                  <div className="text-muted-foreground py-12 text-center text-sm">
+                    No images found. Try uploading one.
+                  </div>
+                ) : (
+                  <div className="grid grid-cols-3 gap-3 sm:grid-cols-4">
+                    {imageItems.map((item: MediaItem) => {
+                      const src = item.url || item.storageKey
+                      return (
+                        <button
+                          key={item.id}
+                          type="button"
+                          onClick={() => handleSelectItem(item)}
+                          title={item.filename}
+                          className="group border-border bg-muted hover:border-primary relative aspect-square overflow-hidden rounded-lg border-2 transition-colors"
+                        >
+                          {src ? (
+                            <img
+                              src={src}
+                              alt={item.filename}
+                              loading="lazy"
+                              className="h-full w-full object-contain"
+                            />
+                          ) : (
+                            <div className="flex h-full w-full items-center justify-center">
+                              <ImageIcon className="text-muted-foreground h-8 w-8" aria-hidden />
+                            </div>
+                          )}
+                          <div className="absolute inset-x-0 bottom-0 bg-black/60 p-1.5 opacity-0 transition-opacity group-hover:opacity-100">
+                            <p className="truncate text-xs text-white">{item.filename}</p>
                           </div>
-                        )}
-                        <div className="absolute inset-x-0 bottom-0 bg-black/60 p-1.5 opacity-0 transition-opacity group-hover:opacity-100">
-                          <p className="truncate text-xs text-white">{item.filename}</p>
-                        </div>
-                      </button>
-                    )
-                  })}
+                        </button>
+                      )
+                    })}
+                  </div>
+                )}
+              </>
+            ) : (
+              <div className="flex flex-col items-center justify-center py-12">
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept={accept ?? 'image/*'}
+                  className="hidden"
+                  onChange={(e) => handleUpload(e.target.files)}
+                />
+                <div className="bg-primary/10 mb-4 flex h-16 w-16 items-center justify-center rounded-full">
+                  {uploading ? (
+                    <Loader2 className="text-primary h-8 w-8 animate-spin" aria-hidden />
+                  ) : (
+                    <Upload className="text-primary h-8 w-8" aria-hidden />
+                  )}
                 </div>
-              )}
-            </>
-          ) : (
-            <div className="flex flex-col items-center justify-center py-12">
-              <input
-                ref={fileInputRef}
-                type="file"
-                accept={accept ?? 'image/*'}
-                className="hidden"
-                onChange={(e) => handleUpload(e.target.files)}
-              />
-              <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-50">
-                {uploading ? (
-                  <Loader2 className="h-8 w-8 animate-spin text-blue-600" />
-                ) : (
-                  <Upload className="h-8 w-8 text-blue-600" />
+                <p className="text-muted-foreground mb-4 text-sm">
+                  {uploading ? 'Uploading...' : 'Select an image file to upload'}
+                </p>
+                {!uploading && (
+                  <button
+                    type="button"
+                    onClick={() => fileInputRef.current?.click()}
+                    className="bg-primary text-primary-foreground rounded-lg px-4 py-2 text-sm transition-opacity hover:opacity-90"
+                  >
+                    Choose File
+                  </button>
                 )}
               </div>
-              <p className="mb-4 text-sm text-gray-600">
-                {uploading ? 'Uploading...' : 'Select an image file to upload'}
-              </p>
-              {!uploading && (
-                <button
-                  onClick={() => fileInputRef.current?.click()}
-                  className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
-                >
-                  Choose File
-                </button>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
+            )}
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
   )
 }