@actuate-media/cms-admin 0.3.0 → 0.6.0

package/src/views/DocumentEdit.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 import { AlertTriangle, Eye, EyeOff, Save, Copy, Loader2, Clock } from 'lucide-react';
 import { toast } from 'sonner';
 import { FieldRenderer } from '../fields/FieldRenderer.js';
+import { RelationshipField } from '../fields/RelationshipField.js';
 import { Button } from '../components/ui/Button.js';
 import { Badge } from '../components/ui/Badge.js';
 import { LivePreview } from '../components/LivePreview.js';
@@ -26,6 +27,8 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
   const [initialValues, setInitialValues] = useState<Record<string, any>>({});
   const [seoData, setSeoData] = useState<SEOData>({});
   const [initialSeoData, setInitialSeoData] = useState<SEOData>({});
+  const [layoutAssignments, setLayoutAssignments] = useState<Record<string, string>>({});
+  const [initialLayoutAssignments, setInitialLayoutAssignments] = useState<Record<string, string>>({});
   const [saving, setSaving] = useState(false);
   const [loading, setLoading] = useState(!isNew);
   const [showPreview, setShowPreview] = useState(false);
@@ -38,6 +41,16 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
     ? collections.find((c: any) => c.slug === collectionSlug)
     : collections?.[collectionSlug];
 
+  const layoutConfig = config?.layout;
+  const layoutRegions: Array<{ name: string; collection: string; label: string }> = layoutConfig?.regions
+    ? Object.entries(layoutConfig.regions).map(([name, region]: [string, any]) => ({
+        name,
+        collection: region.collection,
+        label: region.label ?? name.charAt(0).toUpperCase() + name.slice(1),
+      }))
+    : [];
+  const hasLayout = layoutRegions.length > 0 && (collection?.type === 'page' || collection?.urlPrefix !== undefined);
+
   const previewUrl = collection?.admin?.preview ? collection.admin.preview({}) : undefined;
   const fields: any[] = collection?.fields
     ? (Array.isArray(collection.fields)
@@ -51,7 +64,8 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
     : `Edit ${values[useAsTitleField] ?? 'Document'}`;
 
   const isDirty = JSON.stringify(values) !== JSON.stringify(initialValues)
-    || JSON.stringify(seoData) !== JSON.stringify(initialSeoData);
+    || JSON.stringify(seoData) !== JSON.stringify(initialSeoData)
+    || JSON.stringify(layoutAssignments) !== JSON.stringify(initialLayoutAssignments);
 
   useEffect(() => {
     if (!isNew && documentId && !hasLoadedRef.current) {
@@ -95,6 +109,12 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
       }
       setSeoData(loadedSeo);
       setInitialSeoData(loadedSeo);
+
+      if (docData._layout && typeof docData._layout === 'object') {
+        const loaded = docData._layout as Record<string, string>;
+        setLayoutAssignments(loaded);
+        setInitialLayoutAssignments(loaded);
+      }
     } else if (res.error) {
       toast.error(`Failed to load document: ${res.error}`);
     }
@@ -107,7 +127,8 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
 
   async function handleSave() {
     setSaving(true);
-    const payload = { ...values, ...seoData };
+    const layoutPayload = Object.keys(layoutAssignments).length > 0 ? { _layout: layoutAssignments } : {};
+    const payload = { ...values, ...seoData, ...layoutPayload };
     try {
       if (isNew) {
         const res = await cmsApi<any>(`/collections/${collectionSlug}`, {
@@ -121,6 +142,7 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
           const newId = res.data?.id;
           setInitialValues(values);
           setInitialSeoData(seoData);
+          setInitialLayoutAssignments(layoutAssignments);
           if (newId && onNavigate) {
             onNavigate(`/${collectionSlug}/${newId}`);
           }
@@ -136,6 +158,7 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
           toast.success('Changes saved');
           setInitialValues(values);
           setInitialSeoData(seoData);
+          setInitialLayoutAssignments(layoutAssignments);
           if (res.data?.status) setDocStatus(res.data.status);
         }
       }
@@ -148,9 +171,10 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
   async function handlePublish() {
     if (isNew) return;
     setSaving(true);
+    const layoutPayload = Object.keys(layoutAssignments).length > 0 ? { _layout: layoutAssignments } : {};
     const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}`, {
       method: 'PUT',
-      body: JSON.stringify({ ...values, ...seoData, status: 'PUBLISHED' }),
+      body: JSON.stringify({ ...values, ...seoData, ...layoutPayload, status: 'PUBLISHED' }),
     });
     if (res.error) {
       toast.error(res.error);
@@ -159,6 +183,7 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
       setDocStatus('PUBLISHED');
       setInitialValues(values);
       setInitialSeoData(seoData);
+      setInitialLayoutAssignments(layoutAssignments);
     }
     setSaving(false);
   }
@@ -166,9 +191,10 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
   async function handleUnpublish() {
     if (isNew) return;
     setSaving(true);
+    const layoutPayload = Object.keys(layoutAssignments).length > 0 ? { _layout: layoutAssignments } : {};
     const res = await cmsApi<any>(`/collections/${collectionSlug}/${documentId}`, {
       method: 'PUT',
-      body: JSON.stringify({ ...values, ...seoData, status: 'DRAFT' }),
+      body: JSON.stringify({ ...values, ...seoData, ...layoutPayload, status: 'DRAFT' }),
     });
     if (res.error) {
       toast.error(res.error);
@@ -177,6 +203,7 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
       setDocStatus('DRAFT');
       setInitialValues(values);
       setInitialSeoData(seoData);
+      setInitialLayoutAssignments(layoutAssignments);
     }
     setSaving(false);
   }
@@ -335,6 +362,57 @@ export function DocumentEdit({ collectionSlug, documentId, config, onNavigate }:
                 onChange={setSeoData}
                 siteUrl={config?.siteUrl}
               />
+
+              {hasLayout && (
+                <div className="rounded-lg border border-[var(--border)] bg-[var(--card)] p-4">
+                  <h3 className="mb-1 font-semibold">Layout</h3>
+                  <p className="mb-4 text-xs text-[var(--muted-foreground)]">
+                    Assign header/footer variants. Child pages inherit from ancestors.
+                  </p>
+                  <div className="space-y-4">
+                    {layoutRegions.map((region) => (
+                      <div key={region.name}>
+                        <RelationshipField
+                          label={region.label}
+                          value={layoutAssignments[region.name] ?? ''}
+                          onChange={(val) => {
+                            setLayoutAssignments((prev) => {
+                              const next = { ...prev };
+                              if (val && typeof val === 'string') {
+                                next[region.name] = val;
+                              } else {
+                                delete next[region.name];
+                              }
+                              return next;
+                            });
+                          }}
+                          relationTo={region.collection}
+                          helpText={
+                            !layoutAssignments[region.name]
+                              ? 'Inheriting from parent page or site default'
+                              : undefined
+                          }
+                        />
+                        {layoutAssignments[region.name] && (
+                          <button
+                            type="button"
+                            onClick={() => {
+                              setLayoutAssignments((prev) => {
+                                const next = { ...prev };
+                                delete next[region.name];
+                                return next;
+                              });
+                            }}
+                            className="mt-1 text-xs text-[var(--primary)] hover:underline"
+                          >
+                            Clear override (inherit from parent)
+                          </button>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
             </div>
           </div>
           )}

package/src/views/ForgotPassword.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+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;
+}
+
+export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
+  const [email, setEmail] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState('');
+
+  const canSubmit = email.trim() && !submitting;
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!canSubmit) return;
+
+    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.');
+      } else {
+        setSent(true);
+      }
+    } catch {
+      setError('An unexpected error occurred. Please try again.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex 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">Reset Password</h1>
+          <p className="text-gray-600 mt-2">
+            {sent
+              ? 'Check your inbox for a reset link'
+              : "Enter your email and we'll send you a reset link"}
+          </p>
+        </div>
+
+        <div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm space-y-5">
+          {sent ? (
+            <div className="text-center space-y-4">
+              <div className="mx-auto w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
+                <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.
+              </p>
+              <p className="text-xs text-gray-500">
+                The link expires in 1 hour. Check your spam folder if you don't see it.
+              </p>
+              <button
+                type="button"
+                onClick={() => onNavigate('/login')}
+                className="w-full py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
+              >
+                Back to Sign In
+              </button>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="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" />
+                  <p className="text-sm text-red-800">{error}</p>
+                </div>
+              )}
+
+              <div>
+                <label htmlFor="forgot-email" className="block text-sm font-medium text-gray-700 mb-1.5">
+                  Email Address
+                </label>
+                <input
+                  id="forgot-email"
+                  type="email"
+                  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"
+                  required
+                  autoFocus
+                  autoComplete="email"
+                />
+              </div>
+
+              <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"
+              >
+                {submitting ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                    Sending...
+                  </>
+                ) : (
+                  'Send Reset Link'
+                )}
+              </button>
+            </form>
+          )}
+
+          {!sent && (
+            <button
+              type="button"
+              onClick={() => onNavigate('/login')}
+              className="w-full flex items-center justify-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
+            >
+              <ArrowLeft className="w-4 h-4" />
+              Back to Sign In
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/views/ResetPassword.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import { useState, type FormEvent } from 'react';
+import { Shield, Eye, EyeOff, Loader2, CheckCircle2, AlertTriangle, XCircle } from 'lucide-react';
+import { cmsApi } from '../lib/api.js';
+
+export interface ResetPasswordProps {
+  onNavigate: (path: string) => void;
+  token: string | null;
+}
+
+export function ResetPassword({ onNavigate, token }: ResetPasswordProps) {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState('');
+
+  if (!token) {
+    return (
+      <div className="min-h-screen flex 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-red-100 rounded-xl flex items-center justify-center">
+              <XCircle className="w-7 h-7 text-red-600" />
+            </div>
+            <h1 className="text-2xl font-bold text-gray-900">Invalid Reset Link</h1>
+            <p className="text-gray-600 mt-2">This password reset link is invalid or has expired.</p>
+          </div>
+          <div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm text-center space-y-4">
+            <button
+              type="button"
+              onClick={() => onNavigate('/forgot-password')}
+              className="w-full py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
+            >
+              Request New Reset Link
+            </button>
+            <button
+              type="button"
+              onClick={() => onNavigate('/login')}
+              className="w-full text-sm text-gray-600 hover:text-gray-800 transition-colors"
+            >
+              Back to Sign In
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const passwordsMatch = password === confirmPassword;
+  const meetsLength = password.length >= 8;
+  const canSubmit = password && confirmPassword && passwordsMatch && meetsLength && !submitting;
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!canSubmit) return;
+
+    setError('');
+    setSubmitting(true);
+
+    try {
+      const result = await cmsApi<{ success: boolean }>('/auth/reset-password', {
+        method: 'POST',
+        body: JSON.stringify({ token, password }),
+      });
+
+      if (result.error) {
+        setError(result.error);
+      } else {
+        setSuccess(true);
+      }
+    } catch {
+      setError('An unexpected error occurred. Please try again.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex 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">
+            {success ? 'Password Reset' : 'Choose New Password'}
+          </h1>
+          <p className="text-gray-600 mt-2">
+            {success ? 'Your password has been updated' : 'Enter your new password below'}
+          </p>
+        </div>
+
+        <div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm space-y-5">
+          {success ? (
+            <div className="text-center space-y-4">
+              <div className="mx-auto w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
+                <CheckCircle2 className="w-6 h-6 text-green-600" />
+              </div>
+              <p className="text-sm text-gray-600">
+                Your password has been successfully reset. All existing sessions have been revoked for security.
+              </p>
+              <button
+                type="button"
+                onClick={() => onNavigate('/login')}
+                className="w-full py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
+              >
+                Sign In with New Password
+              </button>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="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" />
+                  <p className="text-sm text-red-800">{error}</p>
+                </div>
+              )}
+
+              <div>
+                <label htmlFor="reset-password" className="block text-sm font-medium text-gray-700 mb-1.5">
+                  New Password
+                </label>
+                <div className="relative">
+                  <input
+                    id="reset-password"
+                    type={showPassword ? 'text' : 'password'}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="Enter new 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"
+                    required
+                    autoFocus
+                    autoComplete="new-password"
+                    minLength={8}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 -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" />}
+                  </button>
+                </div>
+                {password && !meetsLength && (
+                  <p className="mt-1 text-xs text-red-600">Password must be at least 8 characters</p>
+                )}
+              </div>
+
+              <div>
+                <label htmlFor="reset-confirm" className="block text-sm font-medium text-gray-700 mb-1.5">
+                  Confirm Password
+                </label>
+                <input
+                  id="reset-confirm"
+                  type={showPassword ? 'text' : 'password'}
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  placeholder="Confirm new password"
+                  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"
+                  required
+                  autoComplete="new-password"
+                />
+                {confirmPassword && !passwordsMatch && (
+                  <p className="mt-1 text-xs text-red-600">Passwords do not match</p>
+                )}
+              </div>
+
+              <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"
+              >
+                {submitting ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                    Resetting...
+                  </>
+                ) : (
+                  'Reset Password'
+                )}
+              </button>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}