@kyro-cms/admin 0.3.2 → 0.3.5

package/src/pages/auth/register.astro

@@ -0,0 +1,167 @@
+---
+import AuthLayout from "../../layouts/AuthLayout.astro";
+
+import { adminPath, apiPath } from "../../lib/paths";
+---
+
+<AuthLayout title="Create Account">
+  <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)]"
+      >
+        Create your account
+      </h1>
+      <p class="text-sm text-[var(--kyro-text-secondary)] mt-2">
+        Get started with Kyro CMS
+      </p>
+    </div>
+
+    <form id="register-form" class="space-y-5">
+      <div>
+        <label
+          for="email"
+          class="block text-sm font-medium text-[var(--kyro-text-primary)] mb-2"
+          >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
+          minlength="8"
+          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="Minimum 8 characters"
+        />
+      </div>
+
+      <div>
+        <label
+          for="confirmPassword"
+          class="block text-sm font-medium text-[var(--kyro-text-primary)] mb-2"
+          >Confirm Password</label
+        >
+        <input
+          type="password"
+          id="confirmPassword"
+          name="confirmPassword"
+          required
+          minlength="8"
+          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="Confirm your password"
+        />
+      </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"
+      >
+        Create Account
+      </button>
+    </form>
+
+    <p class="text-center text-sm text-[var(--kyro-text-secondary)] mt-6">
+      Already have an account? <a
+        href={`${adminPath}/login`}
+        class="font-medium text-[var(--kyro-text-primary)] hover:underline"
+        >Sign in</a
+      >
+    </p>
+  </div>
+
+  <script is:inline define:vars={{ apiPath, adminPath }}>
+    document
+      .getElementById("register-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;
+        const confirmPassword = form.confirmPassword.value;
+
+        if (password !== confirmPassword) {
+          message.textContent = "Passwords do not match";
+          message.className =
+            "block p-3 rounded-xl text-sm font-regular bg-red-50 text-red-600";
+          return;
+        }
+
+        if (password.length < 8) {
+          message.textContent = "Password must be at least 8 characters";
+          message.className =
+            "block p-3 rounded-xl text-sm font-regular bg-red-50 text-red-600";
+          return;
+        }
+
+        button.disabled = true;
+        button.textContent = "Creating account...";
+
+        try {
+          const res = await fetch(apiPath + "/auth/register", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ email, password, confirmPassword }),
+          });
+
+          const data = await res.json();
+
+          if (res.ok && data.success && data.user) {
+            // Cookies set server-side via Set-Cookie headers
+            // Store user in memory only (not localStorage)
+            window.__kyroAuth = { user: data.user, verified: true };
+            message.textContent = data.isFirstUser
+              ? "Super admin account created!"
+              : "Account created successfully!";
+            message.className =
+              "block p-3 rounded-xl text-sm font-regular  bg-green-50 text-green-600";
+            setTimeout(() => {
+              window.location.href = adminPath;
+            }, 1000);
+          } else if (res.ok && data.success) {
+            // Email verification required
+            message.textContent =
+              data.message || "Please check your email to verify your account.";
+            message.className =
+              "block p-3 rounded-xl text-sm font-regular  bg-green-50 text-green-600";
+            setTimeout(() => {
+              window.location.href = adminPath + "/login";
+            }, 2000);
+          } else {
+            message.textContent = data.error || "Registration failed";
+            message.className =
+              "block p-3 rounded-xl text-sm font-regular bg-red-50 text-red-600";
+            button.disabled = false;
+            button.textContent = "Create Account";
+          }
+        } 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 = "Create Account";
+        }
+      });
+  </script>
+</AuthLayout>

package/src/pages/graphql-explorer.astro

@@ -0,0 +1,59 @@
+---
+import AdminLayout from "../layouts/AdminLayout.astro";
+import { GraphQLPlayground } from "../components/GraphQLPlayground";
+
+import { adminPath, apiPath } from "../lib/paths";
+---
+
+<AdminLayout title="GraphQL 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)]"
+          >
+            GraphQL Explorer
+          </h1>
+          <p
+            class="text-[var(--kyro-text-secondary)] font-bold mt-2 text-sm tracking-wider"
+          >
+            Schema documentation and type explorer
+          </p>
+        </div>
+        <div class="flex items-center gap-4">
+          <a
+            href={`${adminPath}/graphql`}
+            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="M13 10V3L4 14h7v7l9-11h-7z"></path>
+            </svg>
+            Playground
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Explorer Container -->
+    <div class="h-[calc(100vh-200px)] surface-tile overflow-hidden">
+      <div class="surface-tile h-full overflow-hidden">
+        <GraphQLPlayground
+          client:load
+          endpoint={`${apiPath}/graphql`}
+          initialShowDocs={true}
+        />
+      </div>
+    </div>
+  </div>
+</AdminLayout>

package/src/pages/{admin/graphql.astro → graphql.astro}

@@ -1,46 +1,76 @@
 ---
-import AdminLayout from '../../layouts/AdminLayout.astro';
-import { GraphQLPlayground } from '../../components/GraphQLPlayground';
+import AdminLayout from "../layouts/AdminLayout.astro";
+import { GraphQLPlayground } from "../components/GraphQLPlayground";
+
+import { adminPath, apiPath } from "../lib/paths";
 
 const url = Astro.request.url;
 const params = new URL(url).searchParams;
-const initialQuery = params.get('query') || '';
+const initialQuery = params.get("query") || "";
 ---
 
 <AdminLayout title="GraphQL Playground">
-  <div class="flex-1 overflow-hidden p-8 pr-12">
+  <div class="flex-1 overflow-hidden">
     <!-- Header -->
-    <div class="mb-6">
+    <div class="mb-6 surface-tile">
       <div class="flex items-center justify-between mb-4">
         <div>
-          <h1 class="text-3xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
+          <h1
+            class="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]"
+          >
             GraphQL Playground
           </h1>
-          <p class="text-[var(--kyro-text-secondary)] font-bold mt-2 text-sm uppercase tracking-wider">
+          <p
+            class="text-[var(--kyro-text-secondary)] font-bold mt-2 text-sm tracking-wider"
+          >
             Interactive GraphQL query editor and explorer
           </p>
         </div>
         <div class="flex items-center gap-4">
           <a
-            href="/admin/graphql-explorer"
+            href={`${adminPath}/graphql-explorer`}
             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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+            <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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+              ></path>
             </svg>
             Explorer
           </a>
-          <div class="flex items-center gap-2 px-4 py-2 bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)]">
+          <div
+            class="flex items-center gap-2 px-4 py-2 bg-[var(--kyro-surface-accent)] rounded-lg border border-[var(--kyro-border)]"
+          >
             <div class="w-2 h-2 rounded-full bg-green-500"></div>
-            <span class="text-sm font-bold text-[var(--kyro-text-primary)]">API Active</span>
+            <span class="text-sm font-medium text-[var(--kyro-text-primary)]"
+              >API Active</span
+            >
           </div>
           <a
-            href="/api/graphql"
+            href={`${apiPath}/graphql`}
             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" />
+            <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>
             Open Endpoint
           </a>
@@ -77,8 +107,12 @@ const initialQuery = params.get('query') || '';
     </div>
 
     <!-- GraphQL Playground Container -->
-    <div class="h-[calc(100vh-280px)] overflow-hidden">
-      <GraphQLPlayground client:load endpoint="/api/graphql" initialQuery={initialQuery} />
+    <div class="h-[calc(100vh-280px)] overflow-hidden surface-tile">
+      <GraphQLPlayground
+        client:load
+        endpoint={`${apiPath}/graphql`}
+        initialQuery={initialQuery}
+      />
     </div>
   </div>