di usage in website

apps/website/app/auth/login/page.tsx

@@ -20,6 +20,7 @@ import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
 import Heading from '@/components/ui/Heading';
 import { useAuth } from '@/lib/auth/AuthContext';
+import { useLogin } from '@/hooks/auth/useLogin';
 import AuthWorkflowMockup from '@/components/auth/AuthWorkflowMockup';
 import UserRolesPreview from '@/components/auth/UserRolesPreview';
 import { EnhancedFormError, FormErrorSummary } from '@/components/errors/EnhancedFormError';
@@ -37,6 +38,21 @@ export default function LoginPage() {
   const [showErrorDetails, setShowErrorDetails] = useState(false);
   const [hasInsufficientPermissions, setHasInsufficientPermissions] = useState(false);
 
+  // Use login mutation hook
+  const loginMutation = useLogin({
+    onSuccess: async () => {
+      // Refresh session in context so header updates immediately
+      await refreshSession();
+      router.push(returnTo);
+    },
+    onError: (error) => {
+      // Show error details toggle in development
+      if (process.env.NODE_ENV === 'development') {
+        setShowErrorDetails(true);
+      }
+    },
+  });
+
   // Check if user is already authenticated
   useEffect(() => {
     console.log('[LoginPage] useEffect running', {
@@ -84,10 +100,6 @@ export default function LoginPage() {
     validate: validateLoginForm,
     component: 'LoginPage',
     onSubmit: async (values) => {
-      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();
-      
       // Log the attempt for debugging
       logErrorWithContext(
         { message: 'Login attempt', values: { ...values, password: '[REDACTED]' } },
@@ -98,21 +110,14 @@ export default function LoginPage() {
         }
       );
       
-      await authService.login({
+      await loginMutation.mutateAsync({
         email: values.email,
         password: values.password,
         rememberMe: values.rememberMe,
       });
-      
-      // Refresh session in context so header updates immediately
-      await refreshSession();
-      router.push(returnTo);
     },
     onError: (error, values) => {
-      // Show error details toggle in development
-      if (process.env.NODE_ENV === 'development') {
-        setShowErrorDetails(true);
-      }
+      // Error handling is done in the mutation's onError callback
     },
     onSuccess: () => {
       // Reset error details on success