@actuate-media/cms-admin 0.42.4 → 0.44.0

package/dist/views/settings/useEmailSettings.js

@@ -0,0 +1,209 @@
+'use client';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { cmsApi } from '../../lib/api.js';
+export const EMAIL_PROVIDER_OPTIONS = [
+    { value: 'resend', label: 'Resend' },
+    { value: 'smtpcom', label: 'SMTP.com' },
+    { value: 'ses', label: 'Amazon SES' },
+    { value: 'smtp', label: 'SMTP server' },
+];
+const EMPTY_FORM = {
+    provider: '',
+    from: '',
+    apiKey: '',
+    channel: '',
+    region: '',
+    host: '',
+    port: '',
+    secure: false,
+    smtpUser: '',
+    smtpPass: '',
+};
+function toForm(s) {
+    return {
+        provider: s.provider ?? '',
+        from: s.from ?? '',
+        apiKey: '',
+        channel: s.channel ?? '',
+        region: s.region ?? '',
+        host: s.host ?? '',
+        port: s.port != null ? String(s.port) : '',
+        secure: s.secure ?? false,
+        smtpUser: s.smtpUser ?? '',
+        smtpPass: '',
+    };
+}
+function snapshot(f) {
+    return JSON.stringify(f);
+}
+export function useEmailSettings(canEdit) {
+    const [loading, setLoading] = useState(true);
+    const [loadError, setLoadError] = useState(null);
+    const [form, setForm] = useState(EMPTY_FORM);
+    const [meta, setMeta] = useState({
+        envProvider: null,
+        factoryAvailable: false,
+        envSenderActive: false,
+        platformAdapter: false,
+    });
+    const [storedSecrets, setStoredSecrets] = useState({
+        provider: null,
+        hasApiKey: false,
+        apiKeyLast4: undefined,
+        hasSmtpPass: false,
+    });
+    const [lastTest, setLastTest] = useState({});
+    const [saveState, setSaveState] = useState('idle');
+    const [saveError, setSaveError] = useState(null);
+    const [testing, setTesting] = useState(false);
+    const [testResult, setTestResult] = useState(null);
+    const baselineRef = useRef(snapshot(EMPTY_FORM));
+    const applyResponse = useCallback((d) => {
+        const nextForm = toForm(d.settings);
+        setForm(nextForm);
+        baselineRef.current = snapshot(nextForm);
+        setMeta({
+            envProvider: d.envProvider,
+            factoryAvailable: d.factoryAvailable,
+            envSenderActive: d.envSenderActive,
+            platformAdapter: d.platformAdapter,
+        });
+        setStoredSecrets({
+            provider: d.settings.provider,
+            hasApiKey: d.settings.hasApiKey,
+            apiKeyLast4: d.settings.apiKeyLast4,
+            hasSmtpPass: d.settings.hasSmtpPass,
+        });
+        setLastTest({
+            status: d.settings.lastTestStatus,
+            testedAt: d.settings.lastTestedAt,
+            error: d.settings.lastTestError,
+        });
+    }, []);
+    const load = useCallback(async () => {
+        setLoading(true);
+        setLoadError(null);
+        const res = await cmsApi('/email/settings');
+        if (res.error || !res.data) {
+            setLoadError(res.error ?? 'Failed to load email settings');
+            setLoading(false);
+            return;
+        }
+        applyResponse(res.data);
+        setSaveState('idle');
+        setLoading(false);
+    }, [applyResponse]);
+    useEffect(() => {
+        void load();
+    }, [load]);
+    const setField = useCallback((key, value) => {
+        setForm((prev) => ({ ...prev, [key]: value }));
+        setSaveState('idle');
+        setSaveError(null);
+        setTestResult(null);
+    }, []);
+    const dirty = useMemo(() => snapshot(form) !== baselineRef.current, [form]);
+    const save = useCallback(async () => {
+        if (!canEdit)
+            return;
+        setSaveState('saving');
+        setSaveError(null);
+        let body;
+        if (form.provider === '') {
+            body = { provider: null };
+        }
+        else {
+            body = {
+                provider: form.provider,
+                from: form.from.trim(),
+                // Secrets: omit = keep stored value; include only when re-entered.
+                ...(form.apiKey.trim() ? { apiKey: form.apiKey.trim() } : {}),
+                ...(form.provider === 'smtpcom' && form.channel.trim()
+                    ? { channel: form.channel.trim() }
+                    : {}),
+                ...(form.provider === 'ses' ? { region: form.region.trim() } : {}),
+                ...(form.provider === 'smtp'
+                    ? {
+                        host: form.host.trim(),
+                        ...(form.port.trim() ? { port: Number(form.port) } : {}),
+                        secure: form.secure,
+                        ...(form.smtpUser.trim() ? { smtpUser: form.smtpUser.trim() } : {}),
+                        ...(form.smtpPass ? { smtpPass: form.smtpPass } : {}),
+                    }
+                    : {}),
+            };
+        }
+        const res = await cmsApi('/email/settings', {
+            method: 'PUT',
+            body: JSON.stringify(body),
+        });
+        if (res.error || !res.data) {
+            setSaveState('error');
+            setSaveError(res.error ?? 'Failed to save email settings');
+            return;
+        }
+        const nextForm = toForm(res.data.settings);
+        setForm(nextForm);
+        baselineRef.current = snapshot(nextForm);
+        setStoredSecrets({
+            provider: res.data.settings.provider,
+            hasApiKey: res.data.settings.hasApiKey,
+            apiKeyLast4: res.data.settings.apiKeyLast4,
+            hasSmtpPass: res.data.settings.hasSmtpPass,
+        });
+        setLastTest({});
+        setSaveState('success');
+    }, [canEdit, form]);
+    const sendTest = useCallback(async () => {
+        setTesting(true);
+        setTestResult(null);
+        const res = await cmsApi('/email/settings/test', {
+            method: 'POST',
+            body: JSON.stringify({}),
+        });
+        setTesting(false);
+        if (res.error || !res.data?.success) {
+            const message = res.error ?? 'Test send failed';
+            setTestResult({ success: false, message });
+            setLastTest({ status: 'failed', testedAt: new Date().toISOString(), error: message });
+            return;
+        }
+        setTestResult({
+            success: true,
+            message: `Test email sent to ${res.data.sentTo ?? 'your address'}.`,
+        });
+        setLastTest({ status: 'success', testedAt: new Date().toISOString() });
+    }, []);
+    const reset = useCallback(() => {
+        setForm(JSON.parse(baselineRef.current));
+        setSaveState('idle');
+        setSaveError(null);
+        setTestResult(null);
+    }, []);
+    return {
+        loading,
+        loadError,
+        form,
+        stored: {
+            hasApiKey: storedSecrets.hasApiKey,
+            apiKeyLast4: storedSecrets.apiKeyLast4,
+            hasSmtpPass: storedSecrets.hasSmtpPass,
+            sameProvider: form.provider !== '' && form.provider === storedSecrets.provider,
+        },
+        env: { provider: meta.envProvider, senderActive: meta.envSenderActive },
+        factoryAvailable: meta.factoryAvailable,
+        platformAdapter: meta.platformAdapter,
+        lastTest,
+        dirty,
+        saveState,
+        saveError,
+        testing,
+        testResult,
+        setField,
+        save,
+        sendTest,
+        reset,
+        reload: () => void load(),
+    };
+}
+//# sourceMappingURL=useEmailSettings.js.map

package/dist/views/settings/useEmailSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEmailSettings.js","sourceRoot":"","sources":["../../../src/views/settings/useEmailSettings.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actuate-media/cms-admin",
-  "version": "0.42.4",
+  "version": "0.44.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/actuate-media/actuatecms.git",
@@ -89,7 +89,7 @@
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.0",
     "vitest": "^4.1.0",
-    "@actuate-media/cms-core": "0.61.0",
+    "@actuate-media/cms-core": "0.62.0",
     "@actuate-media/component-blocks": "0.2.1"
   },
   "scripts": {

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

@@ -41,6 +41,7 @@ const cmsApi = vi.fn(async (endpoint: string, options?: { method?: string; body?
 vi.mock('../../lib/api.js', () => ({ cmsApi: (e: string, o?: unknown) => cmsApi(e, o as any) }))
 
 const { AppearanceTab } = await import('../../views/settings/AppearanceTab.js')
+const { LOGO_MIME, FAVICON_MIME } = await import('../../views/settings/useAppearanceSettings.js')
 
 function baseData(overrides: Record<string, unknown> = {}) {
   return {
@@ -165,6 +166,72 @@ describe('AppearanceTab', () => {
     )
   })
 
+  it('accepts modern image formats for logos (and a crisp subset for favicons)', () => {
+    // WebP is a first-class brand format — general media uploads are converted
+    // to WebP anyway, so re-selecting them from the library must work.
+    expect(LOGO_MIME).toEqual(
+      expect.arrayContaining([
+        'image/svg+xml',
+        'image/png',
+        'image/webp',
+        'image/jpeg',
+        'image/gif',
+        'image/avif',
+      ]),
+    )
+    expect(FAVICON_MIME).toEqual(
+      expect.arrayContaining(['image/svg+xml', 'image/png', 'image/webp']),
+    )
+    // Favicons need crisp small-size rendering — lossy photographic formats stay out.
+    expect(FAVICON_MIME).not.toContain('image/jpeg')
+  })
+
+  it('uploads a WebP logo through the Media Center', async () => {
+    // happy-dom's Image never decodes blobs — fire onload so shape detection
+    // (raster path, used for all non-SVG formats) completes.
+    vi.stubGlobal(
+      'Image',
+      class {
+        naturalWidth = 400
+        naturalHeight = 100
+        onload: (() => void) | null = null
+        onerror: (() => void) | null = null
+        set src(_v: string) {
+          queueMicrotask(() => this.onload?.())
+        }
+      },
+    )
+
+    render(<AppearanceTab role="ADMIN" />)
+    await screen.findByText('Branding')
+
+    const input = screen.getByLabelText('Primary logo') as HTMLInputElement
+    const file = new File([new Uint8Array([0x52, 0x49, 0x46, 0x46])], 'logo.webp', {
+      type: 'image/webp',
+    })
+    fireEvent.change(input, { target: { files: [file] } })
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/media/upload',
+        expect.objectContaining({ method: 'POST' }),
+      ),
+    )
+    vi.unstubAllGlobals()
+  })
+
+  it('rejects an unsupported upload type client-side with a readable error', async () => {
+    render(<AppearanceTab role="ADMIN" />)
+    await screen.findByText('Branding')
+
+    const input = screen.getByLabelText('Primary logo') as HTMLInputElement
+    const file = new File(['%PDF-1.4'], 'brochure.pdf', { type: 'application/pdf' })
+    fireEvent.change(input, { target: { files: [file] } })
+
+    expect(await screen.findByText(/unsupported file type/i)).toBeTruthy()
+    expect(cmsApi.mock.calls.some(([endpoint]) => endpoint === '/media/upload')).toBe(false)
+  })
+
   it('is read-only for non-admins', async () => {
     render(<AppearanceTab role="EDITOR" />)
 

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

@@ -0,0 +1,225 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+/**
+ * Settings > Email: provider picker + per-provider credential fields backed by
+ * GET/PUT /email/settings and POST /email/settings/test. Secrets are
+ * write-only — the API returns only `hasApiKey` / `apiKeyLast4`, never the key.
+ */
+
+interface EmailSettingsData {
+  settings: Record<string, unknown>
+  envProvider: string | null
+  factoryAvailable: boolean
+  envSenderActive: boolean
+  platformAdapter: boolean
+}
+
+const EMPTY_RESPONSE: EmailSettingsData = {
+  settings: { provider: null, hasApiKey: false, hasSmtpPass: false },
+  envProvider: null,
+  factoryAvailable: true,
+  envSenderActive: false,
+  platformAdapter: false,
+}
+
+let getResponse: EmailSettingsData = EMPTY_RESPONSE
+let putResponse: { settings: Record<string, unknown> } | null = null
+let testResponse: { data?: unknown; error?: string; status: number } = {
+  data: { success: true, sentTo: 'admin@example.com' },
+  status: 200,
+}
+
+const cmsApi = vi.fn(async (endpoint: string, options?: { method?: string; body?: string }) => {
+  const method = options?.method ?? 'GET'
+  if (endpoint === '/email/settings' && method === 'GET') {
+    return { data: getResponse, status: 200 }
+  }
+  if (endpoint === '/email/settings' && method === 'PUT') {
+    return putResponse
+      ? { data: putResponse, status: 200 }
+      : { error: 'unexpected PUT', status: 500 }
+  }
+  if (endpoint === '/email/settings/test' && method === 'POST') {
+    return testResponse
+  }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (e: string, o?: unknown) => cmsApi(e, o as any),
+  ensureCsrfToken: vi.fn(async () => {}),
+}))
+
+const { EmailSettingsTab } = await import('../../views/settings/EmailSettingsTab.js')
+
+function deepClone<T>(v: T): T {
+  return JSON.parse(JSON.stringify(v))
+}
+
+beforeEach(() => {
+  cmsApi.mockClear()
+  getResponse = deepClone(EMPTY_RESPONSE)
+  putResponse = null
+  testResponse = { data: { success: true, sentTo: 'admin@example.com' }, status: 200 }
+})
+
+describe('EmailSettingsTab', () => {
+  it('renders the provider picker with the unconfigured state', async () => {
+    render(<EmailSettingsTab role="ADMIN" />)
+    expect(await screen.findByRole('radio', { name: 'None' })).toBeTruthy()
+    expect(screen.getByRole('radio', { name: 'Resend' })).toBeTruthy()
+    expect(screen.getByRole('radio', { name: 'SMTP.com' })).toBeTruthy()
+    expect(screen.getByRole('radio', { name: 'Amazon SES' })).toBeTruthy()
+    expect(screen.getByRole('radio', { name: 'SMTP server' })).toBeTruthy()
+    expect(screen.getByText(/No email provider configured/)).toBeTruthy()
+  })
+
+  it('saves an SMTP.com configuration with the entered key (PUT payload contract)', async () => {
+    putResponse = {
+      settings: {
+        provider: 'smtpcom',
+        from: 'noreply@example.com',
+        channel: 'transactional',
+        hasApiKey: true,
+        apiKeyLast4: '-key',
+        hasSmtpPass: false,
+      },
+    }
+    render(<EmailSettingsTab role="ADMIN" />)
+    fireEvent.click(await screen.findByRole('radio', { name: 'SMTP.com' }))
+
+    fireEvent.change(screen.getByLabelText('Sender address'), {
+      target: { value: 'noreply@example.com' },
+    })
+    fireEvent.change(screen.getByLabelText('API key'), {
+      target: { value: 'smtpcom-secret-key' },
+    })
+    fireEvent.change(screen.getByLabelText('Sender channel'), {
+      target: { value: 'transactional' },
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+
+    await waitFor(() => {
+      const put = cmsApi.mock.calls.find(
+        ([e, o]) => e === '/email/settings' && (o as any)?.method === 'PUT',
+      )
+      expect(put).toBeTruthy()
+      expect(JSON.parse((put![1] as any).body)).toEqual({
+        provider: 'smtpcom',
+        from: 'noreply@example.com',
+        apiKey: 'smtpcom-secret-key',
+        channel: 'transactional',
+      })
+    })
+
+    // After save the key input is cleared and the masked hint appears.
+    expect((screen.getByLabelText('API key') as HTMLInputElement).value).toBe('')
+    expect(await screen.findByText(/ends in -key/)).toBeTruthy()
+  })
+
+  it('omits the apiKey from the payload when a stored key is kept', async () => {
+    getResponse = {
+      ...deepClone(EMPTY_RESPONSE),
+      settings: {
+        provider: 'resend',
+        from: 'old@example.com',
+        hasApiKey: true,
+        apiKeyLast4: 'k3y9',
+        hasSmtpPass: false,
+      },
+    }
+    putResponse = {
+      settings: {
+        provider: 'resend',
+        from: 'new@example.com',
+        hasApiKey: true,
+        apiKeyLast4: 'k3y9',
+        hasSmtpPass: false,
+      },
+    }
+    render(<EmailSettingsTab role="ADMIN" />)
+    const from = await screen.findByLabelText('Sender address')
+    expect(await screen.findByText(/ends in k3y9/)).toBeTruthy()
+
+    fireEvent.change(from, { target: { value: 'new@example.com' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+
+    await waitFor(() => {
+      const put = cmsApi.mock.calls.find(
+        ([e, o]) => e === '/email/settings' && (o as any)?.method === 'PUT',
+      )
+      expect(put).toBeTruthy()
+      const body = JSON.parse((put![1] as any).body)
+      expect(body).toEqual({ provider: 'resend', from: 'new@example.com' })
+      expect(body).not.toHaveProperty('apiKey')
+    })
+  })
+
+  it('sends a test email and shows the result', async () => {
+    getResponse = {
+      ...deepClone(EMPTY_RESPONSE),
+      settings: {
+        provider: 'resend',
+        from: 'a@b.co',
+        hasApiKey: true,
+        apiKeyLast4: 'k3y9',
+        hasSmtpPass: false,
+      },
+    }
+    render(<EmailSettingsTab role="ADMIN" />)
+    fireEvent.click(await screen.findByRole('button', { name: /Send test email/ }))
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/email/settings/test',
+        expect.objectContaining({ method: 'POST' }),
+      ),
+    )
+    expect(await screen.findByText(/Test email sent to admin@example.com/)).toBeTruthy()
+  })
+
+  it('surfaces a failed test send', async () => {
+    getResponse = {
+      ...deepClone(EMPTY_RESPONSE),
+      settings: {
+        provider: 'resend',
+        from: 'a@b.co',
+        hasApiKey: true,
+        hasSmtpPass: false,
+      },
+    }
+    testResponse = { error: 'SMTP.com API error (401): bad key', status: 502 }
+    render(<EmailSettingsTab role="ADMIN" />)
+    fireEvent.click(await screen.findByRole('button', { name: /Send test email/ }))
+    expect(await screen.findByText(/SMTP\.com API error \(401\)/)).toBeTruthy()
+  })
+
+  it('shows the env-managed notice and disables editing for non-admins', async () => {
+    getResponse = {
+      ...deepClone(EMPTY_RESPONSE),
+      envProvider: 'resend',
+      envSenderActive: true,
+    }
+    render(<EmailSettingsTab role="EDITOR" />)
+    expect(await screen.findByText(/read-only access/)).toBeTruthy()
+    expect(screen.getByText(/Environment variables currently configure/)).toBeTruthy()
+    expect((screen.getByRole('radio', { name: 'Resend' }) as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('warns when the email plugin is missing for a configured provider', async () => {
+    getResponse = {
+      ...deepClone(EMPTY_RESPONSE),
+      factoryAvailable: false,
+      settings: {
+        provider: 'resend',
+        from: 'a@b.co',
+        hasApiKey: true,
+        hasSmtpPass: false,
+      },
+    }
+    render(<EmailSettingsTab role="ADMIN" />)
+    expect(await screen.findByText(/requires the email plugin/)).toBeTruthy()
+  })
+})

package/src/views/Settings.tsx

@@ -7,6 +7,7 @@ import {
   AlertTriangle,
   Download,
   Layers,
+  Mail,
   Users as UsersIcon,
   KeyRound,
 } from 'lucide-react'
@@ -18,6 +19,7 @@ import { RelationshipField } from '../fields/RelationshipField.js'
 import { GeneralSettingsTab } from './settings/GeneralSettingsTab.js'
 import { SeoSettingsTab } from './settings/SeoSettingsTab.js'
 import { AISettingsTab } from './settings/AISettingsTab.js'
+import { EmailSettingsTab } from './settings/EmailSettingsTab.js'
 import { AppearanceTab } from './settings/AppearanceTab.js'
 import { SecurityTab } from './settings/SecurityTab.js'
 import { SettingsCard } from './settings/components.js'
@@ -85,6 +87,7 @@ export function Settings({
         'users',
         'api-keys',
         'seo',
+        'email',
         'ai',
         'updates',
       ] as const,
@@ -214,6 +217,12 @@ export function Settings({
           <Tabs.Trigger value="seo" className={tabTriggerClass}>
             SEO
           </Tabs.Trigger>
+          <Tabs.Trigger value="email" className={tabTriggerClass}>
+            <span className="flex items-center gap-1.5">
+              <Mail className="h-4 w-4" />
+              Email
+            </span>
+          </Tabs.Trigger>
           <Tabs.Trigger value="ai" className={tabTriggerClass}>
             <span className="flex items-center gap-1.5">
               <Bot className="h-4 w-4" />
@@ -311,6 +320,10 @@ export function Settings({
           <SeoSettingsTab onNavigate={onNavigate} role={session?.user?.role} />
         </Tabs.Content>
 
+        <Tabs.Content value="email" className="space-y-4">
+          <EmailSettingsTab role={session?.user?.role} />
+        </Tabs.Content>
+
         <Tabs.Content value="ai" className="space-y-4">
           <AISettingsTab role={session?.user?.role} />
         </Tabs.Content>

package/src/views/settings/BrandingCard.tsx

@@ -14,13 +14,18 @@ import { useRef, useState } from 'react'
 
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import { SettingsCard, SettingsControlRow, SettingsSubsection } from './components.js'
-import type {
-  BrandAssetField,
-  SelectedBrandAsset,
-  UseAppearanceSettings,
+import {
+  FAVICON_MIME,
+  LOGO_MIME,
+  type BrandAssetField,
+  type SelectedBrandAsset,
+  type UseAppearanceSettings,
 } from './useAppearanceSettings.js'
 
-const LOGO_ACCEPT = 'image/svg+xml,image/png'
+// Derive the file-input accept strings from the validation allow-lists so the
+// picker and the validator can never drift apart.
+const LOGO_ACCEPT = LOGO_MIME.join(',')
+const FAVICON_ACCEPT = FAVICON_MIME.join(',')
 
 function previewSurface(dark: boolean): string {
   return dark ? 'bg-foreground border-border' : 'bg-muted border-border'
@@ -243,7 +248,7 @@ export function BrandingCard({ s, canEdit }: { s: UseAppearanceSettings; canEdit
       <div className="space-y-5">
         <LogoField
           label="Primary logo"
-          helper="SVG or PNG, up to 1MB. Best for the public header and full admin sidebar."
+          helper="SVG, PNG, WebP, JPEG, GIF, or AVIF, up to 1MB. Best for the public header and full admin sidebar."
           field="publicPrimaryLogoAssetId"
           warning={warningFor('publicPrimaryLogoAssetId')}
           {...logoFieldProps}
@@ -251,11 +256,12 @@ export function BrandingCard({ s, canEdit }: { s: UseAppearanceSettings; canEdit
 
         <LogoField
           label="Favicon / app icon source"
-          helper="32×32 PNG or SVG. A larger square image is fine — it scales down cleanly."
+          helper="32×32 SVG, PNG, or WebP. A larger square image is fine — it scales down cleanly."
           field="faviconSourceAssetId"
           square
           warning={warningFor('faviconSourceAssetId')}
           {...logoFieldProps}
+          accept={FAVICON_ACCEPT}
         />
 
         {/* Advanced logo variants disclosure (Logo mark + Dark mode logo). */}