@kyro-cms/admin 0.1.2 → 0.1.3

package/package.json

@@ -1,10 +1,21 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
   "type": "module",
   "description": "Admin dashboard for Kyro CMS",
-  "main": "./dist/index.js",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "files": [
+    "src"
+  ],
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",
@@ -12,11 +23,11 @@
     "check": "astro check"
   },
   "dependencies": {
-    "@astrojs/node": "^10.0.4",
-    "@astrojs/react": "5.0.2",
+    "@astrojs/node": "^9.5.5",
+    "@astrojs/react": "^4.2.0",
     "@kyro-cms/core": "^0.1.2",
     "@tailwindcss/vite": "^4.0.0",
-    "astro": "6.1.3",
+    "astro": "^5.4.0",
     "lucide-react": "^0.475.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -30,4 +41,4 @@
   "peerDependencies": {
     "@kyro-cms/core": "^0.1.2"
   }
-}
+}

package/src/components/Admin.tsx

@@ -4,6 +4,7 @@ import { Sidebar } from "./layout/Sidebar";
 import { ListView } from "./ListView";
 import { DetailView } from "./DetailView";
 import { CreateView } from "./CreateView";
+import { LoginPage } from "./LoginPage";
 import { Toast, ToastProvider } from "./ui/Toast";
 import { ThemeProvider, type ThemeMode } from "./ThemeProvider";
 import "../styles/main.css";
@@ -29,6 +30,14 @@ interface ToastMessage {
   message: string;
 }
 
+interface AuthUser {
+  id: string;
+  email: string;
+  role: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
 function normalizeCollections(
   input?: CollectionConfig[] | Record<string, CollectionConfig>,
 ): Record<string, CollectionConfig> {
@@ -66,6 +75,8 @@ function normalizeGlobals(
 }
 
 export function Admin({ config, theme = "light", onThemeChange }: AdminProps) {
+  const [authenticated, setAuthenticated] = useState(false);
+  const [currentUser, setCurrentUser] = useState<AuthUser | null>(null);
   const [activeCollection, setActiveCollection] = useState<string | null>(null);
   const [activeGlobal, setActiveGlobal] = useState<string | null>(null);
   const [currentView, setCurrentView] = useState<View>("list");
@@ -75,12 +86,44 @@ export function Admin({ config, theme = "light", onThemeChange }: AdminProps) {
   const collections = normalizeCollections(config.collections);
   const globals = normalizeGlobals(config.globals);
 
+  useEffect(() => {
+    const token = localStorage.getItem("kyro_token");
+    const userStr = localStorage.getItem("kyro_user");
+    if (token && userStr) {
+      try {
+        const user = JSON.parse(userStr);
+        setAuthenticated(true);
+        setCurrentUser(user);
+      } catch {
+        localStorage.removeItem("kyro_token");
+        localStorage.removeItem("kyro_user");
+      }
+    }
+  }, []);
+
   useEffect(() => {
     const collectionKeys = Object.keys(collections);
     if (collectionKeys.length > 0 && !activeCollection) {
       setActiveCollection(collectionKeys[0]);
     }
-  }, []);
+  }, [authenticated]);
+
+  const handleAuth = (token: string, user: AuthUser) => {
+    setAuthenticated(true);
+    setCurrentUser(user);
+  };
+
+  const handleLogout = async () => {
+    try {
+      await fetch("/api/auth/logout", { method: "POST" });
+    } catch {
+    } finally {
+      localStorage.removeItem("kyro_token");
+      localStorage.removeItem("kyro_user");
+      setAuthenticated(false);
+      setCurrentUser(null);
+    }
+  };
 
   const addToast = (type: ToastMessage["type"], message: string) => {
     const id = Math.random().toString(36).substring(7);
@@ -182,6 +225,10 @@ export function Admin({ config, theme = "light", onThemeChange }: AdminProps) {
     }
   };
 
+  if (!authenticated) {
+    return <LoginPage onAuth={handleAuth} theme={theme} />;
+  }
+
   return (
     <ThemeProvider defaultMode={theme}>
       <ToastProvider>
@@ -193,6 +240,8 @@ export function Admin({ config, theme = "light", onThemeChange }: AdminProps) {
             activeGlobal={activeGlobal}
             onCollectionClick={handleCollectionChange}
             onGlobalClick={handleGlobalChange}
+            user={currentUser}
+            onLogout={handleLogout}
           />
           <div className="kyro-main">
             <div className="kyro-content">{renderContent()}</div>

package/src/components/LoginPage.tsx

@@ -0,0 +1,223 @@
+import { useState, useEffect } from "react";
+import { ThemeProvider, type ThemeMode } from "./ThemeProvider";
+import { Toast, ToastProvider } from "./ui/Toast";
+
+interface LocalToast {
+  id: string;
+  type: "success" | "error" | "info" | "warning";
+  message: string;
+}
+
+interface LoginPageProps {
+  onAuth: (token: string, user: any) => void;
+  theme?: ThemeMode;
+}
+
+type AuthMode = "login" | "register";
+
+export function LoginPage({ onAuth, theme = "light" }: LoginPageProps) {
+  const [mode, setMode] = useState<AuthMode>("login");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [toasts, setToasts] = useState<LocalToast[]>([]);
+  const [isFirstUser, setIsFirstUser] = useState(false);
+
+  useEffect(() => {
+    checkIfFirstUser();
+  }, []);
+
+  const checkIfFirstUser = async () => {
+    try {
+      const res = await fetch("/api/auth/users");
+      if (res.status === 401 || res.status === 404) {
+        setIsFirstUser(true);
+        setMode("register");
+      }
+    } catch {
+      setIsFirstUser(true);
+      setMode("register");
+    }
+  };
+
+  const addToast = (type: LocalToast["type"], message: string) => {
+    const id = Math.random().toString(36).substring(7);
+    setToasts((prev) => [...prev, { id, type, message }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 5000);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      const endpoint =
+        mode === "login" ? "/api/auth/login" : "/api/auth/register";
+      const body: Record<string, string> = { email, password };
+      if (mode === "register") {
+        body.confirmPassword = confirmPassword;
+      }
+
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        addToast("error", data.error || "Something went wrong");
+        return;
+      }
+
+      if (data.isFirstUser) {
+        setIsFirstUser(true);
+      }
+
+      localStorage.setItem("kyro_token", data.token);
+      localStorage.setItem("kyro_user", JSON.stringify(data.user));
+      addToast(
+        "success",
+        mode === "login" ? "Welcome back!" : "Account created!",
+      );
+      onAuth(data.token, data.user);
+    } catch {
+      addToast("error", "Connection failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <ThemeProvider defaultMode={theme}>
+      <ToastProvider>
+        <div className="kyro-login-page">
+          <div className="kyro-login-container">
+            <div className="kyro-login-header">
+              <h1 className="kyro-login-title">
+                {isFirstUser
+                  ? "Create Admin Account"
+                  : mode === "login"
+                    ? "Sign In"
+                    : "Create Account"}
+              </h1>
+              <p className="kyro-login-subtitle">
+                {isFirstUser
+                  ? "Set up your admin account to get started"
+                  : mode === "login"
+                    ? "Enter your credentials to access the admin"
+                    : "Create an account to access the admin"}
+              </p>
+            </div>
+
+            <form onSubmit={handleSubmit} className="kyro-login-form">
+              <div className="kyro-form-group">
+                <label htmlFor="email">Email</label>
+                <input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="admin@example.com"
+                  required
+                  autoComplete="email"
+                />
+              </div>
+
+              <div className="kyro-form-group">
+                <label htmlFor="password">Password</label>
+                <input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="••••••••"
+                  required
+                  minLength={8}
+                  autoComplete={
+                    mode === "login" ? "current-password" : "new-password"
+                  }
+                />
+              </div>
+
+              {mode === "register" && (
+                <div className="kyro-form-group">
+                  <label htmlFor="confirmPassword">Confirm Password</label>
+                  <input
+                    id="confirmPassword"
+                    type="password"
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    placeholder="••••••••"
+                    required
+                    minLength={8}
+                    autoComplete="new-password"
+                  />
+                </div>
+              )}
+
+              <button
+                type="submit"
+                className="kyro-btn kyro-btn-primary kyro-btn-lg"
+                disabled={loading}
+              >
+                {loading
+                  ? mode === "login"
+                    ? "Signing in..."
+                    : "Creating account..."
+                  : mode === "login"
+                    ? "Sign In"
+                    : "Create Account"}
+              </button>
+            </form>
+
+            {!isFirstUser && (
+              <div className="kyro-login-footer">
+                <p>
+                  {mode === "login" ? (
+                    <>
+                      Don't have an account?{" "}
+                      <button
+                        type="button"
+                        className="kyro-login-link"
+                        onClick={() => setMode("register")}
+                      >
+                        Sign up
+                      </button>
+                    </>
+                  ) : (
+                    <>
+                      Already have an account?{" "}
+                      <button
+                        type="button"
+                        className="kyro-login-link"
+                        onClick={() => setMode("login")}
+                      >
+                        Sign in
+                      </button>
+                    </>
+                  )}
+                </p>
+              </div>
+            )}
+          </div>
+
+          {toasts.map((toast) => (
+            <Toast
+              key={toast.id}
+              type={toast.type}
+              message={toast.message}
+              onClose={() =>
+                setToasts((prev) => prev.filter((t) => t.id !== toast.id))
+              }
+            />
+          ))}
+        </div>
+      </ToastProvider>
+    </ThemeProvider>
+  );
+}

package/src/components/layout/Sidebar.tsx

@@ -10,6 +10,8 @@ interface SidebarProps {
   onGlobalClick: (name: string) => void;
   defaultCollapsed?: boolean;
   onToggleCollapse?: (collapsed: boolean) => void;
+  user?: { id: string; email: string; role: string } | null;
+  onLogout?: () => void;
 }
 
 interface CollectionGroup {
@@ -204,6 +206,8 @@ export function Sidebar({
   onGlobalClick,
   defaultCollapsed = false,
   onToggleCollapse,
+  user,
+  onLogout,
 }: SidebarProps) {
   const [collapsed, setCollapsed] = useState(() => {
     if (typeof window !== "undefined") {
@@ -282,6 +286,37 @@ export function Sidebar({
       </nav>
 
       <div className="kyro-sidebar-footer">
+        {user && (
+          <div className="kyro-sidebar-user-info">
+            {!collapsed && (
+              <>
+                <div className="kyro-sidebar-user-email" title={user.email}>
+                  {user.email}
+                </div>
+                <div className="kyro-sidebar-user-role">{user.role}</div>
+              </>
+            )}
+            {onLogout && (
+              <button
+                className="kyro-sidebar-item kyro-sidebar-logout"
+                onClick={onLogout}
+                title={collapsed ? "Logout" : undefined}
+              >
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" />
+                </svg>
+                {!collapsed && <span>Logout</span>}
+              </button>
+            )}
+          </div>
+        )}
         <button
           className="kyro-sidebar-item"
           onClick={toggleCollapse}

package/src/index.ts

@@ -0,0 +1,35 @@
+export { Admin } from "./components/Admin";
+export { LoginPage } from "./components/LoginPage";
+export { ListView } from "./components/ListView";
+export { DetailView } from "./components/DetailView";
+export { CreateView } from "./components/CreateView";
+export { AutoForm } from "./components/AutoForm";
+export {
+  ActionBar,
+  type ActionBarProps,
+  type DocumentStatus,
+  type SaveStatus,
+} from "./components/ActionBar";
+export { BulkActionsBar } from "./components/BulkActionsBar";
+export { StatusBadge, CountBadge } from "./components/StatusBadge";
+export { VersionHistoryPanel } from "./components/VersionHistoryPanel";
+export {
+  ThemeProvider,
+  LightThemeProvider,
+  DarkThemeProvider,
+  useTheme,
+  type ThemeMode,
+} from "./components/ThemeProvider";
+export * from "./components/layout/Header";
+export * from "./components/layout/Sidebar";
+export * from "./components/ui/Button";
+export * from "./components/ui/Badge";
+export * from "./components/ui/Spinner";
+export * from "./components/ui/Toast";
+export {
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
+} from "./components/ui/Dropdown";
+export { Modal, ConfirmModal } from "./components/ui/Modal";
+export { SlidePanel } from "./components/ui/SlidePanel";

package/src/middleware.ts

@@ -6,7 +6,9 @@ const JWT_SECRET = process.env.JWT_SECRET || "change-me-in-production";
 const PUBLIC_PATHS = [
   "/api/auth/login",
   "/api/auth/logout",
+  "/api/auth/register",
   "/api/auth/me",
+  "/api/auth/users",
   "/api/health",
   "/favicon.svg",
 ];

package/src/pages/api/auth/register.ts

@@ -0,0 +1,133 @@
+import type { APIRoute } from "astro";
+import { RedisAuthAdapter } from "@kyro-cms/core";
+import jwt from "jsonwebtoken";
+
+const JWT_SECRET = process.env.JWT_SECRET || "change-me-in-production";
+const JWT_EXPIRES_IN = process.env.JWT_EXPIRES_IN || "24h";
+const ALLOW_REGISTRATION = process.env.KYRO_ALLOW_REGISTRATION !== "false";
+
+async function getAuthApi() {
+  return new RedisAuthAdapter({
+    url: process.env.REDIS_URL || "redis://localhost:6379",
+    tls: process.env.REDIS_TLS === "true",
+  });
+}
+
+export const POST: APIRoute = async ({ request }) => {
+  try {
+    const body = (await request.json()) as {
+      email?: string;
+      password?: string;
+      confirmPassword?: string;
+    };
+    const { email, password, confirmPassword } = body;
+
+    if (!email || !password) {
+      return new Response(
+        JSON.stringify({ error: "Email and password required" }),
+        { status: 400, headers: { "Content-Type": "application/json" } },
+      );
+    }
+
+    if (password !== confirmPassword) {
+      return new Response(JSON.stringify({ error: "Passwords do not match" }), {
+        status: 400,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+
+    if (password.length < 8) {
+      return new Response(
+        JSON.stringify({ error: "Password must be at least 8 characters" }),
+        { status: 400, headers: { "Content-Type": "application/json" } },
+      );
+    }
+
+    const adapter = await getAuthApi();
+    await adapter.connect();
+
+    const existingUser = await adapter.findUserByEmail(email);
+    if (existingUser) {
+      await adapter.disconnect();
+      return new Response(
+        JSON.stringify({ error: "Email already registered" }),
+        { status: 409, headers: { "Content-Type": "application/json" } },
+      );
+    }
+
+    const isFirstUser = await checkIsFirstUser(adapter);
+
+    if (!isFirstUser && !ALLOW_REGISTRATION) {
+      await adapter.disconnect();
+      return new Response(
+        JSON.stringify({ error: "Registration is disabled" }),
+        { status: 403, headers: { "Content-Type": "application/json" } },
+      );
+    }
+
+    const passwordHash = await adapter.hashPassword(password);
+    const user = await adapter.createUser({
+      email,
+      passwordHash,
+      role: isFirstUser ? "super_admin" : "editor",
+    });
+
+    if (isFirstUser) {
+      await adapter.updateUser(user.id, { emailVerified: true });
+    }
+
+    const session = await adapter.createSession(user.id, {
+      ipAddress: request.headers.get("x-forwarded-for") || "unknown",
+      userAgent: request.headers.get("user-agent") || "",
+    });
+
+    const token = jwt.sign(
+      {
+        sub: user.id,
+        email: user.email,
+        role: user.role,
+        tenantId: user.tenantId,
+      },
+      JWT_SECRET,
+      { expiresIn: JWT_EXPIRES_IN as jwt.SignOptions["expiresIn"] },
+    );
+
+    await adapter.disconnect();
+
+    const { passwordHash: _, ...safeUser } = user;
+
+    return new Response(
+      JSON.stringify({
+        success: true,
+        isFirstUser,
+        user: safeUser,
+        token,
+        refreshToken: session.refreshToken,
+      }),
+      {
+        status: 201,
+        headers: { "Content-Type": "application/json" },
+      },
+    );
+  } catch (error) {
+    console.error("Registration error:", error);
+    return new Response(JSON.stringify({ error: "Registration failed" }), {
+      status: 500,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+};
+
+async function checkIsFirstUser(adapter: RedisAuthAdapter): Promise<boolean> {
+  try {
+    const redis = (adapter as any).redis;
+    if (!redis) return true;
+
+    const pattern = "kyro:auth:users:email:*";
+    const result = await redis.scan("0", "MATCH", pattern, "COUNT", "1");
+    const keys = result[1];
+    return keys.length === 0;
+  } catch {
+    return true;
+  }
+}