btn style customized

.env

@@ -87,4 +87,7 @@ REACT_APP_MAX_FAMILY_MEMBERS=8
 REACT_APP_SHOW_OFFER_GROUP_JOB=0
 
 #UPLOAD PROFILE PICTURE
-REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
+REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
+
+#GOOGLE RECAPTCHA SITEKEY
+REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

.env.development

@@ -55,4 +55,7 @@ REACT_APP_MAX_FAMILY_MEMBERS=8
 REACT_APP_SHOW_OFFER_GROUP_JOB=0
 
 #UPLOAD PROFILE PICTURE
-REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
+REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
+
+#GOOGLE RECAPTCHA SITEKEY
+REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

.env.production

@@ -62,3 +62,6 @@ REACT_APP_SHOW_OFFER_GROUP_JOB=0
 
 #UPLOAD PROFILE PICTURE
 REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
+
+#GOOGLE RECAPTCHA SITEKEY
+REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

package.json

@@ -21,6 +21,7 @@
     "react-chartjs-2": "^4.1.0",
     "react-countup": "^6.2.0",
     "react-dom": "^18.2.0",
+    "react-google-recaptcha": "^3.1.0",
     "react-qr-code": "^2.0.11",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.0.2",

src/components/AuthPages/ForgotPassword/index.jsx

@@ -7,6 +7,8 @@ import AuthLayout from "../AuthLayout";
 import EmailValidator from "../../../lib/EmailValidator";
 import ForgetPwdResponse from "../ForgetPwdResponse";
 
+import ReCAPTCHA from "react-google-recaptcha";
+
 export default function ForgotPassword() {
   const [checked, setValue] = useState(false);
   const [resetLoading, setResetLoading] = useState(false);
@@ -22,9 +24,18 @@ export default function ForgotPassword() {
     setMail(e?.target.value);
   };
 
-  const humanChecker = () => {
-    setValue(!checked);
-  };
+  // const humanChecker = () => {
+  //   setValue(!checked);
+  // };
+
+  function humanChecker(value) {
+    // console.log("Captcha value:", value);
+    if(value){
+      setValue(true)
+    }else{
+      setValue(false)
+    }
+  }
 
   const resetHandler = async () => {
     if (email == "") {
@@ -113,10 +124,16 @@ export default function ForgotPassword() {
                     />
                   </div>
                   {/* hCaptha clone for the time being */}
-                  <div className="mb-10">
+                  <div className="mb-10 flex justify-center w-full">
+                    <ReCAPTCHA
+                      sitekey={process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY}
+                      onChange={humanChecker}
+                    />
+                  </div>
+                  {/* <div className="mb-10">
                     <div className="w-[303px] h-[78px] mx-auto overflow-hidden">
                       <div className="w-[300px] h-[74px] bg-white bottom-[1px] rounded border-gray-100 overflow-hidden cursor-pointer">
-                        {/* Checkbox */}
+                        
                         <div className="h-full relative inline-block">
                           <div className="relative table top-0 h-full">
                             <div className="table-cell align-middle">
@@ -148,18 +165,25 @@ export default function ForgotPassword() {
                         <div className="h-full relative inline-block w-16"></div>
                       </div>
                     </div>
-                  </div>
+                  </div> */}
                   {msgError && (
                     <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
                       {msgError}
                     </div>
                   )}
                   <div className="signin-area mb-3.5">
-                    <div className="flex justify-center items-center gap-2">
+                    <div className="flex justify-center items-center gap-4">
+                    <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] `}
+                      >
+                        Cancel
+                      </button>
                       <button
                         type="button"
                         onClick={resetHandler}
-                        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={`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>
@@ -167,13 +191,6 @@ export default function ForgotPassword() {
                           <span>Send Code</span>
                         )}
                       </button>
-                      <button
-                        type="button"
-                        onClick={() => navigate("/login")}
-                        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.8125rem] `}
-                      >
-                        Cancel
-                      </button>
                     </div>
                   </div>
                 </div>

src/components/AuthPages/Login/index.jsx

@@ -320,7 +320,7 @@ export default function Login() {
                           onClick={doLogin}
                           type="button"
                           disabled={loginLoading}
-                          className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+                          className={`btn-login  rounded-full mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
                         >
                           {loginLoading ? (
                             <div className="signup btn-loader"></div>
@@ -433,7 +433,7 @@ export default function Login() {
                           onClick={doLogin}
                           disabled={loginLoading}
                           type="button"
-                          className={`btn-login  rounded-[0.475rem] text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+                          className={`btn-login  rounded-full text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
                         >
                           {loginLoading ? (
                             <div className="signup btn-loader"></div>

src/components/AuthPages/SignUp/index.jsx

@@ -325,7 +325,7 @@ export default function SignUp() {
                       disabled={countries.loading}
                       type="button"
                       onClick={handleSignUp}
-                      className={`rounded-[0.475rem] mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
+                      className={`rounded-full mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
                     >
                       {signUpLoading ? (
                         <div className="signup btn-loader"></div>

src/components/Settings/Tabs/PersonalInfoTab.jsx

@@ -51,7 +51,6 @@ export default function PersonalInfoTab({
   coverImgInput,
   browseCoverImg,
   coverImgChangHandler,
-  uploadStatus
 }) {
   let { userDetails } = useSelector((state) => state.userDetails);
 
@@ -362,7 +361,7 @@ export default function PersonalInfoTab({
                     {/* inputs ends here */}
                   </div>
                 </div>
-                {/* {process.env.REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE != 0 && */}
+                {process.env.REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE != 0 &&
                   <div className="w-[232px] mb-10">
                     <div className="update-profile w-full mb-9">
                       <h1 className="text-xl tracking-wide font-bold text-dark-gray dark:text-white flex items-center mb-2">
@@ -418,11 +417,9 @@ export default function PersonalInfoTab({
                           </div>
                         </div>
                       </div>
-                      {uploadStatus.message && !uploadStatus.loading && <p className={`text-center ${uploadStatus.status ? 'text-green-500':'text-red-500'}`}>{uploadStatus.message}</p>}
-                      {uploadStatus.loading && <p className="text-center">{uploadStatus.message}</p>}
                     </div>
                   </div>
-                {/* } */}
+                }
               </div>
 
               <div className="content-footer w-full">

src/components/Settings/index.jsx

@@ -24,12 +24,10 @@ import {
 import RecipientAccountTab from "./Tabs/RecipientAccountTab";
 
 export default function Settings({ faq }) {
-  const apiCall = new usersService();
   const { userDetails } = useSelector((state) => state?.userDetails);
   const [profileImg, setProfileImg] = useState(
     userDetails?.profile_pic_url ? userDetails.profile_pic_url : profile
   );
-  let [uploadStatus, setUploadStatus] = useState({loading: false, status: false, message:''}) // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS
   const [coverImg, setCoverImg] = useState(cover);
   const [reloadCardList, setReloadCardList] = useState(false); // STATE TO DETERMINE WHEN CARD LIST RELOADS. EG: WHEN USER DELETES A CARD
 
@@ -38,68 +36,12 @@ export default function Settings({ faq }) {
   const browseProfileImg = () => {
     profileImgInput.current.click();
   };
+
   const profileImgChangHandler = (e) => {
-    // if (e.target.value !== "") {
-    //   const imgReader = new FileReader();
-    //   imgReader.onload = (event) => {
-    //     setProfileImg(event.target.result);
-    //   };
-    //   imgReader.readAsDataURL(e.target.files[0]);
-    // }
-    setUploadStatus({loading: false, status: false, message:''})
-    let acceptedFormat = ["jpeg", "jpg", "png", "bmp", "gif"] // ARRAY OF SUPPORTED FORMATS
-    let uploadedFile = e.target.files[0] //UPLOADED FILE
-
-    if(!acceptedFormat.includes(uploadedFile?.type?.split("/")[1]?.toLowerCase())){ //CHECKING FOR CORRECT UPLOAD FORMAT
-      let msg = 'Please select '
-      for(let i=0; i<=acceptedFormat.length-1; i++){
-        if(i == acceptedFormat.length-1){
-          msg+=`or ${acceptedFormat[i]}`
-        }else{
-          msg+=`${acceptedFormat[i]}, `
-        }
-      }
-      setUploadStatus({loading: false, status: false, message:msg})
-      return setTimeout(()=>{
-        profileImgInput.current.value = '' // clear the input
-        setUploadStatus({loading: false, status: false, message:''})
-      },5000)
-    }
-
-    if(uploadedFile.size > 5*1048576){ // CHECKING FOR CORRECT FILE SIZE
-      setUploadStatus({loading: false, status: false, message:'File must not exceed 5MB'})
-      return setTimeout(()=>{
-        profileImgInput.current.value = '' // clear the input
-        setUploadStatus({loading: false, status: false, message:''})
-      },5000)
-    }
-
     if (e.target.value !== "") {
       const imgReader = new FileReader();
       imgReader.onload = (event) => {
-        let reqData = { // PAYLOAD FOR API CALL
-          file_name: uploadedFile?.name,
-          file_size: uploadedFile?.size,
-          file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
-          file_data: event?.target?.result,
-          msg_type: 'FILE',
-          action: 'WRENCHBOARD_PICTURE_PROFILE',
-          // action: 11307
-        }
-        setUploadStatus({loading: true, status: false, message:'Loading...'})
-        apiCall.sendFiles(reqData).then(res=>{
-          if(res.status != 200 || res.data.internal_return < 0){
-            return setUploadStatus({loading: false, status: false, message: 'Something went wrong, try again'})
-          }
-          setUploadStatus({loading: false, status: true, message: 'Uploaded successfully'})
-          setProfileImg(event.target.result);
-        }).catch(error=>{
-          setUploadStatus({loading: false, status: false, message: 'Network error, try again'})
-        }).finally(()=>{
-          setTimeout(()=>{
-            setUploadStatus({loading: false, status: false, message: ''})
-          },5000)
-        })
+        setProfileImg(event.target.result);
       };
       imgReader.readAsDataURL(e.target.files[0]);
     }
@@ -119,6 +61,7 @@ export default function Settings({ faq }) {
     }
   };
 
+  const apiCall = useMemo(() => new usersService(), []);
   // Tabs Handling
   const tabs = [
     {
@@ -170,7 +113,7 @@ export default function Settings({ faq }) {
       iconName: "page-right",
     },
     {
-      id: 9,
+      id: 8,
       name: "terms",
       title: "Terms and Conditions",
       iconName: "page-right",
@@ -274,7 +217,6 @@ export default function Settings({ faq }) {
                         coverImgChangHandler={coverImgChangHandler}
                         browseCoverImg={browseCoverImg}
                         coverImgInput={coverImgInput}
-                        uploadStatus={uploadStatus}
                       />
                     </div>
                   )}