opacacms 0.1.0

package/src/admin/ui/views/global-edit-view.tsx

@@ -0,0 +1,226 @@
+import { useStore } from "@nanostores/react";
+import { AlertCircle, Loader2, Save } from "lucide-react";
+import { useEffect, useState } from "react";
+import { $globalData, $globalQuery, $saveGlobal } from "../../stores/admin-queries";
+import type { ToastType } from "../../stores/ui";
+import { notify } from "../../stores/ui";
+import { FieldRenderer } from "../components/fields";
+
+export interface GlobalEditViewProps {
+  global: {
+    slug: string;
+    label?: string;
+    fields: {
+      name?: string;
+      label?: string;
+      type: string;
+      defaultValue?: unknown;
+      required?: boolean;
+      options?: {
+        defaultMode?: "simple" | "notion";
+        [key: string]: unknown;
+      };
+    }[];
+  };
+  onBack: () => void;
+}
+
+export function GlobalEditView({ global }: GlobalEditViewProps) {
+  const [formData, setFormData] = useState<Record<string, unknown>>({});
+  const [initialData, setInitialData] = useState<Record<string, unknown>>({});
+  const [errorStatus, setErrorStatus] = useState<string | null>(null);
+
+  const { data: storeData, loading, error: storeError } = useStore($globalData);
+  const { mutate: doSave, loading: saving } = useStore($saveGlobal);
+
+  const isDirty = JSON.stringify(formData) !== JSON.stringify(initialData);
+
+  // Set the query slug when component mounts or slug changes
+  useEffect(() => {
+    $globalQuery.set(global.slug);
+  }, [global.slug]);
+
+  // Sync store data to form fields
+  useEffect(() => {
+    if (storeData) {
+      const cleanData = { ...storeData };
+      delete (cleanData as any).id;
+      delete (cleanData as any)["createdAt"];
+      delete (cleanData as any)["updatedAt"];
+
+      // Initialize defaults if they are missing
+      const defaults: Record<string, unknown> = { ...cleanData };
+      if (Object.keys(cleanData).length === 0) {
+        global.fields.forEach((f) => {
+          if (!f.name) return; // Skip layout fields without names
+          if (f.defaultValue !== undefined) {
+            defaults[f.name] = f.defaultValue;
+          } else if (f.type === "boolean") {
+            defaults[f.name] = false;
+          } else if (f.type === "number") {
+            defaults[f.name] = 0;
+          } else if (
+            f.type === "array" ||
+            f.type === "blocks" ||
+            (f.type === "relationship" && (f as any).hasMany)
+          ) {
+            defaults[f.name] = [];
+          } else {
+            defaults[f.name] = "";
+          }
+        });
+      }
+
+      setFormData(defaults);
+      setInitialData(defaults);
+      setErrorStatus(null);
+    }
+  }, [storeData, global.fields]);
+
+  // Handle errors from store or local
+  useEffect(() => {
+    if (storeError) {
+      setErrorStatus("Failed to load global document.");
+      notify("Error loading global document", "error");
+    }
+  }, [storeError]);
+
+  const handleSubmit = async (e?: React.FormEvent) => {
+    if (e) e.preventDefault();
+    setErrorStatus(null);
+
+    try {
+      await doSave({ slug: global.slug, body: formData });
+      notify("Changes saved successfully", "success");
+      setInitialData(formData); // Reset dirty state
+    } catch (err: unknown) {
+      console.error(err);
+      setErrorStatus(err instanceof Error ? err.message : "Failed to save document.");
+      notify("Failed to save changes", "error");
+    }
+  };
+
+  if (loading) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "0.75rem",
+          marginTop: "2rem",
+          padding: "0 2.5rem",
+        }}
+      >
+        <Loader2 size={18} className="opaca-spin" />
+        <span className="opaca-subtitle">Loading settings...</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="opaca-admin-form">
+      <div className="opaca-header">
+        <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+          <div>
+            <h1 className="opaca-title">
+              {global.label || global.slug.charAt(0).toUpperCase() + global.slug.slice(1)}
+            </h1>
+            <p className="opaca-subtitle">Manage global settings.</p>
+          </div>
+        </div>
+        <div style={{ display: "flex", gap: "0.75rem" }}>
+          <button
+            type="button"
+            onClick={() => handleSubmit()}
+            disabled={saving}
+            className="opaca-btn opaca-btn-primary"
+            style={{ position: "relative" }}
+            title="Save Changes"
+          >
+            {saving ? <Loader2 size={18} className="opaca-spin" /> : <Save size={18} />}
+            Save
+            {isDirty && !saving && (
+              <span
+                style={{
+                  position: "absolute",
+                  top: "-4px",
+                  right: "-4px",
+                  width: "10px",
+                  height: "10px",
+                  borderRadius: "50%",
+                  background: "var(--opaca-warning)",
+                  border: "2px solid var(--opaca-card-bg)",
+                  boxShadow: "0 1px 2px rgba(0,0,0,0.2)",
+                }}
+                title="Unsaved changes"
+              />
+            )}
+          </button>
+        </div>
+      </div>
+
+      {errorStatus && (
+        <div
+          style={{
+            padding: "1rem",
+            backgroundColor: "rgba(239, 68, 68, 0.1)",
+            border: "1px solid var(--opaca-error)",
+            color: "var(--opaca-error)",
+            borderRadius: "var(--opaca-radius)",
+            marginBottom: "2rem",
+            display: "flex",
+            alignItems: "center",
+            gap: "0.75rem",
+            fontSize: "0.875rem",
+          }}
+        >
+          <AlertCircle size={18} />
+          {errorStatus}
+        </div>
+      )}
+
+      <div className="opaca-card" style={{ padding: "2.5rem" }}>
+        <form id="opaca-doc-form" onSubmit={handleSubmit}>
+          <div style={{ display: "grid", gap: "2rem" }}>
+            {global.fields.map((field, index) => {
+              const name = field.name;
+
+              // Layout fields without a name
+              if (!name) {
+                return (
+                  <FieldRenderer
+                    key={field.name || index}
+                    field={field}
+                    value={undefined}
+                    onChange={(subName, val) => {
+                      if (typeof subName === "string") {
+                        setFormData({ ...formData, [subName]: val });
+                      } else {
+                        // Handle cases where onChange(val) is called (shouldn't happen with layout fields usually)
+                        Object.assign(formData, val);
+                        setFormData({ ...formData });
+                      }
+                    }}
+                    parentData={formData}
+                  />
+                );
+              }
+
+              return (
+                <FieldRenderer
+                  key={name}
+                  field={field}
+                  value={formData[name]}
+                  onChange={(val) => {
+                    setFormData({ ...formData, [name]: val });
+                  }}
+                  parentData={formData}
+                />
+              );
+            })}
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/admin/ui/views/init-view.tsx

@@ -0,0 +1,182 @@
+import { AlertCircle, Loader2, Lock, ShieldCheck, User } from "lucide-react";
+import { type FormEvent, useState } from "react";
+import { authClient } from "../../auth-client";
+
+export interface InitViewProps {
+  onSuccess: () => void;
+}
+
+export function InitView({ onSuccess }: InitViewProps) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const res = await authClient.signUp.email({
+        email,
+        password,
+        name: "Admin",
+      });
+
+      if (res.error) {
+        throw new Error(res.error.message || "Failed to create admin user");
+      }
+
+      onSuccess();
+    } catch (err: unknown) {
+      console.error(err);
+      setError(err instanceof Error ? err.message : "Initialization failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="opaca-login-container">
+      <div className="opaca-login-card">
+        <div className="opaca-login-header">
+          <div className="opaca-login-logo">
+            <ShieldCheck size={24} color="white" />
+          </div>
+          <h1 className="opaca-title">Welcome to OpacaCMS</h1>
+          <p className="opaca-subtitle">Create the first administrator account to get started.</p>
+        </div>
+
+        {error && (
+          <div className="opaca-login-error">
+            <AlertCircle size={14} />
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit}>
+          <div className="opaca-form-group">
+            <label htmlFor="init-email" className="opaca-label">
+              Admin Email
+            </label>
+            <div style={{ position: "relative" }}>
+              <User
+                size={14}
+                style={{
+                  position: "absolute",
+                  left: "0.75rem",
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  color: "var(--opaca-text-dim)",
+                }}
+              />
+              <input
+                id="init-email"
+                type="email"
+                className="opaca-input"
+                style={{ paddingLeft: "2.25rem" }}
+                placeholder="admin@example.com"
+                value={email}
+                onChange={(e) => setEmail((e.target as HTMLInputElement).value)}
+                required
+              />
+            </div>
+          </div>
+
+          <div className="opaca-form-group">
+            <label htmlFor="init-password" className="opaca-label">
+              Password
+            </label>
+            <div style={{ position: "relative" }}>
+              <Lock
+                size={14}
+                style={{
+                  position: "absolute",
+                  left: "0.75rem",
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  color: "var(--opaca-text-dim)",
+                }}
+              />
+              <input
+                id="init-password"
+                type="password"
+                className="opaca-input"
+                style={{ paddingLeft: "2.25rem" }}
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => setPassword((e.target as HTMLInputElement).value)}
+                required
+                minLength={8}
+              />
+            </div>
+          </div>
+
+          <div className="opaca-form-group">
+            <label htmlFor="init-confirm" className="opaca-label">
+              Confirm Password
+            </label>
+            <div style={{ position: "relative" }}>
+              <Lock
+                size={14}
+                style={{
+                  position: "absolute",
+                  left: "0.75rem",
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  color: "var(--opaca-text-dim)",
+                }}
+              />
+              <input
+                id="init-confirm"
+                type="password"
+                className="opaca-input"
+                style={{ paddingLeft: "2.25rem" }}
+                placeholder="••••••••"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword((e.target as HTMLInputElement).value)}
+                required
+                minLength={8}
+              />
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            className="opaca-btn opaca-btn-primary"
+            style={{ width: "100%", marginTop: "0.5rem" }}
+            disabled={loading}
+          >
+            {loading ? (
+              <>
+                <Loader2 className="opaca-spin" size={14} />
+                Initializing...
+              </>
+            ) : (
+              "Create Admin Account"
+            )}
+          </button>
+        </form>
+
+        <p
+          className="opaca-subtitle"
+          style={{
+            fontSize: "0.6875rem",
+            textAlign: "center",
+            marginTop: "1.25rem",
+          }}
+        >
+          This account will have full access to manage OpacaCMS.
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/admin/ui/views/login-view.tsx

@@ -0,0 +1,123 @@
+import { AlertCircle, Loader2, Lock, User } from "lucide-react";
+import React, { type FormEvent, useState } from "react";
+
+export interface LoginViewProps {
+  onLogin: (data: Record<string, string>) => Promise<void>;
+}
+
+export function LoginView({ onLogin }: LoginViewProps) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    try {
+      await onLogin({ email, password });
+    } catch (err: unknown) {
+      console.error(err);
+      setError(err instanceof Error ? err.message : "Invalid email or password");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="opaca-login-container">
+      <div className="opaca-login-card">
+        <div style={{ textAlign: "center", marginBottom: "1.5rem" }}>
+          <div className="opaca-logo-circle" style={{ margin: "0 auto 1rem" }}>
+            <Lock size={22} />
+          </div>
+          <h1 className="opaca-title">Admin Login</h1>
+          <p className="opaca-subtitle">Authenticate to access the dashboard</p>
+        </div>
+
+        {error && (
+          <div className="opaca-login-error">
+            <AlertCircle size={14} />
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit}>
+          <div className="opaca-form-group">
+            <label htmlFor="login-email" className="opaca-label">
+              Email
+            </label>
+            <div style={{ position: "relative" }}>
+              <User
+                size={14}
+                style={{
+                  position: "absolute",
+                  left: "0.75rem",
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  color: "var(--opaca-text-dim)",
+                }}
+              />
+              <input
+                id="login-email"
+                type="email"
+                className="opaca-input"
+                style={{ paddingLeft: "2.25rem" }}
+                placeholder="admin@example.com"
+                value={email}
+                onChange={(e) => setEmail((e.target as HTMLInputElement).value)}
+                required
+              />
+            </div>
+          </div>
+
+          <div className="opaca-form-group">
+            <label htmlFor="login-password" className="opaca-label">
+              Password
+            </label>
+            <div style={{ position: "relative" }}>
+              <Lock
+                size={14}
+                style={{
+                  position: "absolute",
+                  left: "0.75rem",
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  color: "var(--opaca-text-dim)",
+                }}
+              />
+              <input
+                id="login-password"
+                type="password"
+                className="opaca-input"
+                style={{ paddingLeft: "2.25rem" }}
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => setPassword((e.target as HTMLInputElement).value)}
+                required
+              />
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            className="opaca-btn opaca-btn-primary"
+            style={{ width: "100%", marginTop: "0.5rem" }}
+            disabled={loading}
+          >
+            {loading ? (
+              <>
+                <Loader2 size={14} className="opaca-spin" />
+                Logging in...
+              </>
+            ) : (
+              "Sign In"
+            )}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}