@onexapis/cli 1.1.38 → 1.1.39

package/templates/default/hooks/use-register-form.ts

@@ -0,0 +1,154 @@
+/**
+ * Register Form Hook
+ * Manages form state, validation, and submission via useAuth
+ */
+
+"use client";
+
+import { useState, useCallback } from "react";
+import { useAuth } from "@onexapis/core/hooks";
+
+export interface RegisterFormData {
+  email: string;
+  username: string;
+  password: string;
+  confirmPassword: string;
+}
+
+export interface UseRegisterFormReturn {
+  formData: RegisterFormData;
+  errors: Record<string, string>;
+  showPassword: boolean;
+  showConfirmPassword: boolean;
+  isPending: boolean;
+  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleSubmit: (e: React.FormEvent) => void;
+  toggleShowPassword: () => void;
+  toggleShowConfirmPassword: () => void;
+  clearError: (field: string) => void;
+}
+
+export function useRegisterForm(): UseRegisterFormReturn {
+  const [formData, setFormData] = useState<RegisterFormData>({
+    email: "",
+    username: "",
+    password: "",
+    confirmPassword: "",
+  });
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [isPending, setIsPending] = useState(false);
+
+  const { signup } = useAuth();
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const { name, value } = e.target;
+      setFormData((prev) => ({ ...prev, [name]: value }));
+      if (errors[name]) {
+        setErrors((prev) => ({ ...prev, [name]: "" }));
+      }
+    },
+    [errors]
+  );
+
+  const validateForm = useCallback((): boolean => {
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.email) {
+      newErrors.email = "Please enter your email";
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      newErrors.email = "Invalid email format";
+    }
+
+    if (!formData.username) {
+      newErrors.username = "Please enter a username";
+    } else if (formData.username.length < 3) {
+      newErrors.username = "Username must be at least 3 characters";
+    } else if (!/^[a-zA-Z0-9_]+$/.test(formData.username)) {
+      newErrors.username =
+        "Username can only contain letters, numbers, and underscores";
+    }
+
+    if (!formData.password) {
+      newErrors.password = "Please enter a password";
+    } else if (formData.password.length < 8) {
+      newErrors.password = "Password must be at least 8 characters";
+    } else if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(formData.password)) {
+      newErrors.password =
+        "Password must contain uppercase, lowercase, and a number";
+    }
+
+    if (!formData.confirmPassword) {
+      newErrors.confirmPassword = "Please confirm your password";
+    } else if (formData.password !== formData.confirmPassword) {
+      newErrors.confirmPassword = "Passwords do not match";
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }, [formData]);
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      if (!validateForm()) return;
+
+      setIsPending(true);
+      try {
+        await signup({
+          email: formData.email,
+          username: formData.username,
+          password: formData.password,
+          name: formData.username,
+        });
+        // Store email for verify-code page
+        if (typeof window !== "undefined") {
+          const expiryTimestamp = Date.now() + 60 * 1000;
+          localStorage.setItem(
+            `resend_countdown_${formData.username}`,
+            expiryTimestamp.toString()
+          );
+          localStorage.setItem(
+            `register_email_${formData.username}`,
+            formData.email
+          );
+          window.location.href = `/verify-code?username=${encodeURIComponent(formData.username)}`;
+        }
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : "Registration failed";
+        setErrors({ form: message });
+      } finally {
+        setIsPending(false);
+      }
+    },
+    [validateForm, signup, formData]
+  );
+
+  const toggleShowPassword = useCallback(() => {
+    setShowPassword((prev) => !prev);
+  }, []);
+
+  const toggleShowConfirmPassword = useCallback(() => {
+    setShowConfirmPassword((prev) => !prev);
+  }, []);
+
+  const clearError = useCallback((field: string) => {
+    setErrors((prev) => ({ ...prev, [field]: "" }));
+  }, []);
+
+  return {
+    formData,
+    errors,
+    showPassword,
+    showConfirmPassword,
+    isPending,
+    handleInputChange,
+    handleSubmit,
+    toggleShowPassword,
+    toggleShowConfirmPassword,
+    clearError,
+  };
+}

package/templates/default/hooks/use-verify-code-form.ts

@@ -0,0 +1,224 @@
+/**
+ * Verify Code Form Hook
+ * Manages OTP input state, countdown timer, and submission via useAuth
+ */
+
+"use client";
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { useAuth } from "@onexapis/core/hooks";
+
+export interface UseVerifyCodeFormReturn {
+  code: string[];
+  error: string | null;
+  countdown: number;
+  email: string;
+  username: string;
+  isVerifying: boolean;
+  isResending: boolean;
+  isLoading: boolean;
+  inputRefs: React.MutableRefObject<(HTMLInputElement | null)[]>;
+  handleCodeChange: (index: number, value: string) => void;
+  handleKeyDown: (
+    index: number,
+    e: React.KeyboardEvent<HTMLInputElement>
+  ) => void;
+  handlePaste: (e: React.ClipboardEvent) => void;
+  handleSubmit: (e: React.FormEvent) => void;
+  handleResend: () => void;
+  setError: (error: string | null) => void;
+}
+
+export function useVerifyCodeForm(): UseVerifyCodeFormReturn {
+  const [code, setCode] = useState<string[]>(["", "", "", "", "", ""]);
+  const [error, setError] = useState<string | null>(null);
+  const [countdown, setCountdown] = useState(0);
+  const [email, setEmail] = useState("");
+  const [username, setUsername] = useState("");
+  const [isVerifying, setIsVerifying] = useState(false);
+  const [isResending, setIsResending] = useState(false);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  const { verifyCode, verifyCodeReset, resendCode } = useAuth();
+
+  // Extract username from URL search params
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const params = new URLSearchParams(window.location.search);
+      const u = params.get("username") || "";
+      setUsername(u);
+
+      if (u) {
+        const storedEmail = localStorage.getItem(`register_email_${u}`);
+        if (storedEmail) setEmail(storedEmail);
+
+        const storedValue = localStorage.getItem(`resend_countdown_${u}`);
+        if (storedValue) {
+          const expiryTimestamp = parseInt(storedValue, 10);
+          const remaining = Math.max(
+            0,
+            Math.floor((expiryTimestamp - Date.now()) / 1000)
+          );
+          if (remaining > 0) setCountdown(remaining);
+        }
+      }
+    }
+  }, []);
+
+  // Countdown timer
+  useEffect(() => {
+    if (countdown > 0) {
+      const timer = setInterval(() => {
+        setCountdown((prev) => prev - 1);
+      }, 1000);
+      return () => clearInterval(timer);
+    }
+  }, [countdown]);
+
+  const handleSubmitCode = useCallback(
+    async (fullCode: string) => {
+      if (!username) {
+        setError("Account information not found");
+        return;
+      }
+
+      setIsVerifying(true);
+      setError(null);
+      try {
+        const params = new URLSearchParams(window.location.search);
+        const mode = params.get("mode");
+
+        if (mode === "reset") {
+          const result = await verifyCodeReset({ username, code: fullCode });
+          // Clean up and redirect to reset-password
+          localStorage.removeItem(`register_email_${username}`);
+          localStorage.removeItem(`resend_countdown_${username}`);
+          const session = result?.session;
+          window.location.href = session
+            ? `/reset-password?session=${encodeURIComponent(session)}`
+            : "/reset-password";
+        } else {
+          await verifyCode({ username, code: fullCode });
+          // Clean up and redirect to login
+          localStorage.removeItem(`register_email_${username}`);
+          localStorage.removeItem(`resend_countdown_${username}`);
+          window.location.href = "/login";
+        }
+      } catch (err) {
+        const message =
+          err instanceof Error ? err.message : "Verification failed";
+        setError(message);
+      } finally {
+        setIsVerifying(false);
+      }
+    },
+    [username, verifyCode, verifyCodeReset]
+  );
+
+  const handleCodeChange = useCallback(
+    (index: number, value: string) => {
+      const digit = value.replace(/\D/g, "").slice(-1);
+      const newCode = [...code];
+      newCode[index] = digit;
+      setCode(newCode);
+      setError(null);
+
+      if (digit && index < 5) {
+        inputRefs.current[index + 1]?.focus();
+      }
+
+      if (digit && index === 5) {
+        const fullCode = newCode.join("");
+        if (fullCode.length === 6) {
+          handleSubmitCode(fullCode);
+        }
+      }
+    },
+    [code, handleSubmitCode]
+  );
+
+  const handleKeyDown = useCallback(
+    (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Backspace" && !code[index] && index > 0) {
+        inputRefs.current[index - 1]?.focus();
+      }
+    },
+    [code]
+  );
+
+  const handlePaste = useCallback(
+    (e: React.ClipboardEvent) => {
+      e.preventDefault();
+      const pastedData = e.clipboardData.getData("text");
+      const digits = pastedData.replace(/\D/g, "").slice(0, 6);
+
+      if (digits.length > 0) {
+        const newCode = [...code];
+        for (let i = 0; i < 6; i++) {
+          newCode[i] = digits[i] || "";
+        }
+        setCode(newCode);
+
+        const lastIndex = Math.min(digits.length - 1, 5);
+        inputRefs.current[lastIndex]?.focus();
+
+        if (digits.length === 6) {
+          handleSubmitCode(digits);
+        }
+      }
+    },
+    [code, handleSubmitCode]
+  );
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      const fullCode = code.join("");
+      if (fullCode.length !== 6) {
+        setError("Please enter the full 6-digit code");
+        return;
+      }
+      handleSubmitCode(fullCode);
+    },
+    [code, handleSubmitCode]
+  );
+
+  const handleResend = useCallback(async () => {
+    if (countdown > 0 || !username) return;
+
+    setIsResending(true);
+    try {
+      await resendCode({ username });
+      const expiryTimestamp = Date.now() + 60 * 1000;
+      localStorage.setItem(
+        `resend_countdown_${username}`,
+        expiryTimestamp.toString()
+      );
+      setCountdown(60);
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Failed to resend code";
+      setError(message);
+    } finally {
+      setIsResending(false);
+    }
+  }, [countdown, username, resendCode]);
+
+  return {
+    code,
+    error,
+    countdown,
+    email,
+    username,
+    isVerifying,
+    isResending,
+    isLoading: isVerifying || isResending,
+    inputRefs,
+    handleCodeChange,
+    handleKeyDown,
+    handlePaste,
+    handleSubmit,
+    handleResend,
+    setError,
+  };
+}

package/templates/default/index.ts

@@ -14,13 +14,33 @@ export { default as layoutConfig, simpleLayoutConfig } from "./theme.layout";
 export { default as homePageConfig } from "./pages/home";
 export { default as aboutPageConfig } from "./pages/about";
 export { default as showcasePageConfig } from "./pages/showcase";
+export { default as loginPageConfig } from "./pages/login";
+export { default as registerPageConfig } from "./pages/register";
+export { default as forgotPasswordPageConfig } from "./pages/forgot-password";
+export { default as verifyCodePageConfig } from "./pages/verify-code";
+export { default as profilePageConfig } from "./pages/profile";
 
 // Page map for dynamic access
 export const pages = {
   home: () => import("./pages/home").then((m) => m.default),
   about: () => import("./pages/about").then((m) => m.default),
   showcase: () => import("./pages/showcase").then((m) => m.default),
+  login: () => import("./pages/login").then((m) => m.default),
+  register: () => import("./pages/register").then((m) => m.default),
+  "forgot-password": () =>
+    import("./pages/forgot-password").then((m) => m.default),
+  "verify-code": () => import("./pages/verify-code").then((m) => m.default),
+  profile: () => import("./pages/profile").then((m) => m.default),
 };
 
 // Page slugs (for discovery)
-export const pageList = ["home", "about", "showcase"] as const;
+export const pageList = [
+  "home",
+  "about",
+  "showcase",
+  "login",
+  "register",
+  "forgot-password",
+  "verify-code",
+  "profile",
+] as const;

package/templates/default/pages/about.ts

@@ -27,7 +27,7 @@ export const aboutPageConfig: Omit<
   sections: [
     {
       id: "about-1",
-      type: "my-simple-about",
+      type: "about",
       template: "default",
       order: 0,
       enabled: true,
@@ -47,7 +47,7 @@ export const aboutPageConfig: Omit<
     },
     {
       id: "testimonials-1",
-      type: "my-simple-testimonials",
+      type: "testimonials",
       template: "default",
       order: 1,
       enabled: true,

package/templates/default/pages/forgot-password.ts

@@ -0,0 +1,39 @@
+/**
+ * My Simple Theme - Forgot Password Page Configuration
+ */
+
+import type { PageConfig } from "@onexapis/core/types";
+
+export const forgotPasswordPageConfig: Omit<
+  PageConfig,
+  "id" | "createdAt" | "updatedAt"
+> = {
+  title: "Forgot Password",
+  handle: "forgot-password",
+  path: "/forgot-password",
+  type: "auth",
+  renderMode: "sections",
+  themeId: "my-simple",
+  editable: true,
+  published: true,
+
+  seo: {
+    title: "Forgot Password",
+    description: "Reset your password",
+  },
+
+  sections: [
+    {
+      id: "auth-forgot-password-1",
+      type: "auth-forgot-password",
+      template: "default",
+      order: 0,
+      enabled: true,
+      settings: {},
+      components: [],
+      blocks: [],
+    },
+  ],
+};
+
+export default forgotPasswordPageConfig;

package/templates/default/pages/home.ts

@@ -27,7 +27,7 @@ export const homePageConfig: Omit<
   sections: [
     {
       id: "hero-1",
-      type: "my-simple-hero",
+      type: "hero",
       template: "default",
       order: 0,
       enabled: true,
@@ -47,7 +47,7 @@ export const homePageConfig: Omit<
     },
     {
       id: "features-1",
-      type: "my-simple-features",
+      type: "features",
       template: "default",
       order: 1,
       enabled: true,
@@ -62,7 +62,7 @@ export const homePageConfig: Omit<
     },
     {
       id: "stats-1",
-      type: "my-simple-stats",
+      type: "stats",
       template: "default",
       order: 2,
       enabled: true,
@@ -76,7 +76,7 @@ export const homePageConfig: Omit<
     },
     {
       id: "cta-1",
-      type: "my-simple-cta",
+      type: "cta",
       template: "default",
       order: 3,
       enabled: true,

package/templates/default/pages/login.ts

@@ -0,0 +1,39 @@
+/**
+ * My Simple Theme - Login Page Configuration
+ */
+
+import type { PageConfig } from "@onexapis/core/types";
+
+export const loginPageConfig: Omit<
+  PageConfig,
+  "id" | "createdAt" | "updatedAt"
+> = {
+  title: "Login",
+  handle: "login",
+  path: "/login",
+  type: "auth",
+  renderMode: "sections",
+  themeId: "my-simple",
+  editable: true,
+  published: true,
+
+  seo: {
+    title: "Sign In",
+    description: "Sign in to your account",
+  },
+
+  sections: [
+    {
+      id: "auth-login-1",
+      type: "auth-login",
+      template: "default",
+      order: 0,
+      enabled: true,
+      settings: {},
+      components: [],
+      blocks: [],
+    },
+  ],
+};
+
+export default loginPageConfig;

package/templates/default/pages/profile.ts

@@ -0,0 +1,39 @@
+/**
+ * My Simple Theme - Profile Page Configuration
+ */
+
+import type { PageConfig } from "@onexapis/core/types";
+
+export const profilePageConfig: Omit<
+  PageConfig,
+  "id" | "createdAt" | "updatedAt"
+> = {
+  title: "Profile",
+  handle: "profile",
+  path: "/profile",
+  type: "profile",
+  renderMode: "sections",
+  themeId: "my-simple",
+  editable: true,
+  published: true,
+
+  seo: {
+    title: "My Profile",
+    description: "Manage your account profile",
+  },
+
+  sections: [
+    {
+      id: "profile-1",
+      type: "profile",
+      template: "default",
+      order: 0,
+      enabled: true,
+      settings: {},
+      components: [],
+      blocks: [],
+    },
+  ],
+};
+
+export default profilePageConfig;

package/templates/default/pages/register.ts

@@ -0,0 +1,39 @@
+/**
+ * My Simple Theme - Register Page Configuration
+ */
+
+import type { PageConfig } from "@onexapis/core/types";
+
+export const registerPageConfig: Omit<
+  PageConfig,
+  "id" | "createdAt" | "updatedAt"
+> = {
+  title: "Register",
+  handle: "register",
+  path: "/register",
+  type: "auth",
+  renderMode: "sections",
+  themeId: "my-simple",
+  editable: true,
+  published: true,
+
+  seo: {
+    title: "Create Account",
+    description: "Create a new account",
+  },
+
+  sections: [
+    {
+      id: "auth-register-1",
+      type: "auth-register",
+      template: "default",
+      order: 0,
+      enabled: true,
+      settings: {},
+      components: [],
+      blocks: [],
+    },
+  ],
+};
+
+export default registerPageConfig;

package/templates/default/pages/showcase.ts

@@ -27,7 +27,7 @@ export const showcasePageConfig: Omit<
   sections: [
     {
       id: "showcase-hero",
-      type: "my-simple-hero",
+      type: "hero",
       template: "default",
       order: 0,
       enabled: true,
@@ -48,7 +48,7 @@ export const showcasePageConfig: Omit<
     },
     {
       id: "showcase-features",
-      type: "my-simple-features",
+      type: "features",
       template: "default",
       order: 1,
       enabled: true,
@@ -63,7 +63,7 @@ export const showcasePageConfig: Omit<
     },
     {
       id: "showcase-stats",
-      type: "my-simple-stats",
+      type: "stats",
       template: "default",
       order: 2,
       enabled: true,
@@ -77,7 +77,7 @@ export const showcasePageConfig: Omit<
     },
     {
       id: "showcase-about",
-      type: "my-simple-about",
+      type: "about",
       template: "default",
       order: 3,
       enabled: true,
@@ -97,7 +97,7 @@ export const showcasePageConfig: Omit<
     },
     {
       id: "showcase-testimonials",
-      type: "my-simple-testimonials",
+      type: "testimonials",
       template: "default",
       order: 4,
       enabled: true,
@@ -113,7 +113,7 @@ export const showcasePageConfig: Omit<
     },
     {
       id: "showcase-gallery",
-      type: "my-simple-gallery",
+      type: "gallery",
       template: "default",
       order: 5,
       enabled: true,
@@ -129,7 +129,7 @@ export const showcasePageConfig: Omit<
     },
     {
       id: "showcase-cta",
-      type: "my-simple-cta",
+      type: "cta",
       template: "default",
       order: 6,
       enabled: true,