@actuate-media/cms-admin 0.37.0 → 0.37.1

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" />
             ))}