auth layout page changed

src/Routers.jsx

@@ -24,6 +24,7 @@ import JobGroupsPage from "./views/JobGroupsPage";
 import LndPage from "./views/LndPage";
 import LoginPage from "./views/LoginPage";
 import LoginPageTwo from "./views/LoginPageTwo";
+import LoginLandingPage from './views/LoginLandingPage'
 import ManageActiveJobs from "./views/ManageActiveJobs";
 import ManageInterestOfferPage from "./views/ManageInterestOfferPage";
 import MarketPlacePage from "./views/MarketPlacePage";
@@ -78,7 +79,8 @@ export default function Routers() {
         {/* guest routes */}
         {process.env.REACT_APP_NEW_LOGIN_LAYOUT == 1 ? (
           <>
-            <Route exact path="/login" element={<LoginPageTwo />} />
+            <Route exact path="/login" element={<LoginLandingPage />} />
+            <Route exact path="/login/:type" element={<LoginPageTwo />} />
             <Route exact path="/signup" element={<SignupPageTwo />} />
             <Route
               exact

src/components/AuthPages/AuthLayout2.jsx

@@ -1,6 +1,7 @@
 import React, { useContext } from "react";
 import { Link } from "react-router-dom";
 import { localImgLoad } from "../../lib";
+import WrenchBoard from "../../assets/images/wrenchboard-logo-text.png";
 
 import DarkModeContext from "../Contexts/DarkModeContext";
 
@@ -18,15 +19,23 @@ export default function LoginLayout({ slogan, children }) {
         backgroundImage: `url(${countryMode == "NG" ? bgImgNig : bgImgCom})`,
       }}
     >
-      
+      <div className="my-5">
-      <div className={`w-full grid grid-cols-1 xl:grid-cols-2`}>
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+      <div className={`h-full w-full grid grid-cols-1 place-content-center`}>
         {/* <div 
             className={`auth-bg hidden xl: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 xl:col-start-2">
+        <div className="p-5 sm:p-7 flex place-content-center">
-          <div className="py-5 w-full sm:w-11/12 max-w-[550px] shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
+          <div className="pt-8 pb-5 w-full sm:w-11/12 max-w-[550px] shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
             <div className="w-full flex justify-center items-center">
               {children && children}
             </div>

src/components/AuthPages/ForgotPassword/index2.jsx

@@ -89,15 +89,6 @@ export default function ForgotPassword() {
     <>
       <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-10/12">
             {msgSuccess == null ?

src/components/AuthPages/Login/LoginLanding.jsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import KidIcon from '../../../assets/images/auth/children.png'
+import ParentIcon from '../../../assets/images/auth/adult.png'
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+
+import { useDispatch } from "react-redux";
+// import { updateUserDetails } from "../../../store/UserDetails";
+
+import GoogleDownload from '../../../assets/images/download/andriod.jpg'
+import IOSDownload from '../../../assets/images/download/apple.jpg'
+
+
+export default function LoginLanding() {
+  const queryParams = new URLSearchParams(location?.search);
+  // const sessionExpired = queryParams.get("sessionExpired");
+
+  const dispatch = useDispatch();
+  const { state } = useLocation();
+
+  const navigate = useNavigate();
+  const userApi = new usersService();
+
+
+  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-10/12">
+              <div className='grid grid-cols-1 sm:grid-cols-3 gap-3'>
+                {/* APP DOWNLOAD STORE */}
+                <div className="col-span-1 order-2 sm:col-span-1 sm:order-1 w-full">
+                  <div className="sm:border-r-2 border-slate-400 w-full h-full flex sm:flex-col justify-center gap-4">
+                    <div className="w-28 lg:w-32">
+                      <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href={process.env.REACT_APP_APPLE_APP}
+                      >
+                        <img src={IOSDownload} className='w-full h-auto' alt='IOS Download' />
+                      </a>
+                    </div>
+                    <div className="w-28 lg:w-32">
+                      <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href={process.env.REACT_APP_ANDROID_APP}
+                      >
+                        <img src={GoogleDownload} className='w-full h-auto' alt='IOS Download' />
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <div className="col-span-1 order-1 sm:col-span-2 sm:order-2 title-area flex flex-col gap-5 justify-center items-center relative text-center mb-5">
+                  <h1 className="text-[#181c32] font-medium dark:text-white leading-6 text-2xl tracking-wide">
+                    <span className='font-semibold'>Log in</span> as a:
+                  </h1>
+
+                  <div className='w-full flex flex-col gap-4'>
+                    <button name='full' onClick={()=>navigate('/login/parent', {state:{loginType:'full'}})} className='w-full mx-auto flex justify-between items-center p-4 md:p-8 rounded-lg bg-[#e0f7eb] text-emerald-800 cursor-pointer'>
+                      <div className='flex items-center gap-4'>
+                        <img className='w-12 h-auto' src={ParentIcon} alt='login key' />
+                        <p className='text-lg font-semibold'>Adult or Parent</p>
+                      </div>
+                      {/* <span>&gt;</span> */}
+                      <i className="fa-solid fa-caret-right"></i>
+                    </button>
+
+                    <button name='family' onClick={()=>navigate('/login/kid', {state:{loginType:'family'}})} className='w-full mx-auto flex justify-between items-center p-4 md:p-8 rounded-lg bg-[#f0eef1] text-[#a94ef3] cursor-pointer'>
+                      <div className='flex items-center gap-4'>
+                        <img className='w-12 h-auto' src={KidIcon} alt='login key' />
+                        <p className='text-lg font-semibold'>Kids or Teens</p>
+                      </div>
+                      {/* <span>&gt;</span> */}
+                      <i className="fa-solid fa-caret-right"></i>
+                    </button>
+                  </div>
+
+                  <div className="text-gray-400 font-medium text-xl leading-[24.375px]">
+                    Don't have an account?{" "}
+                    <Link
+                      to="/signup"
+                      className="font-semibold text-emerald-800 hover:text-emerald-600 transition"
+                    >
+                      Sign Up
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}

src/components/AuthPages/Login/index2.jsx

@@ -33,7 +33,7 @@ export default function Login() {
 
   const [validCaptcha, setValidCaptcha] = useState({ show: false, valid: "" }); // FOR CAPTCHA
 
-  let [loginType, setLoginType] = useState("");
+  let [loginType, setLoginType] = useState('');
 
   const [loginLoading, setLoginLoading] = useState(false);
 
@@ -199,43 +199,43 @@ export default function Login() {
   // document.cookie ="loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
   // }, []);
 
-  useLayoutEffect(() => {
+  useEffect(()=>{
-    // checks the cookie in order to set the login type before components mounts
+    if(state && state.loginType){
-    // if(document.cookie.includes("loginType=family")){
+      setLoginType(state.loginType)
-    //   setLoginType('family')
+    }else{
-    // }else if(document.cookie.includes("loginType=full")){
+      navigate('/login', {replace: true})
-    //   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) {
+  // useLayoutEffect(() => {
-      //check if the login path has an error state indicating any social handle login with error
+  //   function readCookie(cname) {
-      setMsgError("Unexpected Error, Please try again soon.");
+  //     // checks the cookie in order to set the login type before components mounts
-      setTimeout(() => {
+  //     let name = cname + "=";
-        setMsgError("");
+  //     let decoded_cookie = decodeURIComponent(document.cookie);
-        navigate("/login", { replace: true });
+  //     let carr = decoded_cookie.split(";");
-      }, 4000);
+  //     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("");
@@ -259,7 +259,7 @@ export default function Login() {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-5">
+          {/* <div className="mb-5">
             <Link to="#">
               <img
                 src={WrenchBoard}
@@ -267,13 +267,13 @@ export default function Login() {
                 className="h-10 mx-auto"
               />
             </Link>
-          </div>
+          </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-10/12">
               {/* 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">
+                <div className="hidden 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> */}
@@ -299,7 +299,7 @@ export default function Login() {
               )}
 
               {/* switch login component */}
-              <div className="ml-7 flex justify-start items-center gap-3">
+              <div className="hidden --flex-- ml-7 justify-start items-center gap-3">
                 <button
                   name="full"
                   className={`login-type-btn px-4 py-1 rounded-t-2xl ${
@@ -390,7 +390,7 @@ export default function Login() {
                         {msgError}
                       </div>
                     )}
-                    <div className="signin-area mb-3.5">
+                    <div className="signin-area">
                       <div className="flex justify-center">
                         <button
                           name="full"
@@ -524,10 +524,13 @@ export default function Login() {
                 )
                 // END of family login compoenent
               }
+              <div className='w-full text-center'>
+                <Link className='text-center block font-semibold text-lg pt-3 tracking-wide' to='/login'>Return</Link>
+              </div>
               {/* END of login component */}
 
               {/* APP DOWNLOAD STORE */}
-              <div className="w-full mt-4">
+              <div className="hidden w-full mt-4">
                 <div className="w-full flex justify-center items-center gap-4">
                   <div className="w-32 lg:w-48">
                     <a
@@ -568,7 +571,7 @@ export default function Login() {
 
               {loginType == "full" && (
                 <>
-                  <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
+                  <div className="hidden pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
                     This site is protected by a Captcha. <br />Our Privacy Policy and
                     Terms of Service apply.
                   </div>

src/components/AuthPages/Promo/Promo.jsx

@@ -107,15 +107,6 @@ export default function Promo() {
   return (
     <PromoPageLayout>
       <div className="w-full">
-        <div className="mb-5">
-          <Link to="#">
-            <img
-              src={WrenchBoard}
-              alt="wrenchboard"
-              className="h-10 mx-auto"
-            />
-          </Link>
-        </div>
         {requestStatus.loading ?
           <div className='flex flex-col justify-center items-center'>
             <LoadingSpinner height='h-40' size='8' />
@@ -178,47 +169,7 @@ export default function Promo() {
                     </button>
                   </div>
                 </div>
-
+            </div>
-              {/* APP DOWNLOAD STORE */}
-              <div className="w-full mt-4">
-                <div className="w-full flex justify-center items-center gap-4">
-                  <div className="w-32 lg:w-48">
-                    <a
-                      // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
-                      target="_blank"
-                      rel="noreferrer"
-                      href={process.env.REACT_APP_APPLE_APP}
-                    >
-                      {/* <i className="fa-brands fa-apple text-3xl"></i>
-                      <div className="flex flex-col">
-                        <span className="text-[11px]">Available on the</span>
-                        <span className="text-[12px] lg:text-base">
-                          App Store
-                        </span>
-                      </div> */}
-                      <img src={IOSDownload} className='w-full h-auto' alt='IOS Download' />
-                    </a>
-                  </div>
-                  <div className="w-32 lg:w-48">
-                    <a
-                      // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
-                      target="_blank"
-                      rel="noreferrer"
-                      href={process.env.REACT_APP_ANDROID_APP}
-                    >
-                      {/* <i className="fa-brands fa-google-play text-2xl"></i>
-                      <div className="flex flex-col">
-                        <span className="text-[11px]">Available on the</span>
-                        <span className="text-[12px] lg:text-base">
-                          Google Play
-                        </span>
-                      </div> */}
-                      <img src={GoogleDownload} className='w-full h-auto' alt='IOS Download' />
-                    </a>
-                  </div>
-                </div>
-              </div>
-              </div>
           </div>
           :
           <ErrorComponent onClick={() => navigate("/login")} />

src/components/AuthPages/SignUp/index2.jsx

@@ -157,15 +157,6 @@ export default function SignUp() {
     <>
       <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-10/12">
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
@@ -346,46 +337,6 @@ export default function SignUp() {
                     </button>
                   </div>
                 </div>
-
-                {/* APP DOWNLOAD STORE */}
-                <div className="w-full mt-4">
-                  <div className="w-full flex justify-center items-center gap-4">
-                    <div className="w-32 lg:w-48">
-                      <a
-                        // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
-                        target="_blank"
-                        rel="noreferrer"
-                        href={process.env.REACT_APP_APPLE_APP}
-                      >
-                        {/* <i className="fa-brands fa-apple text-3xl"></i>
-                        <div className="flex flex-col">
-                          <span className="text-[11px]">Available on the</span>
-                          <span className="text-[12px] lg:text-base">
-                            App Store
-                          </span>
-                        </div> */}
-                        <img src={IOSDownload} className='w-full h-auto' alt='IOS Download' />
-                      </a>
-                    </div>
-                    <div className="w-32 lg:w-48">
-                      <a
-                        // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
-                        target="_blank"
-                        rel="noreferrer"
-                        href={process.env.REACT_APP_ANDROID_APP}
-                      >
-                        {/* <i className="fa-brands fa-google-play text-2xl"></i>
-                        <div className="flex flex-col">
-                          <span className="text-[11px]">Available on the</span>
-                          <span className="text-[12px] lg:text-base">
-                            Google Play
-                          </span>
-                        </div> */}
-                        <img src={GoogleDownload} className='w-full h-auto' alt='IOS Download' />
-                      </a>
-                    </div>
-                  </div>
-                </div>
               </div>
             </div>
           </div>

src/components/AuthPages/VerifyLink/index2.jsx

@@ -137,15 +137,6 @@ export default function VerifyLink() {
           </div>
         ) : (
           <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-10/12">
                 <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">

src/components/AuthPages/VerifyPassword/index2.jsx

@@ -139,15 +139,6 @@ const VerifyPassword = () => {
     <>
       <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" />

src/components/AuthPages/VerifyYou/index2.jsx

@@ -8,15 +8,6 @@ export default function VerifyYou() {
     <>
       <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-10/12">
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">

src/components/Partials/Layout.jsx

@@ -22,13 +22,14 @@ export default function Layout({ children }) {
   };
   const navigate = useNavigate();
   const logOut = () => {
+    let loginType = userDetails?.account_type == 'FULL' ? 'parent' : 'kid'
     sessionStorage.clear();
     localStorage.clear();
     // toast.success("Come Back Soon", {
     //   icon: `🙂`,
     // });
 
-    navigate("/login", { replace: true });
+    navigate(`/login/${loginType}`, {state:{loginType:userDetails?.account_type.toLowerCase()}, replace:true});
   };
 
   return (

src/views/LoginLandingPage.jsx

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