Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into manage-family-page

src/components/AuthPages/Login/index.jsx

@@ -16,6 +16,8 @@ import { updateUserDetails } from "../../../store/UserDetails";
 export default function Login() {
   const dispatch = useDispatch();
 
+  let [loginCom, setLoginCom] = useState({user: true, family: false})
+
   const [checked, setValue] = useState(false);
   const [loginLoading, setLoginLoading] = useState(false);
 
@@ -28,6 +30,15 @@ export default function Login() {
     setValue(!checked);
   };
 
+  //FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
+  const handleLoginCom = ({target:{name}}) => {
+    if(name == 'user'){
+      setLoginCom({[name]: true, family: false})
+    }else{
+      setLoginCom({[name]: false, family: true})
+    }
+  }
+
   // email
   const [email, setMail] = useState("");
   const handleEmail = (e) => {
@@ -102,9 +113,9 @@ export default function Login() {
           <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] 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="w-full">
               <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]">
+                {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Sign In to WrenchBoard
-                </h1>
+                </h1> */}
                 <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
                   New Here?{" "}
                   <Link
@@ -115,9 +126,32 @@ export default function Login() {
                   </Link>
                 </span>
               </div>
-              <div className="input-area">
+
+              {/* switch login component */}
+              <div className="flex justify-start items-end">
+                <button 
+                  name='user'
+                  className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-r-0 border-[#4687ba] ${loginCom.user && 'border-r-2 h-[45px]'}`}
+                  onClick={handleLoginCom}
+                >Sign in
+                </button>
+                <button 
+                  name='family'
+                  className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-l-0 border-[#4687ba] ${loginCom.family && 'border-l-2 h-[45px]'}`}
+                  onClick={handleLoginCom}
+                >Family
+                </button>
+              </div>
+
+              {/* END  of switch login component */}
+
+              {/* for login component */}
+              {loginCom.user ?
+                //user login compoenent
+                <div className="p-2 input-area border-2 border-[#4687ba]">
                   <div className="input-item mb-5">
                     <InputCom
+                      labelClass='tracking-wider'
                       fieldClass="px-6"
                       value={email}
                       inputHandler={handleEmail}
@@ -131,6 +165,7 @@ export default function Login() {
 
                   <div className="input-item mb-5">
                     <InputCom
+                      labelClass='tracking-wider'
                       fieldClass="px-6"
                       value={password}
                       inputHandler={handlePassword}
@@ -177,14 +212,76 @@ export default function Login() {
                     <BrandBtn link="#" imgSrc={facebookLogo} brand="Facebook" />
                     <BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
                   </div>
-                {/* <div className="signup-area flex justify-center">
+                </div>
-                <p className="sm:text-lg text-sm text-thin-light-gray font-normal">
+                // END of user login compoenent
-                  Don't have an account ?
+                :
-                  <a href="/signup" className="ml-2   text-dark-gray dark:text-white">
+                // family login compoenent
-                    Sign up free
+                <div className="p-2 input-area border-2 border-[#4687ba]">
-                  </a>
+                  <div className="input-item mb-5">
-                </p>
+                    <InputCom
-              </div> */}
+                      labelClass='tracking-wider'
+                      fieldClass="px-6"
+                      value={email}
+                      inputHandler={handleEmail}
+                      placeholder="support@mermsemr.com"
+                      label="Username"
+                      name="email"
+                      type="email"
+                      iconName="message"
+                    />
+                  </div>
+
+                  <div className="input-item mb-5">
+                    <InputCom
+                      labelClass='tracking-wider'
+                      fieldClass="px-6"
+                      value={password}
+                      inputHandler={handlePassword}
+                      placeholder="● ● ● ● ● ●"
+                      label="Pin"
+                      name="password"
+                      type="password"
+                      iconName="password"
+                      // forgotPassword
+                    />
+                  </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
+                        onClick={()=>{console.log('working')}}
+                        type="button"
+                        className={`btn-login  rounded-[0.475rem] text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+                      >
+                        {loginLoading ? (
+                          <div className="signup btn-loader"></div>
+                        ) : (
+                          <span>Continue</span>
+                        )}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                // END of family login compoenent
+              }
+              {/* END of login component */}
+
               <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
                   This site is protected by hCaptcha and the our Privacy Policy
                   and Terms of Service apply.
@@ -192,7 +289,6 @@ export default function Login() {
             </div>
           </div>
         </div>
-        </div>
       </AuthLayout>
     </>
   );