@kyro-cms/admin 0.1.5 → 0.1.7

package/src/middleware.ts

@@ -9,49 +9,122 @@ const PUBLIC_PATHS = [
   "/api/auth/register",
   "/api/auth/me",
   "/api/auth/users",
+  "/api/auth/refresh",
+  "/api/users",
   "/api/health",
+  "/api/search",
+  "/api/upload",
+  "/api/media",
+  "/login",
+  "/register",
   "/favicon.svg",
 ];
 
-const PUBLIC_PREFIXES = ["/api/collections/", "/api/auth/"];
+const PUBLIC_PREFIXES = [
+  "/api/collections/",
+  "/api/auth/",
+  "/api/globals/",
+  "/api/media/",
+];
+
+const isApiRequest = (pathname: string): boolean => {
+  return pathname.startsWith("/api/");
+};
+
+const redirectToLogin = (): Response => {
+  return new Response(null, {
+    status: 302,
+    headers: {
+      Location: "/login",
+    },
+  });
+};
 
-export const onRequest: MiddlewareHandler = async ({ request, url }, next) => {
+export const onRequest: MiddlewareHandler = async (
+  { request, url, locals },
+  next,
+) => {
   const pathname = new URL(url).pathname;
 
-  // Handle root path redirection
-  if (pathname === "/") {
+  // Helper to extract token from cookie or header
+  const getToken = (): string | null => {
+    // Check Authorization header first
     const authHeader = request.headers.get("authorization");
-    const token = authHeader?.startsWith("Bearer ")
-      ? authHeader.slice(7)
-      : null;
+    if (authHeader?.startsWith("Bearer ")) {
+      return authHeader.slice(7);
+    }
+    // Check cookie
+    const cookies = request.headers.get("cookie") || "";
+    const match = cookies.match(/auth_token=([^;]+)/);
+    return match ? match[1] : null;
+  };
+
+  const token = getToken();
+
+  // Set user in locals if token is valid
+  if (token) {
+    try {
+      const payload = jwt.verify(token, JWT_SECRET) as jwt.JwtPayload;
+      locals.user = {
+        id: payload.sub || "",
+        email: (payload as any).email || "",
+        role: (payload as any).role || "guest",
+        tenantId: (payload as any).tenantId,
+      };
+    } catch {
+      // Token invalid, leave user undefined
+    }
+  }
 
+  // Handle root path - redirect to admin for authenticated users
+  if (pathname === "/") {
     if (!token) {
-      // Redirect to admin login if not authenticated
       return new Response(null, {
         status: 302,
         headers: {
-          Location: "/admin",
+          Location: "/login",
         },
       });
     }
 
+    // Token exists - redirect to admin dashboard
     try {
-      // Verify token to get user info
-      const payload = jwt.verify(token, JWT_SECRET) as jwt.JwtPayload;
+      jwt.verify(token, JWT_SECRET);
+      return new Response(null, {
+        status: 302,
+        headers: {
+          Location: "/admin",
+        },
+      });
+    } catch {
+      return new Response(null, {
+        status: 302,
+        headers: {
+          Location: "/login",
+        },
+      });
+    }
+  }
 
-      // Redirect to dashboard if authenticated
+  // Handle /admin path - main dashboard
+  if (pathname === "/admin") {
+    if (!token) {
       return new Response(null, {
         status: 302,
         headers: {
-          Location: "/admin/dashboard",
+          Location: "/login",
         },
       });
+    }
+
+    try {
+      jwt.verify(token, JWT_SECRET);
+      return next();
     } catch {
-      // Invalid token, redirect to login
       return new Response(null, {
         status: 302,
         headers: {
-          Location: "/admin",
+          Location: "/login",
         },
       });
     }
@@ -67,23 +140,38 @@ export const onRequest: MiddlewareHandler = async ({ request, url }, next) => {
     }
   }
 
-  const authHeader = request.headers.get("authorization");
-  const token = authHeader?.startsWith("Bearer ") ? authHeader.slice(7) : null;
-
   if (!token) {
-    return new Response(JSON.stringify({ error: "Authentication required" }), {
-      status: 401,
-      headers: { "Content-Type": "application/json" },
-    });
+    if (!isApiRequest(pathname)) {
+      return redirectToLogin();
+    }
+    return new Response(
+      JSON.stringify({ error: "Authentication required. Please log in." }),
+      {
+        status: 401,
+        headers: { "Content-Type": "application/json" },
+      },
+    );
   }
 
   try {
-    const payload = jwt.verify(token, JWT_SECRET) as jwt.JwtPayload;
+    jwt.verify(token, JWT_SECRET);
     return next();
-  } catch {
-    return new Response(JSON.stringify({ error: "Invalid or expired token" }), {
-      status: 401,
-      headers: { "Content-Type": "application/json" },
-    });
+  } catch (err) {
+    const isExpired = err instanceof jwt.TokenExpiredError;
+    if (!isApiRequest(pathname)) {
+      return redirectToLogin();
+    }
+    return new Response(
+      JSON.stringify({
+        error: isExpired
+          ? "Token expired. Please refresh your session or log in again."
+          : "Invalid token. Please log in again.",
+        code: isExpired ? "TOKEN_EXPIRED" : "TOKEN_INVALID",
+      }),
+      {
+        status: 401,
+        headers: { "Content-Type": "application/json" },
+      },
+    );
   }
 };

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

@@ -1,176 +1,232 @@
 ---
-import AdminLayout from '../../layouts/AdminLayout.astro';
-import { collections } from '@/lib/config';
-import { AutoForm } from '@/components/AutoForm';
+import AdminLayout from "../../layouts/AdminLayout.astro";
+import { collections } from "@/lib/config";
+import { AutoForm } from "@/components/AutoForm";
 
 const { collection, id } = Astro.params;
 
 // Validate collection exists
 if (!collection || !collections[collection]) {
-  return Astro.redirect('/');
+  return Astro.redirect("/");
 }
 
 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 (id && id !== 'new') {
+if (lookupId && lookupId !== "new") {
   try {
-    const response = await fetch(`${Astro.url.origin}/api/${collection}/${id}`);
+    const response = await fetch(
+      `${Astro.url.origin}/api/${collection}/${lookupId}`,
+      {
+        headers: Astro.request.headers,
+        credentials: "include",
+      },
+    );
     if (response.ok) {
       const result = await response.json();
       doc = result.data || null;
     }
   } catch (error) {
-    console.error('Failed to fetch document:', error);
+    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 title = isNew ? `Create ${config.singularLabel || config.label || collection}` : `Edit ${config.singularLabel || config.label || collection}`;
-const description = config.admin?.description || `Manage ${(config.label || collection || '').toLowerCase()} documents`;
+const docStatus = doc?.status || "draft";
+const title = isNew
+  ? `Create ${config.singularLabel || config.label || collection}`
+  : `Edit ${config.singularLabel || config.label || collection}`;
+const description =
+  config.admin?.description ||
+  `Manage ${(config.label || collection || "").toLowerCase()} documents`;
 ---
 
 <AdminLayout title={title}>
   <div class="flex-1 overflow-y-auto p-8 space-y-6">
-    <!-- Header -->
-    <div class="surface-tile p-8 flex items-center justify-between">
-      <div class="flex items-center gap-4">
-        <a
-          href={`/${collection}`}
-          class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-gray-200 text-[#64748b] hover:text-[#0b1222] hover:bg-gray-50 transition-colors"
-        >
-          <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="M15 19l-7-7 7-7"></path>
-          </svg>
-        </a>
-        <div>
-          <h1 class="text-2xl font-black tracking-tighter text-[#0b1222]">{title}</h1>
-          <p class="text-sm text-[#64748b] mt-0.5">{description}</p>
-        </div>
-      </div>
-      <div class="flex items-center gap-3">
-        <a
-          href={`/${collection}`}
-          class="px-5 py-2.5 border border-gray-200 rounded-xl text-[#0b1222] font-bold text-sm hover:bg-gray-50 transition-colors"
-        >
-          Cancel
-        </a>
-        <button
-          type="submit"
-          form="doc-form"
-          id="btn-save"
-          class="px-6 py-2.5 bg-[#0b1222] text-white rounded-xl font-bold text-sm hover:bg-[#1a2332] transition-colors active:scale-95"
-        >
-          {isNew ? 'Create' : 'Save Changes'}
-        </button>
-      </div>
-    </div>
-
-    <!-- Form Card -->
-    <div class="surface-tile p-8">
-      <!-- Toast container -->
-      <div id="toast-container" class="hidden fixed bottom-6 right-6 z-50">
-        <div class="flex items-center gap-3 px-5 py-4 bg-[#0b1222] text-white rounded-xl shadow-2xl">
-          <span id="toast-message"></span>
-          <button onclick="document.getElementById('toast-container').classList.add('hidden')" class="text-white/50 hover:text-white ml-2">
-            <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="M6 18L18 6M6 6l12 12"></path></svg>
-          </button>
-        </div>
-      </div>
-
-      <form id="doc-form">
-        <AutoForm
-          client:load
-          config={config}
-          data={doc || {}}
-          collectionSlug={collection}
-        />
-      </form>
-    </div>
-
-    <!-- Document Metadata (edit mode only) -->
-    {!isNew && doc && (
-      <div class="surface-tile p-8">
-        <h3 class="text-xs font-bold text-[#64748b] uppercase tracking-[0.2em] mb-4">Document Info</h3>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
-          <div>
-            <p class="text-[10px] font-bold text-[#9ca3af] uppercase tracking-widest mb-1">ID</p>
-            <p class="text-sm text-[#0b1222] font-mono">{doc.id?.slice(0, 12)}…</p>
-          </div>
-          {doc.createdAt && (
-            <div>
-              <p class="text-[10px] font-bold text-[#9ca3af] uppercase tracking-widest mb-1">Created</p>
-              <p class="text-sm text-[#0b1222]">{new Date(doc.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</p>
-            </div>
-          )}
-          {doc.updatedAt && (
-            <div>
-              <p class="text-[10px] font-bold text-[#9ca3af] uppercase tracking-widest mb-1">Updated</p>
-              <p class="text-sm text-[#0b1222]">{new Date(doc.updatedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</p>
-            </div>
-          )}
-        </div>
-      </div>
-    )}
+    <form id="doc-form">
+      <AutoForm
+        client:only="react"
+        config={config}
+        data={doc || {}}
+        collectionSlug={collection}
+        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');
+      const container = document.getElementById("toast-container");
+      const msg = document.getElementById("toast-message");
       if (container && msg) {
         msg.textContent = message;
-        container.classList.remove('hidden');
+        container.classList.remove("hidden");
         if (!isError) {
-          setTimeout(() => container.classList.add('hidden'), 3000);
+          setTimeout(() => container.classList.add("hidden"), 3000);
         }
       }
     }
 
-    document.getElementById('doc-form')?.addEventListener('submit', async (e) => {
-      e.preventDefault();
-      
-      const btn = document.getElementById('btn-save');
-      const originalText = btn?.textContent || '';
-      if (btn) {
-        btn.textContent = 'Saving…';
-        btn.setAttribute('disabled', 'true');
+    // 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;
       }
 
-      const formData = new FormData(e.target);
-      const data = {};
-      formData.forEach((value, key) => {
-        data[key] = value;
+      // 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");
 
-      const url = isNew ? `/api/${collection}` : `/api/${collection}/${id}`;
-      const method = isNew ? 'POST' : 'PATCH';
+    async function handlePublish() {
+      if (!btnPublish) return;
+      btnPublish.textContent = "Publishing...";
+      btnPublish.setAttribute("disabled", "true");
 
       try {
-        const response = await fetch(url, {
-          method,
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(data),
+        const response = await fetch(`/api/${collection}/${id}/publish`, {
+          method: "POST",
+          credentials: "include",
         });
 
         if (response.ok) {
-          showToast(isNew ? 'Document created successfully' : 'Changes saved');
-          setTimeout(() => {
-            window.location.href = `/${collection}`;
-          }, 800);
+          showToast("Published successfully");
+          location.reload();
         } else {
           const error = await response.json();
-          showToast(error.error || 'An error occurred', true);
+          showToast(error.error || "Failed to publish", true);
         }
-      } catch (error) {
-        showToast('Failed to save document', true);
+      } catch (err) {
+        showToast("Failed to publish", true);
       } finally {
-        if (btn) {
-          btn.textContent = originalText;
-          btn.removeAttribute('disabled');
+        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>