dummy bg added

.env

@@ -96,3 +96,6 @@ REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
 #FAMILY MEMBER MINIMUM AGE
 REACT_APP_FAMILY_MINIMUM_AGE=4
 REACT_APP_FAMILY_MAXIMUM_AGE=18
+
+#CHANGE LOGIN LAYOUT
+REACT_APP_NEW_LOGIN_LAYOUT=1

.env.development

@@ -64,3 +64,6 @@ REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
 #FAMILY MEMBER MINIMUM AGE
 REACT_APP_FAMILY_MINIMUM_AGE=4
 REACT_APP_FAMILY_MAXIMUM_AGE=18
+
+#CHANGE LOGIN LAYOUT
+REACT_APP_NEW_LOGIN_LAYOUT=1

.env.production

@@ -70,3 +70,6 @@ REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
 #FAMILY MEMBER MINIMUM AGE
 REACT_APP_FAMILY_MINIMUM_AGE=4
 REACT_APP_FAMILY_MAXIMUM_AGE=18
+
+#CHANGE LOGIN LAYOUT
+REACT_APP_NEW_LOGIN_LAYOUT=0

src/Routers.jsx

@@ -8,9 +8,11 @@ import AcitveBidsPage from "./views/AcitveBidsPage";
 import AuthProfilePage from "./views/AuthProfilePage";
 import CollectionItemPage from "./views/CollectionItemPage";
 import ForgotPasswordPages from "./views/ForgotPasswordPages";
+import ForgotPasswordPagesTwo from "./views/ForgotPasswordPagesTwo";
 import HistoryPage from "./views/HistoryPage";
 import HomePages from "./views/HomePages";
 import LoginPage from "./views/LoginPage";
+import LoginPageTwo from "./views/LoginPageTwo";
 import MarketPlacePage from "./views/MarketPlacePage";
 import MyWalletPage from "./views/MyWalletPage";
 import SavedPage from "./views/SavedPage";
@@ -18,11 +20,15 @@ import SellPage from "./views/SellPage";
 import SettingsPage from "./views/SettingsPage";
 import ShopDetailsPage from "./views/ShopDetailsPage";
 import SignupPage from "./views/SignupPage";
+import SignupPageTwo from "./views/SignupPageTwo";
 import UpdatePasswordPages from "./views/UpdatePasswordPages";
+import UpdatePasswordPagesTwo from "./views/UpdatePasswordPagesTwo";
 import UploadProductPage from "./views/UploadProductPage";
 import UserProfilePage from "./views/UserProfilePage";
 import VerifyYouPages from "./views/VerifyYouPages";
+import VerifyYouPagesTwo from "./views/VerifyYouPagesTwo";
 import VerifyPasswordPages from "./views/VerifyPasswordPages";
+import VerifyPasswordPagesTwo from "./views/VerifyPasswordPagesTwo";
 import RemindersPage from './views/RemindersPage';
 import TrackingPage from "./views/TrackingPage";
 import CalendarPage from "./views/CalendarPage";
@@ -31,6 +37,7 @@ import MyTaskPage from "./views/MyTaskPage";
 import MyJobsPage from "./views/MyJobsPage";
 import ReferralPage from "./views/ReferralPage";
 import VerifyLinkPages from "./views/VerifyLinkPages";
+import VerifyLinkPagesTwo from "./views/VerifyLinkPagesTwo";
 import MyActiveJobsPage from "./views/MyActiveJobsPage";
 import FamilyAccPage from "./views/FamilyAccPage";
 import StartJob from "./components/MyJobs/StartJob";
@@ -60,27 +67,34 @@ export default function Routers() {
     <ScrollToTop>
       <Routes>
         {/* guest routes */}
-        <Route exact path="/login" element={<LoginPage />} />
+        {process.env.REACT_APP_NEW_LOGIN_LAYOUT == 1 ?
-        <Route exact path="/eoffer" element={<LoginPage />} />
+        <>
-        <Route exact path="/invite" element={<LoginPage />} />
+          <Route exact path="/login" element={<LoginPageTwo />} />
-
+          <Route exact path="/signup" element={<SignupPageTwo />} />
-        <Route exact path="/signup" element={<SignupPage />} />
+          <Route exact path="/forgot-password" element={<ForgotPasswordPagesTwo />} />
+          <Route exact path="/update-password" element={<UpdatePasswordPagesTwo />} />
+          <Route path="/vemail" element={<VerifyLinkPagesTwo />} />
+          <Route path="/complereset" element={<VerifyPasswordPagesTwo />} />
+          <Route exact path="/outmessage" element={<VerifyYouPagesTwo />} />
+          <Route exact path="/eoffer" element={<LoginPageTwo />} />
+          <Route exact path="/invite" element={<LoginPageTwo />} />
+        </>
+        :
+        <>
+          <Route exact path="/login" element={<LoginPage />} />
+          <Route exact path="/signup" element={<SignupPage />} />
+          <Route exact path="/forgot-password" element={<ForgotPasswordPages />} />
+          <Route exact path="/update-password" element={<UpdatePasswordPages />} />
+          <Route path="/vemail" element={<VerifyLinkPages />} />
+          <Route path="/complereset" element={<VerifyPasswordPages />} />
+          <Route exact path="/outmessage" element={<VerifyYouPages />} />
+          <Route exact path="/eoffer" element={<LoginPage />} />
+          <Route exact path="/invite" element={<LoginPage />} />
+        </>
+        }
         <Route exact path="/login/auth" element={<AuthRedirect />} />
         <Route exact path="/login/auth/flogin" element={<FacebookRedirect />} />
         <Route exact path="/login/auth/apple" element={<AppleRedirectPage />} />
-        <Route
-          exact
-          path="/forgot-password"
-          element={<ForgotPasswordPages />}
-        />
-        <Route
-          exact
-          path="/update-password"
-          element={<UpdatePasswordPages />}
-        />
-        <Route path="/vemail" element={<VerifyLinkPages />} />
-        <Route path="/complereset" element={<VerifyPasswordPages />} />
-        <Route exact path="/outmessage" element={<VerifyYouPages />} />
         <Route exact path="/lnd/*" element={<LndPage />} />
         <Route exact path="/app" element={<AppDownloadPage />} />
 

src/components/AuthPages/AuthLayout2.jsx

@@ -0,0 +1,62 @@
+import React, { lazy } from "react";
+import { Link } from "react-router-dom";
+import { localImgLoad } from "../../lib";
+
+export default function LoginLayout({ slogan, children }) {
+  const bgImg = localImgLoad('images/left-myft.jpg')
+
+  return (
+    <div className={`layout-wrapper login`}>
+      <div className={`w-full min-h-screen overflow-y-auto lg:grid grid-cols-2`}>
+        <div 
+            className={`auth-bg hidden lg:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
+            style={{backgroundImage: `url(${bgImg})`}}
+        >
+        </div>
+        <div className="p-5 sm:p-7 flex place-content-center">
+          <div className="py-10 w-11/12 h-full flex flex-col justify-between items-center content-wrapper login shadow-md xl:bg-white dark:bg-dark-white rounded-[0.475rem]">
+            <div className="w-full flex justify-center items-center">
+              {children && children}
+            </div>
+            <div className="w-full flex flex-col justify-center items-center px-10">
+              <div className="w-full flex justify-center items-center pt-5">
+                <div className="flex items-center">
+                <a
+                      href="https://www.wrenchboard.com/about-us"
+                      className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      About
+                    </a>
+                    <a
+                      href="https://www.wrenchboard.com/service"
+                      className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Services
+                    </a>
+                    <a
+                      href="https://www.wrenchboard.com/contact"
+                      className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Contact Us
+                    </a>
+                </div>
+              </div>
+              <p className="py-1 text-black text-[15px] px-2 font-medium flex items-center gap-1">
+                <span className="">&copy; {new Date().getFullYear()} -</span>
+                <Link to="/" className="text-[#009ef7] ml-1">
+                  WrenchBoard
+                </Link>{" "}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/AuthPages/ForgotPassword/index2.jsx

@@ -0,0 +1,211 @@
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+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);
+  // email
+  const [email, setMail] = useState("");
+  const [msgError, setMsgError] = useState("");
+  const [msgSuccess, setMsgSuccess] = useState(null);
+
+  const navigate = useNavigate();
+  const userApi = new usersService();
+
+  const handleEmail = (e) => {
+    setMail(e?.target.value);
+  };
+
+  // const humanChecker = () => {
+  //   setValue(!checked);
+  // };
+
+  function humanChecker(value) {
+    // console.log("Captcha value:", value);
+    if(value){
+      setValue(true)
+    }else{
+      setValue(false)
+    }
+  }
+
+  const resetHandler = async () => {
+    if (email == "") {
+      setMsgError("An email is required");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    } 
+    if (!checked) {
+      setMsgError("Check if you are human");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+
+    if(!EmailValidator(email)){ // CHECKS IF EMAIL IS VALID
+      setMsgError("Invalid Email");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+
+    if (email !== "" && checked) {
+      const reqData = { email, action:11013 };
+      setResetLoading(true);
+      try {
+        const res = await userApi.StartResetPassword(reqData);
+        if (res.status === 200) {
+          setMsgSuccess(true);
+          setMail("");
+          setValue(false);
+          setResetLoading(false);
+        }else{
+          setMsgSuccess(false);
+        }
+      } catch (error) {
+        setMsgSuccess(false);
+        setResetLoading(false);
+        setMail("");
+        setMsgError("An error occurred");
+        throw new Error(error);
+      } finally {
+        setTimeout(() => {
+          setMsgError(null);
+        }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+      }
+    }
+  };
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-12">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          <div className="flex place-content-center">
+            <div className="w-11/12 sm:max-w-[400px]">
+            {msgSuccess == null ?
+              <>
+                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                    Forget Password
+                  </h1>
+                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                    Enter your email to reset your password.
+                  </span>
+                </div>
+                <div className="input-area">
+                  <div className="input-item mb-10">
+                    <InputCom
+                      fieldClass="px-6"
+                      placeholder="Your Username/Email"
+                      label="Email"
+                      name="email"
+                      type="email"
+                      value={email}
+                      inputHandler={handleEmail}
+                      iconName="message"
+                    />
+                  </div>
+                  {/* hCaptha clone for the time being */}
+                  <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">
+                        
+                        <div className="h-full relative inline-block">
+                          <div className="relative table top-0 h-full">
+                            <div className="table-cell align-middle">
+                              <div className="relative w-[30px] h-[30px] mx-[15px]">
+                                <input
+                                  type="checkbox"
+                                  name="human-checkbox"
+                                  id="human-checkbox"
+                                  className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white"
+                                  checked={checked}
+                                  onChange={humanChecker}
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div className="h-full relative inline-block w-[170px]">
+                          <label className="relative table top-0 h-full">
+                            <label className="table-cell align-middle">
+                              <label
+                                className="text-800 text-sm"
+                                htmlFor="human-checkbox"
+                              >
+                                I am human
+                              </label>
+                            </label>
+                          </label>
+                        </div>
+                        <div className="h-full relative inline-block w-16"></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-4">
+                    <button
+                        type="button"
+                        onClick={() => navigate("/login")}
+                        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={`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>
+                        ) : (
+                          <span>Send Code</span>
+                        )}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </>
+            :
+            <ForgetPwdResponse 
+              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}
+            />
+            }
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}

src/components/AuthPages/Login/index2.jsx

@@ -0,0 +1,591 @@
+import React, { useEffect, useLayoutEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import linkedInLogo from "../../../assets/images/Linkedin.png";
+import appleLogo from "../../../assets/images/apple-black.svg";
+import facebookLogo from "../../../assets/images/facebook-4.svg";
+import googleLogo from "../../../assets/images/google-logo.svg";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+// import { GoogleOAuthProvider } from '@react-oauth/google';
+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() {
+  // eslint-disable-next-line no-restricted-globals
+  const queryParams = new URLSearchParams(location?.search);
+  // const sessionExpired = queryParams.get("sessionExpired");
+
+  const dispatch = useDispatch();
+  const { state } = useLocation();
+
+  const [sessionExpired, setSessionExpired] = useState(queryParams.get("sessionExpired"))
+
+  const [validCaptcha, setValidCaptcha] = useState({ show: false, valid: "" }); // FOR CAPTCHA
+
+  let [loginType, setLoginType] = useState("");
+
+  const [loginLoading, setLoginLoading] = useState(false);
+
+  const [showPassword, setShowPassword] = useState(false);
+
+  //login error state
+  const [loginError, setLoginError] = useState(false);
+  // for the catch error
+  const [msgError, setMsgError] = useState("");
+
+  // To Show and Hide Password
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  //FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
+  const handleLoginType = ({ target: { name } }) => {
+    setLoginType(name);
+    let currentDate = new Date();
+    let expirationDate = new Date(currentDate.getTime() + 24 * 60 * 60 * 1000);
+    // Convert the expiration date to the appropriate format
+    let expirationDateString = expirationDate.toUTCString();
+    document.cookie = `loginType=${name}; expires=${expirationDateString}; path=/;`;
+  };
+
+  // email
+  const [email, setMail] = useState("");
+  const handleEmail = (e) => {
+    setMail(e.target.value);
+  };
+  // password
+  const [password, setPassword] = useState("");
+  const handlePassword = (e) => {
+    setPassword(e.target.value);
+  };
+  const navigate = useNavigate();
+  const userApi = new usersService();
+
+  // FUNCTION TO HANDLE USER LOGIN
+  const doLogin = ({ target: { name } }) => {
+    setMsgError("");
+    setLoginError(false);
+    setLoginLoading(true);
+    let postData; // Post Data for API
+    if (!email || !password) {
+      setLoginLoading(false);
+      setMsgError("Please fill all the fields");
+      setTimeout(() => {
+        setMsgError("");
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      return;
+    }
+
+    if (name == "full") {
+      //checks if email is a valid email address
+      let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+      if (regEx.test(email) == false) {
+        setLoginLoading(false);
+        setMsgError("Invalid Email");
+        return setTimeout(() => {
+          setMsgError("");
+        }, 3000);
+      }
+      // Post Data Info for normal Login
+      postData = {
+        username: email,
+        password: password,
+        sessionid: "STARTING",
+        login_mode: 1100,
+        action: 11025,
+      };
+    } else if (name == "family") {
+      // Post Data Info for family Login
+      postData = {
+        username: email,
+        pin: password,
+        sessionid: "20067A92714",
+        login_mode: 1105,
+        action: 11025,
+      };
+    } else {
+      setLoginLoading(false);
+      setMsgError("Invalid Login Type. Consider refreshing the page");
+      setTimeout(() => {
+        setMsgError("");
+      }, 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) => {
+        if (
+          res.status != 200 ||
+          res.data.internal_return < 0 ||
+          !res.data.member_id ||
+          !res.data.uid ||
+          !res.data.session
+        ) {
+          // 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}`);
+        localStorage.setItem("uid", `${res.data.uid}`);
+        localStorage.setItem("session_token", `${res.data.session}`);
+        if (name === "family") {
+          sessionStorage.setItem("family_uid", res.data?.family_uid);
+        }
+        // localStorage.setItem("session", `${res.data.session}`);
+        dispatch(updateUserDetails({ ...res.data }));
+        setTimeout(() => {
+          navigate("/", { replace: true });
+          setLoginLoading(false);
+        }, 2000);
+      })
+      .catch((error) => {
+        setMsgError("Unable to login, try again");
+        setLoginLoading(false);
+        setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setLoginError(false);
+          setMsgError("");
+          setLoginLoading(false);
+        }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      });
+  };
+
+  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",
+    redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
+    onSuccess: async (codeResponse) => {
+      console.log("GOOGLE LOGIN GOOD --- ", codeResponse);
+    },
+    onError: (errorResponse) => console.log(errorResponse),
+  });
+
+  // In order to update the selected login type whenever the component renders
+  // useEffect(() => {
+  // Clear the loginType cookie if the user switches to loginfull
+  // document.cookie ="loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+  // }, []);
+
+  useLayoutEffect(() => {
+    // checks the cookie in order to set the login type before components mounts
+    // if(document.cookie.includes("loginType=family")){
+    //   setLoginType('family')
+    // }else if(document.cookie.includes("loginType=full")){
+    //   setLoginType('full')
+    // }else{
+    //   setLoginType('full')
+    // }
+    function readCookie(cname) {
+      // checks the cookie in order to set the login type before components mounts
+      let name = cname + "=";
+      let decoded_cookie = decodeURIComponent(document.cookie);
+      let carr = decoded_cookie.split(";");
+      for (let i = 0; i < carr.length; i++) {
+        let c = carr[i];
+        while (c.charAt(0) == " ") {
+          c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+          return c.substring(name.length, c.length);
+        }
+      }
+      return "full";
+    }
+    let loginValue = readCookie("loginType");
+    setLoginType(loginValue);
+
+    if (state?.error) {
+      //check if the login path has an error state indicating any social handle login with error
+      setMsgError("Unexpected Error, Please try again soon.");
+      setTimeout(() => {
+        setMsgError("");
+        navigate("/login", { replace: true });
+      }, 4000);
+    }
+  }, []);
+
+  useEffect(() => {
+    setMail("");
+    setPassword("");
+  }, [loginType]);
+
+
+  // EFFECT TO CLEAR SESSION EXPIRY IF IT EXISTS AFTER SOME SECONDS
+  useEffect(()=>{
+    let timer;
+    if(sessionExpired == "true"){
+     timer = setTimeout(()=>{
+        setSessionExpired(false)
+      },5000)
+    }
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [])
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-5">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          {/* <div className="content-wrapper login shadow-md w-10/12 mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5"> */}
+          <div className="flex place-content-center">
+            <div className="w-11/12 sm:max-w-[530px]">
+              {/* HIDES THIS IF USER SESSION HAS EXPIRED */}
+              {sessionExpired != "true" && (
+                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                  {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                  Sign In to WrenchBoard
+                </h1> */}
+                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                    New Here?{" "}
+                    <Link
+                      to="/signup"
+                      className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
+                    >
+                      Create an Account
+                    </Link>
+                  </span>
+                </div>
+              )}
+
+              {/* SHOWS THIS IF USER SESSION HAS EXPIRED */}
+              {sessionExpired == "true" && (
+                <div className="w-full p-1 mb-7">
+                  <p className="text-red-500 text-base text-center">
+                    Your session expired and will need to login again
+                  </p>
+                </div>
+              )}
+
+              {/* switch login component */}
+              <div className="ml-7 flex justify-start items-center gap-3">
+                <button
+                  name="full"
+                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
+                    loginType == "full"
+                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                      : "bg-white text-[#000] border-t-[2px]"
+                  }`}
+                  onClick={handleLoginType}
+                >
+                  Sign in
+                </button>
+                <button
+                  name="family"
+                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
+                    loginType == "family"
+                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                      : "bg-white text-[#000] border-t-[2px]"
+                  }`}
+                  onClick={handleLoginType}
+                >
+                  Family Account
+                </button>
+              </div>
+
+              {/* END  of switch login component */}
+
+              {/* for login component */}
+              {
+                loginType == "full" ? (
+                  //user login component
+                  <div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="sm:px-6 px-2"
+                        value={email}
+                        inputHandler={handleEmail}
+                        placeholder="Your Email"
+                        label="Email"
+                        name="email"
+                        type="email"
+                        iconName="message"
+                      />
+                    </div>
+
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+                        value={password}
+                        inputHandler={handlePassword}
+                        placeholder="● ● ● ● ● ●"
+                        label="Password"
+                        name="password"
+                        type={showPassword ? "text" : "password"}
+                        onClick={togglePasswordVisibility}
+                        passIcon={showPassword ? "password" : "password"}
+                        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{" "}
+                        <Link to="/#" className="text-[#009ef7]">
+                          reset your password
+                        </Link>{" "}
+                        or{" "}
+                        <Link to="/signup" className="text-[#009ef7]">
+                          create a new account
+                        </Link>
+                      </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">
+                        <button
+                          name="full"
+                          onClick={doLogin}
+                          type="button"
+                          disabled={loginLoading}
+                          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>
+                          ) : (
+                            <>Continue</>
+                          )}
+                        </button>
+                      </div>
+                      <div className="sm:grid grid-cols-2 gap-1">
+                        <div className="w-full">
+                          <BrandBtn
+                            link="#"
+                            imgSrc={googleLogo}
+                            brand="Google"
+                            onClick={googleLogin}
+                          />
+                        </div>
+                        <div
+                          className={`w-full ${
+                            process.env.REACT_APP_APPLE_SOCIAL_LOGIN !== 0 &&
+                            "hidden"
+                          }`}
+                        >
+                          <BrandBtn
+                            // link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=https%3A%2F%2Fwork.wrenchboard.com%2Flogin%2Fauth%2Fapple&state=4b2c4456b7&scope=name+email`}
+                            link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_APPLE_REDIRECT_URL}&state=4b2c4456b7&scope=name+email`}
+                            imgSrc={appleLogo}
+                            brand="Apple"
+                            isAnchor={true}
+                            // style={{visibility: 'hidden'}}
+                          />
+                        </div>
+                        <div className="w-full">
+                          <BrandBtn
+                            link={`https://www.facebook.com/v14.0/dialog/oauth?client_id=${process.env.REACT_APP_FACEBOOK_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_FACEBOOK_REDIRECT_URL}&scope=${process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE}`}
+                            imgSrc={facebookLogo}
+                            brand="Facebook"
+                            isAnchor={true}
+                          />
+                        </div>
+                        <div
+                          className={`w-full ${
+                            process.env.REACT_APP_LINKEDIN_SOCIAL_LOGIN !== 0 &&
+                            "hidden"
+                          }`}
+                        >
+                          <BrandBtn
+                            // link="https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=comma-separated-list-of-scopes&state=YOUR_STATE_VALUE"
+                            imgSrc={linkedInLogo}
+                            brand="LinkedIn"
+                            isAnchor={true}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  // END of user login compoenent
+                  // family login compoenent
+                  <div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="px-6"
+                        value={email}
+                        inputHandler={handleEmail}
+                        placeholder="Account ID"
+                        label="Username"
+                        name="email"
+                        type="email"
+                        iconName="family-id"
+                      />
+                    </div>
+
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="px-6"
+                        value={password}
+                        inputHandler={handlePassword}
+                        placeholder="● ● ● ● ● ●"
+                        label="Pin"
+                        name="password"
+                        type={showPassword ? "text" : "password"}
+                        onClick={togglePasswordVisibility}
+                        passIcon={showPassword ? "family-pin" : "family-pin"}
+                      />
+                    </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{" "}
+                        {/* <Link to="/#" className="text-[#009ef7]">
+                        reset your password
+                      </Link>{" "}
+                      or{" "}
+                      <Link to="/signup" className="text-[#009ef7]">
+                        create a new account
+                      </Link> */}
+                      </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-1.5">
+                      <div className="flex justify-center">
+                        <button
+                          name="family"
+                          onClick={doLogin}
+                          disabled={loginLoading}
+                          type="button"
+                          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>
+                          ) : (
+                            <>Continue</>
+                          )}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                )
+                // END of family login compoenent
+              }
+              {/* END of login component */}
+
+              {loginType == "full" && (
+                <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
+                  This site is protected by a Captcha. Our Privacy Policy and
+                  Terms of Service apply.
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}
+
+const BrandBtn = ({
+  link,
+  imgSrc,
+  brand,
+  onClick,
+  isAnchor = false,
+  style = { visibility: "visible" },
+}) => {
+  // const doGoogle = async () => {
+  //   alert("start google");
+  // };
+
+  //  onSuccess: (codeResponse) => setUser(codeResponse),
+
+  // const doGoogle = useGoogleLogin({
+  //   onSuccess: (codeResponse) =>  console.log('Login onSuccess:', codeResponse),
+  //   onError: (error) => console.log('Login Failed:', error)
+  // });
+
+  // const doApple = async () => {
+  //   alert("start apple");
+  // };
+
+  // const doFacebook = async () => {
+  //   alert("start facebook");
+  // };
+  return (
+    <div className="w-full flex justify-center bottomMargin" style={style}>
+      {isAnchor ? (
+        <a
+          href={link}
+          className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
+        >
+          <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
+          <span className="text-lg text-thin-light-gray font-normal text-[15px]">
+            Continue with {brand}
+          </span>
+        </a>
+      ) : (
+        <button
+          onClick={onClick}
+          // href="#dd"
+          className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
+        >
+          <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
+          <span className="text-lg text-thin-light-gray font-normal text-[15px]">
+            Continue with {brand}
+          </span>
+        </button>
+      )}
+    </div>
+  );
+};

src/components/AuthPages/SignUp/index2.jsx

@@ -0,0 +1,404 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+
+export default function SignUp() {
+  // eslint-disable-next-line no-restricted-globals
+  const queryParams = new URLSearchParams(location?.search);
+  const country = queryParams.get("cnt")?.toUpperCase();
+  
+  const {pathname} = useLocation()
+  const currentPath = country ? `${pathname}?cnt=${country.toLowerCase()}`:pathname // Determines the new pathname is country query params exist
+
+  const [signUpLoading, setSignUpLoading] = useState(false);
+  const [checked, setValue] = useState(false);
+  // for the catch error
+  const [msgError, setMsgError] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [countries, setCountries] = useState({loading:true, data:[]});
+
+  const [formData, setFormData] = useState({
+    country: country? country : "",
+    first_name: "",
+    last_name: "",
+    email: "",
+    password: "",
+  });
+
+  const handleInputChange = (event) => {
+    const { name, value } = event?.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  // To Show and Hide Password
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const rememberMe = () => {
+    setValue(!checked);
+  };
+
+  const navigate = useNavigate();
+  const userApi = new usersService();
+
+  // Get Country Api
+  const getCountryList = useCallback(async () => {
+    
+    try {
+      const res = await userApi.getSignupCountryData();
+      if (res.status === 200 && res.data.internal_return >= 0) {
+        const { result_list } = await res.data;
+        if(country){ // IF LINK/PATHNAME HAS CNT QUERY VALUE
+          let cnt = result_list.filter(item => item.code == country) // test to see country passed in query param exist from list of countries supplied by API
+          if(!cnt.length){ // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
+            setFormData(prev => ({...prev, country: ''}))
+            return setCountries({loading: false, data: result_list});
+          }
+          return setCountries({loading: false, data: cnt});
+        }
+        setCountries({loading: false, data:result_list});
+      } else if (res.data.result !== 100) {
+        setCountries({loading: false, data:[]});
+      }
+    } catch (error) {
+      throw new Error(error);
+    }
+  }, []);
+
+  const handleSignUp = async () => {
+    let { country, first_name, last_name, email, password } = formData;
+    try {
+      if (
+        email !== "" &&
+        password !== "" &&
+        first_name !== "" &&
+        last_name !== "" &&
+        country !== ""
+      ) {
+        //checks if email is a valid email address
+        let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+        if (regEx.test(email) == false) {
+          setMsgError("Invalid Email");
+          return setTimeout(() => {
+            setMsgError("");
+          }, 3000);
+        }
+
+        //checks if terms and condition is checked
+        if (!checked) {
+          setMsgError("Terms and condition required");
+          return setTimeout(() => {
+            setMsgError("");
+          }, 3000);
+        }
+
+        setSignUpLoading(true);
+        const reqData = {
+          country: country,
+          firstname: first_name,
+          lastname: last_name,
+          email: email,
+          username: email,
+          password: password,
+          terms: 1,
+          news: 1,
+        };
+
+        const res = await userApi.CreateUser(reqData);
+
+        if (res.status === 200) {
+          const { data } = res;
+          if (data && data.acc === "DULPICATE") {
+            setMsgError(
+              "Unable to use this username. Please try another username."
+            );
+            setSignUpLoading(false);
+          }
+          if (data && data.status === "1") {
+            setTimeout(() => {
+              navigate("/outmessage", { replace: true });
+              setSignUpLoading(false);
+            }, 2000);
+          }
+        } else {
+          setSignUpLoading(false);
+          setMsgError("An error occurred");
+        }
+      } else {
+        setMsgError("Please fill in fields");
+      }
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
+    }
+  };
+
+  useEffect(() => {
+    getCountryList();
+  }, []);
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-5">
+            <Link to={currentPath}>
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          <div className="flex place-content-center">
+            <div className="w-11/12 sm:max-w-[530px]">
+              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                  Create Account
+                </h1>
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                  Already have an account?{" "}
+                  <Link
+                    to="/login"
+                    className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
+                  >
+                    Sign in here
+                  </Link>
+                </span>
+              </div>
+              <div className="w-full flex items-center gap-2">
+                <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
+                <span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[2%]">
+                  OR
+                </span>
+                <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
+              </div>
+              <div className="input-area">
+                <SelectOption
+                  label="Country"
+                  data={countries}
+                  name="country"
+                  value={formData.country}
+                  inputHandler={handleInputChange}
+                  disable={country && countries?.data?.length <= 1 ? true : false}
+                />
+                <div className="input-fl-name mb-4 sm:flex w-full sm:space-x-6 ">
+                  <div className="input-item sm:w-1/2 w-full mb-4 sm:mb-0">
+                    <InputCom
+                      fieldClass="px-6"
+                      placeholder="Firstname"
+                      label="First Name"
+                      name="first_name"
+                      type="text"
+                      value={formData.first_name}
+                      inputHandler={handleInputChange}
+                    />
+                  </div>
+                  <div className="input-item flex-1">
+                    <InputCom
+                      fieldClass="px-6"
+                      placeholder="Lastname"
+                      label="Last Name"
+                      name="last_name"
+                      type="text"
+                      value={formData.last_name}
+                      inputHandler={handleInputChange}
+                    />
+                  </div>
+                </div>
+                <div className="input-item mb-4">
+                  <InputCom
+                    fieldClass="px-6"
+                    placeholder="support@mermsemr.com"
+                    label="Email"
+                    name="email"
+                    type="email"
+                    value={formData.email}
+                    inputHandler={handleInputChange}
+                  />
+                </div>
+                <div className="input-item mb-4">
+                  <InputCom
+                    fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+                    placeholder="● ● ● ● ● ●"
+                    label="Password"
+                    name="password"
+                    type={showPassword ? "text" : "password"}
+                    onClick={togglePasswordVisibility}
+                    passIcon={showPassword ? "show-password" : "hide-password"}
+                    value={formData.password}
+                    inputHandler={handleInputChange}
+                  />
+                </div>
+                {msgError && (
+                  <div className="p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">
+                    {msgError}
+                  </div>
+                )}
+
+                <div className="forgot-password-area flex justify-between items-center mb-6">
+                  <div className="remember-checkbox flex items-center space-x-2.5 group cursor-pointer">
+                    <button
+                      onClick={rememberMe}
+                      type="button"
+                      className={`w-6 h-6 border-[#4687ba] text-white flex justify-center items-center border rounded-[.45em] group-checked:text-white transition-all duration-200 group-checked:cursor-default ${
+                        checked && "text-white bg-[#4687ba]"
+                      }`}
+                    >
+                      {checked && (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-5 w-5"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      )}
+                    </button>
+                    <span
+                      onClick={rememberMe}
+                      className="cursor-default text-dark-gray dark:text-white text-[15px] group-checked:text-white transition-all duration-200 group-checked:cursor-default"
+                    >
+                      I agree with all
+                      <Link
+                        href="#"
+                        className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
+                      >
+                        terms and condition
+                      </Link>
+                    </span>
+                  </div>
+                </div>
+
+                {/* Forgot Password */}
+                {/* <div className="forgot-password-area flex justify-between items-center mb-6">
+                  <div className="remember-checkbox flex items-center space-x-2.5">
+                    <button
+                      onClick={rememberMe}
+                      type="button"
+                      className="w-6 h-6 bg-[#4687ba] text-white flex justify-center items-center border border-light-gray rounded-[.45em]"
+                    >
+                      {checked && (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-5 w-5"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      )}
+                    </button>
+                    <span
+                      onClick={rememberMe}
+                      className="cursor-default text-dark-gray dark:text-white text-[15px]"
+                    >
+                      I agree with all
+                      <Link
+                        href="#"
+                        className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
+                      >
+                        terms and condition
+                      </Link>
+                    </span>
+                  </div>
+                </div> */}
+                <div className="signin-area mb-1">
+                  <div className="flex justify-center">
+                    <button
+                      disabled={countries.loading}
+                      type="button"
+                      onClick={handleSignUp}
+                      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>
+                      ) : (
+                        <span>Sign Up</span>
+                      )}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}
+
+const SelectOption = ({
+  label,
+  name,
+  inputHandler,
+  value,
+  data, // passing the data from parent
+  disable
+}) => {
+  return (
+    <div className="input-com mb-7">
+      <div className="flex items-center justify-between">
+        <label
+          className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold block mb-2.5"
+          htmlFor={name}
+        >
+          {label}
+        </label>
+      </div>
+      <div>
+        <select
+        disabled={disable}
+          name={name}
+          id={name}
+          className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
+          onChange={inputHandler}
+          value={value}
+        >
+          {data?.data?.length > 1 ?
+            <>
+            <option value={""}>Select your Country</option>
+            {data?.data?.map((item) => (
+              <option value={item.code} key={item.uid}>
+                {item.country}
+              </option>
+            ))}
+            </>
+            :
+            data?.data?.length == 1 ?
+            data?.data?.map((item) => (
+              <option value={item.code} key={item.uid}>
+                {item.country}
+              </option>
+            ))
+            :
+            data?.data?.length < 1 && data.loading ?
+            <option value=''>
+              Loading...
+            </option>
+            :
+            <option value=''>
+              No Country Found!
+            </option>
+          }
+        </select>
+      </div>
+    </div>
+  );
+};

src/components/AuthPages/UpdatePassword/index2.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import titleShape from "../../../assets/images/shape/title-shape-two.svg";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+import ThankYou from "../ThankYou";
+
+export default function UpdatePassword() {
+  const [updated, setValue] = useState(false);
+  const [message, setMessage] = useState(false);
+  const updatePassword = () => {
+    setValue(!updated);
+    setTimeout(() => {
+      setMessage(!message);
+    }, 100);
+  };
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to  myFit">
+        {updated === false ? (
+          <div className="flex place-content-center">
+            <div className="w-11/12 sm:max-w-[600px]">
+              <div className="title-area relative flex flex-col justify-center items-center mb-7">
+                <h1 className="sm:text-5xl text-4xl font-bold leading-[74px]   text-dark-gray dark:text-white">
+                  Update Password
+                </h1>
+                {/* w-[341px] absolute top-14 left-12 */}
+                <div className="shape sm:w-[341px] w-[270px] -mt-5 sm:-mt-1 ml-5">
+                  <img src={titleShape} alt="shape" />
+                </div>
+              </div>
+              <div className="input-area">
+                <div className="input-item mb-5">
+                  <InputCom
+                    fieldClass="px-6"
+                    placeholder="*********"
+                    label="Old Password"
+                    name="password"
+                    type="password"
+                    iconName="password"
+                  />
+                </div>
+                <div className="input-item mb-5">
+                  <InputCom
+                    fieldClass="px-6"
+                    placeholder="*********"
+                    label="New Password"
+                    name="password"
+                    type="password"
+                    iconName="password"
+                  />
+                </div>
+                <div className="input-item mb-5">
+                  <InputCom
+                    fieldClass="px-6"
+                    placeholder="*********"
+                    label="Re-enter Password"
+                    name="password"
+                    type="password"
+                    iconName="password"
+                  />
+                </div>
+                <div className="signin-area mb-3.5">
+                  <button
+                    onClick={updatePassword}
+                    type="button"
+                    className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
+                  >
+                    Continue
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <ThankYou className={`thankyou-section ${message ? "active" : ""}`} />
+        )}
+      </AuthLayout>
+    </>
+  );
+}

src/components/AuthPages/VerifyLink/index2.jsx

@@ -0,0 +1,245 @@
+import { useCallback, useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import debounce from "../../../hooks/debounce";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+
+export default function VerifyLink() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [msgError, setMsgError] = useState("");
+  const [linkLoader, setLinkLoader] = useState(false);
+  const [pageLoader, setPageLoader] = useState(true);
+  const [linkSuccess, setLinkSuccess] = useState(true);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location?.search);
+  const token = queryParams.get("vlnk");
+  const userApi = new usersService();
+
+  // email
+  const handleEmail = (e) => {
+    setEmail(e.target.value);
+  };
+  // password
+  const handlePassword = (e) => {
+    setPassword(e.target.value);
+  };
+
+  // if verification is okay. set a complete signup form
+  const completeSignup = async () => {
+    try {
+      if (email !== "" && password !== "") {
+        setLinkLoader(true);
+        var postData = {
+          username: email,
+          password: password,
+          login_mode: 100,
+          sessionid: "STARTER-NOTREAL",
+          verify_link: token,
+          action: 11012,
+        };
+        const res = await userApi?.CompleteSignUp(postData);
+
+        if (res.status === 200) {
+          const { data } = res;
+          if (
+            data?.status > 0 &&
+            data?.internal_return == 100 &&
+            data?.session != ""
+          ) {
+            localStorage.setItem("email", `${data?.email}`);
+            localStorage.setItem("member_id", `${data?.member_id}`);
+            localStorage.setItem("session_token", `${data?.session}`);
+            localStorage.setItem("session", `${data?.session}`);
+            localStorage.setItem("uid", data?.uid)
+
+
+            navigate("/", { replace: true });
+            setLinkLoader(false);
+          } else {
+            setLinkLoader(false);
+            setMsgError("Invalid Link or Password Combination");
+          }
+        } else {
+          setLinkLoader(false);
+          setLinkSuccess(false);
+          setMsgError("An error occurred");
+        }
+      } else {
+        setMsgError("Please fill in fields");
+      }
+    } catch (error) {
+      setLinkLoader(false);
+      setLinkSuccess(false);
+      throw new Error(error);
+    } finally {
+      setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
+    }
+  };
+
+  // for verifying the incoming verification link and render the correct component
+  const verifyEmail = useCallback(async (code) => {
+    try {
+      const verifyRes = await userApi.verifyEmail(code);
+      if (verifyRes.status === 200) {
+        let { data } = verifyRes;
+        console.log('TESTING VERIFY',data)
+        if (
+          data &&
+          data.internal_return >= 0 && 
+          data.status == 0 && 
+          data.pending_id != '' && 
+          data.pending_uid != '' && 
+          data.username != '' &&
+          data.status_text === "Link Verified"
+        ) {
+          setPageLoader(false);
+        } else {
+          setPageLoader(false);
+          setLinkSuccess(false);
+        }
+      }
+    } catch (error) {
+      setPageLoader(false);
+      setLinkSuccess(false);
+      throw new Error(error);
+    }
+  }, []);
+
+  // delay verify requests by 10000ms
+  const debouncedEmail = debounce(verifyEmail, 1000);
+
+  useEffect(() => {
+    debouncedEmail(token);
+  }, []);
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        {pageLoader ? (
+          <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+        ) : (
+          <div className="w-full">
+            <div className="mb-12">
+              <Link to="#">
+                <img
+                  src={WrenchBoard}
+                  alt="wrenchboard"
+                  className="h-10 mx-auto"
+                />
+              </Link>
+            </div>
+            <div className="flex place-content-center">
+              <div className="w-11/12 sm:max-w-[500px]">
+                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                    {linkSuccess
+                      ? "Sign In to WrenchBoard"
+                      : "Invalid verification link"}
+                  </h1>
+                </div>
+                {/* If the verification was a success */}
+                {linkSuccess ? (
+                  <SuccessfulComponent
+                    email={email}
+                    password={password}
+                    handleEmail={handleEmail}
+                    handlePassword={handlePassword}
+                    onSubmit={completeSignup}
+                    msgErr={msgError}
+                    loader={linkLoader}
+                  />
+                ) : (
+                  <ErrorComponent onClick={() => navigate("/login")} />
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </AuthLayout>
+    </>
+  );
+}
+
+const SuccessfulComponent = ({
+  onSubmit,
+  password,
+  handlePassword,
+  email,
+  handleEmail,
+  msgErr,
+  loader,
+}) => (
+  <div className="input-area">
+    {/* INPUT */}
+    <div className="mb-5">
+      <InputCom
+        fieldClass="px-6"
+        value={email}
+        inputHandler={handleEmail}
+        placeholder="support@mermsemr.com"
+        label="Email"
+        name="email"
+        type="email"
+        iconName="message"
+      />
+    </div>
+    <div className="mb-5">
+      <InputCom
+        fieldClass="px-6"
+        value={password}
+        inputHandler={handlePassword}
+        placeholder="● ● ● ● ● ●"
+        label="Password"
+        name="password"
+        type="password"
+        iconName="password"
+      />
+    </div>
+    {msgErr && (
+      <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]">
+        {msgErr}
+      </div>
+    )}
+    <div className="signin-area mb-3.5">
+      <button
+        onClick={onSubmit}
+        type="button"
+        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]`}
+      >
+        {loader ? (
+          <div className="signup btn-loader"></div>
+        ) : (
+          <span>Continue</span>
+        )}
+      </button>
+    </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 verified this link or the
+        link has expired. Try login or reset password. If none worked, 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/AuthPages/VerifyPassword/index2.jsx

@@ -0,0 +1,269 @@
+import { useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+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);
+  const [showPassword, setShowPassword] = useState(false);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location?.search);
+  const token = queryParams.get("passlink");
+  const userApi = new usersService();
+
+  // To Show and Hide Password
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  // Password
+  const handlePassword = (e) => {
+    let { name, value } = e?.target;
+    if (name == "password") setPassword(value);
+    if (name == "confirm_password") setConfirmPassword(value);
+  };
+
+  const completeReset = async () => {
+    if(!password || !confirmPassword){ // CHECKS IF PASSWORD IS EMPTY
+      setMsgError("Please fill in fields");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    if(password != confirmPassword){ // CHECKS IF PASSWORD EQUALS CONFIRM PASSWORD
+      setMsgError("Passwords does not match");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    if(password.length < 6){ // CHECKS IF PASSWORD LENGTH IS UPTO 6 CHARACTERS
+      setMsgError("Password must be upto six characters");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    if(!PasswordValidator(password)){ // CHECKS IF PASSWORD IS VALID
+      setMsgError("Password must contain alphanumeric, uppercase and special character: eg: Password1@");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    try {
+          setLinkLoader(true);
+          var reqData = {
+            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) {
+            const { data } = res;
+            if (data?.internal_return >= 0) {
+              // setTimeout(() => {
+              //   navigate("/login", { replace: true });
+              //   setLinkLoader(false);
+              // }, 2000);
+              setLinkSuccess(true);
+            } else {
+              setLinkLoader(false);
+              setMsgError("An error occurred");
+              setLinkSuccess(false);
+            }
+          } else {
+            setLinkLoader(false);
+            setLinkSuccess(false);
+          }
+    } catch (error) {
+      setLinkLoader(false);
+      setLinkSuccess(false);
+      throw new Error(error);
+    } finally {
+      setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
+    }
+  };
+
+  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) {
+    return setRequestStatus({loading: false, status:false, data: []});
+  }
+  verifyResetPwd()
+  },[])
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-12">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          <div className="flex place-content-center">
+            {requestStatus.loading ?
+            <LoadingSpinner color='sky-blue' size='16' height='h-300px' />
+            :
+            !requestStatus.loading && requestStatus.status ?
+            <div className="w-11/12 sm:max-w-[500px]">
+              {linkSuccess == null ?
+              <>
+                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                    Password Reset
+                  </h1>
+                    <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                      Enter a new password to reset
+                    </span>
+                    <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}
+                    confirmPassword={confirmPassword}
+                    handlePassword={handlePassword}
+                    onSubmit={completeReset}
+                    msgErr={msgError}
+                    loader={linkLoader}
+                    showPassword={showPassword}
+                    onClick={togglePasswordVisibility}
+                    navigateHandler={() => navigate("/login")}
+                  />
+                </>
+                :
+                <ForgetPwdResponse 
+                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="w-11/12 sm:max-w-[500px] 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>
+    </>
+  );
+};
+
+export default VerifyPassword;
+
+const SuccessfulComponent = ({
+  onSubmit,
+  navigateHandler,
+  showPassword,
+  onClick,
+  password,
+  confirmPassword,
+  handlePassword,
+  msgErr,
+  loader,
+}) => (
+  <div className="input-area">
+    {/* INPUT */}
+    <div className="mb-5">
+      <InputCom
+        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+        value={password}
+        inputHandler={handlePassword}
+        placeholder="● ● ● ● ● ●"
+        label="Password"
+        name="password"
+        type={showPassword ? "text" : "password"}
+        onClick={onClick}
+        passIcon={showPassword ? "show-password" : "hide-password"}
+      />
+    </div>
+    <div className="mb-5">
+      <InputCom
+        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+        value={confirmPassword}
+        inputHandler={handlePassword}
+        placeholder="● ● ● ● ● ●"
+        label="Confirm Password"
+        name="confirm_password"
+        type="password"
+      />
+    </div>
+    {msgErr && (
+      <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]">
+        {msgErr}
+      </div>
+    )}
+    <div className="signin-area mb-3.5">
+      <button
+        onClick={onSubmit}
+        type="button"
+        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]`}
+      >
+        {loader ? (
+          <div className="signup btn-loader"></div>
+        ) : (
+          <span>Continue</span>
+        )}
+      </button>
+    </div>
+    <div className="signin-area mb-3.5">
+      <button
+        onClick={navigateHandler}
+        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] btn-login`}
+      >
+        <span>Return Home</span>
+      </button>
+    </div>
+  </div>
+);

src/components/AuthPages/VerifyYou/index2.jsx

@@ -0,0 +1,64 @@
+import { useNavigate, Link } from "react-router-dom";
+import AuthLayout from "../AuthLayout2";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+
+export default function VerifyYou() {
+  const navigate = useNavigate();
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-12">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          <div className="flex place-content-center">
+            <div className="w-11/12 sm:max-w-[500px]">
+              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                  Let's verify your email now
+                </h1>
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                  Check your email.
+                </span>
+              </div>
+              <div className="input-area">
+                <div className="mb-5">
+                  <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                    <b>Verify Email.</b> Help us secure your WrenchBoard account
+                    by verifying your email registration address. Verification
+                    will let you access all of WrenchBoard's features.
+                  </p>
+                </div>
+                <div className="mb-5">
+                  <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                    If you do not receive the confirmation message within a few
+                    minutes of signing up, please check your Junk E-mail folder
+                    just in case the confirmation email got delivered there
+                    instead of your inbox. If so, select the confirmation
+                    message and click Not Junk, which will allow future messages
+                    to get through.
+                  </p>
+                </div>
+              </div>
+              <div className="signin-area flex justify-center mb-3.5">
+                <button
+                  onClick={() => navigate("/")}
+                  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>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}

src/components/YourPage/LoadedPage.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import GetMyPageLoad from "./getMyPageLoad";
+
+
+const LoadedPage = ({reloader}) => {
+  const { loading, data, error } = GetMyPageLoad(reloader);
+
+  return (
+    <div className="w-full border border-gray-400 rounded-md p-4 flex flex-col h-72 gap-2 overflow-y-auto">
+      {loading ? (
+        <>
+          <h1 className="text-xl font-bold tracking-wide">...</h1>
+          <p>...</p>
+        </>
+      ) : error ? (
+        <>
+          <h1 className="text-xl font-bold tracking-wide">Unable to load</h1>
+        </>
+      ) : (
+        <>
+          <h1 className="text-xl font-bold tracking-wide">
+            {!data.intro ? "Introduction" : data.intro}
+          </h1>
+          <p>{!data.description ? "Brief Details" : data.description}</p>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default LoadedPage;

src/components/YourPage/UpdateButton.jsx

@@ -1,13 +1,19 @@
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 
-const UpdateButton = ({ onClick, loading }) => (
+const UpdateButton = ({ onClick, loading, msg }) => (
   <button
     type="submit"
     onClick={onClick}
     disabled={loading}
     className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-full"
   >
-    {loading ? <LoadingSpinner size="6" color="sky-blue" /> : "Update"}
+    {loading ? (
+      <LoadingSpinner size="6" color="sky-blue" />
+    ) : msg !== "" ? (
+      msg
+    ) : (
+      "Update"
+    )}
   </button>
 );
 

src/components/YourPage/YourPageForm.jsx

@@ -1,7 +1,7 @@
 import InputCom from "../Helpers/Inputs/InputCom/index";
 import UpdateButton from "./UpdateButton";
 
-const YourPageForm = ({ values, onChange, onSubmit, loading }) => (
+const YourPageForm = ({ values, onChange, onSubmit, loading, msg }) => (
   <div className="ml-16 my-2 flex flex-col gap-3">
     <div className="field w-full">
       <InputCom
@@ -33,7 +33,7 @@ const YourPageForm = ({ values, onChange, onSubmit, loading }) => (
       />
     </div>
     <div className="w-full flex justify-end mb-2">
-      <UpdateButton onClick={onSubmit} loading={loading} />
+      <UpdateButton onClick={onSubmit} loading={loading} msg={msg} />
     </div>
     <hr />
   </div>

src/components/YourPage/getMyPageLoad.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import usersService from "../../services/UsersService";
+
+
+const GetMyPageLoad = (reloader) => {
+  const api = new usersService();
+
+    const [response, setResponse] = useState({
+      loading: true,
+      data: null,
+      error: null,
+    });
+  
+    useEffect(() => {
+      const fetchData = async () => {
+        try {
+          const res = await api.MyPageLoad();
+
+          setResponse({ loading: false, data: res.data, error: null });
+        } catch (error) {
+          setResponse({ loading: false, data: null, error: error.message });
+        }
+      };
+  
+      fetchData();
+    }, [reloader]);
+  
+    return response;
+  };
+  
+  export default GetMyPageLoad;

src/components/YourPage/index.jsx

@@ -1,27 +1,67 @@
 import React, { useState } from "react";
-import Layout from "../Partials/Layout";
 import usersService from "../../services/UsersService";
+import Layout from "../Partials/Layout";
+import LoadedPage from "./LoadedPage";
 import YourPageForm from "./YourPageForm";
+// import { updateYourPage } from "./updateYourPage";
 
 const YourPage = () => {
-  const [pageValues, setPageValues] = useState({
+  const [pageValues, setPageValues] = useState(pageInitialValues);
-    intro: "",
+  const [response, setResponse] = useState(responseInitialValues);
-    description: "",
+  const [reloader, setReloader] = useState(false);
-  });
 
-  const [response, setResponse] = useState({
+  const handleChange = ({ target: { name, value } }) =>
-    loading: false,
-    data: {},
-    error: "",
-    msg: "",
-  });
-
-  const handleChange = (event) => {
-    let { name, value } = event.target;
     setPageValues((prev) => ({ ...prev, [name]: value }));
-  };
 
-  const updateYourPageDetails = async () => {
+  const updateYourPageDetails = updateYourPage(
+    pageValues,
+    setResponse,
+    setPageValues,
+    setReloader
+  );
+
+  return (
+    <Layout>
+      <div className="notification-page w-full mb-10">
+        <div className="notification-wrapper w-full">
+          <div className="update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[650px]">
+            <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide mb-2">
+              My page
+            </h1>
+            <hr />
+            <YourPageForm
+              values={pageValues}
+              onChange={handleChange}
+              onSubmit={updateYourPageDetails}
+              loading={response.loading}
+              msg={response.msg}
+            />
+            <LoadedPage reloader={reloader} />
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default YourPage;
+
+const pageInitialValues = {
+  intro: "",
+  description: "",
+};
+
+const responseInitialValues = {
+  loading: false,
+  data: {},
+  error: "",
+  msg: "",
+};
+
+function updateYourPage(pageValues, setResponse, setPageValues, setReloader) {
+  return async () => {
+    if (!pageValues.intro || !pageValues.description) return;
+
     try {
       setResponse({ loading: true, error: "", msg: "" });
 
@@ -32,14 +72,19 @@ const YourPage = () => {
         setResponse({
           loading: false,
           data: res.data,
-          msg: "Page updated successfully",
+          msg: "Update Complete",
         });
 
+        setReloader((prev) => !prev);
+      }, 1000);
+
+      setTimeout(() => {
+        setResponse({ msg: "" });
         // Clear form after successful update
         setPageValues({ intro: "", description: "" });
-      }, 2000);
+      }, 3000);
     } catch (error) {
-      setResponse({
+      return setResponse({
         loading: false,
         data: {},
         error: "Error updating page",
@@ -47,27 +92,4 @@ const YourPage = () => {
       });
     }
   };
-
+}
-  return (
-    <Layout>
-      <div className="notification-page w-full mb-10">
-        <div className="notification-wrapper w-full">
-          <div className="update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px]">
-            <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide mb-2">
-              My page
-            </h1>
-            <hr />
-            <YourPageForm
-              values={pageValues}
-              onChange={handleChange}
-              onSubmit={updateYourPageDetails}
-              loading={response.loading}
-            />
-          </div>
-        </div>
-      </div>
-    </Layout>
-  );
-};
-
-export default YourPage;

src/components/jobPopout/EditJobPopout.jsx

@@ -208,12 +208,6 @@ const EditJobPopOut = ({
     }
   };
 
-  // Check if the user is using iOS
-  const isIOS = /MacIntel|MacPPC/.test(navigator.platform) && !window.MSStream;
-
-  // Check if the user is using Windows
-  const isWindows = /Windows/.test(navigator.userAgent);
-
   return (
     <ModalCom action={onClose} situation={situation}>
       <div className="logout-modal-wrapper w-11/12 lg:w-[600px] bg-white dark:bg-dark-white lg:rounded-2xl">

src/index.css

@@ -955,6 +955,21 @@ TODO: Responsive ===========================
   padding-inline: 1rem;
 }
 
+.auth-bg {
+  border: none;
+  /* box-shadow: inset 0 0 10px 20px #fff; */
+}
+
+.auth-bg::after {
+  background: linear-gradient(
+    to right,
+    transparent 0%,
+    transparent 50%,
+    transparent 95%,
+    rgb(255, 255, 255) 100%
+  );
+}
+
 /* For IE10 */
 .content-wrapper select::-ms-expand {
   display: none;

src/services/UsersService.js

@@ -15,6 +15,16 @@ class usersService {
     return this.postAuxEnd("/mypageintro", postData);
   }
 
+  MyPageLoad() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 11070
+    };
+    return this.postAuxEnd("/mypageload", postData);
+  }
+
   CreateUser(reqData) {
     localStorage.setItem("session_token", ``);
     return this.postAuxEnd("/createuser", reqData);

src/views/ForgotPasswordPagesTwo.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ForgotPassword from "../components/AuthPages/ForgotPassword/index2";
+
+export default function ForgotPasswordPagesTwo() {
+  return (
+    <>
+      <ForgotPassword />
+    </>
+  );
+}

src/views/LoginPageTwo.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import Login from "../components/AuthPages/Login/index2";
+
+function LoginPageTwo() {
+  return (
+    <>
+      <Login />
+    </>
+  );
+}
+
+export default LoginPageTwo;

src/views/SignupPageTwo.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import SignUp from "../components/AuthPages/SignUp/index2";
+
+function SignupPageTwo() {
+  return (
+    <>
+      <SignUp />
+    </>
+  );
+}
+
+export default SignupPageTwo;

src/views/UpdatePasswordPagesTwo.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import UpdatePassword from "../components/AuthPages/UpdatePassword/index2";
+
+export default function UpdatePasswordPagesTwo() {
+  return (
+    <>
+      <UpdatePassword />
+    </>
+  );
+}

src/views/VerifyLinkPagesTwo.jsx

@@ -0,0 +1,5 @@
+import VerifyLink from "../components/AuthPages/VerifyLink/index2";
+
+export default function VerifyLinkPagesTwo() {
+  return <VerifyLink />;
+}

src/views/VerifyPasswordPagesTwo.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import VerifyPassword from "../components/AuthPages/VerifyPassword/index2";
+
+export default function VerifyPasswordPagesTwo() {
+  return <VerifyPassword />;
+}

src/views/VerifyYouPagesTwo.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import VerifyYou from "../components/AuthPages/VerifyYou/index2";
+
+export default function VerifyYouPagesTwo() {
+  return <VerifyYou />;
+}