@onexapis/cli 1.1.34 → 1.1.37

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

@@ -0,0 +1,102 @@
+/**
+ * Login 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 LoginFormData {
+  username: string;
+  password: string;
+}
+
+export interface UseLoginFormReturn {
+  formData: LoginFormData;
+  errors: Record<string, string>;
+  showPassword: boolean;
+  isPending: boolean;
+  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleSubmit: (e: React.FormEvent) => void;
+  toggleShowPassword: () => void;
+  clearError: (field: string) => void;
+}
+
+export function useLoginForm(): UseLoginFormReturn {
+  const [formData, setFormData] = useState<LoginFormData>({
+    username: "",
+    password: "",
+  });
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [showPassword, setShowPassword] = useState(false);
+  const [isPending, setIsPending] = useState(false);
+
+  const { login } = 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.username) {
+      newErrors.username = "Please enter your username or email";
+    }
+    if (!formData.password) {
+      newErrors.password = "Please enter your password";
+    }
+
+    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 login({
+          username: formData.username,
+          password: formData.password,
+        });
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Login failed";
+        setErrors({ form: message });
+      } finally {
+        setIsPending(false);
+      }
+    },
+    [validateForm, login, formData]
+  );
+
+  const toggleShowPassword = useCallback(() => {
+    setShowPassword((prev) => !prev);
+  }, []);
+
+  const clearError = useCallback((field: string) => {
+    setErrors((prev) => ({ ...prev, [field]: "" }));
+  }, []);
+
+  return {
+    formData,
+    errors,
+    showPassword,
+    isPending,
+    handleInputChange,
+    handleSubmit,
+    toggleShowPassword,
+    clearError,
+  };
+}

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,
+  };
+}