website refactor

2026-01-18 23:43:58 +01:00
parent 7c1cf62d4e
commit c0559d8b48
76 changed files with 39 additions and 89 deletions
--- a/apps/website/client-wrapper/ResetPasswordClient.tsx
+++ b/apps/website/client-wrapper/ResetPasswordClient.tsx
@@ -0,0 +1,173 @@
+/**
+ * Reset Password Client Component
+ *
+ * Handles client-side reset password flow.
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { ResetPasswordViewData } from '@/lib/builders/view-data/types/ResetPasswordViewData';
+import { ResetPasswordTemplate } from '@/templates/auth/ResetPasswordTemplate';
+import { ResetPasswordMutation } from '@/lib/mutations/auth/ResetPasswordMutation';
+import { ResetPasswordViewModelBuilder } from '@/lib/builders/view-models/ResetPasswordViewModelBuilder';
+import { ResetPasswordViewModel } from '@/lib/view-models/auth/ResetPasswordViewModel';
+import { ResetPasswordFormValidation } from '@/lib/utilities/authValidation';
+import { routes } from '@/lib/routing/RouteConfig';
+
+interface ResetPasswordClientProps {
+  viewData: ResetPasswordViewData;
+}
+
+export function ResetPasswordClient({ viewData }: ResetPasswordClientProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Build ViewModel from ViewData
+  const [viewModel, setViewModel] = useState<ResetPasswordViewModel>(() =>
+    ResetPasswordViewModelBuilder.build(viewData)
+  );
+
+  // 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 as keyof typeof prev.formState.fields]: {
+            ...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 = {
+      newPassword: viewModel.formState.fields.newPassword.value as string,
+      confirmPassword: viewModel.formState.fields.confirmPassword.value as string,
+    };
+
+    // Validate form
+    const validationErrors = ResetPasswordFormValidation.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 as keyof typeof prev.formState.fields],
+                error: error.message,
+                touched: true,
+              },
+            }), {}),
+          },
+        };
+        return prev.withFormState(newFormState);
+      });
+      return;
+    }
+
+    // Update submitting state
+    setViewModel(prev => prev.withMutationState(true, null));
+
+    try {
+      const token = searchParams.get('token');
+      if (!token) {
+        setViewModel(prev => prev.withMutationState(false, 'Invalid reset link'));
+        return;
+      }
+
+      // Execute reset password mutation
+      const mutation = new ResetPasswordMutation();
+      const result = await mutation.execute({
+        token,
+        newPassword: formData.newPassword,
+      });
+
+      if (result.isErr()) {
+        const error = result.getError();
+        setViewModel(prev => prev.withMutationState(false, error));
+        return;
+      }
+
+      // Success
+      const data = result.unwrap();
+      setViewModel(prev => prev.withSuccess(data.message));
+
+      // Redirect to login after a delay
+      setTimeout(() => {
+        router.push(routes.auth.login);
+      }, 3000);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to reset password';
+      setViewModel(prev => prev.withMutationState(false, errorMessage));
+    }
+  };
+
+  // Toggle password visibility
+  const togglePassword = () => {
+    setViewModel(prev => prev.withUIState({
+      ...prev.uiState,
+      showPassword: !prev.uiState.showPassword,
+    }));
+  };
+
+  const toggleConfirmPassword = () => {
+    setViewModel(prev => prev.withUIState({
+      ...prev.uiState,
+      showConfirmPassword: !prev.uiState.showConfirmPassword,
+    }));
+  };
+
+  // Build viewData for template
+  const templateViewData: ResetPasswordViewData = {
+    ...viewData,
+    showSuccess: viewModel.showSuccess,
+    successMessage: viewModel.successMessage || undefined,
+    formState: viewModel.formState,
+    isSubmitting: viewModel.isSubmitting,
+    submitError: viewModel.submitError,
+  };
+
+  return (
+    <ResetPasswordTemplate
+      viewData={templateViewData}
+      formActions={{
+        handleChange,
+        handleSubmit,
+        setShowSuccess: (show) => {
+          if (!show) {
+            // Reset to initial state
+            setViewModel(() => ResetPasswordViewModelBuilder.build(viewData));
+          }
+        },
+        setShowPassword: togglePassword,
+        setShowConfirmPassword: toggleConfirmPassword,
+      }}
+      uiState={{
+        showPassword: viewModel.uiState.showPassword,
+        showConfirmPassword: viewModel.uiState.showConfirmPassword,
+      }}
+      mutationState={{
+        isPending: viewModel.mutationPending,
+        error: viewModel.mutationError,
+      }}
+    />
+  );
+}