@onexapis/cli 1.1.36 → 1.1.37

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

@@ -0,0 +1,255 @@
+/**
+ * Profile Form Hook
+ * Manages profile form state, dirty tracking, and submission via useAuth
+ */
+
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useAuth } from "@onexapis/core/hooks";
+
+export interface ProfileFormData {
+  name: string;
+  email: string;
+  phone: string;
+  address: string;
+}
+
+export interface ChangePasswordData {
+  currentPassword: string;
+  newPassword: string;
+  confirmPassword: string;
+}
+
+export interface UseProfileFormReturn {
+  // User state
+  isAuthenticated: boolean;
+  isLoading: boolean;
+
+  // Form state
+  formData: ProfileFormData;
+  handleFieldChange: (field: keyof ProfileFormData, value: string) => void;
+  isDirty: boolean;
+  isSubmitting: boolean;
+  submitError: string | null;
+  handleSubmit: (e?: React.FormEvent) => Promise<void>;
+
+  // Change password
+  passwordData: ChangePasswordData;
+  handlePasswordFieldChange: (
+    field: keyof ChangePasswordData,
+    value: string
+  ) => void;
+  showCurrentPassword: boolean;
+  showNewPassword: boolean;
+  showConfirmPassword: boolean;
+  toggleCurrentPassword: () => void;
+  toggleNewPassword: () => void;
+  toggleConfirmPassword: () => void;
+  passwordErrors: Record<string, string>;
+  isChangingPassword: boolean;
+  showPasswordForm: boolean;
+  setShowPasswordForm: (show: boolean) => void;
+  handlePasswordSubmit: (e?: React.FormEvent) => Promise<void>;
+
+  // Logout
+  handleLogout: () => Promise<void>;
+}
+
+export function useProfileForm(): UseProfileFormReturn {
+  const {
+    user,
+    isAuthenticated,
+    isLoading,
+    updateProfile,
+    changePassword,
+    logout,
+    initialize,
+  } = useAuth();
+
+  const [formData, setFormData] = useState<ProfileFormData>({
+    name: "",
+    email: "",
+    phone: "",
+    address: "",
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const initialDataRef = useRef<ProfileFormData | null>(null);
+
+  // Password form
+  const [passwordData, setPasswordData] = useState<ChangePasswordData>({
+    currentPassword: "",
+    newPassword: "",
+    confirmPassword: "",
+  });
+  const [showCurrentPassword, setShowCurrentPassword] = useState(false);
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [passwordErrors, setPasswordErrors] = useState<Record<string, string>>(
+    {}
+  );
+  const [isChangingPassword, setIsChangingPassword] = useState(false);
+  const [showPasswordForm, setShowPasswordForm] = useState(false);
+
+  // Initialize auth on mount
+  useEffect(() => {
+    initialize();
+  }, [initialize]);
+
+  // Populate form from user data
+  useEffect(() => {
+    if (user) {
+      const data: ProfileFormData = {
+        name: user.name || "",
+        email: user.email || "",
+        phone: user.phone_number || "",
+        address: user.address || "",
+      };
+      setFormData(data);
+      initialDataRef.current = data;
+    }
+  }, [user]);
+
+  const handleFieldChange = useCallback(
+    (field: keyof ProfileFormData, value: string) => {
+      setFormData((prev) => ({ ...prev, [field]: value }));
+      setSubmitError(null);
+    },
+    []
+  );
+
+  const isDirty =
+    initialDataRef.current !== null &&
+    (formData.name !== initialDataRef.current.name ||
+      formData.phone !== initialDataRef.current.phone ||
+      formData.address !== initialDataRef.current.address);
+
+  const handleSubmit = useCallback(
+    async (e?: React.FormEvent) => {
+      e?.preventDefault();
+      if (!isDirty) return;
+
+      setIsSubmitting(true);
+      setSubmitError(null);
+      try {
+        await updateProfile({
+          name: formData.name,
+          phone_number: formData.phone,
+          address: formData.address,
+        });
+        // Update initial data ref to new values
+        initialDataRef.current = { ...formData };
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : "Failed to update profile";
+        setSubmitError(message);
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [isDirty, formData, updateProfile]
+  );
+
+  // Password handlers
+  const handlePasswordFieldChange = useCallback(
+    (field: keyof ChangePasswordData, value: string) => {
+      setPasswordData((prev) => ({ ...prev, [field]: value }));
+      if (passwordErrors[field]) {
+        setPasswordErrors((prev) => ({ ...prev, [field]: "" }));
+      }
+    },
+    [passwordErrors]
+  );
+
+  const validatePassword = useCallback((): boolean => {
+    const errors: Record<string, string> = {};
+
+    if (!passwordData.currentPassword) {
+      errors.currentPassword = "Please enter your current password";
+    }
+    if (!passwordData.newPassword) {
+      errors.newPassword = "Please enter a new password";
+    } else if (passwordData.newPassword.length < 8) {
+      errors.newPassword = "Password must be at least 8 characters";
+    } else if (
+      !/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(passwordData.newPassword)
+    ) {
+      errors.newPassword =
+        "Password must contain uppercase, lowercase, and a number";
+    } else if (passwordData.newPassword === passwordData.currentPassword) {
+      errors.newPassword =
+        "New password must be different from current password";
+    }
+    if (!passwordData.confirmPassword) {
+      errors.confirmPassword = "Please confirm your new password";
+    } else if (passwordData.newPassword !== passwordData.confirmPassword) {
+      errors.confirmPassword = "Passwords do not match";
+    }
+
+    setPasswordErrors(errors);
+    return Object.keys(errors).length === 0;
+  }, [passwordData]);
+
+  const handlePasswordSubmit = useCallback(
+    async (e?: React.FormEvent) => {
+      e?.preventDefault();
+      if (!validatePassword()) return;
+
+      setIsChangingPassword(true);
+      try {
+        await changePassword({
+          oldPassword: passwordData.currentPassword,
+          newPassword: passwordData.newPassword,
+        });
+        // Reset form on success
+        setPasswordData({
+          currentPassword: "",
+          newPassword: "",
+          confirmPassword: "",
+        });
+        setShowPasswordForm(false);
+        setPasswordErrors({});
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : "Failed to change password";
+        setPasswordErrors({ form: message });
+      } finally {
+        setIsChangingPassword(false);
+      }
+    },
+    [validatePassword, changePassword, passwordData]
+  );
+
+  const handleLogout = useCallback(async () => {
+    await logout();
+    if (typeof window !== "undefined") {
+      window.location.href = "/login";
+    }
+  }, [logout]);
+
+  return {
+    isAuthenticated,
+    isLoading,
+    formData,
+    handleFieldChange,
+    isDirty,
+    isSubmitting,
+    submitError,
+    handleSubmit,
+    passwordData,
+    handlePasswordFieldChange,
+    showCurrentPassword,
+    showNewPassword,
+    showConfirmPassword,
+    toggleCurrentPassword: () => setShowCurrentPassword((p) => !p),
+    toggleNewPassword: () => setShowNewPassword((p) => !p),
+    toggleConfirmPassword: () => setShowConfirmPassword((p) => !p),
+    passwordErrors,
+    isChangingPassword,
+    showPasswordForm,
+    setShowPasswordForm,
+    handlePasswordSubmit,
+    handleLogout,
+  };
+}

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/forgot-password.ts

@@ -0,0 +1,41 @@
+/**
+ * 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,
+  hideHeader: true,
+  hideFooter: true,
+
+  seo: {
+    title: "Forgot Password",
+    description: "Reset your password",
+  },
+
+  sections: [
+    {
+      id: "auth-forgot-password-1",
+      type: "my-simple-auth-forgot-password",
+      template: "default",
+      order: 0,
+      enabled: true,
+      settings: {},
+      components: [],
+      blocks: [],
+    },
+  ],
+};
+
+export default forgotPasswordPageConfig;