src/pages/authentication/LoginWithOtp.jsx

@@ -18,8 +18,8 @@ const otpSchema = z.object({
 const LoginWithOtp = () => {
   const navigate = useNavigate();
 
-  const [loading, setLoading] = useState(false);
+    const [ loading, setLoading ] = useState( false );
-  const [timeLeft, setTimeLeft] = useState(0);
+    const [ timeLeft, setTimeLeft ] = useState( 0 );
     
 
   const inputRefs = useRef([]);
@@ -29,64 +29,59 @@ const LoginWithOtp = () => {
     handleSubmit,
     formState: { errors, isSubmitted },
     getValues,
-    setValue,
-    trigger,
   } = useForm({
     resolver: zodResolver(otpSchema),
   });
 
   const onSubmit = async (data) => {
     const finalOtp = data.otp1 + data.otp2 + data.otp3 + data.otp4;
-    const username = localStorage.getItem("otpUsername");
+      const username = localStorage.getItem( "otpUsername" );
     setLoading(true);
 
     try {
         let requestedData =  {
             email: username,
-        otp: finalOtp
+            otp:finalOtp
         }
-      const response = await AuthRepository.verifyOTP(requestedData)
+        const response = await AuthRepository.verifyOTP( requestedData )
   
         localStorage.setItem("jwtToken", response.data.token);
         localStorage.setItem("refreshToken", response.data.refreshToken);
-      setLoading(false);
+        setLoading( false );
-      localStorage.removeItem("otpUsername");
+         localStorage.removeItem( "otpUsername" );
-      localStorage.removeItem("otpSentTime");
+        localStorage.removeItem( "otpSentTime" );
-      navigate("/dashboard");
+        navigate( "/dashboard" );
        
     } catch (err) {
-      showToast("Invalid or expired OTP.", "error");
+        showToast( "Invalid or expired OTP.", "error" );
         
         setLoading(false);
     }
   };
-  const formatTime = (seconds) => {
+const formatTime = (seconds) => {
   const min = Math.floor(seconds / 60).toString().padStart(2, "0");
   const sec = (seconds % 60).toString().padStart(2, "0");
   return `${min}:${sec}`;
-  };
+};
 
-  // Time Logic for OTP expiry
+useEffect(() => {
-  useEffect(() => {
   const otpSentTime = localStorage.getItem("otpSentTime");
   const now = Date.now();
 
   if (otpSentTime) {
-      const elapsed = Math.floor((now - Number(otpSentTime)) / 1000); //in seconds
+    const elapsed = Math.floor((now - Number(otpSentTime)) / 1000); // in seconds
-      const remaining = Math.max(OTP_EXPIRY_SECONDS - elapsed, 0); //prevent negatives
+    const remaining = Math.max(OTP_EXPIRY_SECONDS - elapsed, 0);    // prevent negatives
     setTimeLeft(remaining);
   }
-  }, []);
+}, []);
-
+useEffect(() => {
-
-  useEffect(() => {
   if (timeLeft <= 0) return;
 
   const timer = setInterval(() => {
     setTimeLeft((prev) => {
       if (prev <= 1) {
         clearInterval(timer);
-          localStorage.removeItem("otpSentTime");
+          localStorage.removeItem( "otpSentTime" ); 
           localStorage.removeItem("otpUsername"); 
         return 0;
       }
@@ -95,31 +90,7 @@ const LoginWithOtp = () => {
   }, 1000);
 
   return () => clearInterval(timer);
-  }, [timeLeft]);
+}, [timeLeft]);
-
-  // Handle Paste Event
-  const handlePaste = (e) => {
-    e.preventDefault();
-
-    const pastedData = e.clipboardData.getData("text/plain").trim();
-    if (pastedData.match(/^\d{4}$/)) {
-      for (let i = 0; i < pastedData.length; i++) {
-        setValue(`otp${i + 1}`, pastedData[i], { shouldValidate: true });
-
-        if (inputRefs.current[i + 1]) {
-          inputRefs.current[i + 1].focus();
-        }
-      }
-      trigger(["otp1", "otp2", "otp3", "otp4"]);
-    } else {
-      showToast("Invalid OTP format pasted. Please enter 4 digits")
-
-      for (let i = 0; i < 4; i++) {
-        setValue(`otp${i + 1}`, "")
-
-      }
-    }
-  }
 
 
   return (
@@ -138,7 +109,8 @@ const LoginWithOtp = () => {
                   key={num}
                   type="text"
                   maxLength={1}
-                  className={`form-control text-center ${errors[`otp${num}`] ? "is-invalid" : ""
+                  className={`form-control text-center ${
+                    errors[`otp${num}`] ? "is-invalid" : ""
                   }`}
                   ref={(el) => {
                     inputRefs.current[idx] = el;
@@ -149,9 +121,6 @@ const LoginWithOtp = () => {
                     onChange(e);
                     if (/^\d$/.test(val) && idx < 3) {
                       inputRefs.current[idx + 1]?.focus();
-
-                    } else if (val === "" && idx > 0) {
-                      inputRefs.current[idx - 1]?.focus();
                     }
                   }}
                   onKeyDown={(e) => {
@@ -163,8 +132,6 @@ const LoginWithOtp = () => {
                       inputRefs.current[idx - 1]?.focus();
                     }
                   }}
-
-                  onPaste={idx === 0 ? handlePaste : undefined}
                   style={{ width: "40px", height: "40px", fontSize: "15px" }}
                   {...rest}
                 />
@@ -204,7 +171,7 @@ const LoginWithOtp = () => {
             >
               OTP has expired. Please request a new one.
                               </p>
-              <a className="text-primary cursor-pointer" onClick={() => navigate('/auth/login')}>Try Again</a>
+                              <a className="text-primary cursor-pointer" onClick={()=>navigate('/auth/login')}>Try Again</a>
                           </div>
             
           )}