flarecms 0.1.0

package/src/client/pages/signup.tsx

@@ -0,0 +1,188 @@
+import React, { useState, useEffect } from 'react';
+import { $router, navigate } from '../store/router';
+import { $auth } from '../store/auth';
+import { apiFetch } from '../lib/api';
+import { LockIcon, MailIcon, Loader2Icon, UserIcon } from 'lucide-react';
+
+import { Button } from '../components/ui/button';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from '../components/ui/card';
+import { Input } from '../components/ui/input';
+import { Label } from '../components/ui/label';
+
+export function SignupPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [signupEnabled, setSignupEnabled] = useState(false);
+  const [checking, setChecking] = useState(true);
+
+  useEffect(() => {
+    async function checkAvailability() {
+      try {
+        const res = await apiFetch('/auth/registration-settings');
+        const { data } = await res.json();
+        setSignupEnabled(data.enabled === 'true');
+      } catch (err) {
+        setSignupEnabled(false);
+      } finally {
+        setChecking(false);
+      }
+    }
+    checkAvailability();
+  }, []);
+
+  const handleSignup = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      return setError('Passwords do not match');
+    }
+
+    setLoading(true);
+    setError('');
+
+    try {
+      const response = await apiFetch('/auth/signup', {
+        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: 'editor' },
+        });
+        navigate('home');
+      } else {
+        setError(data.error || 'Registration failed');
+      }
+    } catch (err) {
+      setError('Connection failed. Is the API running?');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (checking) return null;
+
+  return (
+    <div className="min-h-screen bg-background flex flex-col items-center justify-center p-6 antialiased">
+      <div className="w-full max-w-[360px] space-y-8">
+        <Card className="py-0 shadow-sm border-border">
+          <CardHeader className="space-y-1 pb-4 pt-8 px-8">
+            <CardTitle className="text-xl font-bold text-center tracking-tight">
+              Create Account
+            </CardTitle>
+            <CardDescription className="text-center text-[10px] text-muted-foreground uppercase font-semibold tracking-wider">
+              Join the high-speed CMS network
+            </CardDescription>
+          </CardHeader>
+          <form onSubmit={handleSignup}>
+            <CardContent className="space-y-4 px-8 pb-8 pt-2">
+              <div className="space-y-2">
+                <Label
+                  htmlFor="email"
+                  className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground"
+                >
+                  Email Address
+                </Label>
+                <div className="relative">
+                  <MailIcon className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/50" />
+                  <Input
+                    id="email"
+                    type="email"
+                    placeholder="name@company.com"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="pl-10 h-10 text-sm"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label
+                  htmlFor="password"
+                  className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground"
+                >
+                  Password
+                </Label>
+                <div className="relative">
+                  <LockIcon className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/50" />
+                  <Input
+                    id="password"
+                    type="password"
+                    placeholder="Min. 6 characters"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="pl-10 h-10 text-sm"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label
+                  htmlFor="confirm"
+                  className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground"
+                >
+                  Confirm Password
+                </Label>
+                <div className="relative">
+                  <LockIcon className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/50" />
+                  <Input
+                    id="confirm"
+                    type="password"
+                    placeholder="********"
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    className="pl-10 h-10 text-sm"
+                    required
+                  />
+                </div>
+              </div>
+
+              {error && (
+                <div className="p-3 rounded-md bg-destructive/10 border border-destructive/20 text-destructive text-[11px] font-medium text-center">
+                  {error}
+                </div>
+              )}
+            </CardContent>
+            <CardFooter className="flex flex-col gap-3 px-8 pb-8">
+              <Button
+                type="submit"
+                className="w-full h-10 font-bold text-xs uppercase tracking-widest active:scale-95 transition-transform"
+                disabled={loading}
+              >
+                {loading ? (
+                  <Loader2Icon className="mr-2 size-4 animate-spin" />
+                ) : (
+                  'Deploy Account'
+                )}
+              </Button>
+
+              <button
+                type="button"
+                onClick={() => navigate('login')}
+                className="text-[10px] text-muted-foreground font-semibold uppercase tracking-widest hover:text-foreground transition-colors mt-2"
+              >
+                Already have an account? Sign In
+              </button>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/src/client/store/auth.ts

@@ -0,0 +1,30 @@
+import { atom } from 'nanostores';
+import { persistentAtom } from '@nanostores/persistent';
+
+export interface AuthState {
+  token: string | null;
+  user: {
+    email: string;
+    role: string;
+  } | null;
+}
+
+// Persist token in localStorage
+export const $auth = persistentAtom<AuthState>('flare:auth', {
+  token: null,
+  user: null
+}, {
+  encode: JSON.stringify,
+  decode: JSON.parse
+});
+
+export const login = (token: string, email: string) => {
+  $auth.set({
+    token,
+    user: { email, role: 'admin' }
+  });
+};
+
+export const logout = () => {
+  $auth.set({ token: null, user: null });
+};

package/src/client/store/collections.ts

@@ -0,0 +1,13 @@
+import { createFetcherStore, createMutatorStore } from './fetcher';
+import { api } from '../lib/api';
+import type { Collection } from '../types';
+
+export const $collections = createFetcherStore<Collection[]>(['/api/collections']);
+
+export const $createCollection = createMutatorStore<Partial<Collection>, Collection>(
+  async ({ data, invalidate }) => {
+    const json = await api.post('api/collections', { json: data }).json<Collection>();
+    invalidate('/api/collections');
+    return json;
+  }
+);

package/src/client/store/config.ts

@@ -0,0 +1,12 @@
+import { atom } from 'nanostores';
+
+export const $basePath = atom('/admin');
+export const $apiBaseUrl = atom('/api');
+
+export function setBase(base: string) {
+  $basePath.set(base === '/' ? '' : base);
+}
+
+export function setApiBaseUrl(url: string) {
+  $apiBaseUrl.set(url);
+}

package/src/client/store/fetcher.ts

@@ -0,0 +1,30 @@
+import { nanoquery } from '@nanostores/query';
+import { $auth } from './auth';
+import { api } from '../lib/api';
+import { $apiBaseUrl } from './config';
+
+export const [createFetcherStore, createMutatorStore] = nanoquery({
+  fetcher: (...keys) => {
+    const apiBase = $apiBaseUrl.get();
+    let path = keys.join('');
+    
+    // Ensure path doesn't duplicate prefix if keys already contain it
+    if (path.startsWith(apiBase)) {
+      path = path.replace(apiBase, '');
+    }
+
+    return api.get(path).json().then((json: any) => {
+      // Automatically unwrap the .data property from our standardized API response
+      if (json && typeof json === 'object' && 'data' in json && !('error' in json)) {
+        return json.data;
+      }
+      
+      // If the API returned an error object but 2xx (rare), treat as error to prevent crashes
+      if (json && typeof json === 'object' && 'error' in json) {
+        throw new Error(json.error);
+      }
+
+      return json;
+    });
+  },
+});

package/src/client/store/router.ts

@@ -0,0 +1,95 @@
+import { createRouter, openPage, redirectPage, type Page, type Router } from '@nanostores/router';
+import { map } from 'nanostores';
+
+const ROUTE_PATTERNS = {
+  home: '',
+  setup: '/setup',
+  login: '/login',
+  signup: '/signup',
+  collections: '/collections',
+  users: '/users',
+  settings: '/settings',
+  settings_general: '/settings/general',
+  settings_seo: '/settings/seo',
+  settings_security: '/settings/security',
+  settings_signup: '/settings/signup',
+  settings_api: '/settings/api',
+  device: '/device',
+  collection: '/collection/:id/:slug',
+  document_list: '/:slug',
+  document_edit: '/:slug/:id',
+} as const;
+
+type RoutePatterns = typeof ROUTE_PATTERNS;
+type RouteName = keyof RoutePatterns;
+
+// Global reference to the internal nanostores-router instance
+let internalRouter: Router<RoutePatterns> | null = null;
+
+// The public store that components consume. 
+// It mirrors the state of the active internal router.
+// We initialize it with a safe default state.
+export const $router = map<Page<RoutePatterns>>({
+  route: 'home',
+  path: '/',
+  params: {} as any,
+  search: {},
+  hash: '',
+});
+
+/**
+ * Initializes the router with a specific base path.
+ */
+export function initRouter(base: string) {
+  const prefix = base === '/' ? '' : base;
+
+  // We cast to any here only because we are dynamically building the object keys,
+  // but the resulting structure is guaranteed to match RoutePatterns.
+  const patterns = {} as any;
+  for (const name of Object.keys(ROUTE_PATTERNS) as RouteName[]) {
+    const path = ROUTE_PATTERNS[name];
+    patterns[name] = name === 'home' ? (prefix || '/') : `${prefix}${path}`;
+  }
+
+  // Create new underlying router
+  internalRouter = createRouter<RoutePatterns>(patterns);
+
+  // Sync internal router state to our public $router map
+  internalRouter.subscribe((state) => {
+    if (state) {
+      $router.set(state as Page<RoutePatterns>);
+    }
+  });
+
+  return internalRouter;
+}
+
+/**
+ * Navigate to a named route.
+ */
+export function navigate<T extends RouteName>(
+  route: T,
+  params?: any,
+  search?: Record<string, string | number>
+) {
+  if (!internalRouter) {
+    console.warn('Router not initialized.');
+    return;
+  }
+  openPage(internalRouter, route, params, search as any);
+}
+
+/**
+ * Redirect to a named route.
+ */
+export function redirect<T extends RouteName>(
+  route: T,
+  params?: any,
+  search?: Record<string, string | number>
+) {
+  if (!internalRouter) return;
+  redirectPage(internalRouter, route, params, search as any);
+}
+
+// Default initialization
+initRouter('');

package/src/client/store/schema.ts

@@ -0,0 +1,39 @@
+import { atom } from 'nanostores';
+import { createFetcherStore, createMutatorStore } from './fetcher';
+import { apiFetch } from '../lib/api';
+import type { CollectionSchema, Field } from '../types';
+
+export const $activeSlug = atom<string | null>(null);
+
+export const $schema = createFetcherStore<CollectionSchema>([
+  '/api/collections/',
+  $activeSlug,
+  '/schema'
+]);
+
+export const $addField = createMutatorStore<Partial<Field> & { collectionSlug: string }, Field>(
+  async ({ data, invalidate }) => {
+    const { collectionId, collectionSlug, ...fieldData } = data;
+    const response = await apiFetch(`/collections/${collectionId}/fields`, {
+      method: 'POST',
+      body: JSON.stringify(fieldData),
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!response.ok) throw new Error('Failed to add field');
+    
+    // Invalidate the schema cache
+    invalidate(`/api/collections/${collectionSlug}/schema`); 
+    const result = await response.json();
+    return result.data;
+  }
+);
+
+export const $reloadSchema = () => {
+  const slug = $activeSlug.get();
+  if (slug) {
+    // We can't easily invalidate from here without the invalidate function from mutate
+    // But we can trigger a refresh by setting active slug to null and back
+    $activeSlug.set(null);
+    setTimeout(() => $activeSlug.set(slug), 10);
+  }
+};

package/src/client/store/settings.ts

@@ -0,0 +1,31 @@
+import { map } from 'nanostores';
+import { apiFetch } from '../lib/api';
+
+export interface Settings {
+  [key: string]: string;
+}
+
+export const $settings = map<Settings>({});
+
+export async function loadSettings() {
+  try {
+    const res = await apiFetch('/settings');
+    if (res.ok) {
+      const { data } = await res.json();
+      $settings.set(data);
+    }
+  } catch (err) {
+    console.error('Failed to load settings:', err);
+  }
+}
+
+export function updateSettingsLocally(newSettings: Settings) {
+  $settings.set({
+    ...$settings.get(),
+    ...newSettings
+  });
+}
+
+export function getSetting(key: string, fallback: string = ''): string {
+  return $settings.get()[key] || fallback;
+}

package/src/client/types.ts

@@ -0,0 +1,34 @@
+export interface Collection {
+  id: string;
+  slug: string;
+  label: string;
+  label_singular: string | null;
+  description: string | null;
+  icon: string | null;
+  is_public: number;
+  features: string[];
+  url_pattern: string | null;
+  createdAt: string;
+}
+
+export interface Field {
+  id: string;
+  collectionId: string;
+  label: string;
+  slug: string;
+  type: 'text' | 'richtext' | 'number' | 'boolean' | 'date';
+  required: boolean;
+  createdAt: string;
+}
+
+export interface CollectionSchema extends Collection {
+  fields: Field[];
+}
+
+export interface ContentEntry {
+  id: string;
+  slug: string;
+  createdAt: Date | string;
+  updatedAt: Date | string;
+  [key: string]: any; // Content entries are dynamic by nature
+}

package/src/db/dynamic.ts

@@ -0,0 +1,70 @@
+import { sql } from "kysely";
+import type { FlareDb } from "./index";
+
+export const FIELD_TYPE_MAP: Record<string, string> = {
+  text: "TEXT",
+  number: "REAL",
+  integer: "INTEGER",
+  boolean: "INTEGER",
+  json: "TEXT",
+  date: "TEXT",
+};
+
+export async function createCollectionTable(db: FlareDb, slug: string) {
+  const tableName = `ec_${slug}`;
+  
+  // Basic content table structure
+  // id (ULID), slug, status, created_at, updated_at are standard
+  await sql.raw(`
+    CREATE TABLE IF NOT EXISTS ${tableName} (
+      id TEXT PRIMARY KEY,
+      slug TEXT NOT NULL,
+      status TEXT NOT NULL DEFAULT 'draft',
+      created_at TEXT DEFAULT CURRENT_TIMESTAMP,
+      updated_at TEXT DEFAULT CURRENT_TIMESTAMP
+    )
+  `).execute(db);
+
+  // Add an index on slug
+  await sql.raw(`CREATE UNIQUE INDEX IF NOT EXISTS idx_${tableName}_slug ON ${tableName} (slug)`).execute(db);
+}
+
+export async function addFieldToTable(db: FlareDb, collectionSlug: string, fieldSlug: string, type: string) {
+  const tableName = `ec_${collectionSlug}`;
+  const columnType = FIELD_TYPE_MAP[type] || "TEXT";
+  
+  await sql.raw(`ALTER TABLE ${tableName} ADD COLUMN ${fieldSlug} ${columnType}`).execute(db);
+}
+
+export async function ensureUniqueSlug(
+  db: FlareDb, 
+  collectionName: string, 
+  baseSlug: string, 
+  excludeId?: string
+): Promise<string> {
+  let slug = baseSlug;
+  let counter = 0;
+  let exists = true;
+
+  while (exists) {
+    const currentSlug = counter === 0 ? slug : `${slug}-${counter}`;
+    let query = db.selectFrom(`ec_${collectionName}` as any)
+      .select('id')
+      .where('slug', '=', currentSlug)
+      .where('status', '!=', 'deleted');
+    
+    if (excludeId) {
+      query = query.where('id', '!=', (excludeId as any));
+    }
+
+    const collision = await query.executeTakeFirst();
+
+    if (!collision) {
+      return currentSlug;
+    }
+    counter++;
+    if (counter > 100) break; // Safety break
+  }
+  return `${slug}-${Math.random().toString(36).substring(2, 7)}`;
+}
+

package/src/db/index.ts

@@ -0,0 +1,16 @@
+import { Kysely } from "kysely";
+import { D1Dialect } from "kysely-d1";
+import type { Database } from "./schema";
+import type { D1Database } from "@cloudflare/workers-types";
+
+export * from "./schema";
+export * from "./dynamic";
+export * from "./migrator";
+
+export const createDb = (d1: D1Database) => {
+  return new Kysely<Database>({
+    dialect: new D1Dialect({ database: d1 }),
+  });
+};
+
+export type FlareDb = ReturnType<typeof createDb>;

package/src/db/migrations/001_initial_schema.ts

@@ -0,0 +1,57 @@
+import { Kysely, sql } from 'kysely';
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await db.schema
+    .createTable('options')
+    .ifNotExists()
+    .addColumn('name', 'text', (col) => col.primaryKey())
+    .addColumn('value', 'text', (col) => col.notNull())
+    .execute();
+
+  await db.schema
+    .createTable('fc_users')
+    .ifNotExists()
+    .addColumn('id', 'text', (col) => col.primaryKey())
+    .addColumn('email', 'text', (col) => col.unique().notNull())
+    .addColumn('password', 'text')
+    .addColumn('role', 'text', (col) => col.notNull().defaultTo('admin'))
+    .addColumn('disabled', 'integer', (col) => col.defaultTo(0))
+    .addColumn('created_at', 'text', (col) => col.defaultTo(sql`CURRENT_TIMESTAMP`))
+    .addColumn('updated_at', 'text', (col) => col.defaultTo(sql`CURRENT_TIMESTAMP`))
+    .execute();
+
+  await db.schema
+    .createTable('fc_collections')
+    .ifNotExists()
+    .addColumn('id', 'text', (col) => col.primaryKey())
+    .addColumn('slug', 'text', (col) => col.unique().notNull())
+    .addColumn('label', 'text', (col) => col.notNull())
+    .addColumn('label_singular', 'text')
+    .addColumn('description', 'text')
+    .addColumn('icon', 'text')
+    .addColumn('is_public', 'integer', (col) => col.defaultTo(0))
+    .addColumn('features', 'text') // JSON array
+    .addColumn('url_pattern', 'text')
+    .addColumn('created_at', 'text', (col) => col.defaultTo(sql`CURRENT_TIMESTAMP`))
+    .addColumn('updated_at', 'text', (col) => col.defaultTo(sql`CURRENT_TIMESTAMP`))
+    .execute();
+
+  await db.schema
+    .createTable('fc_fields')
+    .ifNotExists()
+    .addColumn('id', 'text', (col) => col.primaryKey())
+    .addColumn('collection_id', 'text', (col) => col.notNull())
+    .addColumn('label', 'text', (col) => col.notNull())
+    .addColumn('slug', 'text', (col) => col.notNull())
+    .addColumn('type', 'text', (col) => col.notNull())
+    .addColumn('required', 'integer', (col) => col.defaultTo(0))
+    .addColumn('created_at', 'text', (col) => col.defaultTo(sql`CURRENT_TIMESTAMP`))
+    .execute();
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+  await db.schema.dropTable('options').ifExists().execute();
+  await db.schema.dropTable('fc_users').ifExists().execute();
+  await db.schema.dropTable('fc_collections').ifExists().execute();
+  await db.schema.dropTable('fc_fields').ifExists().execute();
+}