di usage in website

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

@@ -3,6 +3,7 @@
 import { useState, useEffect, FormEvent, type ChangeEvent } from 'react';
 import { useRouter } from 'next/navigation';
 import { useAuth } from '@/lib/auth/AuthContext';
+import { useForgotPassword } from '@/hooks/auth/useForgotPassword';
 import Link from 'next/link';
 import { motion } from 'framer-motion';
 import {
@@ -33,7 +34,6 @@ export default function ForgotPasswordPage() {
   const router = useRouter();
   const { session } = useAuth();
   
-  const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState<FormErrors>({});
   const [success, setSuccess] = useState<SuccessState | null>(null);
   const [formData, setFormData] = useState({
@@ -60,34 +60,40 @@ export default function ForgotPasswordPage() {
     return Object.keys(newErrors).length === 0;
   };
 
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    if (loading) return;
-
-    if (!validateForm()) return;
-
-    setLoading(true);
-    setErrors({});
-    setSuccess(null);
-
-    try {
-      const { ServiceFactory } = await import('@/lib/services/ServiceFactory');
-      const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
-      const authService = serviceFactory.createAuthService();
-      const result = await authService.forgotPassword({ email: formData.email });
-
+  // Use forgot password mutation hook
+  const forgotPasswordMutation = useForgotPassword({
+    onSuccess: (result) => {
       setSuccess({
         message: result.message,
         magicLink: result.magicLink,
       });
-    } catch (error) {
+    },
+    onError: (error) => {
       setErrors({
-        submit: error instanceof Error ? error.message : 'Failed to send reset link. Please try again.',
+        submit: error.message || 'Failed to send reset link. Please try again.',
       });
-      setLoading(false);
+    },
+  });
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (forgotPasswordMutation.isPending) return;
+
+    if (!validateForm()) return;
+
+    setErrors({});
+    setSuccess(null);
+
+    try {
+      await forgotPasswordMutation.mutateAsync({ email: formData.email });
+    } catch (error) {
+      // Error handling is done in the mutation's onError callback
     }
   };
 
+  // Loading state from mutation
+  const loading = forgotPasswordMutation.isPending;
+
   return (
     <main className="min-h-screen bg-deep-graphite flex items-center justify-center px-4 py-12">
       {/* Background Pattern */}