@actuate-media/cms-admin 0.10.0 → 0.11.0

package/src/views/Login.tsx

@@ -1,13 +1,25 @@
 'use client'
 
 import { useState, type FormEvent } from 'react'
-import { Shield, Eye, EyeOff, AlertTriangle, Loader2 } from 'lucide-react'
+import { Eye, EyeOff, AlertTriangle, Loader2 } from 'lucide-react'
+import { ActuateBrandLogo } from '../assets/actuate-logo.js'
 
 export interface CaptchaConfig {
   provider: 'recaptcha' | 'turnstile' | 'none'
   siteKey: string | null
 }
 
+/**
+ * Branding shown on the login screen. Mirrors `config.admin.branding` from the
+ * sidebar so integrators only need to set it once. `logo` should be a URL or
+ * data URL; pass `null` to opt out of any logo entirely.
+ */
+export interface LoginBrandingConfig {
+  logo?: string | null
+  name?: string
+  tagline?: string
+}
+
 export interface LoginProps {
   onLogin: (
     email: string,
@@ -17,6 +29,11 @@ export interface LoginProps {
   onNavigate?: (path: string) => void
   oauthProviders?: string[]
   captchaConfig?: CaptchaConfig
+  /**
+   * Custom branding for the login screen. Falls back to the bundled Actuate
+   * Media wordmark + "Actuate CMS" headline when omitted.
+   */
+  branding?: LoginBrandingConfig
 }
 
 const OAUTH_LABELS: Record<string, string> = {
@@ -48,7 +65,7 @@ const OAUTH_COLORS: Record<string, { border: string; bg: string; text: string; h
 
 function GoogleIcon() {
   return (
-    <svg className="w-5 h-5" viewBox="0 0 24 24" aria-hidden="true">
+    <svg className="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
       <path
         d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
         fill="#4285F4"
@@ -71,7 +88,7 @@ function GoogleIcon() {
 
 function MicrosoftIcon() {
   return (
-    <svg className="w-5 h-5" viewBox="0 0 21 21" aria-hidden="true">
+    <svg className="h-5 w-5" viewBox="0 0 21 21" aria-hidden="true">
       <rect x="1" y="1" width="9" height="9" fill="#F25022" />
       <rect x="1" y="11" width="9" height="9" fill="#00A4EF" />
       <rect x="11" y="1" width="9" height="9" fill="#7FBA00" />
@@ -86,7 +103,7 @@ function OAuthIcon({ provider }: { provider: string }) {
       return <GoogleIcon />
     case 'github':
       return (
-        <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+        <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
           <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
         </svg>
       )
@@ -170,7 +187,13 @@ async function getCaptchaToken(provider: string, siteKey: string, action: string
   return ''
 }
 
-export function Login({ onLogin, onNavigate, oauthProviders, captchaConfig }: LoginProps) {
+export function Login({
+  onLogin,
+  onNavigate,
+  oauthProviders,
+  captchaConfig,
+  branding,
+}: LoginProps) {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [showPassword, setShowPassword] = useState(false)
@@ -218,30 +241,47 @@ export function Login({ onLogin, onNavigate, oauthProviders, captchaConfig }: Lo
   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
+  const brandName = branding?.name ?? 'Actuate CMS'
+  const brandTagline = branding?.tagline ?? 'Sign in to your account'
+  const showLogo = customLogo !== null
+
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4">
       <div className="w-full max-w-md">
-        <div className="text-center mb-8">
-          <div className="mx-auto mb-4 w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center">
-            <Shield className="w-7 h-7 text-white" />
-          </div>
-          <h1 className="text-2xl font-bold text-gray-900">Actuate CMS</h1>
-          <p className="text-gray-600 mt-2">Sign in to your account</p>
+        <div className="mb-8 text-center">
+          {showLogo &&
+            (customLogo ? (
+              <img
+                src={customLogo}
+                alt={brandName}
+                className="mx-auto mb-4 max-h-16 w-auto object-contain"
+                draggable={false}
+              />
+            ) : (
+              <ActuateBrandLogo className="mx-auto mb-4 h-14 w-auto" />
+            ))}
+          <h1 className="text-2xl font-bold text-gray-900">{brandName}</h1>
+          <p className="mt-2 text-gray-600">{brandTagline}</p>
         </div>
 
         <form
           onSubmit={handleSubmit}
-          className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm space-y-5"
+          className="space-y-5 rounded-xl border border-gray-200 bg-white p-6 shadow-sm"
         >
           {error && (
-            <div className="flex items-start gap-3 p-3 bg-red-50 border border-red-200 rounded-lg">
-              <AlertTriangle className="w-5 h-5 text-red-600 mt-0.5 shrink-0" />
+            <div className="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
+              <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-red-600" />
               <p className="text-sm text-red-800">{error}</p>
             </div>
           )}
 
           <div>
-            <label htmlFor="login-email" className="block text-sm font-medium text-gray-700 mb-1.5">
+            <label htmlFor="login-email" className="mb-1.5 block text-sm font-medium text-gray-700">
               Email Address
             </label>
             <input
@@ -250,7 +290,7 @@ export function Login({ onLogin, onNavigate, oauthProviders, captchaConfig }: Lo
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               placeholder="admin@example.com"
-              className="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
               required
               autoFocus
               autoComplete="email"
@@ -258,7 +298,7 @@ export function Login({ onLogin, onNavigate, oauthProviders, captchaConfig }: Lo
           </div>
 
           <div>
-            <div className="flex items-center justify-between mb-1.5">
+            <div className="mb-1.5 flex items-center justify-between">
               <label htmlFor="login-password" className="block text-sm font-medium text-gray-700">
                 Password
               </label>
@@ -266,7 +306,7 @@ export function Login({ onLogin, onNavigate, oauthProviders, captchaConfig }: Lo
                 <button
                   type="button"
                   onClick={() => onNavigate('/forgot-password')}
-                  className="text-xs text-blue-600 hover:text-blue-700 font-medium"
+                  className="text-xs font-medium text-blue-600 hover:text-blue-700"
                 >
                   Forgot Password?
                 </button>
@@ -279,17 +319,17 @@ export function Login({ onLogin, onNavigate, oauthProviders, captchaConfig }: Lo
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="Enter your password"
-                className="w-full px-3 py-2.5 pr-10 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                className="w-full rounded-lg border border-gray-300 px-3 py-2.5 pr-10 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 required
                 autoComplete="current-password"
               />
               <button
                 type="button"
                 onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                 tabIndex={-1}
               >
-                {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
               </button>
             </div>
           </div>
@@ -297,11 +337,11 @@ export function Login({ onLogin, onNavigate, oauthProviders, captchaConfig }: Lo
           <button
             type="submit"
             disabled={!canSubmit}
-            className="w-full py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+            className="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 py-2.5 font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
           >
             {submitting ? (
               <>
-                <Loader2 className="w-4 h-4 animate-spin" />
+                <Loader2 className="h-4 w-4 animate-spin" />
                 Signing in...
               </>
             ) : (
@@ -328,7 +368,7 @@ export function Login({ onLogin, onNavigate, oauthProviders, captchaConfig }: Lo
                       key={provider}
                       type="button"
                       onClick={() => handleOAuthClick(provider)}
-                      className={`w-full flex items-center justify-center gap-3 py-2.5 px-4 border ${colors?.border ?? ''} ${colors?.bg ?? ''} ${colors?.text ?? ''} rounded-lg font-medium text-sm ${colors?.hover ?? ''} transition-colors`}
+                      className={`flex w-full items-center justify-center gap-3 border px-4 py-2.5 ${colors?.border ?? ''} ${colors?.bg ?? ''} ${colors?.text ?? ''} rounded-lg text-sm font-medium ${colors?.hover ?? ''} transition-colors`}
                     >
                       <OAuthIcon provider={provider} />
                       {OAUTH_LABELS[provider] ?? provider}