flarecms 0.1.0 → 0.1.2

package/src/client/components/settings/api-token-section.tsx

@@ -1,400 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { api } from '../../lib/api';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Badge } from '../ui/badge';
-import { Checkbox } from '../ui/checkbox';
-import { Label } from '../ui/label';
-import {
-  Loader2Icon,
-  PlusIcon,
-  KeyIcon,
-  Trash2Icon,
-  CopyIcon,
-  CalendarIcon,
-  ShieldIcon,
-} from 'lucide-react';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '../ui/accordion';
-
-export function APITokenSection() {
-  const [tokens, setTokens] = useState<any[]>([]);
-  const [collections, setCollections] = useState<any[]>([]);
-  const [name, setName] = useState('');
-  const [granularScopes, setGranularScopes] = useState<any[]>([]); // Array of { resource, actions }
-  const [newToken, setNewToken] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [fetching, setFetching] = useState(true);
-
-  const systemResources = [
-    {
-      id: 'system.users',
-      label: 'Users & Roles',
-      desc: 'Manage administrative users',
-    },
-    {
-      id: 'system.settings',
-      label: 'Site Settings',
-      desc: 'Modify global configurations',
-    },
-    {
-      id: 'system.collections',
-      label: 'Schema Engine',
-      desc: 'Create and modify collections',
-    },
-  ];
-
-  const fetchTokens = async () => {
-    try {
-      const res = await api.get('/tokens');
-      const data = await res.json<any>();
-      setTokens(data.data || []);
-    } catch (err) {}
-    setFetching(false);
-  };
-
-  const fetchCollections = async () => {
-    try {
-      const res = await api.get('/collections');
-      const data = await res.json<any>();
-      setCollections(data.data || []);
-    } catch (err) {}
-  };
-
-  useEffect(() => {
-    fetchTokens();
-    fetchCollections();
-  }, []);
-
-  const handleCreate = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    setNewToken('');
-
-    try {
-      const res = await api
-        .post('/tokens', {
-          json: {
-            name,
-            scopes: granularScopes,
-          },
-        });
-      const data = await res.json<any>();
-      setNewToken(data.data.token);
-      setName('');
-      setGranularScopes([]);
-      fetchTokens();
-    } catch (err) {
-      console.error('Token creation failed:', err);
-      alert('Failed to generate token. Check console for details.');
-    }
-    setLoading(false);
-  };
-
-  const handleRevoke = async (id: string) => {
-    if (
-      !confirm(
-        'Revoke this access token? This action is immediate and permanent.',
-      )
-    )
-      return;
-    await api.delete(`/tokens/${id}`);
-    fetchTokens();
-  };
-
-  const togglePermission = (resource: string, action: string) => {
-    setGranularScopes((prev) => {
-      const existing = prev.find((s) => s.resource === resource);
-      if (existing) {
-        const newActions = existing.actions.includes(action)
-          ? existing.actions.filter((a: string) => a !== action)
-          : [...existing.actions, action];
-
-        if (newActions.length === 0)
-          return prev.filter((s) => s.resource !== resource);
-        return prev.map((s) =>
-          s.resource === resource ? { ...s, actions: newActions } : s,
-        );
-      }
-      return [...prev, { resource, actions: [action] }];
-    });
-  };
-
-  const isChecked = (resource: string, action: string) => {
-    return granularScopes
-      .find((s) => s.resource === resource)
-      ?.actions.includes(action);
-  };
-
-  if (fetching)
-    return (
-      <div className="flex items-center gap-2 text-muted-foreground">
-        <Loader2Icon className="size-4 animate-spin" /> Retrieving active
-        tokens...
-      </div>
-    );
-
-  return (
-    <div className="space-y-12">
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-        <div>
-          <h3 className="text-sm font-bold uppercase tracking-widest text-foreground">
-            Issue Credential
-          </h3>
-          <p className="text-xs text-muted-foreground mt-2 leading-relaxed">
-            Personal Access Tokens allow secure programmatic access for external
-            scripts and AI agents.
-          </p>
-        </div>
-        <div className="md:col-span-2 bg-card border rounded-xl overflow-hidden shadow-sm">
-          <form onSubmit={handleCreate} className="p-8 space-y-8">
-            <div className="space-y-4">
-              <div className="grid gap-2">
-                <Label className="text-[10px] font-black uppercase tracking-widest opacity-50">
-                  Token Designation
-                </Label>
-                <Input
-                  value={name}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    setName(e.target.value)
-                  }
-                  required
-                  placeholder="e.g. CI/CD Pipeline"
-                  className="h-11 font-medium"
-                />
-              </div>
-
-              <div className="grid gap-4 mt-6">
-                <Label className="text-[10px] font-black uppercase tracking-widest opacity-50">
-                  Permissions
-                </Label>
-
-                <Accordion className="w-full border rounded-lg bg-muted/5">
-                  {/* Content Collections */}
-                  <AccordionItem value="content" className="border-none px-4">
-                    <AccordionTrigger className="hover:no-underline py-4">
-                      <div className="flex items-center gap-3">
-                        <ShieldIcon className="size-4 text-primary" />
-                        <span className="text-xs font-bold uppercase tracking-wider">
-                          Content Collections
-                        </span>
-                      </div>
-                    </AccordionTrigger>
-                    {collections.length === 0 ? (
-                      <AccordionContent className="pb-6 space-y-4">
-                        <p className="text-xs text-center text-muted-foreground font-medium">
-                          No collections found
-                        </p>
-                      </AccordionContent>
-                    ) : (
-                      <AccordionContent className="pb-6 space-y-4">
-                        {collections.map((col) => (
-                          <div
-                            key={col.id}
-                            className="flex items-center justify-between p-3 rounded-lg border bg-background group"
-                          >
-                            <div className="space-y-0.5">
-                              <p className="text-xs font-bold capitalize">
-                                {col.label}
-                              </p>
-                              <p className="text-[9px] text-muted-foreground font-mono uppercase opacity-50">
-                                {col.slug}
-                              </p>
-                            </div>
-                            <div className="flex items-center gap-4">
-                              {['read', 'write', 'update', 'delete'].map(
-                                (action) => (
-                                  <label
-                                    key={action}
-                                    className="flex items-center gap-2 cursor-pointer group/label"
-                                  >
-                                    <Checkbox
-                                      checked={isChecked(col.slug, action)}
-                                      onCheckedChange={() =>
-                                        togglePermission(col.slug, action)
-                                      }
-                                    />
-                                    <span className="text-[10px] uppercase font-black tracking-tighter opacity-70 group-hover/label:opacity-100">
-                                      {action}
-                                    </span>
-                                  </label>
-                                ),
-                              )}
-                            </div>
-                          </div>
-                        ))}
-                      </AccordionContent>
-                    )}
-                  </AccordionItem>
-
-                  {/* System Resources */}
-                  <AccordionItem value="system" className="border-none px-4">
-                    <AccordionTrigger className="hover:no-underline py-4">
-                      <div className="flex items-center gap-3">
-                        <ShieldIcon className="size-4 text-primary" />
-                        <span className="text-xs font-bold uppercase tracking-wider">
-                          System Resources
-                        </span>
-                      </div>
-                    </AccordionTrigger>
-                    <AccordionContent className="pb-6 space-y-4">
-                      {systemResources.map((res) => (
-                        <div
-                          key={res.id}
-                          className="flex items-center justify-between p-3 rounded-lg border bg-background group"
-                        >
-                          <div className="space-y-0.5">
-                            <p className="text-xs font-bold">{res.label}</p>
-                            <p className="text-[9px] text-muted-foreground leading-tight">
-                              {res.desc}
-                            </p>
-                          </div>
-                          <div className="flex items-center gap-4">
-                            {['read', 'write', 'update'].map((action) => (
-                              <label
-                                key={action}
-                                className="flex items-center gap-2 cursor-pointer"
-                              >
-                                <Checkbox
-                                  checked={isChecked(res.id, action)}
-                                  onCheckedChange={() =>
-                                    togglePermission(res.id, action)
-                                  }
-                                />
-                                <span className="text-[10px] uppercase font-black tracking-tighter opacity-70">
-                                  {action}
-                                </span>
-                              </label>
-                            ))}
-                          </div>
-                        </div>
-                      ))}
-                    </AccordionContent>
-                  </AccordionItem>
-                </Accordion>
-              </div>
-            </div>
-
-            <Button
-              type="submit"
-              disabled={loading || !name || granularScopes.length === 0}
-              className="w-full h-11 gap-2 font-bold uppercase tracking-widest text-[10px]"
-            >
-              {loading ? (
-                <Loader2Icon className="size-3 animate-spin" />
-              ) : (
-                <PlusIcon className="size-4" />
-              )}
-              Generate Access Secret
-            </Button>
-
-            {newToken && (
-              <div className="mt-8 p-6 bg-primary/5 border border-primary/20 rounded-xl">
-                <div className="flex items-center gap-2 text-primary mb-3">
-                  <ShieldIcon className="size-4" />
-                  <p className="text-[11px] font-black uppercase tracking-widest">
-                    Secret Vaulted Successfully
-                  </p>
-                </div>
-                <div className="relative group">
-                  <code className="text-xs break-all text-foreground bg-background p-4 rounded-lg block border font-mono">
-                    {newToken}
-                  </code>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="absolute top-2 right-2 size-8 text-muted-foreground hover:text-primary"
-                    onClick={() => navigator.clipboard.writeText(newToken)}
-                  >
-                    <CopyIcon className="size-3.5" />
-                  </Button>
-                </div>
-                <p className="text-[10px] text-primary/70 font-bold uppercase mt-4 tracking-tighter italic">
-                  Warning: This secret will not be displayed again. Store it
-                  securely.
-                </p>
-              </div>
-            )}
-          </form>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 border-t pt-12">
-        <div>
-          <h3 className="text-sm font-bold uppercase tracking-widest text-foreground">
-            Active Ledger
-          </h3>
-          <p className="text-xs text-muted-foreground mt-2 leading-relaxed">
-            Review and manage active credentials for your account.
-          </p>
-        </div>
-        <div className="md:col-span-2 space-y-4">
-          {tokens.map((t: any) => (
-            <div
-              key={t.id}
-              className="bg-card border rounded-xl p-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6 group hover:border-primary/20 transition-colors"
-            >
-              <div className="space-y-2">
-                <div className="flex items-center gap-3">
-                  <div className="size-8 bg-primary/5 rounded flex items-center justify-center text-primary border border-primary/10">
-                    <KeyIcon className="size-4" />
-                  </div>
-                  <p className="text-sm font-bold text-foreground tracking-tight">
-                    {t.name}
-                  </p>
-                </div>
-                <div className="flex flex-wrap items-center gap-2 pl-1">
-                  <span className="text-[10px] font-mono text-muted-foreground uppercase opacity-50 px-1 border rounded">
-                    {t.id}
-                  </span>
-                  {Array.isArray(t.scopes) &&
-                    t.scopes.map((s: any, idx: number) => {
-                      const label =
-                        typeof s === 'string'
-                          ? s
-                          : `${s.resource}:${s.actions.join(',')}`;
-                      return (
-                        <Badge
-                          key={idx}
-                          variant="outline"
-                          className="text-[8px] uppercase font-bold tracking-widest px-1.5 h-4 border-primary/20 text-primary/60"
-                        >
-                          {label}
-                        </Badge>
-                      );
-                    })}
-                </div>
-                <div className="flex items-center gap-3 pl-1 pt-1 opacity-50">
-                  <div className="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-tighter text-muted-foreground">
-                    <CalendarIcon className="size-3" />
-                    Created: {new Date(t.created_at).toLocaleDateString()}
-                  </div>
-                </div>
-              </div>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => handleRevoke(t.id)}
-                className="text-[10px] font-black uppercase tracking-widest h-8 px-3 text-muted-foreground hover:bg-destructive/5 hover:text-destructive"
-              >
-                Revoke Access
-              </Button>
-            </div>
-          ))}
-
-          {tokens.length === 0 && (
-            <div className="text-center py-12 border-2 border-dashed rounded-xl opacity-30">
-              <p className="text-xs font-bold uppercase tracking-widest">
-                No active credentials recorded
-              </p>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/client/components/settings/general-section.tsx

@@ -1,224 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { api } from '../../lib/api';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Label } from '../ui/label';
-import { Switch } from '../ui/switch';
-import {
-  Loader2Icon,
-  SaveIcon,
-  LayoutIcon,
-  GlobeIcon,
-  SettingsIcon,
-  ShieldAlertIcon,
-} from 'lucide-react';
-import { updateSettingsLocally } from '../../store/settings';
-
-export function GeneralSection() {
-  const [settings, setSettings] = useState<any>({});
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-
-  useEffect(() => {
-    const fetchSettings = async () => {
-      try {
-        const data = await api.get('/settings').json<any>();
-        setSettings(data);
-      } catch (err) {}
-      setLoading(false);
-    };
-    fetchSettings();
-  }, []);
-
-  const handleSave = async (e?: React.FormEvent) => {
-    if (e) e.preventDefault();
-    setSaving(true);
-    try {
-      await api.patch('/api/settings', { json: settings });
-      updateSettingsLocally(settings);
-    } catch (err) {}
-    setSaving(false);
-  };
-
-  const update = (key: string, value: string) => {
-    setSettings((prev: any) => ({ ...prev, [key]: value }));
-  };
-
-  if (loading)
-    return (
-      <div className="flex items-center gap-2 text-muted-foreground">
-        <Loader2Icon className="size-4 animate-spin" /> Retrieving site
-        identity...
-      </div>
-    );
-
-  return (
-    <div className="space-y-12">
-      <form onSubmit={handleSave} className="space-y-12">
-        {/* Site Identity */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          <div>
-            <h3 className="text-sm font-bold uppercase tracking-widest text-foreground">
-              Site Identity
-            </h3>
-            <p className="text-xs text-muted-foreground mt-2 leading-relaxed">
-              Fundamental information used in headers, metadata, and browser
-              tabs.
-            </p>
-          </div>
-          <div className="md:col-span-2 space-y-6 bg-card border rounded-xl p-8 shadow-sm">
-            <div className="grid gap-6 sm:grid-cols-2">
-              <div className="grid gap-2">
-                <Label className="text-[10px] font-black uppercase tracking-widest opacity-50">
-                  Site Title
-                </Label>
-                <Input
-                  value={settings['flare:site_title'] || ''}
-                  onChange={(e) => update('flare:site_title', e.target.value)}
-                  placeholder="My Awesome Blog"
-                />
-              </div>
-              <div className="grid gap-2">
-                <Label className="text-[10px] font-black uppercase tracking-widest opacity-50">
-                  Tagline
-                </Label>
-                <Input
-                  value={settings['flare:site_tagline'] || ''}
-                  onChange={(e) => update('flare:site_tagline', e.target.value)}
-                  placeholder="Thoughts on the digital world"
-                />
-              </div>
-            </div>
-            <div className="grid gap-2">
-              <Label className="text-[10px] font-black uppercase tracking-widest opacity-50">
-                Base URL
-              </Label>
-              <Input
-                value={settings['flare:site_url'] || ''}
-                onChange={(e) => update('flare:site_url', e.target.value)}
-                placeholder="https://flarecms.dev"
-              />
-              <p className="text-[9px] text-muted-foreground italic">
-                Important for canonical links and XML sitemaps.
-              </p>
-            </div>
-          </div>
-        </div>
-
-        {/* Branding & Assets */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 border-t pt-12">
-          <div>
-            <h3 className="text-sm font-bold uppercase tracking-widest text-foreground">
-              Design Assets
-            </h3>
-            <p className="text-xs text-muted-foreground mt-2 leading-relaxed">
-              Visual identity markers for your public site and administrative
-              panel.
-            </p>
-          </div>
-          <div className="md:col-span-2 space-y-6 bg-card border rounded-xl p-8 shadow-sm">
-            <div className="grid gap-6">
-              <div className="grid gap-2">
-                <Label className="text-[10px] font-black uppercase tracking-widest opacity-50">
-                  Public Logo URL
-                </Label>
-                <Input
-                  value={settings['flare:site_logo'] || ''}
-                  onChange={(e) => update('flare:site_logo', e.target.value)}
-                  placeholder="https://cdn.com/logo.png"
-                />
-              </div>
-              <div className="grid gap-2">
-                <Label className="text-[10px] font-black uppercase tracking-widest opacity-50">
-                  Admin Panel Logo URL
-                </Label>
-                <Input
-                  value={settings['flare:admin_logo'] || ''}
-                  onChange={(e) => update('flare:admin_logo', e.target.value)}
-                  placeholder="https://cdn.com/admin-logo.png"
-                />
-              </div>
-              <div className="grid gap-2">
-                <Label className="text-[10px] font-black uppercase tracking-widest opacity-50">
-                  Favicon Shortcut URL
-                </Label>
-                <Input
-                  value={settings['flare:site_favicon'] || ''}
-                  onChange={(e) => update('flare:site_favicon', e.target.value)}
-                  placeholder="https://cdn.com/favicon.ico"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* System Operations */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 border-t pt-12">
-          <div>
-            <h3 className="text-sm font-bold uppercase tracking-widest text-foreground">
-              Operations
-            </h3>
-            <p className="text-xs text-muted-foreground mt-2 leading-relaxed">
-              Site-wide status and SEO architecture configuration.
-            </p>
-          </div>
-          <div className="md:col-span-2 space-y-6">
-            <div className="bg-card border rounded-xl p-8 shadow-sm space-y-6">
-              <div className="flex items-center justify-between">
-                <div className="space-y-1">
-                  <p className="text-sm font-bold text-foreground">
-                    Maintenance Mode
-                  </p>
-                  <p className="text-[10px] text-muted-foreground/60">
-                    Take your site offline for users while you work on it.
-                    Admins still have access.
-                  </p>
-                </div>
-                <Switch
-                  checked={settings['flare:signup_enabled'] === 'true'}
-                  onCheckedChange={(checked: boolean) =>
-                    update('flare:signup_enabled', String(checked))
-                  }
-                />
-              </div>
-
-              <div className="pt-6 border-t space-y-3">
-                <Label className="text-[10px] font-black uppercase tracking-widest opacity-50">
-                  Site Title SEO Pattern
-                </Label>
-                <Input
-                  value={
-                    settings['flare:site_title_pattern'] ||
-                    '%title% | %site_name%'
-                  }
-                  onChange={(e) =>
-                    update('flare:site_title_pattern', e.target.value)
-                  }
-                  placeholder="%title% | %site_name%"
-                />
-                <p className="text-[9px] text-muted-foreground/60">
-                  Supported vars: %title%, %site_name%, %tagline%
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="flex justify-end sticky bottom-0 py-4 bg-background/80 backdrop-blur-sm border-t mt-12">
-          <Button
-            disabled={saving}
-            size="sm"
-            className="gap-2 font-bold uppercase tracking-widest text-[10px] h-10 px-6"
-          >
-            {saving ? (
-              <Loader2Icon className="size-3 animate-spin" />
-            ) : (
-              <SaveIcon className="size-3" />
-            )}
-            Sync Site Identity
-          </Button>
-        </div>
-      </form>
-    </div>
-  );
-}