@kyro-cms/admin 0.12.20 → 0.12.22

package/src/components/users/UserDetail.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { apiGet } from "../../lib/api";
-import { useUIStore, toast } from "../../lib/stores";
+import { useUIStore, useAuthStore, toast } from "../../lib/stores";
 import { UploadField } from "../fields/UploadField";
 import { useTranslation } from "react-i18next";
 import { navigate } from '../../lib/navigate';
@@ -47,6 +47,27 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
   const [, setDeleting] = useState(false);
   const [locking, setLocking] = useState(false);
   const [isLocked, setIsLocked] = useState(user.locked || false);
+  const [currentUserRole, setCurrentUserRole] = useState<string>("");
+
+  useEffect(() => {
+    if ((window as any).__kyroAuth?.user?.role) {
+      setCurrentUserRole((window as any).__kyroAuth.user.role);
+    } else {
+      apiGet<any>("/api/auth/me")
+        .then((res) => {
+          if (res?.user?.role) setCurrentUserRole(res.user.role);
+        })
+        .catch(() => { });
+    }
+
+    const handler = (e: any) => {
+      if (e.detail?.user?.role) {
+        setCurrentUserRole(e.detail.user.role);
+      }
+    };
+    window.addEventListener("kyro:auth-ready", handler);
+    return () => window.removeEventListener("kyro:auth-ready", handler);
+  }, []);
 
   useEffect(() => {
     if (typeof avatar === "string" && /^[0-9a-f-]+$/i.test(avatar)) {
@@ -105,6 +126,15 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
 
       if (res.ok) {
         toast.success("User updated");
+        const currentMe = (window as any).__kyroAuth?.user || useAuthStore.getState().user;
+        if (currentMe && (currentMe.id === user.id || currentMe.email === user.email)) {
+          apiGet<any>("/api/auth/me").then((meRes) => {
+            const updatedUser = meRes?.user || meRes;
+            if (updatedUser) {
+              useAuthStore.getState().setUser(updatedUser);
+            }
+          });
+        }
         navigate(adminPath + "/users");
       } else {
         toast.error(data.error || "Failed to save user");
@@ -182,7 +212,7 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
 
   return (
     <div className="flex-1 overflow-y-auto  space-y-8">
-      <div className="surface-tile p-6 flex items-center justify-between">
+      <div className="surface-tile p-6 flex items-center justify-between rounded-lg">
         <div className="flex items-center gap-4">
           <div className="relative w-14 h-14 rounded-full bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] flex items-center justify-center font-bold text-xl overflow-hidden flex-shrink-0">
             {avatarUrl ? (
@@ -200,23 +230,25 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
             </p>
           </div>
         </div>
-        <div className="flex gap-2">
-          <button
-            onClick={handleLockToggle}
-            className="px-4 py-2 border border-[var(--kyro-border)] rounded-xl text-sm font-bold text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] transition-colors"
-          >
-            {isLocked ? "Unlock User" : "Lock User"}
-          </button>
-          <button
-            onClick={handleDelete}
-            className="px-4 py-2 border border-red-200 rounded-xl text-sm font-bold text-red-600 hover:bg-red-50 transition-colors"
-          >
-            Delete
-          </button>
-        </div>
+        {(currentUserRole === "admin" || currentUserRole === "super_admin") && (
+          <div className="flex gap-2">
+            <button
+              onClick={handleLockToggle}
+              className="px-4 py-2 border border-[var(--kyro-border)] rounded-xl text-sm font-bold text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] transition-colors"
+            >
+              {isLocked ? "Unlock User" : "Lock User"}
+            </button>
+            <button
+              onClick={handleDelete}
+              className="px-4 py-2 border border-red-200 rounded-xl text-sm font-bold text-red-600 hover:bg-red-50 transition-colors"
+            >
+              Delete
+            </button>
+          </div>
+        )}
       </div>
 
-      <div className="surface-tile p-6">
+      <div className="surface-tile p-6 rounded-lg">
         <h2 className="text-lg font-bold text-[var(--kyro-text-primary)] tracking-tighter mb-6">
           Details
         </h2>
@@ -242,20 +274,33 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
             </p>
           </div>
           <div>
-            <label className="text-xs font-bold text-[var(--kyro-text-secondary)]  tracking-wider">
+            <label className="text-xs font-bold text-[var(--kyro-text-secondary)] tracking-wider">
               Role
             </label>
-            <select
-              value={role}
-              onChange={(e) => setRole(e.target.value)}
-              className="mt-1 w-full px-3 py-2 border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] rounded-lg text-sm font-medium text-[var(--kyro-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)]"
-            >
-              {roleOptions.map((r) => (
-                <option key={r} value={r}>
-                  {r}
-                </option>
-              ))}
-            </select>
+            {(() => {
+              const isSuperAdmin = currentUserRole === "super_admin";
+              return (
+                <div>
+                  <select
+                    value={role}
+                    disabled={!isSuperAdmin}
+                    onChange={(e) => setRole(e.target.value)}
+                    className="mt-1 w-full px-3 py-2 border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] rounded-lg text-sm font-medium text-[var(--kyro-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] disabled:opacity-60 disabled:cursor-not-allowed"
+                  >
+                    {roleOptions.map((r) => (
+                      <option key={r} value={r}>
+                        {r}
+                      </option>
+                    ))}
+                  </select>
+                  {!isSuperAdmin && (
+                    <p className="text-[11px] text-[var(--kyro-text-secondary)] mt-1 font-medium">
+                      Only Super Admin can modify user roles.
+                    </p>
+                  )}
+                </div>
+              );
+            })()}
           </div>
           <div>
             <label className="text-xs font-bold text-[var(--kyro-text-secondary)]  tracking-wider">

package/src/components/users/UserForm.tsx

@@ -89,7 +89,7 @@ export function UserForm({ mode, apiPath, adminPath, user }: UserFormProps) {
 
   return (
     <div className="flex-1 overflow-y-auto  space-y-8">
-      <div className="surface-tile p-6 flex items-center justify-between">
+      <div className="surface-tile p-6 flex items-center justify-between rounded-lg">
         <div>
           <h1 className="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]">
             {mode === "create" ? "Create User" : "Edit User"}

package/src/components/users/UsersList.tsx

@@ -84,7 +84,7 @@ export function UsersList({
 
   return (
     <div className="flex-1 overflow-y-auto  space-y-8">
-      <div className="surface-tile p-6 flex items-center justify-between">
+      <div className="surface-tile p-6 flex items-center justify-between rounded-lg">
         <div>
           <h1 className="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]">
             Users
@@ -117,7 +117,7 @@ export function UsersList({
         </a>
       </div>
 
-      <div className="surface-tile overflow-hidden">
+      <div className="surface-tile overflow-hidden rounded-lg">
         {users.length === 0 ? (
           <div className="px-8 py-16 text-center">
             <div className="flex flex-col items-center gap-4">

package/src/integration.ts

@@ -317,6 +317,10 @@ module.exports = debug;
           { pattern: "", entrypoint: "./pages/index.astro" },
           { pattern: "/login", entrypoint: "./pages/auth/login.astro" },
           { pattern: "/register", entrypoint: "./pages/auth/register.astro" },
+          { pattern: "/auth/check-email", entrypoint: "./pages/auth/check-email.astro" },
+          { pattern: "/auth/forgot-password", entrypoint: "./pages/auth/forgot-password.astro" },
+          { pattern: "/auth/reset-password", entrypoint: "./pages/auth/reset-password.astro" },
+          { pattern: "/auth/verify-email", entrypoint: "./pages/auth/verify-email.astro" },
           { pattern: "/media", entrypoint: "./pages/media.astro" },
           { pattern: "/users", entrypoint: "./pages/users/index.astro" },
           { pattern: "/users/new", entrypoint: "./pages/users/new.astro" },

package/src/layouts/AdminLayout.astro

@@ -112,50 +112,42 @@ const defaultLang = siteSettings?.defaultLanguage || "en";
           }
 
           // Navigation Guard - Check if user has read access to current page
-          if (permissions) {
+          if (permissions && user) {
             const path = window.location.pathname;
             const relativePath = path.replace(adminPath, "");
-
-            // Extract slug and type
-            let slug = "";
-            let type = "";
-
-            if (relativePath.startsWith("/users")) {
-              slug = "users";
-              type = "collection";
+            const userRole = user.role || "";
+            const isSuperAdmin = userRole === "super_admin";
+            const isAdmin = userRole === "admin" || isSuperAdmin;
+
+            let hasAccess = true;
+
+            if (relativePath.startsWith("/roles")) {
+              if (!isSuperAdmin) hasAccess = false;
+            } else if (relativePath.startsWith("/plugins") || relativePath.startsWith("/keys") || relativePath.startsWith("/webhooks")) {
+              if (!isAdmin) hasAccess = false;
+            } else if (relativePath.startsWith("/users")) {
+              if (!isAdmin && permissions.collections?.users?.read !== true) hasAccess = false;
             } else if (relativePath.startsWith("/audit")) {
-              slug = "audit_logs";
-              type = "collection";
+              if (!isAdmin && permissions.collections?.audit_logs?.read !== true) hasAccess = false;
             } else if (relativePath.startsWith("/media")) {
-              slug = "media";
-              type = "collection";
-            } else if (relativePath.startsWith("/settings/")) {
-              slug = relativePath.split("/")[2];
-              type = "global";
+              if (!isAdmin && permissions.collections?.media?.read !== true) hasAccess = false;
+            } else if (relativePath.startsWith("/settings")) {
+              if (!isAdmin) hasAccess = false;
             } else if (
               relativePath.includes("/") &&
               !relativePath.startsWith("/login") &&
-              !relativePath.startsWith("/403")
+              !relativePath.startsWith("/403") &&
+              !relativePath.startsWith("/auth/")
             ) {
-              // Dynamic collections: /[adminPath]/[collectionSlug]/...
-              slug = relativePath.split("/")[1];
-              type = "collection";
-            }
-
-            if (slug && type) {
-              let hasAccess = true;
-              if (type === "collection" && permissions.collections) {
-                const p = permissions.collections[slug];
-                if (p && p.read === false) hasAccess = false;
-              } else if (type === "global" && permissions.globals) {
-                const p = permissions.globals[slug];
-                if (p && p.read === false) hasAccess = false;
+              const colSlug = relativePath.split("/")[1];
+              if (!isAdmin && colSlug && permissions.collections?.[colSlug]?.read !== true) {
+                hasAccess = false;
               }
+            }
 
-              if (!hasAccess) {
-                console.log("[AdminLayout] Access denied for", slug, "redirecting to 403");
-                window.location.href = adminPath + "/403";
-              }
+            if (!hasAccess) {
+              console.log("[AdminLayout] Access denied for", relativePath, "redirecting to 403");
+              window.location.href = adminPath + "/403";
             }
           }
         } catch (err) {

package/src/layouts/AuthLayout.astro

@@ -61,16 +61,25 @@ const defaultLang = siteSettings?.defaultLanguage || "en";
     />
     <script is:inline define:vars={{ adminPath, apiPath }}>
       (async () => {
-        try {
-          const res = await fetch(apiPath + "/auth/me", { credentials: "include" });
-          if (res.ok) {
-            const data = await res.json();
-            if (data?.user) {
-              window.location.href = adminPath;
-              return;
+        const pathname = window.location.pathname;
+        const isAuthActionPage =
+          pathname.includes("/auth/check-email") ||
+          pathname.includes("/auth/verify-email") ||
+          pathname.includes("/auth/reset-password") ||
+          pathname.includes("/auth/forgot-password");
+
+        if (!isAuthActionPage) {
+          try {
+            const res = await fetch(apiPath + "/auth/me", { credentials: "include" });
+            if (res.ok) {
+              const data = await res.json();
+              if (data?.user) {
+                window.location.href = adminPath;
+                return;
+              }
             }
-          }
-        } catch {}
+          } catch {}
+        }
         const getTheme = () => {
           const stored = localStorage.getItem("theme");
           if (stored) return stored;

package/src/lib/auth-server.ts

@@ -0,0 +1,99 @@
+import { apiPath, adminPath } from "./paths";
+
+export interface AuthServerResult {
+  user: any | null;
+  permissions: any | null;
+}
+
+export interface RequireAuthOptions {
+  requireAdmin?: boolean;
+  requireSuperAdmin?: boolean;
+  collectionRead?: string;
+  collectionCreate?: string;
+}
+
+/**
+ * Resolves authenticated user and permissions directly on the server during Astro SSR requests.
+ * Uses dynamic apiPath to support custom API endpoint configurations.
+ */
+export async function getAuthServer(request: Request): Promise<AuthServerResult> {
+  try {
+    const cookie = request.headers.get("cookie") || "";
+    if (!cookie) return { user: null, permissions: null };
+
+    const url = new URL(request.url);
+    const origin = url.origin;
+    const cleanApiPath = apiPath.startsWith("/") ? apiPath : `/${apiPath}`;
+
+    const [meRes, accessRes] = await Promise.all([
+      fetch(`${origin}${cleanApiPath}/auth/me`, {
+        headers: { cookie },
+      }).catch(() => null),
+      fetch(`${origin}${cleanApiPath}/auth/access`, {
+        headers: { cookie },
+      }).catch(() => null),
+    ]);
+
+    const meData = meRes && meRes.ok ? await meRes.json() : null;
+    const permissions = accessRes && accessRes.ok ? await accessRes.json() : null;
+
+    return {
+      user: meData?.user || null,
+      permissions,
+    };
+  } catch (err) {
+    console.error("[getAuthServer] Error resolving SSR auth:", err);
+    return { user: null, permissions: null };
+  }
+}
+
+/**
+ * Declarative server-side SSR route guard helper.
+ * Returns a 302 HTTP Response redirect if the authenticated user lacks permissions,
+ * or null if access is authorized.
+ */
+export async function requireAuthServer(
+  request: Request,
+  options?: RequireAuthOptions
+): Promise<Response | null> {
+  const { user, permissions } = await getAuthServer(request);
+  if (!user) return null;
+
+  const isSuperAdmin = user.role === "super_admin";
+  const isAdmin = user.role === "admin" || isSuperAdmin;
+  const isCustomer = user.role === "customer";
+
+  let hasAccess = true;
+
+  if (options?.requireSuperAdmin && !isSuperAdmin) {
+    hasAccess = false;
+  } else if (options?.requireAdmin && !isAdmin) {
+    hasAccess = false;
+  } else if (options?.collectionRead) {
+    const col = options.collectionRead;
+    if ((col === "settings" || (col === "media" && isCustomer)) && !isAdmin) {
+      hasAccess = false;
+    } else if (col !== "settings") {
+      const url = new URL(request.url);
+      const isSelfUserAccess = col === "users" && !!user?.id && url.pathname.endsWith(`/users/${user.id}`);
+      const canRead = isAdmin || isSelfUserAccess || permissions?.collections?.[col]?.read === true;
+      if (!canRead) hasAccess = false;
+    }
+  } else if (options?.collectionCreate) {
+    const col = options.collectionCreate;
+    if (col === "settings" && !isAdmin) {
+      hasAccess = false;
+    } else if (col !== "settings") {
+      const canCreate = isAdmin || permissions?.collections?.[col]?.create === true;
+      if (!canCreate) hasAccess = false;
+    }
+  }
+
+  if (!hasAccess) {
+    const url = new URL(request.url);
+    const targetUrl = `${url.origin}${adminPath}/403`;
+    return Response.redirect(targetUrl, 302);
+  }
+
+  return null;
+}

package/src/pages/403.astro

@@ -1,66 +1,85 @@
 ---
 import AdminLayout from "../layouts/AdminLayout.astro";
-import i18next from '../lib/i18n';
-import { adminPath } from "../lib/paths";
+import i18next from "../lib/i18n";
+import { adminPath, apiPath } from "../lib/paths";
+import { getAuthServer } from "../lib/auth-server";
 
-// Ensure this page looks premium
+const { user } = await getAuthServer(Astro.request);
+const userEmail = user?.email || "";
+const userRole = user?.role || "";
 ---
 
-<AdminLayout title={i18next.t("pages." + "Access Denied".replace(/ /g, ""), { defaultValue: "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>
+<AdminLayout title={i18next.t("pages." + "Access Denied".replace(/ /g, ""), { defaultValue: "Access Denied" })}>
+  <div class="flex-1 flex items-center justify-center p-6 min-h-[calc(100vh-120px)]">
+    <div
+      class="surface-tile max-w-md w-full p-8 rounded-2xl border border-[var(--kyro-border)] shadow-sm text-center space-y-6"
+    >
+      <!-- Icon & Status Tag -->
+      <div class="flex flex-col items-center gap-3">
         <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"
+          class="w-12 h-12 rounded-xl bg-red-500/10 border border-red-500/20 text-red-500 flex items-center justify-center"
         >
-          <svg
-            class="w-12 h-12"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
               stroke-linecap="round"
               stroke-linejoin="round"
-              stroke-width="2"
+              stroke-width="1.75"
               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>
+        <span
+          class="text-[10px] font-mono font-semibold tracking-widest uppercase px-3 py-1 bg-red-500/10 text-rose-500 rounded-full border border-red-500/20"
+        >
+          HTTP 403 · Restricted
+        </span>
       </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.
+      <!-- Text Header -->
+      <div class="space-y-1.5">
+        <h1 class="text-base font-semibold text-[var(--kyro-text-primary)]">Access Restricted</h1>
+        <p class="text-xs text-[var(--kyro-text-secondary)] leading-relaxed max-w-xs mx-auto">
+          Your current account role does not have permission to view or manage this resource.
         </p>
       </div>
 
-      <div class="pt-4">
+      <!-- Account Context Badge -->
+      {
+        userRole && (
+          <div class="p-3 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg text-left flex items-center justify-between text-xs">
+            <div class="min-w-0 pr-2">
+              <p class="text-[10px] capitalise font-bold tracking-wider text-[var(--kyro-text-muted)]">Signed In As</p>
+              <p class="font-medium text-[var(--kyro-text-primary)] truncate">{userEmail || "Authenticated User"}</p>
+            </div>
+            <span class="px-2.5 py-1 text-[10px] font-bold rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] capitalize tracking-wider flex-shrink-0">
+              {userRole.replace("_", " ")}
+            </span>
+          </div>
+        )
+      }
+
+      <!-- Action Buttons -->
+      <div class="pt-1 flex items-center justify-center gap-2">
+        <button
+          onclick="window.history.back()"
+          class="px-4 py-2 text-xs font-semibold rounded-xl border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)] transition-colors cursor-pointer"
+        >
+          Go Back
+        </button>
+
         <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"
+          class="px-4 py-2 text-xs font-semibold rounded-xl bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90 transition-opacity inline-flex items-center gap-1.5"
         >
-          <svg
-            class="w-4 h-4"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
+          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
               stroke-linecap="round"
               stroke-linejoin="round"
-              stroke-width="2.5"
+              stroke-width="2"
               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
+          Dashboard
         </a>
       </div>
     </div>

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

@@ -25,6 +25,14 @@ if (!isSettings) {
     : `Edit ${config.singularLabel || config.label || collection}`;
 }
 
+import { requireAuthServer } from "../../lib/auth-server";
+
+if (collection) {
+  const reqOp = (!id || id === "new") ? "collectionCreate" : "collectionRead";
+  const redirect = await requireAuthServer(Astro.request, { [reqOp]: collection });
+  if (redirect) return redirect;
+}
+
 import SettingsPageAstro from "../settings/[slug].astro";
 ---
 

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

@@ -21,6 +21,13 @@ if (!isSettings) {
   config = collections[collection];
 }
 
+import { requireAuthServer } from "../../lib/auth-server";
+
+if (collection) {
+  const redirect = await requireAuthServer(Astro.request, { collectionRead: collection });
+  if (redirect) return redirect;
+}
+
 import SettingsIndexAstro from "../settings/index.astro";
 
 let docs: any[] = [];

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" })}>