@actuate-media/cms-admin 0.1.4 → 0.2.0

package/src/views/SetupWizard.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import { useState, type FormEvent } from 'react';
+import { Shield, Eye, EyeOff, CheckCircle2, AlertTriangle } from 'lucide-react';
+
+export interface SetupWizardProps {
+  onComplete: (data: { name: string; email: string; password: string }) => Promise<{ success: boolean; error?: string }>;
+  siteName?: string;
+}
+
+function passwordStrength(pw: string): { score: number; label: string; color: string } {
+  let score = 0;
+  if (pw.length >= 12) score++;
+  if (pw.length >= 16) score++;
+  if (/[A-Z]/.test(pw)) score++;
+  if (/[a-z]/.test(pw)) score++;
+  if (/\d/.test(pw)) score++;
+  if (/[^a-zA-Z0-9]/.test(pw)) score++;
+
+  if (score <= 2) return { score, label: 'Weak', color: 'bg-red-500' };
+  if (score <= 4) return { score, label: 'Fair', color: 'bg-yellow-500' };
+  return { score, label: 'Strong', color: 'bg-green-500' };
+}
+
+export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizardProps) {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState('');
+  const [done, setDone] = useState(false);
+
+  const strength = passwordStrength(password);
+  const passwordsMatch = password === confirmPassword;
+  const canSubmit = name.trim() && email.trim() && password.length >= 12 && passwordsMatch && !submitting;
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!canSubmit) return;
+
+    setError('');
+    setSubmitting(true);
+
+    try {
+      const result = await onComplete({
+        name: name.trim(),
+        email: email.trim(),
+        password,
+      });
+
+      if (result.success) {
+        setDone(true);
+      } else {
+        setError(result.error ?? 'Failed to create admin account');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An unexpected error occurred');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (done) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
+        <div className="w-full max-w-md text-center">
+          <div className="mx-auto mb-6 w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
+            <CheckCircle2 className="w-8 h-8 text-green-600" />
+          </div>
+          <h1 className="text-2xl font-bold text-gray-900 mb-2">Setup Complete</h1>
+          <p className="text-gray-600 mb-6">
+            Your admin account has been created. You can now sign in to manage your content.
+          </p>
+          <button
+            onClick={() => window.location.reload()}
+            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
+          >
+            Go to Login
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  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">Welcome to {siteName}</h1>
+          <p className="text-gray-600 mt-2">Create your admin account to get started</p>
+        </div>
+
+        <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" />
+              <p className="text-sm text-red-800">{error}</p>
+            </div>
+          )}
+
+          <div>
+            <label htmlFor="setup-name" className="block text-sm font-medium text-gray-700 mb-1.5">Full Name</label>
+            <input
+              id="setup-name"
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Jane Smith"
+              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="name"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="setup-email" className="block text-sm font-medium text-gray-700 mb-1.5">Email Address</label>
+            <input
+              id="setup-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
+              autoComplete="email"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="setup-password" className="block text-sm font-medium text-gray-700 mb-1.5">Password</label>
+            <div className="relative">
+              <input
+                id="setup-password"
+                type={showPassword ? 'text' : 'password'}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Minimum 12 characters"
+                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
+                minLength={12}
+                autoComplete="new-password"
+              />
+              <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 && (
+              <div className="mt-2">
+                <div className="flex items-center gap-2">
+                  <div className="flex-1 h-1.5 bg-gray-200 rounded-full overflow-hidden">
+                    <div
+                      className={`h-full rounded-full transition-all ${strength.color}`}
+                      style={{ width: `${(strength.score / 6) * 100}%` }}
+                    />
+                  </div>
+                  <span className="text-xs text-gray-600">{strength.label}</span>
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div>
+            <label htmlFor="setup-confirm" className="block text-sm font-medium text-gray-700 mb-1.5">Confirm Password</label>
+            <input
+              id="setup-confirm"
+              type={showPassword ? 'text' : 'password'}
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="Re-enter your password"
+              className={`w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
+                confirmPassword && !passwordsMatch ? 'border-red-300' : 'border-gray-300'
+              }`}
+              required
+              autoComplete="new-password"
+            />
+            {confirmPassword && !passwordsMatch && (
+              <p className="text-xs text-red-600 mt-1">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"
+          >
+            {submitting ? 'Creating Account...' : 'Create Admin Account'}
+          </button>
+
+          <p className="text-xs text-gray-500 text-center">
+            This form is only available during initial setup. Once an admin account exists, it will be replaced by the login screen.
+          </p>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/views/Users.tsx

@@ -0,0 +1,282 @@
+'use client';
+
+import * as Dialog from '@radix-ui/react-dialog';
+import { Pencil, Trash2, UserPlus, Search, ArrowUpDown, ArrowUp, ArrowDown, Loader2, AlertTriangle } from 'lucide-react';
+import { useState, useMemo, type FormEvent } from 'react';
+import { toast } from 'sonner';
+import { sortByRelevance, type SortConfig, toggleSort } from '../lib/search.js';
+import { useApiData } from '../lib/useApiData.js';
+import { cmsApi } from '../lib/api.js';
+
+type UserSortKey = 'name' | 'role' | 'status' | 'lastLogin';
+
+export interface UsersProps {
+  onNavigate?: (path: string) => void;
+}
+
+export function Users({ onNavigate }: UsersProps) {
+  const { data, loading, error, refetch } = useApiData<any[]>('/users');
+  const [showInviteDialog, setShowInviteDialog] = useState(false);
+  const [inviteEmail, setInviteEmail] = useState('');
+  const [inviteRole, setInviteRole] = useState('editor');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filterRole, setFilterRole] = useState('all');
+  const [sortConfig, setSortConfig] = useState<SortConfig<UserSortKey> | null>(null);
+
+  const users = data ?? [];
+
+  const filteredAndSorted = useMemo(() => {
+    let results = users.filter((user: any) => {
+      const matchesSearch =
+        user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        user.email.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesRole = filterRole === 'all' || user.role.toLowerCase() === filterRole.toLowerCase();
+      return matchesSearch && matchesRole;
+    });
+
+    if (searchQuery.trim()) {
+      results = sortByRelevance(results, searchQuery, (u: any) => [u.name, u.email, u.role]);
+    } else if (sortConfig) {
+      results = [...results].sort((a: any, b: any) => {
+        const aVal = a[sortConfig.key] ?? '';
+        const bVal = b[sortConfig.key] ?? '';
+        const cmp = String(aVal).localeCompare(String(bVal));
+        return sortConfig.direction === 'asc' ? cmp : -cmp;
+      });
+    }
+    return results;
+  }, [users, searchQuery, filterRole, sortConfig]);
+
+  const handleInvite = (e: FormEvent) => {
+    e.preventDefault();
+    toast.success(`Invitation sent to ${inviteEmail}`);
+    setShowInviteDialog(false);
+    setInviteEmail('');
+    setInviteRole('editor');
+  };
+
+  const handleDelete = async (userId: number) => {
+    const res = await cmsApi(`/users/${userId}`, { method: 'DELETE' });
+    if (res.error) {
+      toast.error(res.error);
+    } else {
+      toast.success('User removed');
+      refetch();
+    }
+  };
+
+  function SortHeader({ label, sortKey }: { label: string; sortKey: UserSortKey }) {
+    const active = sortConfig?.key === sortKey;
+    return (
+      <button
+        type="button"
+        onClick={() => setSortConfig(toggleSort(sortConfig, sortKey))}
+        className="flex items-center gap-1 text-xs font-medium text-gray-700 hover:text-gray-900 transition-colors"
+      >
+        {label}
+        {active ? (
+          sortConfig!.direction === 'asc' ? <ArrowUp className="w-3 h-3" /> : <ArrowDown className="w-3 h-3" />
+        ) : (
+          <ArrowUpDown className="w-3 h-3 text-gray-400" />
+        )}
+      </button>
+    );
+  }
+
+  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 (
+    <div className="p-3 pr-6 sm:p-4 sm:pr-8">
+      {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>
+          <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>
+      )}
+
+      <div className="mb-4 flex items-center justify-between">
+        <div>
+          <h1 className="mb-1 text-2xl font-semibold text-gray-900">Users</h1>
+          <p className="text-sm text-gray-600">{filteredAndSorted.length} total users</p>
+        </div>
+        <button
+          type="button"
+          onClick={() => setShowInviteDialog(true)}
+          className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
+        >
+          <UserPlus className="h-4 w-4" />
+          Invite User
+        </button>
+      </div>
+
+      <div className="bg-white rounded-lg border border-gray-200 mb-4">
+        <div className="p-3 flex flex-col sm:flex-row gap-3">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+            <input
+              type="text"
+              placeholder="Search users by name or email..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          <select
+            value={filterRole}
+            onChange={(e) => setFilterRole(e.target.value)}
+            className="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="all">All Roles</option>
+            <option value="admin">Admin</option>
+            <option value="editor">Editor</option>
+            <option value="author">Author</option>
+            <option value="client">Client</option>
+          </select>
+        </div>
+      </div>
+
+      {filteredAndSorted.length === 0 && !loading ? (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-4">
+            <UserPlus className="w-6 h-6 text-gray-400" />
+          </div>
+          <h3 className="text-sm font-medium text-gray-900 mb-1">No users yet</h3>
+          <p className="text-sm text-gray-500">Invite your first user to get started.</p>
+        </div>
+      ) : (
+      <div className="rounded-lg border border-gray-200 bg-white">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="border-b border-gray-200 bg-gray-50">
+              <tr>
+                <th className="px-4 py-2 text-left"><SortHeader label="User" sortKey="name" /></th>
+                <th className="px-4 py-2 text-left"><SortHeader label="Role" sortKey="role" /></th>
+                <th className="px-4 py-2 text-left"><SortHeader label="Status" sortKey="status" /></th>
+                <th className="px-4 py-2 text-left"><SortHeader label="Last Active" sortKey="lastLogin" /></th>
+                <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200">
+              {filteredAndSorted.map((user: any) => (
+                <tr key={user.id} className="transition-colors hover:bg-gray-50">
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-3">
+                      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-linear-to-br from-blue-500 to-purple-600 text-sm font-medium text-white">
+                        {user.name.charAt(0)}
+                      </div>
+                      <div>
+                        <div className="text-sm font-medium text-gray-900">{user.name}</div>
+                        <div className="text-xs text-gray-600">{user.email}</div>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span
+                      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
+                        user.role === 'Admin'
+                          ? 'bg-purple-100 text-purple-800'
+                          : user.role === 'Editor'
+                            ? 'bg-blue-100 text-blue-800'
+                            : 'bg-gray-100 text-gray-800'
+                      }`}
+                    >
+                      {user.role}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span
+                      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
+                        user.status === 'Active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
+                      }`}
+                    >
+                      {user.status}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 text-sm text-gray-600">{user.lastLogin}</td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-2">
+                      <button
+                        type="button"
+                        onClick={() => onNavigate?.(`/users/${user.id}`)}
+                        className="rounded p-1.5 transition-colors hover:bg-gray-100"
+                        aria-label={`Edit ${user.name}`}
+                      >
+                        <Pencil className="h-4 w-4 text-gray-600" />
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => handleDelete(user.id)}
+                        className="rounded p-1.5 transition-colors hover:bg-gray-100"
+                        aria-label={`Remove ${user.name}`}
+                      >
+                        <Trash2 className="h-4 w-4 text-red-600" />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      )}
+
+      <Dialog.Root open={showInviteDialog} onOpenChange={setShowInviteDialog}>
+        <Dialog.Portal>
+          <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
+          <Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-lg">
+            <Dialog.Title className="mb-4 text-lg font-semibold text-gray-900">Invite User</Dialog.Title>
+            <form onSubmit={handleInvite} className="space-y-4">
+              <div>
+                <label className="mb-1 block text-sm font-medium text-gray-700">Email Address</label>
+                <input
+                  type="email"
+                  value={inviteEmail}
+                  onChange={(e) => setInviteEmail(e.target.value)}
+                  placeholder="user@example.com"
+                  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"
+                  required
+                />
+              </div>
+              <div>
+                <label className="mb-1 block text-sm font-medium text-gray-700">Role</label>
+                <select
+                  value={inviteRole}
+                  onChange={(e) => setInviteRole(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="viewer">Viewer</option>
+                  <option value="editor">Editor</option>
+                  <option value="admin">Admin</option>
+                </select>
+              </div>
+              <div className="flex items-center justify-end gap-3 pt-4">
+                <Dialog.Close asChild>
+                  <button
+                    type="button"
+                    className="rounded-lg border border-gray-300 px-4 py-2 text-sm transition-colors hover:bg-gray-50"
+                  >
+                    Cancel
+                  </button>
+                </Dialog.Close>
+                <button
+                  type="submit"
+                  className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
+                >
+                  Send Invite
+                </button>
+              </div>
+            </form>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </div>
+  );
+}