flarecms 0.1.0

package/src/client/pages/login.tsx

@@ -0,0 +1,345 @@
+import { apiFetch } from '../lib/api';
+import { $auth } from '../store/auth';
+import { $router, navigate } from '../store/router';
+import { $basePath } from '../store/config';
+import { startAuthentication } from '@simplewebauthn/browser';
+import {
+  Command,
+  FingerprintIcon,
+  KeyIcon,
+  Loader2Icon,
+  LockIcon,
+  MailIcon,
+  ShieldCheckIcon,
+} from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+
+import { Button } from '../components/ui/button';
+import { Card, CardContent, CardFooter } from '../components/ui/card';
+import { Input } from '../components/ui/input';
+import { Label } from '../components/ui/label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs';
+
+export function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [passkeyLoading, setPasskeyLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [signupEnabled, setSignupEnabled] = useState(false);
+  const [activeTab, setActiveTab] = useState('credentials');
+
+  useEffect(() => {
+    async function checkSignup() {
+      try {
+        const res = await apiFetch('/auth/registration-settings');
+        const { data } = await res.json();
+        setSignupEnabled(data.enabled === 'true');
+      } catch (err) {
+        setSignupEnabled(false);
+      }
+    }
+    checkSignup();
+  }, []);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      const response = await apiFetch('/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        $auth.set({
+          token: data.data.token || 'cookie',
+          user: data.data.user || { email, role: 'admin' },
+        });
+      } else {
+        if (data.code === 'SETUP_REQUIRED') {
+          window.location.href = `${$basePath.get()}/setup`;
+          return;
+        }
+        setError(data.error || 'Invalid credentials');
+      }
+    } catch (err) {
+      setError('Connection failed. Is the API running?');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePasskeyLogin = async () => {
+    if (!email) {
+      setError('Enter your email to use Passkey login');
+      return;
+    }
+
+    setPasskeyLoading(true);
+    setError('');
+
+    try {
+      const optionsResponse = await apiFetch('/auth/passkey/options', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email }),
+      });
+
+      if (!optionsResponse.ok) {
+        const err = await optionsResponse.json();
+        throw new Error(err.error || 'Failed to get passkey options');
+      }
+
+      const data = await optionsResponse.json();
+      const asseResp = await startAuthentication({ optionsJSON: data.data });
+
+      const verifyResponse = await apiFetch('/auth/passkey/verify', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email,
+          response: asseResp,
+        }),
+      });
+
+      if (verifyResponse.ok) {
+        const data = await verifyResponse.json();
+        $auth.set({
+          token: 'cookie',
+          user: data.data.user || { email, role: 'admin' },
+        });
+      } else {
+        const err = await verifyResponse.json();
+        setError(err.error || 'Passkey verification failed');
+      }
+    } catch (err: any) {
+      console.error(err);
+      setError(err.message || 'Passkey authentication failed');
+    } finally {
+      setPasskeyLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[oklch(0.985_0_0)] flex flex-col items-center justify-center p-6 antialiased selection:bg-primary/10">
+      <div className="w-full max-w-[400px] space-y-6">
+        <div className="flex flex-col items-center gap-4 mb-2">
+          <div className="size-12 rounded-2xl bg-primary text-primary-foreground flex items-center justify-center shadow-2xl shadow-primary/20">
+            <ShieldCheckIcon className="size-6" />
+          </div>
+          <div className="text-center">
+            <h1 className="text-xl font-bold tracking-tight">Access Flare</h1>
+            <p className="text-[10px] text-muted-foreground uppercase font-bold tracking-widest mt-1 opacity-60">
+              Nexus Administrative Portal
+            </p>
+          </div>
+        </div>
+
+        <Card className="py-0 shadow-xl border-border/50 overflow-hidden bg-background/80 backdrop-blur-xl">
+          <Tabs
+            value={activeTab}
+            onValueChange={setActiveTab}
+            className="w-full"
+          >
+            <div className="px-8 pt-8">
+              <TabsList className="grid grid-cols-2 w-full h-11 bg-muted/30 p-1 rounded-xl">
+                <TabsTrigger
+                  value="credentials"
+                  className="text-[10px] font-bold uppercase tracking-wider gap-2"
+                >
+                  <KeyIcon className="size-3" />
+                  Credentials
+                </TabsTrigger>
+                <TabsTrigger
+                  value="passkey"
+                  className="text-[10px] font-bold uppercase tracking-wider gap-2"
+                >
+                  <FingerprintIcon className="size-3" />
+                  Secure Key
+                </TabsTrigger>
+              </TabsList>
+            </div>
+
+            <CardContent className="px-8 pt-6 pb-8 min-h-[220px]">
+              <TabsContent
+                value="credentials"
+                className="space-y-4 focus-visible:outline-none"
+              >
+                <form onSubmit={handleLogin} className="space-y-4">
+                  <div className="space-y-2">
+                    <Label
+                      htmlFor="email-cred"
+                      className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/70 ml-1"
+                    >
+                      Gateway Email
+                    </Label>
+                    <div className="relative group">
+                      <MailIcon className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/30 group-focus-within:text-primary transition-colors" />
+                      <Input
+                        id="email-cred"
+                        type="email"
+                        placeholder="name@nexus.io"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        className="pl-10 h-11 text-sm bg-muted/5 border-muted-foreground/10 focus:bg-background transition-all"
+                        required
+                      />
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between ml-1">
+                      <Label
+                        htmlFor="password"
+                        className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/70"
+                      >
+                        Authorization Key
+                      </Label>
+                      <button
+                        type="button"
+                        className="text-[9px] text-primary font-bold uppercase tracking-widest opacity-40 hover:opacity-100 transition-opacity"
+                      >
+                        Lost Access?
+                      </button>
+                    </div>
+                    <div className="relative group">
+                      <LockIcon className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/30 group-focus-within:text-primary transition-colors" />
+                      <Input
+                        id="password"
+                        type="password"
+                        placeholder="••••••••"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        className="pl-10 h-11 text-sm bg-muted/5 border-muted-foreground/10 focus:bg-background transition-all"
+                        required
+                      />
+                    </div>
+                  </div>
+
+                  {error && activeTab === 'credentials' && (
+                    <div className="p-3 rounded-lg bg-destructive/5 border border-destructive/10 text-destructive text-[10px] font-bold text-center uppercase tracking-widest">
+                      {error}
+                    </div>
+                  )}
+
+                  <Button
+                    type="submit"
+                    className="w-full h-11 font-black text-[10px] uppercase tracking-[0.2em] shadow-lg shadow-primary/20"
+                    disabled={loading}
+                  >
+                    {loading ? (
+                      <Loader2Icon className="size-4 animate-spin" />
+                    ) : (
+                      'Authorize Session'
+                    )}
+                  </Button>
+                </form>
+              </TabsContent>
+
+              <TabsContent
+                value="passkey"
+                className="space-y-6 focus-visible:outline-none"
+              >
+                <div className="space-y-4">
+                  <div className="space-y-2 text-center pb-2">
+                    <p className="text-[11px] text-muted-foreground font-medium leading-relaxed">
+                      Authenticate instantly using your device's biometric
+                      sensors or security key.
+                    </p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label
+                      htmlFor="email-pass"
+                      className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/70 ml-1"
+                    >
+                      Registered Email
+                    </Label>
+                    <div className="relative group">
+                      <MailIcon className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/30 group-focus-within:text-primary transition-colors" />
+                      <Input
+                        id="email-pass"
+                        type="email"
+                        placeholder="name@nexus.io"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        className="pl-10 h-11 text-sm bg-muted/5 border-muted-foreground/10 focus:bg-background transition-all"
+                      />
+                    </div>
+                  </div>
+
+                  {error && activeTab === 'passkey' && (
+                    <div className="p-3 rounded-lg bg-destructive/5 border border-destructive/10 text-destructive text-[10px] font-bold text-center uppercase tracking-widest">
+                      {error}
+                    </div>
+                  )}
+
+                  <div className="grid grid-cols-1 gap-3 pt-2">
+                    <Button
+                      type="button"
+                      className="w-full h-14 font-black text-[11px] uppercase tracking-[0.2em] shadow-lg shadow-primary/10 flex flex-col gap-1 items-center justify-center py-8"
+                      onClick={handlePasskeyLogin}
+                      disabled={passkeyLoading}
+                    >
+                      {passkeyLoading ? (
+                        <Loader2Icon className="size-5 animate-spin" />
+                      ) : (
+                        <>
+                          <FingerprintIcon className="size-6" />
+                          <span>Identify with Passkey</span>
+                        </>
+                      )}
+                    </Button>
+                  </div>
+                </div>
+              </TabsContent>
+            </CardContent>
+          </Tabs>
+
+          <CardFooter className="p-0 flex flex-col gap-6 px-8 pb-8 bg-muted/5 border-t border-muted-foreground/5">
+            <div className="relative w-full">
+              <div className="absolute inset-0 flex items-center">
+                <span className="w-full border-t border-muted-foreground/10" />
+              </div>
+              <div className="relative flex justify-center text-[9px] uppercase tracking-[0.3em]">
+                <span className="bg-background px-4 text-muted-foreground/40 font-bold">
+                  External Auth
+                </span>
+              </div>
+            </div>
+
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full h-11 text-[10px] font-bold uppercase tracking-widest flex gap-3 border-muted-foreground/20 hover:bg-background shadow-xs"
+              onClick={() => (window.location.href = '/api/oauth/github/login')}
+            >
+              <Command className="size-3.5" />
+              Continue with GitHub
+            </Button>
+
+            {signupEnabled && (
+              <div className="flex flex-col items-center gap-3 w-full">
+                <p className="text-[9px] text-muted-foreground/40 font-bold uppercase tracking-[0.2em]">
+                  New Administrator?
+                </p>
+                <Button
+                  variant="ghost"
+                  className="w-full h-11 text-[10px] font-black uppercase tracking-[0.2em] text-primary hover:bg-primary/5 border border-primary/20 border-dashed"
+                  onClick={() => navigate('signup')}
+                >
+                  Deploy New Identity
+                </Button>
+              </div>
+            )}
+          </CardFooter>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/src/client/pages/settings.tsx

@@ -0,0 +1,65 @@
+import { useStore } from '@nanostores/react';
+import { $router } from '../store/router';
+import { SettingsLayout } from '../layouts/settings-layout';
+import { GeneralSection } from '../components/settings/general-section';
+import { SEOSection } from '../components/settings/seo-section';
+import { SecuritySection } from '../components/settings/security-section';
+import { SignupSection } from '../components/settings/signup-section';
+import { APITokenSection } from '../components/settings/api-token-section';
+
+export function SettingsPage() {
+  const page = useStore($router);
+
+  if (!page) return null;
+
+  // Map routes to sections
+  switch (page.route) {
+    case 'settings_general':
+      return (
+        <SettingsLayout
+          title="General Configuration"
+          subtitle="Manage your platform's core identity and reading preferences."
+        >
+          <GeneralSection />
+        </SettingsLayout>
+      );
+    case 'settings_seo':
+      return (
+        <SettingsLayout
+          title="Search Engine Optimization"
+          subtitle="Optimize how your platform communicates with global indexers."
+        >
+          <SEOSection />
+        </SettingsLayout>
+      );
+    case 'settings_security':
+      return (
+        <SettingsLayout
+          title="Security & Access"
+          subtitle="Protect your administrative environment with modern credentials."
+        >
+          <SecuritySection />
+        </SettingsLayout>
+      );
+    case 'settings_signup':
+      return (
+        <SettingsLayout
+          title="Registration Policy"
+          subtitle="Control automated user onboarding and domain domain policies."
+        >
+          <SignupSection />
+        </SettingsLayout>
+      );
+    case 'settings':
+    case 'settings_api':
+    default:
+      return (
+        <SettingsLayout
+          title="Administrative API"
+          subtitle="Manage Personal Access Tokens for secure programmatic integration."
+        >
+          <APITokenSection />
+        </SettingsLayout>
+      );
+  }
+}

package/src/client/pages/setup.tsx

@@ -0,0 +1,129 @@
+import { useState } from 'react';
+import type { FormEvent } from 'react';
+import { apiFetch } from '../lib/api';
+import { $router } from '../store/router';
+import { $auth } from '../store/auth';
+import { $basePath } from '../store/config';
+
+export function SetupPage() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSetup = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    const formData = new FormData(e.currentTarget);
+    const title = formData.get('title');
+    const email = formData.get('email');
+    const password = formData.get('password');
+
+    try {
+      // 1. Run Setup (includes Migrations + Admin Creation + Auto-Login via Cookie)
+      const res = await apiFetch('/setup', {
+        method: 'POST',
+        body: JSON.stringify({ title, email, password }),
+        headers: { 'Content-Type': 'application/json' },
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.error || 'Failed to complete setup');
+      }
+
+      // 2. Auth store update (The API already sets the 'session' cookie)
+      // We set the email in store for UI purposes
+      $auth.set({
+        token: data.data.token || 'cookie',
+        user: data.data.user,
+      });
+
+      // 3. Mandatory Refresh
+      // Using window.location instead of $router.open to ensure a clean application boot
+      // after the database and settings have been initialized.
+      window.location.href = $basePath.get();
+    } catch (err: any) {
+      setError(err.message || 'An error occurred during setup');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-6">
+      <div className="max-w-md w-full border border-border/40 shadow-sm rounded-lg p-8 bg-card relative overflow-hidden">
+        {/* Subtle decorative grid/line background */}
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:14px_24px] pointer-events-none opacity-30"></div>
+
+        <div className="relative z-10">
+          <div className="text-center mb-8">
+            <h1 className="text-xl font-bold tracking-tight text-foreground">
+              Initial Setup
+            </h1>
+            <p className="text-[11px] font-semibold tracking-widest text-muted-foreground uppercase mt-2">
+              Configure FlareCMS Admin
+            </p>
+          </div>
+
+          {error && (
+            <div className="mb-6 p-3 bg-destructive/10 border border-destructive/20 rounded-md text-destructive text-[11px] uppercase tracking-wider font-semibold text-center">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSetup} className="space-y-5">
+            <div className="space-y-1.5">
+              <label className="text-[10px] uppercase tracking-widest text-muted-foreground font-semibold">
+                Site Title
+              </label>
+              <input
+                name="title"
+                type="text"
+                required
+                className="w-full bg-background border border-border/50 text-sm px-3 py-2 rounded-md focus:outline-none focus:border-primary/50 focus:ring-1 focus:ring-primary/50 transition-all font-mono"
+                placeholder="My CMS"
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <label className="text-[10px] uppercase tracking-widest text-muted-foreground font-semibold">
+                Admin Email
+              </label>
+              <input
+                name="email"
+                type="email"
+                required
+                className="w-full bg-background border border-border/50 text-sm px-3 py-2 rounded-md focus:outline-none focus:border-primary/50 focus:ring-1 focus:ring-primary/50 transition-all font-mono"
+                placeholder="admin@example.com"
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <label className="text-[10px] uppercase tracking-widest text-muted-foreground font-semibold">
+                Admin Password
+              </label>
+              <input
+                name="password"
+                type="password"
+                required
+                minLength={6}
+                className="w-full bg-background border border-border/50 text-sm px-3 py-2 rounded-md focus:outline-none focus:border-primary/50 focus:ring-1 focus:ring-primary/50 transition-all font-mono"
+                placeholder="Min 6 characters"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-primary text-primary-foreground font-semibold py-2.5 px-4 rounded-md text-xs tracking-wider uppercase hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 focus:ring-offset-background transition-all disabled:opacity-50 disabled:cursor-not-allowed mt-2"
+            >
+              {loading ? 'Configuring...' : 'Complete Setup'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}