Improve login form validation and enhance e2e test reliability

- Update `LoginForm` to use `onBlur` mode and `onChange` revalidation for better UX.
- Enhance e2e tests to verify field interactivity, ensure visibility of submit button, and improve error validation reliability across browsers.

frontend/e2e/auth-login.spec.ts

@@ -21,18 +21,26 @@ test.describe('Login Flow', () => {
   });
 
   test('should show validation errors for empty form', async ({ page }) => {
-    // Wait for React hydration to complete
+    // Ensure the dynamically loaded form is mounted and interactive
-    await page.waitForLoadState('networkidle');
-
-    // Interact with email field to ensure form is interactive
     const emailInput = page.locator('input[name="email"]');
+    const passwordInput = page.locator('input[name="password"]');
+    const submitButton = page.locator('button[type="submit"]');
+
+    await expect(emailInput).toBeVisible({ timeout: 10000 });
+    await expect(passwordInput).toBeVisible({ timeout: 10000 });
+    await expect(submitButton).toBeVisible({ timeout: 10000 });
+    await expect(submitButton).toBeEnabled({ timeout: 10000 });
+
+    // Touch fields to mimic user interaction
     await emailInput.focus();
     await emailInput.blur();
+    await passwordInput.focus();
+    await passwordInput.blur();
 
     // Submit empty form
-    await page.locator('button[type="submit"]').click();
+    await submitButton.click();
 
-    // Wait for validation errors - Firefox may be slower
+    // Wait for validation errors - allow extra time for slower browsers
     await expect(page.locator('#email-error')).toBeVisible({ timeout: 10000 });
     await expect(page.locator('#password-error')).toBeVisible({ timeout: 10000 });
 

frontend/src/components/auth/LoginForm.tsx

@@ -82,6 +82,8 @@ export function LoginForm({
 
   const form = useForm<LoginFormData>({
     resolver: zodResolver(loginSchema),
+    mode: 'onBlur',
+    reValidateMode: 'onChange',
     defaultValues: {
       email: '',
       password: '',