valid pwd text added

src/assets/images/icons/error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="error"><path fill="#ff1d25" d="M29.75,25.73,18.68,3.59a3,3,0,0,0-4-1.33,3.05,3.05,0,0,0-1.33,1.33L2.25,25.73a3,3,0,0,0,2.68,4.34H27.07a3,3,0,0,0,3-3A2.88,2.88,0,0,0,29.75,25.73ZM16,25.38a.94.94,0,1,1,.94-.94A.94.94,0,0,1,16,25.38Zm.94-4.69a.94.94,0,1,1-1.88,0V11.31a.94.94,0,1,1,1.88,0Z"></path></svg>

src/assets/images/icons/success.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" id="success"><path fill="#80af52" d="M256 26c127.03 0 230 102.97 230 230S383.03 486 256 486 26 383.03 26 256 128.97 26 256 26z"></path><path fill="#fff" d="M215.999 386a9.998 9.998 0 0 1-7.525-3.415l-70-80c-3.637-4.156-3.215-10.474.941-14.11s10.475-3.217 14.111.94l60.961 69.67 142.938-238.23c2.842-4.736 8.983-6.273 13.72-3.43 4.736 2.841 6.271 8.984 3.431 13.72l-150 250a9.998 9.998 0 0 1-8.577 4.855z"></path></svg>

src/components/AuthPages/ForgetPwdResponse.jsx

@@ -1,6 +1,9 @@
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import localImgLoad from '../../lib/localImgLoad'
 
 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">
@@ -8,9 +11,8 @@ const ForgetPwdResponse = ({title, message, type}) => {
             {title}
             </h1>
         </div>
-        <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-            {/* <img src='' /> */}
-            <p className='rounded-full border w-[50px] h-[50px] flex items-center justify-center'>Icon</p>
+        <div className="title-area w-[100px] h-[100px] mx-auto flex flex-col justify-center items-center relative text-center mb-7">
+            <img className='w-full h-full' src={`${type ? localImgLoad('images/icons/success.svg') : localImgLoad('images/icons/error.svg')}`} alt='alert-banner' />
         </div>
         <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
             <p className={`${type ? 'text-sky-blue' : 'text-red-500'} font-semibold dark:text-white mb-3 leading-[27.3px] text-[18px]`}>

src/components/AuthPages/ForgotPassword/index.jsx

@@ -48,7 +48,7 @@ export default function ForgotPassword() {
     }
 
     if (email !== "" && checked) {
-      const reqData = { email };
+      const reqData = { email, action:11013 };
       setResetLoading(true);
       try {
         const res = await userApi.StartResetPassword(reqData);
@@ -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);
@@ -52,7 +54,7 @@ const VerifyPassword = () => {
       }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
     }
     if(!PasswordValidator(password)){ // CHECKS IF PASSWORD IS VALID
-      setMsgError("Invalid Password: eg: Password1@");
+      setMsgError("Password must contain alphanumeric, uppercase and special character: eg: Password1@");
       return setTimeout(() => {
         setMsgError(null);
       }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
@@ -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 ?
               <>
@@ -134,6 +156,11 @@ const VerifyPassword = () => {
                     <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
                       We'll send an email to confirm reset
                     </span>
+                </div>
+                <div>
+                  <p className="text-red-500 font-semibold mb-3 leading-[27.3px] text-[13px]">
+                    Must include a special, numeric, uppercase and lowercase character
+                  </p>
                 </div>
                   <SuccessfulComponent
                     password={password}
@@ -149,16 +176,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 +267,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>
-);

src/components/Blogs/index.jsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import Layout from "../Partials/Layout";
-import CommonHead from "../UserHeader/CommonHead";
+import { useNavigate } from "react-router-dom";
 import usersService from "../../services/UsersService";
+import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import CommonHead from "../UserHeader/CommonHead";
 
 export default function BlogItem(props) {
 
@@ -16,6 +16,7 @@ export default function BlogItem(props) {
     const filterHandler = (value) => {
         setValue(value);
     };
+    // eslint-disable-next-line no-restricted-globals
     const queryParams = new URLSearchParams(location?.search);
     const blog_id = queryParams.get("blog_id");