@actuate-media/cms-admin 0.37.0 → 0.37.2

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

@@ -0,0 +1,96 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+
+/**
+ * The login screen resolves its logo to match the admin sidebar:
+ *   1. the brand uploaded in Settings → Appearance (cached admin brand, then
+ *      the unauthenticated `/public/brand` endpoint for fresh browsers),
+ *   2. the static `config.admin.branding.logo`,
+ *   3. the bundled Actuate wordmark,
+ * and `branding.logo === null` hides the logo entirely (whitelabel opt-out).
+ *
+ * `cmsApi` is mocked because the component fetches `/public/brand` on mount.
+ */
+const cmsApiMock = vi.fn()
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (...args: unknown[]) => cmsApiMock(...args),
+}))
+
+import { Login } from '../../views/Login.js'
+
+const onLogin = vi.fn(async () => ({ success: true }))
+
+beforeEach(() => {
+  cmsApiMock.mockReset()
+  // Default: no public brand configured.
+  cmsApiMock.mockResolvedValue({ data: {}, status: 200 })
+})
+
+describe('Login — logo resolution', () => {
+  it('renders the bundled Actuate logo when nothing is branded', async () => {
+    render(<Login onLogin={onLogin} />)
+    // Bundled SVG exposes role="img" + aria-label="Actuate Media".
+    expect(screen.getByRole('img', { name: 'Actuate Media' })).toBeTruthy()
+    // No <img> logo element.
+    expect(screen.queryByRole('img', { name: 'Actuate CMS' })).toBeNull()
+    await waitFor(() => expect(cmsApiMock).toHaveBeenCalledWith('/public/brand'))
+  })
+
+  it('shows the neutral logo placeholder when branded but no logo is set', async () => {
+    render(<Login onLogin={onLogin} branding={{ name: 'Acme Co' }} />)
+    // Placeholder slot, not the bundled Actuate wordmark.
+    expect(screen.getByRole('img', { name: 'Logo placeholder' })).toBeTruthy()
+    expect(screen.queryByRole('img', { name: 'Actuate Media' })).toBeNull()
+    // The brand name still renders as the headline.
+    expect(screen.getByRole('heading', { name: 'Acme Co' })).toBeTruthy()
+  })
+
+  it('shows the placeholder for a fresh browser when /public/brand reports a branded site (initials) but no logo', async () => {
+    // No config name, no cached admin brand — only the public brand initials
+    // signal a branded install. The logo-less fallback must be the placeholder,
+    // not the Actuate wordmark.
+    cmsApiMock.mockResolvedValue({
+      data: { public: { primary: null, initials: 'AC' } },
+      status: 200,
+    })
+
+    render(<Login onLogin={onLogin} />)
+
+    await waitFor(() => {
+      expect(screen.getByRole('img', { name: 'Logo placeholder' })).toBeTruthy()
+    })
+    expect(screen.queryByRole('img', { name: 'Actuate Media' })).toBeNull()
+  })
+
+  it('uses the static config logo when no appearance brand exists', async () => {
+    render(
+      <Login onLogin={onLogin} branding={{ logo: 'https://cdn.example.com/config-logo.png' }} />,
+    )
+    const img = (await screen.findByAltText('Actuate CMS')) as HTMLImageElement
+    expect(img.getAttribute('src')).toBe('https://cdn.example.com/config-logo.png')
+  })
+
+  it('prefers the uploaded appearance logo from /public/brand over the config logo', async () => {
+    cmsApiMock.mockResolvedValue({
+      data: { public: { primary: { url: 'https://cdn.example.com/appearance-logo.svg' } } },
+      status: 200,
+    })
+
+    render(
+      <Login onLogin={onLogin} branding={{ logo: 'https://cdn.example.com/config-logo.png' }} />,
+    )
+
+    await waitFor(() => {
+      const img = screen.getByAltText('Actuate CMS') as HTMLImageElement
+      expect(img.getAttribute('src')).toBe('https://cdn.example.com/appearance-logo.svg')
+    })
+  })
+
+  it('hides the logo entirely when branding.logo is null (whitelabel) and skips the fetch', async () => {
+    render(<Login onLogin={onLogin} branding={{ logo: null }} />)
+    expect(screen.queryByRole('img', { name: 'Actuate Media' })).toBeNull()
+    expect(screen.queryByAltText('Actuate CMS')).toBeNull()
+    expect(cmsApiMock).not.toHaveBeenCalled()
+  })
+})

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

@@ -2,6 +2,13 @@
 import { describe, expect, it, vi } from 'vitest'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 
+// The login screen fetches `/public/brand` on mount to mirror the sidebar
+// logo. These MFA tests don't care about branding — stub the network so the
+// real `cmsApi` (which reads localStorage) doesn't run in this environment.
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: vi.fn(async () => ({ data: {}, status: 200 })),
+}))
+
 import { Login } from '../../views/Login.js'
 
 /**

package/src/components/LogoPlaceholder.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { ImagePlus } from 'lucide-react'
+
+/**
+ * Neutral "logo goes here" placeholder shown when no brand logo has been
+ * uploaded or configured. Deliberately reads as an empty slot — a dashed
+ * outline with a muted image icon — rather than a filled initials badge, which
+ * looks like a user avatar (the real account avatar already lives top-right).
+ *
+ * It is automatically superseded the moment a logo is set in Settings →
+ * Appearance, since every logo branch takes precedence over this fallback.
+ */
+export interface LogoPlaceholderProps {
+  /** Color treatment so the slot blends with its surface. */
+  tone: 'sidebar' | 'login'
+  /** Brand/site name rendered beside the slot (expanded sidebar only). */
+  label?: string
+}
+
+export function LogoPlaceholder({ tone, label }: LogoPlaceholderProps) {
+  if (tone === 'login') {
+    return (
+      <span
+        role="img"
+        aria-label="Logo placeholder"
+        title="Add a logo in Settings → Appearance"
+        className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-lg border border-dashed border-gray-300 text-gray-400"
+      >
+        <ImagePlus className="h-6 w-6" aria-hidden="true" />
+      </span>
+    )
+  }
+
+  const slot = (
+    <span
+      className="border-sidebar-border text-sidebar-foreground/50 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-dashed"
+      role={label ? undefined : 'img'}
+      aria-hidden={label ? true : undefined}
+      aria-label={label ? undefined : 'Logo placeholder'}
+      title="Add a logo in Settings → Appearance"
+    >
+      <ImagePlus size={16} aria-hidden="true" />
+    </span>
+  )
+
+  if (!label) return slot
+
+  return (
+    <div className="flex min-w-0 items-center gap-2.5">
+      {slot}
+      <span className="text-sidebar-foreground truncate text-sm font-medium">{label}</span>
+    </div>
+  )
+}

package/src/components/forms/EmbedPanel.tsx

@@ -1,11 +1,10 @@
 'use client'
 
 /**
- * Embed tab of the Form Schema drawer. Shows the public submission/schema
- * endpoints and copy-paste embed snippets, and lets the editor restrict which
- * origins may host the embedded form. Snippets are derived from the form slug;
- * the live public endpoints land in a later phase (PR 5) but the paths shown
- * here are the committed contract.
+ * Embed tab of the Form Schema drawer. Shows the live public schema/submission
+ * endpoints and a ready-to-paste `<ActuateForm>` snippet, and lets the editor
+ * restrict which origins may host the embedded form. Endpoints are derived from
+ * the form slug and match the public API mounted at `/api/cms`.
  */
 import { Check, Copy } from 'lucide-react'
 import { useEffect, useState } from 'react'
@@ -60,11 +59,9 @@ export function EmbedPanel({
   }, [formId])
 
   const origin = siteOrigin()
-  const submitUrl = `${origin}/api/forms/${slug}/submit`
-  const schemaUrl = `${origin}/api/forms/${slug}/schema`
-  const embedUrl = `${origin}/forms/embed/${slug}`
-  const iframeSnippet = `<iframe src="${embedUrl}" title="${slug}" style="width:100%;border:0;" loading="lazy"></iframe>`
-  const scriptSnippet = `<div data-actuate-form="${slug}"></div>\n<script src="${origin}/api/forms/embed.js" async></script>`
+  const schemaUrl = `${origin}/api/cms/public/forms/${slug}`
+  const submitUrl = `${origin}/api/cms/public/forms/${slug}/submit`
+  const componentSnippet = `import { ActuateForm } from '@actuate-media/sections-react'\n\n<ActuateForm slug="${slug}" />`
 
   async function saveDomains() {
     setSaving(true)
@@ -94,10 +91,16 @@ export function EmbedPanel({
         </p>
       )}
 
-      <CopyField label="Public submission endpoint" value={submitUrl} />
-      <CopyField label="Schema endpoint" value={schemaUrl} />
-      <CopyField label="Iframe embed" value={iframeSnippet} multiline />
-      <CopyField label="Script embed" value={scriptSnippet} multiline />
+      <CopyField label="React component" value={componentSnippet} multiline />
+      <p className="text-muted-foreground -mt-2 text-xs">
+        Renders, validates, and submits this form (with spam protection) using{' '}
+        <span className="font-mono">@actuate-media/sections-react</span>. Or add a{' '}
+        <span className="font-medium">Form</span> section to any page and set its slug to{' '}
+        <span className="font-mono">{slug}</span>.
+      </p>
+
+      <CopyField label="Schema endpoint (GET)" value={schemaUrl} />
+      <CopyField label="Submission endpoint (POST)" value={submitUrl} />
 
       <div>
         <label className="text-foreground mb-1 block text-sm font-medium">

package/src/layout/Sidebar.tsx

@@ -34,6 +34,7 @@ import {
 } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import { ActuateBrandLogo } from '../assets/actuate-logo.js'
+import { LogoPlaceholder } from '../components/LogoPlaceholder.js'
 
 /**
  * Compact mark used in the collapsed sidebar — just the "C" symbol from the
@@ -76,28 +77,17 @@ const ICON_MAP: Record<string, LucideIcon> = {
   Layers: Layers,
 }
 
-/** Square site-initials badge — the final fallback before the Actuate mark. */
-function InitialsBadge({ initials, size }: { initials: string; size: 'sm' | 'lg' }) {
-  return (
-    <span
-      className={`bg-sidebar-primary text-sidebar-primary-foreground inline-flex shrink-0 items-center justify-center rounded-md font-medium ${
-        size === 'lg' ? 'h-8 w-8 text-sm' : 'h-8 w-8 text-sm'
-      }`}
-      aria-hidden="true"
-    >
-      {initials}
-    </span>
-  )
-}
-
 /**
  * Sidebar brand lockup.
  *
  * Resolution order follows the Appearance spec, sourcing from the live
  * appearance context (DB-backed brand, cached in localStorage) and falling
- * back to legacy `config.admin.branding`, then site initials, then the bundled
- * Actuate mark/wordmark for un-branded installs. Dark-mode uses the dark logo
- * when one is configured. Logos are never stretched/cropped (object-contain).
+ * back to legacy `config.admin.branding`, then a neutral logo placeholder for
+ * branded-but-logo-less installs, then the bundled Actuate mark/wordmark for
+ * un-branded installs. The placeholder replaces the old initials badge, which
+ * read as a user avatar (the real account avatar already sits top-right).
+ * Dark-mode uses the dark logo when one is configured. Logos are never
+ * stretched/cropped (object-contain).
  */
 function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean }) {
   const { adminBrand, resolvedTheme } = useTheme()
@@ -117,7 +107,7 @@ function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean })
     if (mark) return <img src={mark} alt={alt} className="h-8 w-8 object-contain" />
     if (primary) return <img src={primary} alt={alt} className="h-8 w-8 object-contain" />
     if (configLogo) return <img src={configLogo} alt={alt} className="h-8 w-8 object-contain" />
-    if (hasInitials) return <InitialsBadge initials={initials} size="sm" />
+    if (hasInitials) return <LogoPlaceholder tone="sidebar" />
     return <ActuateMark className="h-8 w-8" />
   }
 
@@ -143,14 +133,10 @@ function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean })
     )
   }
 
-  if (mark || hasInitials) {
+  if (mark) {
     return (
       <div className="flex min-w-0 items-center gap-2.5">
-        {mark ? (
-          <img src={mark} alt={alt} className="h-8 w-8 shrink-0 object-contain" />
-        ) : (
-          <InitialsBadge initials={initials} size="lg" />
-        )}
+        <img src={mark} alt={alt} className="h-8 w-8 shrink-0 object-contain" />
         <span className="text-sidebar-foreground truncate text-sm font-medium">
           {brandName ?? alt}
         </span>
@@ -158,6 +144,10 @@ function BrandLogo({ config, collapsed }: { config?: any; collapsed: boolean })
     )
   }
 
+  if (hasInitials) {
+    return <LogoPlaceholder tone="sidebar" label={brandName ?? alt} />
+  }
+
   if (brandName) {
     return (
       <div className="flex min-w-0 items-center gap-2.5">

package/src/views/Login.tsx

@@ -1,8 +1,11 @@
 'use client'
 
-import { useState, type FormEvent } from 'react'
+import { useState, useEffect, useRef, type FormEvent } from 'react'
 import { Eye, EyeOff, AlertTriangle, Loader2 } from 'lucide-react'
 import { ActuateBrandLogo } from '../assets/actuate-logo.js'
+import { LogoPlaceholder } from '../components/LogoPlaceholder.js'
+import { useTheme } from '../components/ThemeProvider.js'
+import { cmsApi } from '../lib/api.js'
 
 export interface CaptchaConfig {
   provider: 'recaptcha' | 'turnstile' | 'none'
@@ -227,8 +230,45 @@ export function Login({
   const [totpError, setTotpError] = useState('')
   const [verifying, setVerifying] = useState(false)
 
+  // Brand logo, sourced to match the admin sidebar (see resolution note below).
+  // `adminBrand` is the ThemeProvider cache the sidebar paints from (hydrated
+  // from localStorage on mount); `publicLogo` is fetched only when that cache
+  // is empty (a fresh browser that hasn't loaded the admin yet).
+  const { adminBrand } = useTheme()
+  const [publicLogo, setPublicLogo] = useState<string | null>(null)
+  // Site initials resolved from `/public/brand`. Used only to detect whether
+  // the install is "branded" on a fresh browser (no cache, no config name), so
+  // the logo-less fallback can pick the placeholder over the Actuate wordmark.
+  const [publicInitials, setPublicInitials] = useState<string | null>(null)
+  const publicBrandFetched = useRef(false)
+
   useCaptchaScript(captchaConfig?.provider, captchaConfig?.siteKey)
 
+  useEffect(() => {
+    // The cached admin brand (exactly what the sidebar last rendered) wins and
+    // needs no network. Only reach for the unauthenticated `/public/brand`
+    // endpoint on a fresh browser with no cache, and never when the integrator
+    // opted out of a logo entirely (`branding.logo === null`).
+    if (adminBrand.primaryUrl || branding?.logo === null) return
+    if (publicBrandFetched.current) return
+    publicBrandFetched.current = true
+
+    let cancelled = false
+    void (async () => {
+      const res = await cmsApi<{
+        public?: { primary?: { url?: string } | null; initials?: string } | null
+      }>('/public/brand')
+      if (cancelled) return
+      const url = res.data?.public?.primary?.url
+      if (url) setPublicLogo(url)
+      const initials = res.data?.public?.initials
+      if (initials) setPublicInitials(initials)
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [adminBrand.primaryUrl, branding?.logo])
+
   const canSubmit = email.trim() && password && !submitting
 
   const handleSubmit = async (e: FormEvent) => {
@@ -308,27 +348,48 @@ export function Login({
   const enabledProviders =
     oauthProviders?.filter((p) => ['google', 'github', 'microsoft'].includes(p)) ?? []
 
-  // Branding fallbacks: when an integrator doesn't pass `branding`, render the
-  // Actuate Media wordmark inline (transparent SVG, no surrounding pill needed).
-  // When `branding.logo` is explicitly `null`, render no logo at all (just the
-  // headline + tagline) so whitelabel deployments can hide it entirely.
-  const customLogo = branding?.logo
+  // Logo resolution mirrors the admin sidebar so the login screen shows the
+  // same brand mark a user sees once signed in. Precedence (best available
+  // pre-auth):
+  //   1. the logo uploaded in Settings → Appearance — read from the
+  //      ThemeProvider cache the sidebar paints from, then (fresh browsers with
+  //      no cache) the unauthenticated `/public/brand` endpoint;
+  //   2. the static `config.admin.branding.logo` URL;
+  //   3. a neutral logo placeholder when the install is branded (a site/brand
+  //      name is set) but no logo has been uploaded yet — matching the sidebar;
+  //   4. the bundled Actuate wordmark for a fully un-branded install.
+  // `branding.logo === null` still hides the logo entirely (whitelabel opt-out).
+  const configLogo = branding?.logo
+  const hideLogo = configLogo === null
+  const appearanceLogo = adminBrand.primaryUrl ?? publicLogo
+  const effectiveLogo = appearanceLogo ?? (typeof configLogo === 'string' ? configLogo : null)
   const brandName = branding?.name ?? 'Actuate CMS'
   const brandTagline = branding?.tagline ?? 'Sign in to your account'
-  const showLogo = customLogo !== null
+  const showLogo = !hideLogo
+  // "Branded" = the operator has set a brand identity. Mirrors the sidebar's
+  // `hasInitials` signal (initials are derived from the site title) plus an
+  // explicit `branding.name` and, for fresh browsers, the initials returned by
+  // `/public/brand`. Drives the placeholder vs. Actuate-wordmark fallback so a
+  // configured client install never shows Actuate branding. `'A'` is the
+  // unset-title default, so it counts as un-branded.
+  const hasInitials = (value: string | null | undefined) => Boolean(value) && value !== 'A'
+  const isBranded =
+    Boolean(branding?.name) || hasInitials(adminBrand.initials) || hasInitials(publicInitials)
 
   return (
     <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4">
       <div className="w-full max-w-md">
         <div className="mb-8 text-center">
           {showLogo &&
-            (customLogo ? (
+            (effectiveLogo ? (
               <img
-                src={customLogo}
+                src={effectiveLogo}
                 alt={brandName}
                 className="mx-auto mb-4 max-h-16 w-auto object-contain"
                 draggable={false}
               />
+            ) : isBranded ? (
+              <LogoPlaceholder tone="login" />
             ) : (
               <ActuateBrandLogo className="mx-auto mb-4 h-14 w-auto" />
             ))}

package/src/views/page-editor/section-icons.ts

@@ -5,6 +5,7 @@ import {
   LayoutGrid,
   LayoutTemplate,
   type LucideIcon,
+  Mail,
   Megaphone,
   PanelsTopLeft,
   Quote,
@@ -18,6 +19,7 @@ const SECTION_ICONS: Record<string, LucideIcon> = {
   'align-left': AlignLeft,
   'panels-top-left': PanelsTopLeft,
   'bar-chart-3': BarChart3,
+  mail: Mail,
   megaphone: Megaphone,
   text: Type,
   quote: Quote,