@actuate-media/cms-admin 0.4.0 → 0.6.0

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>
+  );
+}

package/src/views/ScriptTagEditor.tsx

@@ -0,0 +1,361 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { ArrowLeft, Loader2, AlertTriangle, Trash2, X, Plus } from 'lucide-react';
+import { toast } from 'sonner';
+import { useApiData } from '../lib/useApiData.js';
+import { cmsApi } from '../lib/api.js';
+
+export interface ScriptTagEditorProps {
+  tagId?: string;
+  onNavigate?: (path: string) => void;
+}
+
+export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
+  const isNew = !tagId;
+  const { data, loading, error } = useApiData<any>(
+    tagId ? `/script-tags` : null,
+  );
+
+  const [name, setName] = useState('');
+  const [code, setCode] = useState('');
+  const [placement, setPlacement] = useState('head');
+  const [scope, setScope] = useState('site');
+  const [targetPaths, setTargetPaths] = useState<string[]>([]);
+  const [pathInput, setPathInput] = useState('');
+  const [priority, setPriority] = useState(100);
+  const [enabled, setEnabled] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+  useEffect(() => {
+    if (data && tagId) {
+      const tags = Array.isArray(data) ? data : [];
+      const tag = tags.find((t: any) => t.id === tagId);
+      if (tag) {
+        setName(tag.name ?? '');
+        setCode(tag.code ?? '');
+        setPlacement(tag.placement ?? 'head');
+        setScope(tag.scope ?? 'site');
+        setTargetPaths(tag.targetPaths ?? []);
+        setPriority(tag.priority ?? 100);
+        setEnabled(tag.enabled ?? true);
+      }
+    }
+  }, [data, tagId]);
+
+  const addPath = () => {
+    const trimmed = pathInput.trim();
+    if (!trimmed) return;
+    const normalized = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
+    if (!targetPaths.includes(normalized)) {
+      setTargetPaths([...targetPaths, normalized]);
+    }
+    setPathInput('');
+  };
+
+  const removePath = (path: string) => {
+    setTargetPaths(targetPaths.filter((p) => p !== path));
+  };
+
+  const handleSave = async () => {
+    if (!name.trim()) {
+      toast.error('Name is required');
+      return;
+    }
+    if (!code.trim()) {
+      toast.error('Code snippet is required');
+      return;
+    }
+    if (scope !== 'site' && targetPaths.length === 0) {
+      toast.error('At least one target path is required for this scope');
+      return;
+    }
+
+    setSaving(true);
+    const payload = {
+      name: name.trim(),
+      code,
+      placement,
+      scope,
+      targetPaths: scope === 'site' ? [] : targetPaths,
+      priority,
+      enabled,
+    };
+
+    const res = isNew
+      ? await cmsApi('/script-tags', { method: 'POST', body: JSON.stringify(payload) })
+      : await cmsApi(`/script-tags/${tagId}`, { method: 'PUT', body: JSON.stringify(payload) });
+
+    setSaving(false);
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success(isNew ? 'Tag created' : 'Tag updated');
+      onNavigate?.('/script-tags');
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!tagId) return;
+    setDeleting(true);
+    const res = await cmsApi(`/script-tags/${tagId}`, { method: 'DELETE' });
+    setDeleting(false);
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success('Tag deleted');
+      onNavigate?.('/script-tags');
+    }
+  };
+
+  if (loading && !isNew) {
+    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 (
+    <div className="p-3 pr-6 sm:p-4 sm:pr-8 max-w-3xl">
+      {error && (
+        <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>
+        </div>
+      )}
+
+      <div className="mb-6">
+        <button
+          type="button"
+          onClick={() => onNavigate?.('/script-tags')}
+          className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700 transition-colors mb-3"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          Back to Script Tags
+        </button>
+        <h1 className="text-2xl font-semibold text-gray-900">
+          {isNew ? 'New Script Tag' : 'Edit Script Tag'}
+        </h1>
+      </div>
+
+      <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 mb-6">
+        <div className="flex items-start gap-2">
+          <AlertTriangle className="w-4 h-4 text-amber-600 mt-0.5 shrink-0" />
+          <p className="text-sm text-amber-800">
+            This code will run on public pages matching the scope below. Only add trusted code from verified sources (e.g. Google Analytics, Meta Pixel).
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        <div className="rounded-lg border border-gray-200 bg-white p-4 space-y-4">
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Name</label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. Google Tag Manager, Facebook Pixel"
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Code</label>
+            <textarea
+              value={code}
+              onChange={(e) => setCode(e.target.value)}
+              placeholder="Paste your HTML/JavaScript snippet here..."
+              rows={10}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500"
+              spellCheck={false}
+            />
+            <p className="mt-1 text-xs text-gray-500">
+              Paste the full code snippet including {'<script>'} tags.
+            </p>
+          </div>
+        </div>
+
+        <div className="rounded-lg border border-gray-200 bg-white p-4 space-y-4">
+          <h3 className="text-sm font-semibold text-gray-900">Placement & Scope</h3>
+
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Placement</label>
+            <select
+              value={placement}
+              onChange={(e) => setPlacement(e.target.value)}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="head">Head — inside {'<head>'}</option>
+              <option value="body_open">Body Open — right after {'<body>'}</option>
+              <option value="body_close">Body Close — before {'</body>'}</option>
+            </select>
+            <p className="mt-1 text-xs text-gray-500">
+              {placement === 'head' && 'Best for analytics scripts, meta tags, and custom CSS.'}
+              {placement === 'body_open' && 'Best for GTM noscript tags and early-loading scripts.'}
+              {placement === 'body_close' && 'Best for chat widgets, deferred scripts, and tracking pixels.'}
+            </p>
+          </div>
+
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Scope</label>
+            <select
+              value={scope}
+              onChange={(e) => setScope(e.target.value)}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="site">Entire Website</option>
+              <option value="parents">Specific Parent Pages (includes child pages)</option>
+              <option value="urls">Specific URLs (exact match)</option>
+            </select>
+          </div>
+
+          {scope !== 'site' && (
+            <div>
+              <label className="mb-1 block text-sm font-medium text-gray-700">
+                {scope === 'parents' ? 'Parent Paths' : 'URL Paths'}
+              </label>
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={pathInput}
+                  onChange={(e) => setPathInput(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                      addPath();
+                    }
+                  }}
+                  placeholder="/services"
+                  className="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+                <button
+                  type="button"
+                  onClick={addPath}
+                  className="rounded-lg border border-gray-300 px-3 py-2 text-sm hover:bg-gray-50 transition-colors"
+                >
+                  <Plus className="w-4 h-4" />
+                </button>
+              </div>
+              {scope === 'parents' && (
+                <p className="mt-1 text-xs text-gray-500">
+                  This tag will also apply to all child pages under each path.
+                </p>
+              )}
+              {targetPaths.length > 0 && (
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {targetPaths.map((p) => (
+                    <span
+                      key={p}
+                      className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-3 py-1 text-xs font-mono text-gray-700"
+                    >
+                      {p}
+                      <button
+                        type="button"
+                        onClick={() => removePath(p)}
+                        className="ml-0.5 text-gray-400 hover:text-gray-600"
+                      >
+                        <X className="w-3 h-3" />
+                      </button>
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="mb-1 block text-sm font-medium text-gray-700">Priority</label>
+              <input
+                type="number"
+                value={priority}
+                onChange={(e) => setPriority(parseInt(e.target.value, 10) || 0)}
+                min={0}
+                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+              <p className="mt-1 text-xs text-gray-500">
+                Lower numbers load first (e.g. 1 = first, 100 = default)
+              </p>
+            </div>
+            <div>
+              <label className="mb-1 block text-sm font-medium text-gray-700">Enabled</label>
+              <div className="pt-2">
+                <button
+                  type="button"
+                  onClick={() => setEnabled(!enabled)}
+                  className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${enabled ? 'bg-blue-600' : 'bg-gray-300'}`}
+                  aria-pressed={enabled}
+                >
+                  <span
+                    className={`absolute top-0.5 block h-5 w-5 rounded-full bg-white transition-transform ${
+                      enabled ? 'translate-x-[22px]' : 'translate-x-0.5'
+                    }`}
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <div>
+            {!isNew && (
+              <>
+                {showDeleteConfirm ? (
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-red-600">Delete this tag?</span>
+                    <button
+                      type="button"
+                      onClick={handleDelete}
+                      disabled={deleting}
+                      className="rounded-lg bg-red-600 px-3 py-1.5 text-sm text-white hover:bg-red-700 disabled:opacity-50"
+                    >
+                      {deleting ? 'Deleting...' : 'Confirm'}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setShowDeleteConfirm(false)}
+                      className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-50"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => setShowDeleteConfirm(true)}
+                    className="flex items-center gap-1.5 text-sm text-red-600 hover:text-red-700 transition-colors"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                    Delete
+                  </button>
+                )}
+              </>
+            )}
+          </div>
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={() => onNavigate?.('/script-tags')}
+              className="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={saving}
+              className="rounded-lg bg-blue-600 px-6 py-2 text-sm text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+            >
+              {saving ? 'Saving...' : isNew ? 'Create Tag' : 'Save Changes'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}