Merge pull request #199 from Nitin-kumar-yadav1307/feature/web-dashboard-login-lockout-423

fix(web): handle 423 login lockout with retry countdown

Author: yash-pouranik

examples/social-demo/client/src/pages/auth/Login.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '../../contexts/useAuth';
 import { authApi } from '../../lib/api';
@@ -12,11 +12,102 @@ export default function Login() {
     email: '',
     password: '',
   });
+  const [lockoutSecondsRemaining, setLockoutSecondsRemaining] = useState(0);
+  const [lockedEmail, setLockedEmail] = useState('');
 
+  /**
+   * Normalizes an email address for stable lockout comparison.
+   * @param {string} value - Raw email input value.
+   * @returns {string} Normalized email.
+   */
+  const normalizeEmail = (value) => String(value || '').trim().toLowerCase();
+
+  /**
+   * Extracts the retry window in seconds from a lockout API error.
+   * @param {Error & { response?: { data?: object, headers?: object } }} error - Axios error.
+   * @returns {number} Retry delay in seconds.
+   */
+  const parseRetryAfterSeconds = (error) => {
+    const payload = error?.response?.data || {};
+
+    const retryAfterFromBody = Number(payload?.retryAfterSeconds);
+    if (Number.isFinite(retryAfterFromBody) && retryAfterFromBody > 0) {
+      return Math.floor(retryAfterFromBody);
+    }
+
+    const retryAfterHeader = Number(error?.response?.headers?.['retry-after']);
+    if (Number.isFinite(retryAfterHeader) && retryAfterHeader > 0) {
+      return Math.floor(retryAfterHeader);
+    }
+
+    const message = String(payload?.message || payload?.error || '');
+    const secondsMatch = message.match(/(\d+)\s*seconds?/i);
+    if (secondsMatch) {
+      return Number(secondsMatch[1]);
+    }
+
+    return 60;
+  };
+
+  useEffect(() => {
+    if (lockoutSecondsRemaining <= 0) return undefined;
+
+    const timer = window.setInterval(() => {
+      setLockoutSecondsRemaining((current) => Math.max(0, current - 1));
+    }, 1000);
+
+    return () => window.clearInterval(timer);
+  }, [lockoutSecondsRemaining]);
+
+  const isLockoutActive = useMemo(() => {
+    return (
+      lockoutSecondsRemaining > 0 &&
+      normalizeEmail(formData.email) !== '' &&
+      normalizeEmail(formData.email) === lockedEmail
+    );
+  }, [formData.email, lockoutSecondsRemaining, lockedEmail]);
+
+  /**
+   * Updates the email field in the login form.
+   * @param {React.ChangeEvent<HTMLInputElement>} e - Email input change event.
+   */
+  const handleEmailChange = (e) => {
+    setFormData((current) => ({ ...current, email: e.target.value }));
+  };
+
+  /**
+   * Updates the password field in the login form.
+   * @param {React.ChangeEvent<HTMLInputElement>} e - Password input change event.
+   */
+  const handlePasswordChange = (e) => {
+    setFormData((current) => ({ ...current, password: e.target.value }));
+  };
+
+  /**
+   * Navigates to the dashboard after a successful login mutation.
+   */
+  const handleLoginSuccess = () => {
+    navigate('/');
+  };
+
+  /**
+   * Submits the login form and forwards successful sign-ins to the home page.
+   * @param {React.FormEvent<HTMLFormElement>} e - Form submit event.
+   * @returns {Promise<void>}
+   */
   const handleSubmit = async (e) => {
     e.preventDefault();
+    if (isLockoutActive) return;
+
     login(formData, {
-      onSuccess: () => navigate('/'),
+      onSuccess: handleLoginSuccess,
+      onError: (error) => {
+        if (error?.response?.status === 423) {
+          const seconds = parseRetryAfterSeconds(error);
+          setLockedEmail(normalizeEmail(formData.email));
+          setLockoutSecondsRemaining(seconds);
+        }
+      },
     });
   };
 
@@ -49,7 +140,7 @@ export default function Login() {
             label="Email"
             placeholder="Enter your email"
             value={formData.email}
-            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+            onChange={handleEmailChange}
             required
           />
 
@@ -58,11 +149,17 @@ export default function Login() {
             label="Password"
             placeholder="Enter your password"
             value={formData.password}
-            onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+            onChange={handlePasswordChange}
             required
           />
 
-          {loginError && (
+          {isLockoutActive && (
+            <div className="p-3 bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-500 rounded-lg text-yellow-700 dark:text-yellow-300 text-sm">
+              Too many failed attempts. Try again in {lockoutSecondsRemaining} seconds.
+            </div>
+          )}
+
+          {loginError && !isLockoutActive && (
             <div className="p-3 bg-red-100 dark:bg-red-900/20 border border-red-500 rounded-lg text-red-500 text-sm">
               {loginError.response?.data?.message || 'Failed to login. Please check your credentials.'}
             </div>
@@ -72,9 +169,9 @@ export default function Login() {
             type="submit"
             className="w-full"
             size="lg"
-            disabled={isLoginLoading}
+            disabled={isLoginLoading || isLockoutActive}
           >
-            {isLoginLoading ? 'Signing in...' : 'Sign In'}
+            {isLoginLoading ? 'Signing in...' : isLockoutActive ? `Locked (${lockoutSecondsRemaining}s)` : 'Sign In'}
           </Button>
 
           <div className="relative py-2">