website refactor

apps/website/app/auth/signup/SignupClient.tsx

@@ -1,6 +1,6 @@
 /**
  * Signup Client Component
- * 
+ *
  * Handles client-side signup flow.
  */
 
@@ -14,6 +14,7 @@ import { SignupTemplate } from '@/templates/auth/SignupTemplate';
 import { SignupMutation } from '@/lib/mutations/auth/SignupMutation';
 import { SignupViewModelBuilder } from '@/lib/builders/view-models/SignupViewModelBuilder';
 import { SignupViewModel } from '@/lib/view-models/auth/SignupViewModel';
+import { SignupFormValidation } from '@/lib/utilities/authValidation';
 
 interface SignupClientProps {
   viewData: SignupViewData;
@@ -23,26 +24,66 @@ export function SignupClient({ viewData }: SignupClientProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { refreshSession } = useAuth();
-  
+
   // Build ViewModel from ViewData
-  const [viewModel, setViewModel] = useState<SignupViewModel>(() => 
+  const [viewModel, setViewModel] = useState<SignupViewModel>(() =>
     SignupViewModelBuilder.build(viewData)
   );
 
-  const [formData, setFormData] = useState({ 
-    firstName: '', 
-    lastName: '', 
-    email: '', 
-    password: '', 
-    confirmPassword: '' 
-  });
+  // 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();
 
-    // Validate passwords match
-    if (formData.password !== formData.confirmPassword) {
-      setViewModel(prev => prev.withMutationState(false, 'Passwords do not match'));
+    const formData = {
+      firstName: viewModel.formState.fields.firstName.value as string,
+      lastName: viewModel.formState.fields.lastName.value as string,
+      email: viewModel.formState.fields.email.value as string,
+      password: viewModel.formState.fields.password.value as string,
+      confirmPassword: viewModel.formState.fields.confirmPassword.value as string,
+    };
+
+    // Validate form
+    const validationErrors = SignupFormValidation.validateForm(formData);
+    if (validationErrors.length > 0) {
+      setViewModel(prev => {
+        const newFormState = {
+          ...prev.formState,
+          isValid: false,
+          submitCount: prev.formState.submitCount + 1,
+          fields: {
+            ...prev.formState.fields,
+            ...validationErrors.reduce((acc, error) => ({
+              ...acc,
+              [error.field]: {
+                ...prev.formState.fields[error.field],
+                error: error.message,
+                touched: true,
+              },
+            }), {}),
+          },
+        };
+        return prev.withFormState(newFormState);
+      });
       return;
     }
 
@@ -50,15 +91,15 @@ export function SignupClient({ viewData }: SignupClientProps) {
     setViewModel(prev => prev.withMutationState(true, null));
 
     try {
-      // Transform to DTO format
-      const displayName = `${formData.firstName} ${formData.lastName}`.trim();
-      
+      // Generate display name
+      const displayName = SignupFormValidation.generateDisplayName(formData.firstName, formData.lastName);
+
       // Execute signup mutation
       const mutation = new SignupMutation();
       const result = await mutation.execute({
         email: formData.email,
         password: formData.password,
-        displayName: displayName || formData.firstName || formData.lastName,
+        displayName,
       });
 
       if (result.isErr()) {
@@ -69,7 +110,7 @@ export function SignupClient({ viewData }: SignupClientProps) {
 
       // Success - refresh session and redirect
       await refreshSession();
-      
+
       const returnTo = searchParams.get('returnTo') ?? '/onboarding';
       router.push(returnTo);
     } catch (error) {
@@ -105,7 +146,7 @@ export function SignupClient({ viewData }: SignupClientProps) {
     <SignupTemplate
       viewData={templateViewData}
       formActions={{
-        setFormData,
+        handleChange,
         handleSubmit,
         setShowPassword: togglePassword,
         setShowConfirmPassword: toggleConfirmPassword,