@kyro-cms/admin 0.3.2 → 0.3.5

package/src/pages/403.astro

@@ -0,0 +1,67 @@
+---
+import AdminLayout from "../layouts/AdminLayout.astro";
+import { adminPath } from "../lib/paths";
+
+// Ensure this page looks premium
+---
+
+<AdminLayout title="Access Denied">
+  <div class="flex-1 flex items-center justify-center p-8">
+    <div class="max-w-md w-full text-center space-y-8">
+      <div class="relative">
+        <div class="absolute inset-0 bg-red-500/20 blur-3xl rounded-full"></div>
+        <div
+          class="relative w-24 h-24 mx-auto bg-red-500/10 border border-red-500/20 rounded-3xl flex items-center justify-center text-red-500"
+        >
+          <svg
+            class="w-12 h-12"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+            ></path>
+          </svg>
+        </div>
+      </div>
+
+      <div class="space-y-2">
+        <h1
+          class="text-4xl font-bold tracking-tighter text-[var(--kyro-text-primary)]"
+        >
+          Access Denied
+        </h1>
+        <p class="text-[var(--kyro-text-secondary)] font-medium">
+          You don't have the required permissions to access this page. Please
+          contact your administrator if you believe this is an error.
+        </p>
+      </div>
+
+      <div class="pt-4">
+        <a
+          href={adminPath}
+          class="inline-flex items-center gap-2 px-8 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold transition-all hover:opacity-90 active:scale-95 shadow-lg"
+        >
+          <svg
+            class="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2.5"
+              d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+            ></path>
+          </svg>
+          Back to Dashboard
+        </a>
+      </div>
+    </div>
+  </div>
+</AdminLayout>

package/src/pages/[collection]/[id].astro

@@ -1,51 +1,26 @@
 ---
 import AdminLayout from "../../layouts/AdminLayout.astro";
-import { collections } from "@/lib/config";
-import { AutoForm } from "@/components/AutoForm";
+import { collections } from "../../lib/config";
+import { AutoForm } from "../../components/AutoForm";
 
 const { collection, id } = Astro.params;
 
+import { adminPath, apiPath } from "../../lib/paths";
+
 // Validate collection exists
 if (!collection || !collections[collection]) {
-  return Astro.redirect("/");
+  return Astro.redirect(adminPath);
 }
 
 const config = collections[collection];
 
-// Handle legacy integer IDs (e.g., "team-1" -> find by slug instead)
-let lookupId = id;
-if (id && id.includes("-")) {
-  const parts = id.split("-");
-  const potentialNum = parts[parts.length - 1];
-  if (/^\d+$/.test(potentialNum)) {
-    // Legacy integer ID - try to find document by slug from the remaining parts
-    const slugPart = parts.slice(0, -1).join("-");
-    try {
-      const slugResponse = await fetch(
-        `${Astro.url.origin}/api/${collection}?limit=100`,
-        {
-          headers: { "Content-Type": "application/json" },
-        },
-      );
-      if (slugResponse.ok) {
-        const slugResult = await slugResponse.json();
-        const found = (slugResult.docs || []).find(
-          (d: any) => d.slug === slugPart,
-        );
-        if (found) {
-          lookupId = found.id;
-        }
-      }
-    } catch (e) {}
-  }
-}
-
 // Fetch document if editing
 let doc: any = null;
-if (lookupId && lookupId !== "new") {
+let fetchError: string | null = null;
+if (id && id !== "new") {
   try {
     const response = await fetch(
-      `${Astro.url.origin}/api/${collection}/${lookupId}`,
+      `${Astro.url.origin}${apiPath}/${collection}/${id}`,
       {
         headers: Astro.request.headers,
         credentials: "include",
@@ -54,17 +29,16 @@ if (lookupId && lookupId !== "new") {
     if (response.ok) {
       const result = await response.json();
       doc = result.data || null;
+    } else {
+      const errorData = await response.json().catch(() => ({}));
+      fetchError = errorData.error || `Failed to load document (${response.status})`;
     }
   } catch (error) {
+    fetchError = "Failed to fetch document. Check server connection.";
     console.error("Failed to fetch document:", error);
   }
 }
 
-// Redirect to UUID URL if using legacy ID
-if (id && lookupId && id !== lookupId && doc) {
-  return Astro.redirect(`/${collection}/${lookupId}`, 301);
-}
-
 const isNew = !doc;
 const docStatus = doc?.status || "draft";
 const title = isNew
@@ -76,157 +50,17 @@ const description =
 ---
 
 <AdminLayout title={title}>
-  <div class="flex-1 overflow-y-auto p-8 space-y-6">
+  <div class="flex-1 overflow-y-auto space-y-6">
     <form id="doc-form">
       <AutoForm
         client:only="react"
         config={config}
         data={doc || {}}
         collectionSlug={collection}
+        documentId={id || undefined}
         documentName={doc?.title || doc?.name || doc?.slug || "new-document"}
       />
       <input type="hidden" id="form-data" name="form-data" value="{}" />
     </form>
   </div>
-
-  <script define:vars={{ collection, id, isNew }}>
-    function showToast(message, isError = false) {
-      const container = document.getElementById("toast-container");
-      const msg = document.getElementById("toast-message");
-      if (container && msg) {
-        msg.textContent = message;
-        container.classList.remove("hidden");
-        if (!isError) {
-          setTimeout(() => container.classList.add("hidden"), 3000);
-        }
-      }
-    }
-
-    // Wait for DOM to be ready
-    function setupFormHandler() {
-      const form = document.getElementById("doc-form");
-      const btn = document.getElementById("btn-save");
-
-      if (!form || !btn) {
-        setTimeout(setupFormHandler, 100);
-        return;
-      }
-
-      // Button click handler
-      btn.addEventListener("click", async () => {
-        // Check form validity
-        if (!form.checkValidity()) {
-          form.reportValidity();
-          return;
-        }
-
-        const originalText = btn.textContent || "";
-        btn.textContent = "Saving…";
-        btn.setAttribute("disabled", "true");
-
-        // Get data from hidden input (populated by React AutoForm onChange)
-        const hiddenInput = document.getElementById("form-data");
-        let data = {};
-
-        if (hiddenInput && hiddenInput.value) {
-          try {
-            const val = hiddenInput.value;
-            if (val) data = JSON.parse(val);
-          } catch (err) {
-            console.error("Failed to parse form data:", err);
-          }
-        }
-
-        const url = isNew ? `/api/${collection}` : `/api/${collection}/${id}`;
-        const method = isNew ? "POST" : "PATCH";
-
-        try {
-          const response = await fetch(url, {
-            method,
-            credentials: "include",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(data),
-          });
-
-          if (response.ok) {
-            showToast(
-              isNew ? "Document created successfully" : "Changes saved",
-            );
-            setTimeout(() => {
-              window.location.href = `/${collection}`;
-            }, 800);
-          } else {
-            const error = await response.json();
-            showToast(error.error || "An error occurred", true);
-          }
-        } catch (error) {
-          showToast("Failed to save document", true);
-        } finally {
-          btn.textContent = originalText;
-          btn.removeAttribute("disabled");
-        }
-      });
-    }
-
-    setupFormHandler();
-
-    // Setup publish/unpublish handlers
-    const btnPublish = document.getElementById("btn-publish");
-    const btnUnpublish = document.getElementById("btn-unpublish");
-
-    async function handlePublish() {
-      if (!btnPublish) return;
-      btnPublish.textContent = "Publishing...";
-      btnPublish.setAttribute("disabled", "true");
-
-      try {
-        const response = await fetch(`/api/${collection}/${id}/publish`, {
-          method: "POST",
-          credentials: "include",
-        });
-
-        if (response.ok) {
-          showToast("Published successfully");
-          location.reload();
-        } else {
-          const error = await response.json();
-          showToast(error.error || "Failed to publish", true);
-        }
-      } catch (err) {
-        showToast("Failed to publish", true);
-      } finally {
-        btnPublish.textContent = "Publish";
-        btnPublish.removeAttribute("disabled");
-      }
-    }
-
-    async function handleUnpublish() {
-      if (!btnUnpublish) return;
-      btnUnpublish.textContent = "Unpublishing...";
-      btnUnpublish.setAttribute("disabled", "true");
-
-      try {
-        const response = await fetch(`/api/${collection}/${id}/unpublish`, {
-          method: "POST",
-          credentials: "include",
-        });
-
-        if (response.ok) {
-          showToast("Unpublished successfully");
-          location.reload();
-        } else {
-          const error = await response.json();
-          showToast(error.error || "Failed to unpublish", true);
-        }
-      } catch (err) {
-        showToast("Failed to unpublish", true);
-      } finally {
-        btnUnpublish.textContent = "Unpublish";
-        btnUnpublish.removeAttribute("disabled");
-      }
-    }
-
-    if (btnPublish) btnPublish.addEventListener("click", handlePublish);
-    if (btnUnpublish) btnUnpublish.addEventListener("click", handleUnpublish);
-  </script>
 </AdminLayout>

package/src/pages/[collection]/index.astro

@@ -1,14 +1,19 @@
 ---
 import AdminLayout from "../../layouts/AdminLayout.astro";
-import { collections } from "@/lib/config";
-import { EnhancedListView } from "@/components/EnhancedListView";
+import { collections } from "../../lib/config";
+import { ListView } from "../../components/ListView";
+import { adminPath, apiPath } from "../../lib/paths";
 
 const { collection } = Astro.params;
 
 if (!collection || !collections[collection]) {
-  return Astro.redirect("/");
+  return Astro.redirect(adminPath);
 }
 
+// Redirect system collections to dedicated pages
+if (collection === "users") return Astro.redirect(`${adminPath}/users`);
+if (collection === "audit_logs") return Astro.redirect(`${adminPath}/audit`);
+
 const config = collections[collection];
 
 const page = parseInt(Astro.url.searchParams.get("page") || "1");
@@ -19,7 +24,7 @@ let totalDocs = 0;
 
 try {
   const response = await fetch(
-    `${Astro.url.origin}/api/${collection}?page=${page}&limit=${limit}&t=${Date.now()}`,
+    `${Astro.url.origin}${apiPath}/${collection}?page=${page}&limit=${limit}&t=${Date.now()}`,
     {
       headers: Astro.request.headers,
       credentials: "include",
@@ -36,8 +41,8 @@ try {
 ---
 
 <AdminLayout title={config.label || collection || "Collection"}>
-  <div class="flex-1 overflow-y-auto p-8">
-    <EnhancedListView
+  <div class="flex-1 overflow-y-auto">
+    <ListView
       client:load
       collection={config}
       collectionSlug={collection}

package/src/pages/api-explorer.astro

@@ -0,0 +1,173 @@
+---
+import AdminLayout from "../layouts/AdminLayout.astro";
+import { ApiExplorer } from "../components/ApiExplorer";
+
+import { adminPath, apiPath } from "../lib/paths";
+
+const collectionsResponse = await fetch(
+  `${Astro.url.origin}${apiPath}/collections`,
+);
+const collectionsData = await collectionsResponse.json();
+const collections = collectionsData.collections || [];
+---
+
+<AdminLayout title="API Explorer">
+  <div class="flex-1 overflow-hidden">
+    <!-- Header -->
+    <div class="mb-6 surface-tile">
+      <div class="flex items-center justify-between mb-4">
+        <div>
+          <h1
+            class="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]"
+          >
+            API Explorer
+          </h1>
+          <p
+            class="text-[var(--kyro-text-secondary)] font-bold mt-2 text-sm tracking-wider"
+          >
+            Test and explore REST API endpoints interactively
+          </p>
+        </div>
+        <div class="flex items-center gap-3">
+          <a
+            href={`${adminPath}/rest-playground`}
+            class="flex items-center gap-2 px-4 py-2 bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] rounded-lg font-bold text-sm hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
+          >
+            <svg
+              class="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+              ></path>
+            </svg>
+            Playground
+          </a>
+          <a
+            href={`${apiPath}/collections`}
+            target="_blank"
+            class="flex items-center gap-2 px-4 py-2 bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] rounded-lg font-bold text-sm hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
+          >
+            <svg
+              class="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+              ></path>
+            </svg>
+            Collections JSON
+          </a>
+        </div>
+      </div>
+
+      <!-- HTTP Methods Legend -->
+      <div class="flex items-center gap-4 text-xs">
+        <span class="text-[var(--kyro-text-muted)]">Methods:</span>
+        <span class="px-2 py-1 bg-green-500/10 text-green-600 rounded font-bold"
+          >GET</span
+        >
+        <span class="px-2 py-1 bg-blue-500/10 text-blue-600 rounded font-bold"
+          >POST</span
+        >
+        <span
+          class="px-2 py-1 bg-yellow-500/10 text-yellow-600 rounded font-bold"
+          >PATCH</span
+        >
+        <span class="px-2 py-1 bg-red-500/10 text-red-600 rounded font-bold"
+          >DELETE</span
+        >
+      </div>
+    </div>
+
+    <!-- Explorer Component -->
+    <div class="surface-tile overflow-hidden p-6">
+      <ApiExplorer client:load collections={collections} />
+    </div>
+
+    <!-- Quick Reference -->
+    <div class="mt-6 surface-tile p-6">
+      <h2 class="text-xl font-bold text-[var(--kyro-text-primary)] mb-4">
+        Quick Reference
+      </h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm">
+        <div class="bg-[var(--kyro-surface-accent)] rounded-lg p-4">
+          <h3 class="font-medium text-[var(--kyro-text-primary)] mb-2">
+            List All
+          </h3>
+          <code class="text-xs text-[var(--kyro-text-secondary)] block"
+            >GET {apiPath}/:collection</code
+          >
+          <p class="text-xs text-[var(--kyro-text-muted)] mt-2">
+            Returns all documents with pagination
+          </p>
+        </div>
+        <div class="bg-[var(--kyro-surface-accent)] rounded-lg p-4">
+          <h3 class="font-medium text-[var(--kyro-text-primary)] mb-2">
+            Get One
+          </h3>
+          <code class="text-xs text-[var(--kyro-text-secondary)] block"
+            >GET {apiPath}/:collection/:id</code
+          >
+          <p class="text-xs text-[var(--kyro-text-muted)] mt-2">
+            Returns a single document by ID
+          </p>
+        </div>
+        <div class="bg-[var(--kyro-surface-accent)] rounded-lg p-4">
+          <h3 class="font-medium text-[var(--kyro-text-primary)] mb-2">
+            Create
+          </h3>
+          <code class="text-xs text-[var(--kyro-text-secondary)] block"
+            >POST {apiPath}/:collection</code
+          >
+          <p class="text-xs text-[var(--kyro-text-muted)] mt-2">
+            Creates a new document
+          </p>
+        </div>
+        <div class="bg-[var(--kyro-surface-accent)] rounded-lg p-4">
+          <h3 class="font-medium text-[var(--kyro-text-primary)] mb-2">
+            Update
+          </h3>
+          <code class="text-xs text-[var(--kyro-text-secondary)] block"
+            >PATCH {apiPath}/:collection/:id</code
+          >
+          <p class="text-xs text-[var(--kyro-text-muted)] mt-2">
+            Updates an existing document
+          </p>
+        </div>
+        <div class="bg-[var(--kyro-surface-accent)] rounded-lg p-4">
+          <h3 class="font-medium text-[var(--kyro-text-primary)] mb-2">
+            Delete
+          </h3>
+          <code class="text-xs text-[var(--kyro-text-secondary)] block"
+            >DELETE {apiPath}/:collection/:id</code
+          >
+          <p class="text-xs text-[var(--kyro-text-muted)] mt-2">
+            Deletes a document
+          </p>
+        </div>
+        <div class="bg-[var(--kyro-surface-accent)] rounded-lg p-4">
+          <h3 class="font-medium text-[var(--kyro-text-primary)] mb-2">
+            Pagination
+          </h3>
+          <code class="text-xs text-[var(--kyro-text-secondary)] block"
+            >?page=1&amp;limit=10</code
+          >
+          <p class="text-xs text-[var(--kyro-text-muted)] mt-2">
+            Add query params for pagination
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</AdminLayout>

package/src/pages/audit/index.astro

@@ -1,6 +1,8 @@
 ---
 import AdminLayout from '../../layouts/AdminLayout.astro';
 import { AuditLogsPage } from '../../components/AuditLogsPage';
+
+import { adminPath, apiPath } from '../../lib/paths';
 ---
 
 <AdminLayout title="Audit Logs">

package/src/pages/auth/login.astro

@@ -0,0 +1,122 @@
+---
+import AuthLayout from "../../layouts/AuthLayout.astro";
+import { adminPath, apiPath } from "../../lib/paths";
+---
+
+<AuthLayout title="Sign In">
+  <div class="surface-tile p-8 w-full" style="max-width: 420px;">
+    <div class="text-center mb-8">
+      <h1
+        class="text-2xl font-bold tracking-tight text-[var(--kyro-text-primary)]"
+      >
+        Welcome back
+      </h1>
+      <p class="text-sm text-[var(--kyro-text-secondary)] mt-2">
+        Sign in to your account
+      </p>
+    </div>
+
+    <form id="login-form" class="space-y-5">
+      <div>
+        <label
+          for="email"
+          class="block text-sm font-medium text-[var(--kyro-text-primary)] mb-2 text-left"
+          >Email</label
+        >
+        <input
+          type="email"
+          id="email"
+          name="email"
+          required
+          class="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]"
+          placeholder="admin@example.com"
+        />
+      </div>
+
+      <div>
+        <label
+          for="password"
+          class="block text-sm font-medium text-[var(--kyro-text-primary)] mb-2"
+          >Password</label
+        >
+        <input
+          type="password"
+          id="password"
+          name="password"
+          required
+          class="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]"
+          placeholder="••••••••"
+        />
+      </div>
+
+      <div id="form-message" class="hidden p-3 rounded-xl text-sm font-bold">
+      </div>
+
+      <button
+        type="submit"
+        class="w-full py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl text-sm font-bold hover:opacity-90 transition-colors shadow-lg"
+      >
+        Sign In
+      </button>
+    </form>
+
+    <p class="text-center text-sm text-[var(--kyro-text-secondary)] mt-6">
+      Don't have an account? <a
+        href={`${adminPath}/register`}
+        class="font-medium text-[var(--kyro-text-primary)] hover:underline"
+        >Register</a
+      >
+    </p>
+  </div>
+
+  <script define:vars={{ apiPath, adminPath }}>
+    document
+      .getElementById("login-form")
+      ?.addEventListener("submit", async (e) => {
+        e.preventDefault();
+        const form = e.target;
+        const message = document.getElementById("form-message");
+        const button = form.querySelector('button[type="submit"]');
+
+        const email = form.email.value;
+        const password = form.password.value;
+
+        button.disabled = true;
+        button.textContent = "Signing in...";
+
+        try {
+          const res = await fetch(apiPath + "/auth/login", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ email, password }),
+          });
+
+          const data = await res.json();
+
+          if (res.ok && data.success) {
+            // Cookies set server-side via Set-Cookie headers
+            // Store user in memory only (not localStorage)
+            window.__kyroAuth = { user: data.user, verified: true };
+            message.textContent = "Success! Redirecting...";
+            message.className =
+              "block p-3 rounded-xl text-sm font-regular  bg-green-50 text-green-600";
+            setTimeout(() => {
+              window.location.href = adminPath;
+            }, 500);
+          } else {
+            message.textContent = data.error || "Login failed";
+            message.className =
+              "block p-3 rounded-xl text-sm font-regular bg-red-50 text-red-600";
+            button.disabled = false;
+            button.textContent = "Sign In";
+          }
+        } catch (err) {
+          message.textContent = "Connection error";
+          message.className =
+            "block p-3 rounded-xl text-sm font-regular bg-red-50 text-red-600";
+          button.disabled = false;
+          button.textContent = "Sign In";
+        }
+      });
+  </script>
+</AuthLayout>