@actuate-media/cms-admin 0.8.0 → 0.8.2

package/src/views/ForgotPassword.tsx

@@ -1,45 +1,45 @@
-'use client';
+'use client'
 
-import { useState, type FormEvent } from 'react';
-import { Shield, ArrowLeft, Loader2, CheckCircle2, AlertTriangle } from 'lucide-react';
-import { cmsApi } from '../lib/api.js';
+import { useState, type FormEvent } from 'react'
+import { Shield, ArrowLeft, Loader2, CheckCircle2, AlertTriangle } from 'lucide-react'
+import { cmsApi } from '../lib/api.js'
 
 export interface ForgotPasswordProps {
-  onNavigate: (path: string) => void;
+  onNavigate: (path: string) => void
 }
 
 export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
-  const [email, setEmail] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-  const [sent, setSent] = useState(false);
-  const [error, setError] = useState('');
+  const [email, setEmail] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [sent, setSent] = useState(false)
+  const [error, setError] = useState('')
 
-  const canSubmit = email.trim() && !submitting;
+  const canSubmit = email.trim() && !submitting
 
   const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    if (!canSubmit) return;
+    e.preventDefault()
+    if (!canSubmit) return
 
-    setError('');
-    setSubmitting(true);
+    setError('')
+    setSubmitting(true)
 
     try {
       const result = await cmsApi('/auth/forgot-password', {
         method: 'POST',
         body: JSON.stringify({ email: email.trim() }),
-      });
+      })
 
       if (result.error && result.status === 429) {
-        setError('Too many requests. Please try again later.');
+        setError('Too many requests. Please try again later.')
       } else {
-        setSent(true);
+        setSent(true)
       }
     } catch {
-      setError('An unexpected error occurred. Please try again.');
+      setError('An unexpected error occurred. Please try again.')
     } finally {
-      setSubmitting(false);
+      setSubmitting(false)
     }
-  };
+  }
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
@@ -63,7 +63,8 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
                 <CheckCircle2 className="w-6 h-6 text-green-600" />
               </div>
               <p className="text-sm text-gray-600">
-                If an account exists for <strong>{email}</strong>, you will receive a password reset email shortly.
+                If an account exists for <strong>{email}</strong>, you will receive a password reset
+                email shortly.
               </p>
               <p className="text-xs text-gray-500">
                 The link expires in 1 hour. Check your spam folder if you don't see it.
@@ -86,7 +87,10 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
               )}
 
               <div>
-                <label htmlFor="forgot-email" className="block text-sm font-medium text-gray-700 mb-1.5">
+                <label
+                  htmlFor="forgot-email"
+                  className="block text-sm font-medium text-gray-700 mb-1.5"
+                >
                   Email Address
                 </label>
                 <input
@@ -132,5 +136,5 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
         </div>
       </div>
     </div>
-  );
+  )
 }

package/src/views/FormEditor.tsx

@@ -1,39 +1,47 @@
-'use client';
+'use client'
 
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect } from 'react'
 import {
-  Save, ArrowLeft, Plus, Trash2, GripVertical,
-  MessageSquare, ExternalLink, BarChart3, ChevronDown, ChevronRight,
+  Save,
+  ArrowLeft,
+  Plus,
+  Trash2,
+  GripVertical,
+  MessageSquare,
+  ExternalLink,
+  BarChart3,
+  ChevronDown,
+  ChevronRight,
   Loader2,
-} from 'lucide-react';
-import { useApiData } from '../lib/useApiData.js';
-import { cmsApi } from '../lib/api.js';
+} from 'lucide-react'
+import { useApiData } from '../lib/useApiData.js'
+import { cmsApi } from '../lib/api.js'
 
 interface FormField {
-  id: string;
-  type: string;
-  label: string;
-  placeholder?: string;
-  required: boolean;
-  options?: string[];
+  id: string
+  type: string
+  label: string
+  placeholder?: string
+  required: boolean
+  options?: string[]
 }
 
 interface ConfirmationConfig {
-  type: 'message' | 'redirect';
-  message: string;
-  redirectUrl: string;
-  redirectDelay: number;
+  type: 'message' | 'redirect'
+  message: string
+  redirectUrl: string
+  redirectDelay: number
 }
 
 interface AnalyticsConfig {
-  enabled: boolean;
-  measurementId: string;
-  submitEventName: string;
-  startEventName: string;
-  trackAsConversion: boolean;
-  conversionValue: number;
-  conversionCurrency: string;
-  customParameters: Record<string, string>;
+  enabled: boolean
+  measurementId: string
+  submitEventName: string
+  startEventName: string
+  trackAsConversion: boolean
+  conversionValue: number
+  conversionCurrency: string
+  customParameters: Record<string, string>
 }
 
 const FIELD_TYPES = [
@@ -48,32 +56,32 @@ const FIELD_TYPES = [
   { value: 'url', label: 'URL' },
   { value: 'file', label: 'File Upload' },
   { value: 'hidden', label: 'Hidden' },
-] as const;
+] as const
 
 export interface FormEditorProps {
-  formId?: string;
-  onNavigate?: (path: string) => void;
+  formId?: string
+  onNavigate?: (path: string) => void
 }
 
 export function FormEditor({ formId, onNavigate }: FormEditorProps) {
-  const isNew = !formId;
+  const isNew = !formId
   const { data: existingForm, loading } = useApiData<any>(
     formId ? `/collections/forms/${formId}` : null,
-  );
+  )
 
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-  const [status, setStatus] = useState('active');
-  const [fields, setFields] = useState<FormField[]>([]);
-  const [saving, setSaving] = useState(false);
-  const [expandedSection, setExpandedSection] = useState<string | null>('fields');
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [status, setStatus] = useState('active')
+  const [fields, setFields] = useState<FormField[]>([])
+  const [saving, setSaving] = useState(false)
+  const [expandedSection, setExpandedSection] = useState<string | null>('fields')
 
   const [confirmation, setConfirmation] = useState<ConfirmationConfig>({
     type: 'message',
     message: 'Thank you! Your submission has been received.',
     redirectUrl: '',
     redirectDelay: 0,
-  });
+  })
 
   const [analytics, setAnalytics] = useState<AnalyticsConfig>({
     enabled: false,
@@ -84,23 +92,23 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
     conversionValue: 0,
     conversionCurrency: 'USD',
     customParameters: {},
-  });
+  })
 
   useEffect(() => {
     if (existingForm) {
-      const d = existingForm.data ?? existingForm;
-      setName(d.name ?? '');
-      setDescription(d.description ?? '');
-      setStatus(d.status ?? 'active');
-      if (Array.isArray(d.fields)) setFields(d.fields);
+      const d = existingForm.data ?? existingForm
+      setName(d.name ?? '')
+      setDescription(d.description ?? '')
+      setStatus(d.status ?? 'active')
+      if (Array.isArray(d.fields)) setFields(d.fields)
       if (d.confirmation) {
-        setConfirmation((prev) => ({ ...prev, ...d.confirmation }));
+        setConfirmation((prev) => ({ ...prev, ...d.confirmation }))
       }
       if (d.analytics) {
-        setAnalytics((prev) => ({ ...prev, ...d.analytics }));
+        setAnalytics((prev) => ({ ...prev, ...d.analytics }))
       }
     }
-  }, [existingForm]);
+  }, [existingForm])
 
   const addField = useCallback((type: string) => {
     setFields((prev) => [
@@ -111,28 +119,28 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
         label: `New ${type} field`,
         required: false,
       },
-    ]);
-  }, []);
+    ])
+  }, [])
 
   const removeField = useCallback((id: string) => {
-    setFields((prev) => prev.filter((f) => f.id !== id));
-  }, []);
+    setFields((prev) => prev.filter((f) => f.id !== id))
+  }, [])
 
   const updateField = useCallback((id: string, updates: Partial<FormField>) => {
-    setFields((prev) => prev.map((f) => (f.id === id ? { ...f, ...updates } : f)));
-  }, []);
+    setFields((prev) => prev.map((f) => (f.id === id ? { ...f, ...updates } : f)))
+  }, [])
 
   const moveField = useCallback((from: number, to: number) => {
     setFields((prev) => {
-      const next = [...prev];
-      const [moved] = next.splice(from, 1);
-      next.splice(to, 0, moved!);
-      return next;
-    });
-  }, []);
+      const next = [...prev]
+      const [moved] = next.splice(from, 1)
+      next.splice(to, 0, moved!)
+      return next
+    })
+  }, [])
 
   const handleSave = async () => {
-    setSaving(true);
+    setSaving(true)
     try {
       const payload = {
         name,
@@ -141,35 +149,35 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
         fields,
         confirmation,
         analytics: analytics.enabled ? analytics : { enabled: false },
-      };
+      }
 
       if (isNew) {
         await cmsApi('/collections/forms', {
           method: 'POST',
           body: JSON.stringify(payload),
-        });
+        })
       } else {
         await cmsApi(`/collections/forms/${formId}`, {
           method: 'PUT',
           body: JSON.stringify(payload),
-        });
+        })
       }
-      onNavigate?.('/forms');
+      onNavigate?.('/forms')
     } finally {
-      setSaving(false);
+      setSaving(false)
     }
-  };
+  }
 
   const toggleSection = (section: string) => {
-    setExpandedSection(expandedSection === section ? null : section);
-  };
+    setExpandedSection(expandedSection === section ? null : section)
+  }
 
   if (loading) {
     return (
       <div className="p-4 flex items-center justify-center h-64">
         <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
       </div>
-    );
+    )
   }
 
   return (
@@ -241,7 +249,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
           className="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors"
         >
           <div className="flex items-center gap-2">
-            {expandedSection === 'fields' ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
+            {expandedSection === 'fields' ? (
+              <ChevronDown className="w-4 h-4" />
+            ) : (
+              <ChevronRight className="w-4 h-4" />
+            )}
             <span className="font-medium text-gray-900">Form Fields</span>
             <span className="text-sm text-gray-500">({fields.length})</span>
           </div>
@@ -273,8 +285,8 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                     onDragStart={(e) => e.dataTransfer.setData('text/plain', String(index))}
                     onDragOver={(e) => e.preventDefault()}
                     onDrop={(e) => {
-                      const from = Number(e.dataTransfer.getData('text/plain'));
-                      moveField(from, index);
+                      const from = Number(e.dataTransfer.getData('text/plain'))
+                      moveField(from, index)
                     }}
                     className="flex items-center gap-3 p-3 border border-gray-200 rounded-lg bg-gray-50 hover:bg-white transition-colors"
                   >
@@ -318,7 +330,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
           className="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors"
         >
           <div className="flex items-center gap-2">
-            {expandedSection === 'confirmation' ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
+            {expandedSection === 'confirmation' ? (
+              <ChevronDown className="w-4 h-4" />
+            ) : (
+              <ChevronRight className="w-4 h-4" />
+            )}
             <MessageSquare className="w-4 h-4 text-green-600" />
             <span className="font-medium text-gray-900">Confirmation</span>
             <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
@@ -329,10 +345,16 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
         {expandedSection === 'confirmation' && (
           <div className="border-t border-gray-200 p-4">
             <div className="mb-4">
-              <label className="block text-sm font-medium text-gray-700 mb-2">After submission</label>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                After submission
+              </label>
               <div className="flex gap-3">
-                <label className="flex items-center gap-2 px-4 py-2 border rounded-lg cursor-pointer transition-colors hover:bg-gray-50"
-                  style={{ borderColor: confirmation.type === 'message' ? '#2563eb' : '#d1d5db', backgroundColor: confirmation.type === 'message' ? '#eff6ff' : 'transparent' }}
+                <label
+                  className="flex items-center gap-2 px-4 py-2 border rounded-lg cursor-pointer transition-colors hover:bg-gray-50"
+                  style={{
+                    borderColor: confirmation.type === 'message' ? '#2563eb' : '#d1d5db',
+                    backgroundColor: confirmation.type === 'message' ? '#eff6ff' : 'transparent',
+                  }}
                 >
                   <input
                     type="radio"
@@ -345,8 +367,12 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                   <MessageSquare className="w-4 h-4" />
                   <span className="text-sm">Show Message</span>
                 </label>
-                <label className="flex items-center gap-2 px-4 py-2 border rounded-lg cursor-pointer transition-colors hover:bg-gray-50"
-                  style={{ borderColor: confirmation.type === 'redirect' ? '#2563eb' : '#d1d5db', backgroundColor: confirmation.type === 'redirect' ? '#eff6ff' : 'transparent' }}
+                <label
+                  className="flex items-center gap-2 px-4 py-2 border rounded-lg cursor-pointer transition-colors hover:bg-gray-50"
+                  style={{
+                    borderColor: confirmation.type === 'redirect' ? '#2563eb' : '#d1d5db',
+                    backgroundColor: confirmation.type === 'redirect' ? '#eff6ff' : 'transparent',
+                  }}
                 >
                   <input
                     type="radio"
@@ -364,7 +390,9 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
 
             {confirmation.type === 'message' ? (
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">Success Message</label>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Success Message
+                </label>
                 <textarea
                   value={confirmation.message}
                   onChange={(e) => setConfirmation((c) => ({ ...c, message: e.target.value }))}
@@ -376,21 +404,29 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
             ) : (
               <div className="grid gap-3">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Redirect URL</label>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Redirect URL
+                  </label>
                   <input
                     type="url"
                     value={confirmation.redirectUrl}
-                    onChange={(e) => setConfirmation((c) => ({ ...c, redirectUrl: e.target.value }))}
+                    onChange={(e) =>
+                      setConfirmation((c) => ({ ...c, redirectUrl: e.target.value }))
+                    }
                     placeholder="https://example.com/thank-you"
                     className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Redirect Delay (ms)</label>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Redirect Delay (ms)
+                  </label>
                   <input
                     type="number"
                     value={confirmation.redirectDelay}
-                    onChange={(e) => setConfirmation((c) => ({ ...c, redirectDelay: Number(e.target.value) }))}
+                    onChange={(e) =>
+                      setConfirmation((c) => ({ ...c, redirectDelay: Number(e.target.value) }))
+                    }
                     min={0}
                     step={500}
                     className="w-32 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
@@ -410,10 +446,16 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
           className="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors"
         >
           <div className="flex items-center gap-2">
-            {expandedSection === 'analytics' ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
+            {expandedSection === 'analytics' ? (
+              <ChevronDown className="w-4 h-4" />
+            ) : (
+              <ChevronRight className="w-4 h-4" />
+            )}
             <BarChart3 className="w-4 h-4 text-purple-600" />
             <span className="font-medium text-gray-900">GA4 Analytics</span>
-            <span className={`text-xs px-2 py-0.5 rounded ${analytics.enabled ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}>
+            <span
+              className={`text-xs px-2 py-0.5 rounded ${analytics.enabled ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}
+            >
               {analytics.enabled ? 'Enabled' : 'Disabled'}
             </span>
           </div>
@@ -430,7 +472,9 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                 />
                 <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600" />
               </label>
-              <span className="text-sm font-medium text-gray-700">Push events to Google Analytics 4</span>
+              <span className="text-sm font-medium text-gray-700">
+                Push events to Google Analytics 4
+              </span>
             </div>
 
             {analytics.enabled && (
@@ -447,25 +491,35 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                     placeholder="G-XXXXXXXXXX"
                     className="w-64 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                   />
-                  <p className="text-xs text-gray-500 mt-1">Leave blank to use your site's default GA4 tag</p>
+                  <p className="text-xs text-gray-500 mt-1">
+                    Leave blank to use your site's default GA4 tag
+                  </p>
                 </div>
 
                 <div className="grid grid-cols-2 gap-4">
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">Submit Event Name</label>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                      Submit Event Name
+                    </label>
                     <input
                       type="text"
                       value={analytics.submitEventName}
-                      onChange={(e) => setAnalytics((a) => ({ ...a, submitEventName: e.target.value }))}
+                      onChange={(e) =>
+                        setAnalytics((a) => ({ ...a, submitEventName: e.target.value }))
+                      }
                       className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                     />
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">Start Event Name</label>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                      Start Event Name
+                    </label>
                     <input
                       type="text"
                       value={analytics.startEventName}
-                      onChange={(e) => setAnalytics((a) => ({ ...a, startEventName: e.target.value }))}
+                      onChange={(e) =>
+                        setAnalytics((a) => ({ ...a, startEventName: e.target.value }))
+                      }
                       className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                     />
                   </div>
@@ -477,7 +531,9 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                       type="checkbox"
                       id="trackConversion"
                       checked={analytics.trackAsConversion}
-                      onChange={(e) => setAnalytics((a) => ({ ...a, trackAsConversion: e.target.checked }))}
+                      onChange={(e) =>
+                        setAnalytics((a) => ({ ...a, trackAsConversion: e.target.checked }))
+                      }
                       className="rounded"
                     />
                     <label htmlFor="trackConversion" className="text-sm font-medium text-gray-700">
@@ -488,21 +544,29 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                   {analytics.trackAsConversion && (
                     <div className="grid grid-cols-2 gap-4 ml-6">
                       <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-1">Conversion Value</label>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                          Conversion Value
+                        </label>
                         <input
                           type="number"
                           value={analytics.conversionValue}
-                          onChange={(e) => setAnalytics((a) => ({ ...a, conversionValue: Number(e.target.value) }))}
+                          onChange={(e) =>
+                            setAnalytics((a) => ({ ...a, conversionValue: Number(e.target.value) }))
+                          }
                           min={0}
                           step={0.01}
                           className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                         />
                       </div>
                       <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-1">Currency</label>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                          Currency
+                        </label>
                         <select
                           value={analytics.conversionCurrency}
-                          onChange={(e) => setAnalytics((a) => ({ ...a, conversionCurrency: e.target.value }))}
+                          onChange={(e) =>
+                            setAnalytics((a) => ({ ...a, conversionCurrency: e.target.value }))
+                          }
                           className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                         >
                           <option value="USD">USD</option>
@@ -518,9 +582,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
 
                 <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                   <p className="text-xs text-blue-800">
-                    <strong>Note:</strong> Your site must have the GA4 snippet or GTM container installed.
-                    Actuate pushes events via <code className="bg-blue-100 px-1 rounded">gtag()</code> /
-                    <code className="bg-blue-100 px-1 rounded">dataLayer</code> — it does not load the GA4 script.
+                    <strong>Note:</strong> Your site must have the GA4 snippet or GTM container
+                    installed. Actuate pushes events via{' '}
+                    <code className="bg-blue-100 px-1 rounded">gtag()</code> /
+                    <code className="bg-blue-100 px-1 rounded">dataLayer</code> — it does not load
+                    the GA4 script.
                   </p>
                 </div>
               </div>
@@ -529,5 +595,5 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
         )}
       </div>
     </div>
-  );
+  )
 }