reser pwd second phase implemented

src/components/AuthPages/ForgetPwdResponse.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 
 const ForgetPwdResponse = ({title, message, type}) => {
+  const navigate = useNavigate()
   return (
     <>
         <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">

src/components/AuthPages/ForgotPassword/index.jsx

@@ -154,20 +154,6 @@ export default function ForgotPassword() {
                       {msgError}
                     </div>
                   )}
-                  {/* {msgSuccess && (
-                    <div className="relative p-4 text-[#44228c] bg-[#e3d7fb] border-[#d5c4f9] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
-                      If we find your email, you will receive a link to reset your
-                      password. Please use or{" "}
-                      <Link
-                        to="/contact"
-                        className="text-[#4687ba] hover:text-[#009ef7]"
-                      >
-                        contact form
-                      </Link>{" "}
-                      if you did not get our message after few minutes.
-                    </div>
-                  )} */}
-
                   <div className="signin-area mb-3.5">
                     <div className="flex justify-center items-center gap-2">
                       <button
@@ -194,7 +180,7 @@ export default function ForgotPassword() {
               </>
             :
             <ForgetPwdResponse 
-              title={msgSuccess? 'Password Reset Complete' : 'Password Reset Error'}
+              title={'Forget Password'}
               message={msgSuccess? `Check your email for the link to continue password reset. Note the reset link will expire short time` : 'We are unable to continue with your request. Please try another username or contact us for help'}
               type={msgSuccess}
             />

src/components/AuthPages/VerifyPassword/index.jsx

@@ -6,10 +6,12 @@ import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
 import ForgetPwdResponse from "../ForgetPwdResponse";
 import PasswordValidator from "../../../lib/PasswordValidator";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 const VerifyPassword = () => {
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
+  const [requestStatus, setRequestStatus] = useState({loading: true, status:false, data: []})
   const [msgError, setMsgError] = useState("");
   const [linkLoader, setLinkLoader] = useState(false);
   const [linkSuccess, setLinkSuccess] = useState(null);
@@ -63,24 +65,21 @@ const VerifyPassword = () => {
             sessionid: "DUMMY-CANNOT_BE_EMPTY",
             reset_link: token,
             newpass: password,
+            m_uid: requestStatus.data?.m_uid || '',
+            reset_uid: requestStatus.data?.reset_uid || '',
             step: 300,
             action: 730,
           };
           const res = await userApi?.CompleteResetPassword(reqData);
 
-          if (res.status === 200) {
+          if (res.status == 200) {
             const { data } = res;
-            console.log('RESPONSE', res)
-
-            if (data?.status > 0 && data?.email) {
+            if (data?.internal_return >= 0) {
               // setTimeout(() => {
               //   navigate("/login", { replace: true });
               //   setLinkLoader(false);
               // }, 2000);
               setLinkSuccess(true);
-            } else if (data && data?.status == "Invalid Request") {
-              setLinkLoader(false);
-              setLinkSuccess(false);
             } else {
               setLinkLoader(false);
               setMsgError("An error occurred");
@@ -101,11 +100,30 @@ const VerifyPassword = () => {
     }
   };
 
+  const verifyResetPwd = () => { // FUNCTION TO VERIFY RESET PASSWORD LINK
+    setRequestStatus({loading: true, status:false, data: []})
+    var reqData = {
+      sessionid: "DUMMY-CANNOT_BE_EMPTY",
+      reset_link: token,
+      step: 200,
+      action: 730,
+    };
+    userApi.CompleteResetPassword(reqData).then(res => {
+      if(res.status != 200 || res.data.internal_return < 0){
+        return setRequestStatus({loading: false, status:false, data: []})
+      }
+      setRequestStatus({loading: false, status:true, data: res.data})
+    }).catch(error => {
+      setRequestStatus({loading: false, status:false, data: []})
+    })
+  }
+
   useEffect(()=>{
     // little checker for the validity of the token
   if (token==null || token?.length != 64) {
-    setLinkSuccess(false);
+    return setRequestStatus({loading: false, status:false, data: []});
   }
+  verifyResetPwd()
   },[])
   return (
     <>
@@ -121,6 +139,10 @@ const VerifyPassword = () => {
             </Link>
           </div>
           <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
+            {requestStatus.loading ?
+            <LoadingSpinner color='sky-blue' size='16' height='h-300px' />
+            :
+            !requestStatus.loading && requestStatus.status ?
             <div className="w-full">
               {linkSuccess == null ?
               <>
@@ -149,16 +171,22 @@ const VerifyPassword = () => {
                 </>
                 :
                 <ForgetPwdResponse 
-                title={linkSuccess? 'Password Reset Complete' : (linkSuccess==false && token==null) ? 'Forget Password' : 'Password Reset Error'}
-                message={linkSuccess? 
-                  'Password Reset Complete. You can login now with your new credentials' : 
-                  (linkSuccess==false && token==null) ? 'We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us' : 
-                  'Password Reset Error. Please get in touch with support for further support'
+                title={linkSuccess? 'Password Reset Complete' : 'Password Reset Error'}
+                message={linkSuccess? 'Password Reset Complete. You can login now with your new credentials' : 'Password Reset Error. Please get in touch with support for further support'
                 }
                 type={linkSuccess}
               />
               }
             </div>
+            :
+            <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+              <ForgetPwdResponse 
+                title={'Forget Password'}
+                message={'We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us'}
+                type={requestStatus.status}
+              />
+            </div>
+            }
           </div>
         </div>
       </AuthLayout>
@@ -234,25 +262,3 @@ const SuccessfulComponent = ({
     </div>
   </div>
 );
-
-const ErrorComponent = ({ onClick }) => (
-  <div className="input-area">
-    <div className="my-5">
-      <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-        This error occurs because you have already used this link or the link
-        has broken/expired. Start with the reset process again. If it doesn't
-        work, try to create the account from the start.
-      </p>
-    </div>
-
-    <div className="signin-area flex justify-center mb-3.5">
-      <button
-        onClick={onClick}
-        type="button"
-        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
-      >
-        <span>Return Home</span>
-      </button>
-    </div>
-  </div>
-);