@kyro-cms/admin 0.12.19 → 0.12.21

package/src/pages/audit/index.astro

@@ -3,7 +3,10 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
 import i18next from '../../lib/i18n';
 import { AuditLogsPage } from '../../components/AuditLogsPage';
 
-import { adminPath, apiPath } from '../../lib/paths';
+import { requireAuthServer } from '../../lib/auth-server';
+
+const redirect = await requireAuthServer(Astro.request, { collectionRead: 'audit_logs' });
+if (redirect) return redirect;
 ---
 
 <AdminLayout title={i18next.t("pages." + "Audit Logs".replace(/ /g, ""), { defaultValue: "Audit Logs" })}> 

package/src/pages/auth/check-email.astro

@@ -0,0 +1,146 @@
+---
+import AuthLayout from "../../layouts/AuthLayout.astro";
+import { adminPath, apiPath } from "../../lib/paths";
+import { getSiteSettings } from "../../lib/globals";
+
+const siteSettings = await getSiteSettings({ request: Astro.request });
+const siteName = siteSettings?.siteName || "Kyro CMS";
+
+const url = new URL(Astro.request.url);
+const email = url.searchParams.get("email") || "";
+const type = url.searchParams.get("type") || "register";
+
+let title = "Check your email";
+let description = `We sent a confirmation link to ${email ? email : "your email address"}. Click the link to complete your request.`;
+
+if (type === "register") {
+  title = "Verify your email address";
+  description = `We've sent an account verification link to ${email ? email : "your email address"}. Please verify your email to activate your ${siteName} account.`;
+} else if (type === "reset") {
+  title = "Password reset link sent";
+  description = `We've sent a password reset link to ${email ? email : "your email address"}. Check your inbox to set a new password.`;
+} else if (type === "magic-link") {
+  title = "Magic link sent";
+  description = `We've sent a one-time sign in link to ${email ? email : "your email address"}.`;
+}
+---
+
+<AuthLayout title={title}>
+  <div class="surface-tile p-8 w-full text-center" style="max-width: 440px;">
+    <!-- Mail Icon Badge -->
+    <div class="mx-auto w-16 h-16 rounded-2xl bg-[var(--kyro-sidebar-active)]/10 text-[var(--kyro-sidebar-active)] flex items-center justify-center mb-6 shadow-sm">
+      <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+      </svg>
+    </div>
+
+    <h1 class="text-2xl font-bold tracking-tight text-[var(--kyro-text-primary)]">
+      {title}
+    </h1>
+
+    <p class="text-sm text-[var(--kyro-text-secondary)] mt-3 leading-relaxed">
+      {description}
+    </p>
+
+    {email && (
+      <div class="mt-4 inline-block px-3 py-1.5 rounded-lg bg-[var(--kyro-input-bg)] border border-[var(--kyro-border)] text-xs font-mono font-medium text-[var(--kyro-text-primary)]">
+        {email}
+      </div>
+    )}
+
+    <!-- Helper Actions -->
+    <div class="mt-8 space-y-3">
+      {email && email.includes("@gmail.com") && (
+        <a
+          href="https://mail.google.com"
+          target="_blank"
+          class="w-full py-3 px-4 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl text-sm font-bold hover:opacity-90 transition-colors shadow-lg flex items-center justify-center gap-2"
+        >
+          Open Gmail Inbox
+          <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>
+        </a>
+      )}
+
+      {email && (email.includes("@outlook.com") || email.includes("@hotmail.com")) && (
+        <a
+          href="https://outlook.live.com"
+          target="_blank"
+          class="w-full py-3 px-4 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl text-sm font-bold hover:opacity-90 transition-colors shadow-lg flex items-center justify-center gap-2"
+        >
+          Open Outlook Inbox
+          <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>
+        </a>
+      )}
+
+      <button
+        id="resend-btn"
+        class="w-full py-3 px-4 bg-[var(--kyro-input-bg)] border border-[var(--kyro-border)] text-[var(--kyro-text-primary)] rounded-xl text-sm font-semibold hover:bg-[var(--kyro-border)]/50 transition-colors"
+      >
+        Resend Email
+      </button>
+
+      <div id="resend-message" class="hidden text-xs font-medium mt-2"></div>
+    </div>
+
+    <!-- Back to Login -->
+    <div class="mt-8 pt-6 border-t border-[var(--kyro-border)]">
+      <a
+        href={`${adminPath}/login`}
+        class="text-sm font-medium text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors inline-flex items-center gap-1.5"
+      >
+        <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 19l-7-7m0 0l7-7m-7 7h18"></path>
+        </svg>
+        Back to sign in
+      </a>
+    </div>
+  </div>
+
+  <script is:inline define:vars={{ apiPath, email, type }}>
+    const resendBtn = document.getElementById("resend-btn");
+    const resendMsg = document.getElementById("resend-message");
+
+    resendBtn?.addEventListener("click", async () => {
+      if (!email) {
+        if (resendMsg) {
+          resendMsg.textContent = "Please return to sign in.";
+          resendMsg.className = "block text-xs font-medium text-amber-600 mt-2";
+        }
+        return;
+      }
+
+      resendBtn.disabled = true;
+      resendBtn.textContent = "Sending...";
+
+      try {
+        const endpoint = type === "reset" ? "/auth/forgot-password" : "/auth/register";
+        const res = await fetch(apiPath + endpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email }),
+        });
+
+        if (resendMsg) {
+          resendMsg.textContent = "Confirmation email resent successfully!";
+          resendMsg.className = "block text-xs font-medium text-emerald-600 mt-2";
+        }
+      } catch (err) {
+        if (resendMsg) {
+          resendMsg.textContent = "Failed to resend. Please try again.";
+          resendMsg.className = "block text-xs font-medium text-rose-600 mt-2";
+        }
+      } finally {
+        setTimeout(() => {
+          if (resendBtn) {
+            resendBtn.disabled = false;
+            resendBtn.textContent = "Resend Email";
+          }
+        }, 5000);
+      }
+    });
+  </script>
+</AuthLayout>

package/src/pages/auth/forgot-password.astro

@@ -0,0 +1,95 @@
+---
+import AuthLayout from "../../layouts/AuthLayout.astro";
+import { adminPath, apiPath } from "../../lib/paths";
+import { getSiteSettings } from "../../lib/globals";
+
+const siteSettings = await getSiteSettings({ request: Astro.request });
+const siteName = siteSettings?.siteName || "Kyro CMS";
+---
+
+<AuthLayout title="Forgot Password">
+  <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)]">
+        Forgot password?
+      </h1>
+      <p class="text-sm text-[var(--kyro-text-secondary)] mt-2">
+        Enter your email address and we'll send you a password reset link.
+      </p>
+    </div>
+
+    <form id="forgot-form" class="space-y-5">
+      <div>
+        <label for="email" class="block text-sm font-medium text-[var(--kyro-text-primary)] mb-2">
+          Email address
+        </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 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"
+      >
+        Send Reset Link
+      </button>
+    </form>
+
+    <p class="text-center text-sm text-[var(--kyro-text-secondary)] mt-6">
+      Remember your password?{" "}
+      <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("forgot-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;
+
+      button.disabled = true;
+      button.textContent = "Sending link...";
+
+      try {
+        const res = await fetch(apiPath + "/auth/forgot-password", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email }),
+        });
+
+        const data = await res.json();
+
+        if (res.ok && data.success) {
+          message.textContent = "Reset link dispatched!";
+          message.className = "block p-3 rounded-xl text-sm font-medium bg-emerald-50 text-emerald-600";
+          setTimeout(() => {
+            window.location.href = `${adminPath}/auth/check-email?email=${encodeURIComponent(email)}&type=reset`;
+          }, 600);
+        } else {
+          message.textContent = data.error || "Failed to send reset link";
+          message.className = "block p-3 rounded-xl text-sm font-medium bg-red-50 text-red-600";
+          button.disabled = false;
+          button.textContent = "Send Reset Link";
+        }
+      } catch (err) {
+        message.textContent = "Connection error";
+        message.className = "block p-3 rounded-xl text-sm font-medium bg-red-50 text-red-600";
+        button.disabled = false;
+        button.textContent = "Send Reset Link";
+      }
+    });
+  </script>
+</AuthLayout>

package/src/pages/auth/login.astro

@@ -1,6 +1,10 @@
 ---
 import AuthLayout from "../../layouts/AuthLayout.astro";
 import { adminPath, apiPath } from "../../lib/paths";
+import { getGlobal } from "../../lib/globals";
+
+const systemSettings = await getGlobal("system", { request: Astro.request });
+const registrationEnabled = systemSettings?.enableRegistration ?? true;
 ---
 
 <AuthLayout title="Sign In">
@@ -34,11 +38,18 @@ import { adminPath, apiPath } from "../../lib/paths";
       </div>
 
       <div>
-        <label
-          for="password"
-          class="block text-sm font-medium text-[var(--kyro-text-primary)] mb-2"
-          >Password</label
-        >
+        <div class="flex items-center justify-between mb-2">
+          <label
+            for="password"
+            class="block text-sm font-medium text-[var(--kyro-text-primary)]"
+            >Password</label
+          >
+          <a
+            href={`${adminPath}/auth/forgot-password`}
+            class="text-xs font-medium text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors"
+            >Forgot password?</a
+          >
+        </div>
         <input
           type="password"
           id="password"
@@ -60,13 +71,19 @@ import { adminPath, apiPath } from "../../lib/paths";
       </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>
+    {
+      registrationEnabled && (
+        <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 }}>

package/src/pages/auth/register.astro

@@ -2,14 +2,40 @@
 import AuthLayout from "../../layouts/AuthLayout.astro";
 
 import { adminPath, apiPath } from "../../lib/paths";
-import { getSiteSettings } from "../../lib/globals";
+import { getSiteSettings, getGlobal } from "../../lib/globals";
 
 const siteSettings = await getSiteSettings({ request: Astro.request });
+const systemSettings = await getGlobal("system", { request: Astro.request });
 const siteName = siteSettings?.siteName || "Kyro CMS";
+const registrationEnabled = systemSettings?.enableRegistration ?? true;
 ---
 
-<AuthLayout title="Create Account">
-  <div class="surface-tile p-8 w-full" style="max-width: 420px;">
+<AuthLayout title={registrationEnabled ? "Create Account" : "Registration Disabled"}>
+  {
+    !registrationEnabled ? (
+      <div class="surface-tile p-8 w-full text-center" style="max-width: 420px;">
+        <div class="mx-auto w-16 h-16 rounded-2xl bg-amber-500/10 text-amber-600 flex items-center justify-center mb-6 shadow-sm">
+          <svg class="w-8 h-8" 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>
+        <h1 class="text-2xl font-bold tracking-tight text-[var(--kyro-text-primary)]">
+          Registration Disabled
+        </h1>
+        <p class="text-sm text-[var(--kyro-text-secondary)] mt-3 leading-relaxed">
+          New user registration is currently disabled by the site administrator.
+        </p>
+        <div class="mt-8">
+          <a
+            href={`${adminPath}/login`}
+            class="w-full py-3 px-4 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl text-sm font-bold hover:opacity-90 transition-colors shadow-lg inline-block"
+          >
+            Sign In to {siteName} →
+          </a>
+        </div>
+      </div>
+    ) : (
+      <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)]"
@@ -91,6 +117,8 @@ const siteName = siteSettings?.siteName || "Kyro CMS";
       >
     </p>
   </div>
+    )
+  }
 
   <script is:inline define:vars={{ apiPath, adminPath }}>
     document
@@ -133,25 +161,23 @@ const siteName = siteSettings?.siteName || "Kyro CMS";
 
           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";
+              "block p-3 rounded-xl text-sm font-medium bg-emerald-50 text-emerald-600";
             setTimeout(() => {
               window.location.href = adminPath;
-            }, 1000);
+            }, 800);
           } else if (res.ok && data.success) {
-            // Email verification required
-            message.textContent =
-              data.message || "Please check your email to verify your account.";
+            // Email verification required -> Navigate to Check Email page
+            message.textContent = "Account created! Redirecting to email confirmation...";
             message.className =
-              "block p-3 rounded-xl text-sm font-regular  bg-green-50 text-green-600";
+              "block p-3 rounded-xl text-sm font-medium bg-emerald-50 text-emerald-600";
             setTimeout(() => {
-              window.location.href = adminPath + "/login";
-            }, 2000);
+              window.location.href = `${adminPath}/auth/check-email?email=${encodeURIComponent(email)}&type=register`;
+            }, 600);
           } else {
             message.textContent = data.error || "Registration failed";
             message.className =

package/src/pages/auth/reset-password.astro

@@ -0,0 +1,125 @@
+---
+import AuthLayout from "../../layouts/AuthLayout.astro";
+import { adminPath, apiPath } from "../../lib/paths";
+
+const url = new URL(Astro.request.url);
+const token = url.searchParams.get("token") || "";
+---
+
+<AuthLayout title="Reset Password">
+  <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)]">
+        Set new password
+      </h1>
+      <p class="text-sm text-[var(--kyro-text-secondary)] mt-2">
+        Please choose a strong new password for your account.
+      </p>
+    </div>
+
+    <form id="reset-form" class="space-y-5">
+      <input type="hidden" name="token" value={token} />
+
+      <div>
+        <label for="newPassword" class="block text-sm font-medium text-[var(--kyro-text-primary)] mb-2">
+          New Password
+        </label>
+        <input
+          type="password"
+          id="newPassword"
+          name="newPassword"
+          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 New 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="Re-enter new 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"
+      >
+        Update Password
+      </button>
+    </form>
+
+    <p class="text-center text-sm text-[var(--kyro-text-secondary)] mt-6">
+      <a href={`${adminPath}/login`} class="font-medium text-[var(--kyro-text-primary)] hover:underline">
+        Back to sign in
+      </a>
+    </p>
+  </div>
+
+  <script is:inline define:vars={{ apiPath, adminPath }}>
+    document.getElementById("reset-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 token = form.token.value;
+      const newPassword = form.newPassword.value;
+      const confirmPassword = form.confirmPassword.value;
+
+      if (!token) {
+        message.textContent = "Invalid or missing password reset token";
+        message.className = "block p-3 rounded-xl text-sm font-medium bg-red-50 text-red-600";
+        return;
+      }
+
+      if (newPassword !== confirmPassword) {
+        message.textContent = "Passwords do not match";
+        message.className = "block p-3 rounded-xl text-sm font-medium bg-red-50 text-red-600";
+        return;
+      }
+
+      button.disabled = true;
+      button.textContent = "Updating password...";
+
+      try {
+        const res = await fetch(apiPath + "/auth/reset-password", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ token, newPassword, confirmPassword }),
+        });
+
+        const data = await res.json();
+
+        if (res.ok && data.success) {
+          message.textContent = "Password reset successfully!";
+          message.className = "block p-3 rounded-xl text-sm font-medium bg-emerald-50 text-emerald-600";
+          setTimeout(() => {
+            window.location.href = `${adminPath}/login`;
+          }, 1200);
+        } else {
+          message.textContent = data.error || "Password reset failed";
+          message.className = "block p-3 rounded-xl text-sm font-medium bg-red-50 text-red-600";
+          button.disabled = false;
+          button.textContent = "Update Password";
+        }
+      } catch (err) {
+        message.textContent = "Connection error";
+        message.className = "block p-3 rounded-xl text-sm font-medium bg-red-50 text-red-600";
+        button.disabled = false;
+        button.textContent = "Update Password";
+      }
+    });
+  </script>
+</AuthLayout>

package/src/pages/auth/verify-email.astro

@@ -0,0 +1,87 @@
+---
+import AuthLayout from "../../layouts/AuthLayout.astro";
+import { adminPath, apiPath } from "../../lib/paths";
+import { getSiteSettings } from "../../lib/globals";
+
+const siteSettings = await getSiteSettings({ request: Astro.request });
+const siteName = siteSettings?.siteName || "Kyro CMS";
+
+const url = new URL(Astro.request.url);
+const token = url.searchParams.get("token") || "";
+---
+
+<AuthLayout title="Email Verification">
+  <div class="surface-tile p-8 w-full text-center" style="max-width: 420px;">
+    <div id="status-icon" class="mx-auto w-16 h-16 rounded-2xl bg-[var(--kyro-sidebar-active)]/10 text-[var(--kyro-sidebar-active)] flex items-center justify-center mb-6 shadow-sm">
+      <svg class="w-8 h-8 animate-spin" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+    </div>
+
+    <h1 id="status-title" class="text-2xl font-bold tracking-tight text-[var(--kyro-text-primary)]">
+      Verifying your email...
+    </h1>
+
+    <p id="status-subtitle" class="text-sm text-[var(--kyro-text-secondary)] mt-3 leading-relaxed">
+      Please wait while we validate your confirmation link.
+    </p>
+
+    <div id="action-container" class="mt-8 hidden">
+      <a
+        href={`${adminPath}/login`}
+        class="w-full py-3 px-4 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl text-sm font-bold hover:opacity-90 transition-colors shadow-lg inline-block"
+      >
+        Sign In to {siteName} →
+      </a>
+    </div>
+  </div>
+
+  <script is:inline define:vars={{ apiPath, token, adminPath }}>
+    async function runVerification() {
+      const icon = document.getElementById("status-icon");
+      const title = document.getElementById("status-title");
+      const subtitle = document.getElementById("status-subtitle");
+      const action = document.getElementById("action-container");
+
+      if (!token) {
+        if (title) title.textContent = "Missing Token";
+        if (subtitle) subtitle.textContent = "No email verification token was provided in the URL.";
+        if (icon) {
+          icon.className = "mx-auto w-16 h-16 rounded-2xl bg-rose-500/10 text-rose-600 flex items-center justify-center mb-6 shadow-sm";
+          icon.innerHTML = `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`;
+        }
+        if (action) action.classList.remove("hidden");
+        return;
+      }
+
+      try {
+        const res = await fetch(`${apiPath}/auth/verify-email?token=${encodeURIComponent(token)}`);
+        const data = await res.json();
+
+        if (res.ok && data.success) {
+          if (title) title.textContent = "Email Verified!";
+          if (subtitle) subtitle.textContent = data.message || "Your email address has been confirmed. You can now access your account.";
+          if (icon) {
+            icon.className = "mx-auto w-16 h-16 rounded-2xl bg-emerald-500/10 text-emerald-600 flex items-center justify-center mb-6 shadow-sm";
+            icon.innerHTML = `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>`;
+          }
+        } else {
+          if (title) title.textContent = "Verification Failed";
+          if (subtitle) subtitle.textContent = data.error || "The verification token is invalid or has expired.";
+          if (icon) {
+            icon.className = "mx-auto w-16 h-16 rounded-2xl bg-rose-500/10 text-rose-600 flex items-center justify-center mb-6 shadow-sm";
+            icon.innerHTML = `<svg class="w-8 h-8" 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>`;
+          }
+        }
+      } catch (err) {
+        if (title) title.textContent = "Connection Error";
+        if (subtitle) subtitle.textContent = "Failed to connect to verification server.";
+      } finally {
+        if (action) action.classList.remove("hidden");
+      }
+    }
+
+    runVerification();
+  </script>
+</AuthLayout>