updated forget password functionality with backend

app/src/pages/ForgotPassword.tsx

@@ -1,92 +1,134 @@
-import React, { useState, useEffect } from 'react';
-import { LogoIconLarge } from '../components/icons/Logo';
-import EmailInput from '../components/forgotPassword/EmailInput';
-import OTPVerification from '../components/forgotPassword/OTP_Verification';
-import PasswordSetup from '../components/forgotPassword/PasswordSetup';
-import ConfirmationMessage from '../components/forgotPassword/ConfirmationMessgae';
+import React, { useState, useEffect, FormEvent } from "react";
+import { LogoIconLarge } from "../components/icons/Logo";
+import EmailInput from "../components/forgotPassword/EmailInput";
+import OTPVerification from "../components/forgotPassword/OTP_Verification";
+import PasswordSetup from "../components/forgotPassword/PasswordSetup";
+import ConfirmationMessage from "../components/forgotPassword/ConfirmationMessgae";
+import { changePasswordApi } from "../services/factoryBuilder/signInSignUp/changePasswordApi";
+import { checkEmailApi } from "../services/factoryBuilder/signInSignUp/checkEmailApi";
+import { verifyOtpApi } from "../services/factoryBuilder/signInSignUp/verifyOtpApi";
 
 const ForgotPassword: React.FC = () => {
-    const [step, setStep] = useState(1);
-    const [email, setEmail] = useState('');
-    const [code, setCode] = useState('');
-    const [newPassword, setNewPassword] = useState('');
-    const [confirmPassword, setConfirmPassword] = useState('');
-    const [timer, setTimer] = useState(30);
+  const [step, setStep] = useState(1);
+  const [email, setEmail] = useState("");
+  const [code, setCode] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [timer, setTimer] = useState(30);
+  const [resetToken, setResetToken] = useState("");
 
-    useEffect(() => {
-        let countdown: NodeJS.Timeout;
-        if (step === 2 && timer > 0) {
-            countdown = setTimeout(() => setTimer(prev => prev - 1), 1000);
-        }
-        return () => clearTimeout(countdown);
-    }, [step, timer]);
-
-    const handleSubmitEmail = () => {
-        setStep(2);
-        setTimer(30);
+  useEffect(() => {
+    let countdown: NodeJS.Timeout;
+    if (step === 2 && timer > 0) {
+      countdown = setTimeout(() => setTimer((prev) => prev - 1), 1000);
     }
-    const resendCode = () => {
-        // TODO: call API to resend code
-        setTimer(30);
-    };
+    return () => clearTimeout(countdown);
+  }, [step, timer]);
 
-    return (
-        <div className='forgot-password-page auth-container'>
-            <div className='forgot-password-wrapper'>
-                <div className='logo-icon'>
-                    <LogoIconLarge />
-                </div>
+  const resendCode = async () => {
+    // TODO: call API to resend code
+    setTimer(30);
+    try {
+      const emailResponse = await checkEmailApi(email);
 
+      if (emailResponse.message == "OTP sent Successfully") {
+        setCode(emailResponse.OTP);
+      }
+    } catch {}
+  };
+  const handleEmailSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    setTimer(30);
+    try {
+      const emailResponse = await checkEmailApi(email);
 
-                {step === 1 && (
-                    <>
-                        <EmailInput
-                            email={email}
-                            setEmail={setEmail}
-                            onSubmit={handleSubmitEmail}
-                        />
-                        <a href='/' className='login continue-button'>Login</a>
-                    </>
+      if (emailResponse.message == "OTP sent Successfully") {
+        setStep(2);
+        setCode(emailResponse.OTP);
+      }
+    } catch {}
+  };
 
-                )}
+  const handleOTPSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    try {
+      const otpResponse = await verifyOtpApi(email, Number(code));
 
+      if (otpResponse.message == "OTP verified successfully") {
+        setResetToken(otpResponse.resetToken);
+        setStep(3);
+      } else {
+        alert(otpResponse.message);
+      }
+    } catch {}
+  };
 
-                {step === 2 && (
-                    <>
-                        <OTPVerification
-                            email={email}
-                            timer={timer}
-                            setCode={setCode}
-                            onSubmit={() => setStep(3)}
-                            resendCode={resendCode}
-                        />
-                        <a href='/' className='login'>Login</a>
-                    </>
+  const handlePasswordSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    try {
+      const passwordResponse = await changePasswordApi(
+        resetToken,
+        newPassword,
+        confirmPassword
+      );
+      if (passwordResponse.message === "Password reset successfull!!") {
+        setStep(4);
+      }
+    } catch {}
+  };
 
-                )}
-
-
-                {step === 3 && (
-                    <>
-                        <PasswordSetup
-                            newPassword={newPassword}
-                            confirmPassword={confirmPassword}
-                            setNewPassword={setNewPassword}
-                            setConfirmPassword={setConfirmPassword}
-                            onSubmit={() => setStep(4)}
-                        />
-                        <a href='/' className='login'>Login</a>
-                    </>
-
-                )}
-
-
-                {step === 4 && <ConfirmationMessage />}
-
-
-            </div>
+  return (
+    <div className="forgot-password-page auth-container">
+      <div className="forgot-password-wrapper">
+        <div className="logo-icon">
+          <LogoIconLarge />
         </div>
-    );
+
+        {step === 1 && (
+          <>
+            <EmailInput
+              email={email}
+              setEmail={setEmail}
+              onSubmit={handleEmailSubmit}
+            />
+            <a href="/" className="login continue-button">
+              Login
+            </a>
+          </>
+        )}
+
+        {step === 2 && (
+          <>
+            <OTPVerification
+              code={code}
+              email={email}
+              timer={timer}
+              setCode={setCode}
+              onSubmit={handleOTPSubmit}
+              resendCode={resendCode}
+            />
+            <a href="/" className="login">
+              Login
+            </a>
+          </>
+        )}
+
+        {step === 3 && (
+          <>
+            <PasswordSetup
+              newPassword={newPassword}
+              confirmPassword={confirmPassword}
+              setNewPassword={setNewPassword}
+              setConfirmPassword={setConfirmPassword}
+              onSubmit={handlePasswordSubmit}
+            />
+            <a href="/" className="login">
+              Login
+            </a>
+          </>
+        )}
+
+        {step === 4 && <ConfirmationMessage />}
+      </div>
+    </div>
+  );
 };
 
 export default ForgotPassword;

app/src/pages/UserAuth.tsx

@@ -34,7 +34,7 @@ const UserAuth: React.FC = () => {
 
   useEffect(() => {
     initializeFingerprint();
-  }, [])
+  }, []);
 
   const { userId, organization } = getUserData();
 
@@ -47,7 +47,6 @@ const UserAuth: React.FC = () => {
         setError("");
         setOrganization(organization);
         setUserName(res.message.name);
-        // console.log(' res.userId: ', res.message.userId);
         localStorage.setItem("userId", res.message.userId);
         localStorage.setItem("email", res.message.email);
         localStorage.setItem("userName", res.message.name);
@@ -55,33 +54,46 @@ const UserAuth: React.FC = () => {
         localStorage.setItem("refreshToken", res.message.refreshToken);
 
         try {
-          const projects = await recentlyViewed(organization, res.message.userId);
+          const projects = await recentlyViewed(
+            organization,
+            res.message.userId
+          );
           if (res.message.isShare) {
             if (Object.values(projects.RecentlyViewed).length > 0) {
-              const recent_opend_projectID = (Object.values(projects?.RecentlyViewed || {})[0] as any)?._id;
-              if (Object.values(projects?.RecentlyViewed).filter((val: any) => val._id == recent_opend_projectID)) {
-                setLoadingProgress(1)
-                navigate(`/projects/${recent_opend_projectID}`)
+              const recent_opend_projectID = (
+                Object.values(projects?.RecentlyViewed || {})[0] as any
+              )?._id;
+              if (
+                Object.values(projects?.RecentlyViewed).filter(
+                  (val: any) => val._id == recent_opend_projectID
+                )
+              ) {
+                setLoadingProgress(1);
+                navigate(`/projects/${recent_opend_projectID}`);
               } else {
-                navigate("/Dashboard")
+                navigate("/Dashboard");
               }
             } else {
               setLoadingProgress(1);
               navigate("/Dashboard");
             }
           }
-
         } catch (error) {
           console.error("Error fetching recent projects:", error);
         }
       } else if (res.message === "User Not Found!!! Kindly signup...") {
         setError("Account not found");
-      } else if (res.message === "Email & Password is invalid...Check the credentials") {
-        setError(res.message)
-      } else if (res.message === "Already LoggedIn on another browser....Please logout!!!") {
+      } else if (
+        res.message === "Email & Password is invalid...Check the credentials"
+      ) {
+        setError(res.message);
+      } else if (
+        res.message ===
+        "Already LoggedIn on another browser....Please logout!!!"
+      ) {
         setError("Already logged in on another browser. Please logout first.");
         navigate("/");
-        setError("")
+        setError("");
         // setError("");
         // setOrganization(organization);
         // setUserName(res.ForceLogoutData.userName);
@@ -179,6 +191,7 @@ const UserAuth: React.FC = () => {
           name="email"
           value={email}
           placeholder="Email"
+          autoComplete="email"
           onChange={(e) => setEmail(e.target.value)}
           required
         />
@@ -188,6 +201,7 @@ const UserAuth: React.FC = () => {
             type={showPassword ? "text" : "password"}
             value={password}
             placeholder="Password"
+            autoComplete="current-password"
             onChange={(e) => setPassword(e.target.value)}
             required
           />
@@ -201,7 +215,11 @@ const UserAuth: React.FC = () => {
           </button>
         </div>
 
-        {isSignIn && <a href="forgot" className="forgot-password">Forgot password ?</a>}
+        {isSignIn && (
+          <a href="forgot" className="forgot-password">
+            Forgot password ?
+          </a>
+        )}
 
         {!isSignIn && (
           <div className="policy-checkbox">