website refactor

apps/website/app/auth/forgot-password/ForgotPasswordClient.tsx

@@ -1,6 +1,6 @@
 /**
  * Forgot Password Client Component
- * 
+ *
  * Handles client-side forgot password flow.
  */
 
@@ -12,6 +12,7 @@ import { ForgotPasswordTemplate } from '@/templates/auth/ForgotPasswordTemplate'
 import { ForgotPasswordMutation } from '@/lib/mutations/auth/ForgotPasswordMutation';
 import { ForgotPasswordViewModelBuilder } from '@/lib/builders/view-models/ForgotPasswordViewModelBuilder';
 import { ForgotPasswordViewModel } from '@/lib/view-models/auth/ForgotPasswordViewModel';
+import { ForgotPasswordFormValidation } from '@/lib/utilities/authValidation';
 
 interface ForgotPasswordClientProps {
   viewData: ForgotPasswordViewData;
@@ -19,24 +20,67 @@ interface ForgotPasswordClientProps {
 
 export function ForgotPasswordClient({ viewData }: ForgotPasswordClientProps) {
   // Build ViewModel from ViewData
-  const [viewModel, setViewModel] = useState<ForgotPasswordViewModel>(() => 
+  const [viewModel, setViewModel] = useState<ForgotPasswordViewModel>(() =>
     ForgotPasswordViewModelBuilder.build(viewData)
   );
 
-  const [formData, setFormData] = useState({ email: '' });
+  // Handle form field changes
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+
+    setViewModel(prev => {
+      const newFormState = {
+        ...prev.formState,
+        fields: {
+          ...prev.formState.fields,
+          [name]: {
+            ...prev.formState.fields[name as keyof typeof prev.formState.fields],
+            value,
+            touched: true,
+            error: undefined,
+          },
+        },
+      };
+      return prev.withFormState(newFormState);
+    });
+  };
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
+    const formData = {
+      email: viewModel.formState.fields.email.value as string,
+    };
+
+    // Validate form
+    const validationErrors = ForgotPasswordFormValidation.validateForm(formData);
+    if (validationErrors.length > 0) {
+      setViewModel(prev => {
+        const newFormState = {
+          ...prev.formState,
+          isValid: false,
+          submitCount: prev.formState.submitCount + 1,
+          fields: {
+            ...prev.formState.fields,
+            email: {
+              ...prev.formState.fields.email,
+              error: validationErrors.find(e => e.field === 'email')?.message,
+              touched: true,
+            },
+          },
+        };
+        return prev.withFormState(newFormState);
+      });
+      return;
+    }
+
     // Update submitting state
     setViewModel(prev => prev.withMutationState(true, null));
 
     try {
       // Execute forgot password mutation
       const mutation = new ForgotPasswordMutation();
-      const result = await mutation.execute({
-        email: formData.email,
-      });
+      const result = await mutation.execute(formData);
 
       if (result.isErr()) {
         const error = result.getError();
@@ -68,7 +112,7 @@ export function ForgotPasswordClient({ viewData }: ForgotPasswordClientProps) {
     <ForgotPasswordTemplate
       viewData={templateViewData}
       formActions={{
-        setFormData,
+        handleChange,
         handleSubmit,
         setShowSuccess: (show) => {
           if (!show) {