captcha added in login page

.env

@@ -90,4 +90,5 @@ REACT_APP_SHOW_OFFER_GROUP_JOB=0
 REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
 
 #GOOGLE RECAPTCHA SITEKEY
-REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
+#6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

.env.development

@@ -58,4 +58,5 @@ REACT_APP_SHOW_OFFER_GROUP_JOB=0
 REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
 
 #GOOGLE RECAPTCHA SITEKEY
-REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
+#6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

.env.production

@@ -64,4 +64,5 @@ REACT_APP_SHOW_OFFER_GROUP_JOB=0
 REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
 
 #GOOGLE RECAPTCHA SITEKEY
-REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
+#6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

src/components/AuthPages/ForgetPwdResponse.jsx

@@ -24,7 +24,7 @@ const ForgetPwdResponse = ({title, message, type}) => {
                 <button
                 type="button"
                 onClick={() => navigate("/login")}
-                className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                className={`h-[48px] rounded-full mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
                 >
                     <span>Home</span>
                 </button>

src/components/AuthPages/ForgotPassword/index.jsx

@@ -176,14 +176,14 @@ export default function ForgotPassword() {
                     <button
                         type="button"
                         onClick={() => navigate("/login")}
-                        className={`rounded-full mb-6 text-[15px] font-semibold text-white hover:text-white flex justify-center bg-red-500 hover:bg-red-600 transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
+                        className={`h-[48px] rounded-full mb-6 text-[15px] font-semibold text-white hover:text-white flex justify-center bg-red-500 hover:bg-red-600 transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
                       >
                         Cancel
                       </button>
                       <button
                         type="button"
                         onClick={resetHandler}
-                        className={`rounded-full mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                        className={`h-[48px] rounded-full mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
                       >
                         {resetLoading ? (
                           <div className="signup btn-loader"></div>

src/components/AuthPages/Login/index.jsx

@@ -14,10 +14,14 @@ import { useGoogleLogin } from "@react-oauth/google";
 import { useDispatch } from "react-redux";
 import { updateUserDetails } from "../../../store/UserDetails";
 
+import ReCAPTCHA from "react-google-recaptcha";
+
 export default function Login() {
   const dispatch = useDispatch();
   const { state } = useLocation();
 
+  const [validCaptcha, setValidCaptcha] = useState({show: false, valid:''}); // FOR CAPTCHA
+
   let [loginType, setLoginType] = useState("");
 
   const [loginLoading, setLoginLoading] = useState(false);
@@ -107,6 +111,14 @@ export default function Login() {
       }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
       return;
     }
+    if(name == "full" && !validCaptcha.valid && validCaptcha.show){ // RUNS AND DISPLAYS CAPTCHA, IF ERROR OCCURED DURING LOGIN FOR FULL LOGIN ALONE
+      setMsgError("Please Verify Captcha");
+      setLoginLoading(false);
+      setTimeout(() => {
+        setMsgError("");
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      return;
+    }
     userApi
       .logInUser(postData)
       .then((res) => {
@@ -120,6 +132,7 @@ export default function Login() {
           // setMsgError("Wrong, email/password");
           setLoginError(true);
           setLoginLoading(false);
+          setValidCaptcha(prev => ({...prev, show:true})) // DISPLAYS CAPTCHA IF ERROR
           return;
         }
         localStorage.setItem("member_id", `${res.data.member_id}`);
@@ -135,6 +148,7 @@ export default function Login() {
       .catch((error) => {
         setMsgError("Unable to login, try again");
         setLoginLoading(false);
+        setValidCaptcha(prev => ({...prev, show:true})) // DISPLAYS CAPTCHA IF ERROR
       })
       .finally(() => {
         setTimeout(() => {
@@ -145,6 +159,14 @@ export default function Login() {
       });
   };
 
+  function captchaChecker(value) { // FUNCTION TO VALIDATE CAPTCHA
+    if(value){
+      setValidCaptcha({show: true, valid:value})
+    }else{
+      setValidCaptcha({show: true, valid:''})
+    }
+  }
+
   const googleLogin = useGoogleLogin({
     flow: "auth-code",
     ux_mode: "redirect",
@@ -296,6 +318,17 @@ export default function Login() {
                         forgotPassword
                       />
                     </div>
+
+                    {/* hCaptha clone for the time being */}
+                    {validCaptcha.show &&
+                    <div className="mb-5 flex justify-center w-full">
+                      <ReCAPTCHA
+                        sitekey={process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY}
+                        onChange={captchaChecker}
+                        />
+                    </div>
+                    }
+
                     {loginError && (
                       <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
                         Invalid username or password- Please{" "}