flarecms 0.1.0 → 0.1.2

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

@@ -1,154 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { apiFetch } from '../../lib/api';
-import { startRegistration } from '@simplewebauthn/browser';
-import { Button } from '../ui/button';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../ui/card';
-import { Badge } from '../ui/badge';
-import { Loader2Icon, ShieldCheckIcon, PlusIcon, MonitorIcon, SmartphoneIcon, Trash2Icon } from 'lucide-react';
-
-export function SecuritySection() {
-  const [passkeys, setPasskeys] = useState<any[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [registering, setRegistering] = useState(false);
-  const [error, setError] = useState('');
-  const [passkeyName, setPasskeyName] = useState('');
-
-  const fetchPasskeys = async () => {
-    const res = await apiFetch('/auth/passkeys');
-    if (res.ok) {
-      const result = await res.json();
-      setPasskeys(result.data);
-    }
-    setLoading(false);
-  };
-
-  useEffect(() => {
-    fetchPasskeys();
-  }, []);
-
-  const handleAddPasskey = async () => {
-    setRegistering(true);
-    setError('');
-    try {
-      // 1. Get options from backend
-      const optionsRes = await apiFetch('/auth/passkey/register/options', { method: 'POST' });
-      if (!optionsRes.ok) throw new Error('Failed to get registration options');
-      const optionsData = await optionsRes.json();
-      const options = optionsData.data;
-
-      // 2. Start registration on client
-      const attestationResponse = await startRegistration(options);
-
-      // 3. Verify on backend (include name)
-      const verifyRes = await apiFetch('/auth/passkey/register/verify', {
-        method: 'POST',
-        body: JSON.stringify({
-          ...attestationResponse,
-          name: passkeyName || undefined
-        }),
-      });
-
-      if (verifyRes.ok) {
-        setPasskeyName('');
-        fetchPasskeys();
-      } else {
-        const errorData = await verifyRes.json();
-        throw new Error(errorData.error || 'Verification failed');
-      }
-    } catch (err: any) {
-      setError(err.message);
-    } finally {
-      setRegistering(false);
-    }
-  };
-
-  const handleDelete = async (pkId: string) => {
-    if (!confirm('Revoke this security key? You will no longer be able to use it to sign in.')) return;
-    const res = await apiFetch(`/auth/passkey/${pkId}`, { method: 'DELETE' });
-    if (res.ok) fetchPasskeys();
-  };
-
-  if (loading) return <div className="flex items-center gap-2 text-muted-foreground"><Loader2Icon className="size-4 animate-spin" /> Loading security profile...</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">Passkeys</h3>
-          <p className="text-xs text-muted-foreground mt-2 leading-relaxed">Passkeys provide a high-security, passwordless authentication experience using biometric or hardware-bound keys.</p>
-        </div>
-        <div className="md:col-span-2 space-y-6">
-          <div className="space-y-4">
-            {passkeys.map((pk) => (
-              <div key={pk.id} className="bg-card border rounded-xl p-5 flex items-center justify-between group hover:border-primary/20 transition-colors">
-                <div className="flex items-center gap-4">
-                  <div className="size-10 bg-muted/50 rounded-lg flex items-center justify-center border text-muted-foreground group-hover:text-primary transition-colors">
-                    {pk.device_type === 'singleDevice' ? <SmartphoneIcon className="size-5" /> : <MonitorIcon className="size-5" />}
-                  </div>
-                  <div>
-                    <div className="flex items-center gap-2">
-                       <p className="text-sm font-bold text-foreground">
-                        {pk.name || (pk.device_type === 'singleDevice' ? 'Handheld Decryptor' : 'Workstation Bound')}
-                       </p>
-                       <Badge variant="secondary" className="text-[9px] uppercase font-bold tracking-tighter h-4 px-1 leading-none">Secure</Badge>
-                    </div>
-                    <div className="flex items-center gap-2 mt-1">
-                       <span className="text-[10px] text-muted-foreground font-medium font-mono opacity-50 uppercase">{pk.id.substring(0, 16)}...</span>
-                       <span className="text-[10px] text-muted-foreground/30">•</span>
-                       <span className="text-[10px] text-muted-foreground font-medium uppercase tracking-tighter">
-                         Last active: {pk.last_used_at ? new Date(pk.last_used_at).toLocaleDateString() : 'Never'}
-                       </span>
-                    </div>
-                  </div>
-                </div>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive"
-                  onClick={() => handleDelete(pk.id)}
-                >
-                   <Trash2Icon className="size-4" />
-                </Button>
-              </div>
-            ))}
-
-            {passkeys.length === 0 && (
-              <div className="bg-muted/10 border border-dashed rounded-xl p-12 text-center flex flex-col items-center justify-center">
-                 <ShieldCheckIcon className="size-8 text-muted-foreground/30 mb-4" />
-                 <p className="text-sm font-semibold text-muted-foreground">No passkeys registered</p>
-                 <p className="text-[10px] text-muted-foreground/50 uppercase tracking-widest mt-1">Protect your account with modern credentials</p>
-              </div>
-            )}
-          </div>
-
-          <Button 
-            onClick={handleAddPasskey} 
-            disabled={registering}
-            className="w-full h-12 gap-2 font-bold uppercase tracking-widest text-[10px] transition-all hover:shadow-lg hover:shadow-primary/10"
-          >
-            {registering ? <Loader2Icon className="size-3 animate-spin" /> : <PlusIcon className="size-4" />}
-            Register New Security Key
-          </Button>
-          
-          {error && <p className="text-[11px] text-destructive font-medium text-center">{error}</p>}
-        </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">Advanced Protection</h3>
-          <p className="text-xs text-muted-foreground mt-2 leading-relaxed">Additional controls to manage session persistence and security levels.</p>
-        </div>
-        <div className="md:col-span-2 space-y-4">
-           {/* Placeholder for more security settings */}
-           <div className="bg-muted/5 border rounded-lg p-4 opacity-50 cursor-not-allowed">
-              <div className="flex items-center justify-between">
-                 <span className="text-xs font-bold uppercase tracking-widest">Multi-Factor Enforcement</span>
-                 <div className="size-4 rounded-full border border-muted-foreground/30" />
-              </div>
-           </div>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,200 +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 { Textarea } from '../ui/textarea';
-import { Loader2Icon, SaveIcon, Share2Icon } from 'lucide-react';
-import { updateSettingsLocally } from '../../store/settings';
-
-export function SEOSection() {
-  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 SEO
-        architecture...
-      </div>
-    );
-
-  return (
-    <div className="space-y-12">
-      <form onSubmit={handleSave} className="space-y-12">
-        {/* Indexing & Search */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          <div>
-            <h3 className="text-sm font-bold uppercase tracking-widest text-foreground">
-              Indexing & Search
-            </h3>
-            <p className="text-xs text-muted-foreground mt-2 leading-relaxed">
-              Configure how search engines discover and rank your content.
-            </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">
-                  Global Meta Description
-                </Label>
-                <Textarea
-                  value={settings['flare:seo_meta_description'] || ''}
-                  onChange={(e) =>
-                    update('flare:seo_meta_description', e.target.value)
-                  }
-                  placeholder="The definitive guide to your platform..."
-                  className="min-h-[100px] resize-none"
-                />
-                <p className="text-[9px] text-muted-foreground italic">
-                  Fallback description for pages without explicit meta content.
-                </p>
-              </div>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                <div className="grid gap-2">
-                  <Label className="text-[10px] font-black uppercase tracking-widest opacity-50">
-                    Google Verification
-                  </Label>
-                  <Input
-                    value={settings['flare:seo_google_verification'] || ''}
-                    onChange={(e) =>
-                      update('flare:seo_google_verification', e.target.value)
-                    }
-                    placeholder="xv...7"
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label className="text-[10px] font-black uppercase tracking-widest opacity-50">
-                    Bing Verification
-                  </Label>
-                  <Input
-                    value={settings['flare:seo_bing_verification'] || ''}
-                    onChange={(e) =>
-                      update('flare:seo_bing_verification', e.target.value)
-                    }
-                    placeholder="89...A"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Social Presence */}
-        <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">
-              Social Presence
-            </h3>
-            <p className="text-xs text-muted-foreground mt-2 leading-relaxed">
-              Override how your content appears when shared across social
-              networks.
-            </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 flex items-center gap-2">
-                  <Share2Icon className="size-3 text-primary" />
-                  Default Social Share Image (OG)
-                </Label>
-                <Input
-                  value={settings['flare:seo_og_image'] || ''}
-                  onChange={(e) => update('flare:seo_og_image', e.target.value)}
-                  placeholder="https://cdn.com/og-default.jpg"
-                />
-                <p className="text-[9px] text-muted-foreground italic">
-                  Recommended size: 1200x630px.
-                </p>
-              </div>
-              <div className="grid gap-2">
-                <Label className="text-[10px] font-black uppercase tracking-widest opacity-50">
-                  Twitter (@username)
-                </Label>
-                <Input
-                  value={settings['flare:seo_twitter_handle'] || ''}
-                  onChange={(e) =>
-                    update('flare:seo_twitter_handle', e.target.value)
-                  }
-                  placeholder="@flarecms"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Advanced SEO */}
-        <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">
-              Sitemap & Discovery
-            </h3>
-            <p className="text-xs text-muted-foreground mt-2 leading-relaxed">
-              Core automation handles for link integrity and crawling.
-            </p>
-          </div>
-          <div className="md:col-span-2 space-y-4">
-            <div className="bg-card border rounded-xl p-8 shadow-sm space-y-6">
-              <div className="grid gap-2">
-                <Label className="text-[10px] font-black uppercase tracking-widest opacity-50">
-                  Robots.txt Payload
-                </Label>
-                <Textarea
-                  value={
-                    settings['flare:seo_robots_txt'] ||
-                    'User-agent: *\nAllow: /'
-                  }
-                  onChange={(e) =>
-                    update('flare:seo_robots_txt', e.target.value)
-                  }
-                  className="min-h-[120px] font-mono text-[11px]"
-                />
-              </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 SEO Schema
-          </Button>
-        </div>
-      </form>
-    </div>
-  );
-}

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

@@ -1,257 +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 {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../ui/select';
-import { Switch } from '../ui/switch';
-import {
-  Loader2Icon,
-  SaveIcon,
-  XIcon,
-  ShieldIcon,
-  GlobeIcon,
-  UserCheckIcon,
-} from 'lucide-react';
-import { updateSettingsLocally } from '../../store/settings';
-
-export function SignupSection() {
-  const [settings, setSettings] = useState<any>({});
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [newDomain, setNewDomain] = useState('');
-  const [newDomainRole, setNewDomainRole] = useState('viewer');
-
-  useEffect(() => {
-    const fetchSettings = async () => {
-      try {
-        const data = await api.get('/settings').json<any>();
-        setSettings(data);
-      } catch (err) {
-        console.error('Failed to load settings:', err);
-      } finally {
-        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) {
-      console.error('Failed to save settings:', err);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const update = (key: string, value: string) => {
-    setSettings((prev: any) => ({ ...prev, [key]: value }));
-  };
-
-  const domainRules = JSON.parse(
-    settings['flare:signup_domain_rules'] || '{}',
-  ) as Record<string, string>;
-
-  const addDomainRule = () => {
-    if (!newDomain) return;
-    const newRules = { ...domainRules, [newDomain]: newDomainRole };
-    update('flare:signup_domain_rules', JSON.stringify(newRules));
-    setNewDomain('');
-  };
-
-  const removeDomainRule = (domain: string) => {
-    const newRules = { ...domainRules };
-    delete newRules[domain];
-    update('flare:signup_domain_rules', JSON.stringify(newRules));
-  };
-
-  if (loading)
-    return (
-      <div className="flex items-center gap-2 text-muted-foreground">
-        <Loader2Icon className="size-4 animate-spin" /> Loading
-        configurations...
-      </div>
-    );
-
-  return (
-    <div className="space-y-12">
-      <form onSubmit={handleSave} className="space-y-8">
-        {/* Registration Toggle */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          <div>
-            <h3 className="text-sm font-bold uppercase tracking-widest text-foreground">
-              Access Gate
-            </h3>
-            <p className="text-xs text-muted-foreground mt-2 leading-relaxed">
-              Determine if new users can register themselves or if the system
-              remains invite-only.
-            </p>
-          </div>
-          <div className="md:col-span-2 bg-card border rounded-xl p-8 shadow-sm">
-            <div className="flex items-center justify-between">
-              <div className="space-y-1">
-                <p className="text-sm font-bold text-foreground">
-                  Self-Registration Enabled
-                </p>
-                <p className="text-[10px] text-muted-foreground/60">
-                  If disabled, all signups will be rejected even from valid
-                  domains.
-                </p>
-              </div>
-              <Switch
-                checked={settings['flare:signup_enabled'] === 'true'}
-                onCheckedChange={(checked: boolean) =>
-                  update('flare:signup_enabled', String(checked))
-                }
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Domain Policies */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 border-t pt-8">
-          <div>
-            <h3 className="text-sm font-bold uppercase tracking-widest text-foreground">
-              Domain Intelligence
-            </h3>
-            <p className="text-xs text-muted-foreground mt-2 leading-relaxed">
-              Automate role assignment based on the user's verified email
-              domain.
-            </p>
-          </div>
-          <div className="md:col-span-2 space-y-6 bg-card border rounded-xl p-8 shadow-sm">
-            <div className="space-y-6">
-              <div className="grid gap-4">
-                <Label className="text-[10px] font-black uppercase tracking-widest opacity-50">
-                  Provisioning Rules
-                </Label>
-                <div className="flex flex-col sm:flex-row gap-3">
-                  <div className="flex-1 relative">
-                    <GlobeIcon className="absolute left-3 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground/40" />
-                    <Input
-                      value={newDomain}
-                      onChange={(e) => setNewDomain(e.target.value)}
-                      placeholder="company.com"
-                      className="pl-10 h-10"
-                    />
-                  </div>
-                  <Select
-                    value={newDomainRole}
-                    onValueChange={(v) => setNewDomainRole(v || 'viewer')}
-                  >
-                    <SelectTrigger className="w-full sm:w-[130px] h-10 font-bold text-[10px] uppercase">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="admin">Admin</SelectItem>
-                      <SelectItem value="editor">Editor</SelectItem>
-                      <SelectItem value="viewer">Viewer</SelectItem>
-                    </SelectContent>
-                  </Select>
-                  <Button
-                    type="button"
-                    variant="secondary"
-                    onClick={addDomainRule}
-                    className="h-10 uppercase font-black text-[10px] tracking-widest px-6 shrink-0"
-                  >
-                    Map Rule
-                  </Button>
-                </div>
-
-                <div className="space-y-2 mt-2">
-                  {Object.entries(domainRules).map(([domain, role]) => (
-                    <div
-                      key={domain}
-                      className="flex items-center justify-between p-3 rounded-lg border bg-muted/20 group"
-                    >
-                      <div className="flex items-center gap-3">
-                        <div className="size-8 rounded bg-background border flex items-center justify-center text-muted-foreground shadow-sm">
-                          <GlobeIcon className="size-4" />
-                        </div>
-                        <div>
-                          <p className="text-xs font-bold text-foreground">
-                            @{domain}
-                          </p>
-                          <p className="text-[10px] text-muted-foreground uppercase font-black tracking-widest opacity-50">
-                            Maps to {role}
-                          </p>
-                        </div>
-                      </div>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        onClick={() => removeDomainRule(domain)}
-                        className="size-8 text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity"
-                      >
-                        <XIcon className="size-3.5" />
-                      </Button>
-                    </div>
-                  ))}
-                  {Object.keys(domainRules).length === 0 && (
-                    <div className="text-center py-6 border-2 border-dashed rounded-xl opacity-20">
-                      <p className="text-[10px] font-black uppercase tracking-[0.2em]">
-                        No custom rules defined
-                      </p>
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              <div className="grid gap-2 max-w-[240px] pt-4 border-t border-border/50">
-                <Label className="text-[10px] font-black uppercase tracking-widest opacity-50 flex items-center gap-2">
-                  <UserCheckIcon className="size-3 text-primary opacity-50" />
-                  Fallback Default Role
-                </Label>
-                <Select
-                  value={settings['flare:signup_default_role'] || 'viewer'}
-                  onValueChange={(v: string) =>
-                    update('flare:signup_default_role', v)
-                  }
-                >
-                  <SelectTrigger className="h-10 font-bold uppercase text-[10px] tracking-widest">
-                    <SelectValue placeholder="Select Role" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="admin">Admin</SelectItem>
-                    <SelectItem value="editor">Editor</SelectItem>
-                    <SelectItem value="viewer">Viewer</SelectItem>
-                  </SelectContent>
-                </Select>
-                <p className="text-[10px] text-muted-foreground/60 italic leading-tight mt-1">
-                  Assigned to valid signups not matching specific domain rules.
-                </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 Access Policy
-          </Button>
-        </div>
-      </form>
-    </div>
-  );
-}