@actuate-media/cms-admin 0.8.0 → 0.8.2

package/src/views/Forms.tsx

@@ -1,38 +1,39 @@
-'use client';
+'use client'
 
-import { Plus, MoreVertical, FileText, Send, Search, Loader2, AlertTriangle } from 'lucide-react';
-import { useState, useMemo } from 'react';
-import { sortByRelevance } from '../lib/search.js';
-import { useApiData } from '../lib/useApiData.js';
+import { Plus, MoreVertical, FileText, Send, Search, Loader2, AlertTriangle } from 'lucide-react'
+import { useState, useMemo } from 'react'
+import { sortByRelevance } from '../lib/search.js'
+import { useApiData } from '../lib/useApiData.js'
 
 export interface FormsProps {
-  onNavigate?: (path: string) => void;
+  onNavigate?: (path: string) => void
 }
 
 export function Forms({ onNavigate }: FormsProps) {
-  const { data, loading, error, refetch } = useApiData<any[]>('/forms');
-  const [searchQuery, setSearchQuery] = useState('');
+  const { data, loading, error, refetch } = useApiData<any[]>('/forms')
+  const [searchQuery, setSearchQuery] = useState('')
 
-  const forms = data ?? [];
+  const forms = data ?? []
 
   const filteredAndSorted = useMemo(() => {
-    let results = forms.filter((form: any) =>
-      (form.name ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
-      (form.description ?? '').toLowerCase().includes(searchQuery.toLowerCase())
-    );
+    let results = forms.filter(
+      (form: any) =>
+        (form.name ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+        (form.description ?? '').toLowerCase().includes(searchQuery.toLowerCase()),
+    )
 
     if (searchQuery.trim()) {
-      results = sortByRelevance(results, searchQuery, (f: any) => [f.name, f.description ?? '']);
+      results = sortByRelevance(results, searchQuery, (f: any) => [f.name, f.description ?? ''])
     }
-    return results;
-  }, [forms, searchQuery]);
+    return results
+  }, [forms, searchQuery])
 
   if (loading) {
     return (
       <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
         <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
       </div>
-    );
+    )
   }
 
   return (
@@ -41,7 +42,12 @@ export function Forms({ onNavigate }: FormsProps) {
         <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
           <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
           <span className="text-sm text-red-800 flex-1">{error}</span>
-          <button onClick={refetch} className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors">Retry</button>
+          <button
+            onClick={refetch}
+            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+          >
+            Retry
+          </button>
         </div>
       )}
 
@@ -50,7 +56,10 @@ export function Forms({ onNavigate }: FormsProps) {
           <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">Forms</h1>
           <p className="text-sm text-gray-600">{filteredAndSorted.length} total forms</p>
         </div>
-        <button onClick={() => onNavigate?.('/forms/new')} className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm">
+        <button
+          onClick={() => onNavigate?.('/forms/new')}
+          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
+        >
           <Plus className="w-4 h-4" />
           New Form
         </button>
@@ -74,12 +83,17 @@ export function Forms({ onNavigate }: FormsProps) {
       {filteredAndSorted.length === 0 ? (
         <div className="bg-white rounded-lg border border-gray-200 p-8 text-center">
           <p className="text-sm text-gray-500 mb-2">No forms yet</p>
-          <button className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Create your first form</button>
+          <button className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
+            Create your first form
+          </button>
         </div>
       ) : (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {filteredAndSorted.map((form: any) => (
-            <div key={form.id} className="bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-shadow">
+            <div
+              key={form.id}
+              className="bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-shadow"
+            >
               <div className="flex items-start justify-between mb-3">
                 <div className="flex-1">
                   <h3 className="font-semibold text-gray-900 mb-1">{form.name}</h3>
@@ -90,17 +104,33 @@ export function Forms({ onNavigate }: FormsProps) {
                 </button>
               </div>
               <div className="flex items-center gap-4 text-sm text-gray-600 mb-3">
-                <span className="flex items-center gap-1"><FileText className="w-4 h-4" />{form.fields} fields</span>
-                <span className="flex items-center gap-1"><Send className="w-4 h-4" />{form.submissions} submissions</span>
+                <span className="flex items-center gap-1">
+                  <FileText className="w-4 h-4" />
+                  {form.fields} fields
+                </span>
+                <span className="flex items-center gap-1">
+                  <Send className="w-4 h-4" />
+                  {form.submissions} submissions
+                </span>
               </div>
               <div className="flex items-center gap-2">
-                <button onClick={() => onNavigate?.(`/forms/${form.id}/submissions`)} className="flex-1 px-3 py-1.5 text-sm text-center bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">View Submissions</button>
-                <button onClick={() => onNavigate?.(`/forms/${form.id}/edit`)} className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">Edit</button>
+                <button
+                  onClick={() => onNavigate?.(`/forms/${form.id}/submissions`)}
+                  className="flex-1 px-3 py-1.5 text-sm text-center bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                  View Submissions
+                </button>
+                <button
+                  onClick={() => onNavigate?.(`/forms/${form.id}/edit`)}
+                  className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                >
+                  Edit
+                </button>
               </div>
             </div>
           ))}
         </div>
       )}
     </div>
-  );
+  )
 }

package/src/views/Login.tsx

@@ -1,25 +1,29 @@
-'use client';
+'use client'
 
-import { useState, type FormEvent } from 'react';
-import { Shield, Eye, EyeOff, AlertTriangle, Loader2 } from 'lucide-react';
+import { useState, type FormEvent } from 'react'
+import { Shield, Eye, EyeOff, AlertTriangle, Loader2 } from 'lucide-react'
 
 export interface CaptchaConfig {
-  provider: 'recaptcha' | 'turnstile' | 'none';
-  siteKey: string | null;
+  provider: 'recaptcha' | 'turnstile' | 'none'
+  siteKey: string | null
 }
 
 export interface LoginProps {
-  onLogin: (email: string, password: string, captchaToken?: string) => Promise<{ success: boolean; error?: string }>;
-  onNavigate?: (path: string) => void;
-  oauthProviders?: string[];
-  captchaConfig?: CaptchaConfig;
+  onLogin: (
+    email: string,
+    password: string,
+    captchaToken?: string,
+  ) => Promise<{ success: boolean; error?: string }>
+  onNavigate?: (path: string) => void
+  oauthProviders?: string[]
+  captchaConfig?: CaptchaConfig
 }
 
 const OAUTH_LABELS: Record<string, string> = {
   google: 'Google',
   github: 'GitHub',
   microsoft: 'Microsoft',
-};
+}
 
 const OAUTH_COLORS: Record<string, { border: string; bg: string; text: string; hover: string }> = {
   google: {
@@ -40,7 +44,7 @@ const OAUTH_COLORS: Record<string, { border: string; bg: string; text: string; h
     text: 'text-gray-700',
     hover: 'hover:bg-blue-50',
   },
-};
+}
 
 function GoogleIcon() {
   return (
@@ -62,7 +66,7 @@ function GoogleIcon() {
         fill="#EA4335"
       />
     </svg>
-  );
+  )
 }
 
 function MicrosoftIcon() {
@@ -73,134 +77,146 @@ function MicrosoftIcon() {
       <rect x="11" y="1" width="9" height="9" fill="#7FBA00" />
       <rect x="11" y="11" width="9" height="9" fill="#FFB900" />
     </svg>
-  );
+  )
 }
 
 function OAuthIcon({ provider }: { provider: string }) {
   switch (provider) {
     case 'google':
-      return <GoogleIcon />;
+      return <GoogleIcon />
     case 'github':
-      return <svg className="w-5 h-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>;
+      return (
+        <svg className="w-5 h-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>
+      )
     case 'microsoft':
-      return <MicrosoftIcon />;
+      return <MicrosoftIcon />
     default:
-      return null;
+      return null
   }
 }
 
 function useCaptchaScript(provider: string | undefined, siteKey: string | null | undefined) {
-  const [loaded, setLoaded] = useState(false);
+  const [loaded, setLoaded] = useState(false)
 
   useState(() => {
-    if (typeof window === 'undefined' || !siteKey) return;
+    if (typeof window === 'undefined' || !siteKey) return
 
     if (provider === 'recaptcha') {
-      const existing = document.querySelector('script[src*="recaptcha"]');
-      if (existing) { setLoaded(true); return; }
-      const script = document.createElement('script');
-      script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;
-      script.async = true;
-      script.onload = () => setLoaded(true);
-      document.head.appendChild(script);
+      const existing = document.querySelector('script[src*="recaptcha"]')
+      if (existing) {
+        setLoaded(true)
+        return
+      }
+      const script = document.createElement('script')
+      script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`
+      script.async = true
+      script.onload = () => setLoaded(true)
+      document.head.appendChild(script)
     } else if (provider === 'turnstile') {
-      const existing = document.querySelector('script[src*="turnstile"]');
-      if (existing) { setLoaded(true); return; }
-      const script = document.createElement('script');
-      script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
-      script.async = true;
-      script.onload = () => setLoaded(true);
-      document.head.appendChild(script);
+      const existing = document.querySelector('script[src*="turnstile"]')
+      if (existing) {
+        setLoaded(true)
+        return
+      }
+      const script = document.createElement('script')
+      script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js'
+      script.async = true
+      script.onload = () => setLoaded(true)
+      document.head.appendChild(script)
     }
-  });
+  })
 
-  return loaded;
+  return loaded
 }
 
 async function getCaptchaToken(provider: string, siteKey: string, action: string): Promise<string> {
   if (provider === 'recaptcha') {
-    const grecaptcha = (window as any).grecaptcha;
-    if (!grecaptcha) return '';
+    const grecaptcha = (window as any).grecaptcha
+    if (!grecaptcha) return ''
     return new Promise((resolve) => {
       grecaptcha.ready(() => {
-        grecaptcha.execute(siteKey, { action }).then(resolve).catch(() => resolve(''));
-      });
-    });
+        grecaptcha
+          .execute(siteKey, { action })
+          .then(resolve)
+          .catch(() => resolve(''))
+      })
+    })
   }
 
   if (provider === 'turnstile') {
-    const turnstile = (window as any).turnstile;
-    if (!turnstile) return '';
+    const turnstile = (window as any).turnstile
+    if (!turnstile) return ''
     return new Promise((resolve) => {
-      const container = document.createElement('div');
-      container.style.display = 'none';
-      document.body.appendChild(container);
+      const container = document.createElement('div')
+      container.style.display = 'none'
+      document.body.appendChild(container)
       turnstile.render(container, {
         sitekey: siteKey,
         action,
         callback: (token: string) => {
-          container.remove();
-          resolve(token);
+          container.remove()
+          resolve(token)
         },
         'error-callback': () => {
-          container.remove();
-          resolve('');
+          container.remove()
+          resolve('')
         },
-      });
-    });
+      })
+    })
   }
 
-  return '';
+  return ''
 }
 
 export function Login({ onLogin, onNavigate, oauthProviders, captchaConfig }: LoginProps) {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [showPassword, setShowPassword] = useState(false);
-  const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState('');
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState('')
 
-  useCaptchaScript(captchaConfig?.provider, captchaConfig?.siteKey);
+  useCaptchaScript(captchaConfig?.provider, captchaConfig?.siteKey)
 
-  const canSubmit = email.trim() && password && !submitting;
+  const canSubmit = email.trim() && password && !submitting
 
   const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    if (!canSubmit) return;
+    e.preventDefault()
+    if (!canSubmit) return
 
-    setError('');
-    setSubmitting(true);
+    setError('')
+    setSubmitting(true)
 
     try {
-      let captchaToken: string | undefined;
+      let captchaToken: string | undefined
       if (captchaConfig?.provider && captchaConfig.provider !== 'none' && captchaConfig.siteKey) {
-        captchaToken = await getCaptchaToken(captchaConfig.provider, captchaConfig.siteKey, 'login');
+        captchaToken = await getCaptchaToken(captchaConfig.provider, captchaConfig.siteKey, 'login')
         if (!captchaToken) {
-          setError('CAPTCHA verification failed. Please try again.');
-          setSubmitting(false);
-          return;
+          setError('CAPTCHA verification failed. Please try again.')
+          setSubmitting(false)
+          return
         }
       }
 
-      const result = await onLogin(email.trim(), password, captchaToken);
+      const result = await onLogin(email.trim(), password, captchaToken)
 
       if (!result.success) {
-        setError(result.error ?? 'Invalid email or password');
+        setError(result.error ?? 'Invalid email or password')
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'An unexpected error occurred');
+      setError(err instanceof Error ? err.message : 'An unexpected error occurred')
     } finally {
-      setSubmitting(false);
+      setSubmitting(false)
     }
-  };
+  }
 
   const handleOAuthClick = (provider: string) => {
-    window.location.href = `/api/cms/auth/oauth/${provider}`;
-  };
+    window.location.href = `/api/cms/auth/oauth/${provider}`
+  }
 
-  const enabledProviders = oauthProviders?.filter(
-    (p) => ['google', 'github', 'microsoft'].includes(p),
-  ) ?? [];
+  const enabledProviders =
+    oauthProviders?.filter((p) => ['google', 'github', 'microsoft'].includes(p)) ?? []
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
@@ -213,7 +229,10 @@ export function Login({ onLogin, onNavigate, oauthProviders, captchaConfig }: Lo
           <p className="text-gray-600 mt-2">Sign in to your account</p>
         </div>
 
-        <form onSubmit={handleSubmit} className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm space-y-5">
+        <form
+          onSubmit={handleSubmit}
+          className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm space-y-5"
+        >
           {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" />
@@ -222,7 +241,9 @@ export function Login({ onLogin, onNavigate, oauthProviders, captchaConfig }: Lo
           )}
 
           <div>
-            <label htmlFor="login-email" className="block text-sm font-medium text-gray-700 mb-1.5">Email Address</label>
+            <label htmlFor="login-email" className="block text-sm font-medium text-gray-700 mb-1.5">
+              Email Address
+            </label>
             <input
               id="login-email"
               type="email"
@@ -238,7 +259,9 @@ export function Login({ onLogin, onNavigate, oauthProviders, captchaConfig }: Lo
 
           <div>
             <div className="flex items-center justify-between mb-1.5">
-              <label htmlFor="login-password" className="block text-sm font-medium text-gray-700">Password</label>
+              <label htmlFor="login-password" className="block text-sm font-medium text-gray-700">
+                Password
+              </label>
               {onNavigate && (
                 <button
                   type="button"
@@ -299,7 +322,7 @@ export function Login({ onLogin, onNavigate, oauthProviders, captchaConfig }: Lo
 
               <div className="grid gap-3">
                 {enabledProviders.map((provider) => {
-                  const colors = OAUTH_COLORS[provider] ?? OAUTH_COLORS.google;
+                  const colors = OAUTH_COLORS[provider] ?? OAUTH_COLORS.google
                   return (
                     <button
                       key={provider}
@@ -310,7 +333,7 @@ export function Login({ onLogin, onNavigate, oauthProviders, captchaConfig }: Lo
                       <OAuthIcon provider={provider} />
                       {OAUTH_LABELS[provider] ?? provider}
                     </button>
-                  );
+                  )
                 })}
               </div>
             </>
@@ -318,5 +341,5 @@ export function Login({ onLogin, onNavigate, oauthProviders, captchaConfig }: Lo
         </form>
       </div>
     </div>
-  );
+  )
 }