Merge branch 'login-bug' of WrenchBoard/Users-Wrench into master

src/components/AuthPages/Login/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import linkedInLogo from "../../../assets/images/Linkedin.png";
 import appleLogo from "../../../assets/images/apple-black.svg";
@@ -17,7 +17,7 @@ import { updateUserDetails } from "../../../store/UserDetails";
 export default function Login() {
   const dispatch = useDispatch();
 
-  let [loginCom, setLoginCom] = useState({ user: true, family: false });
+  let [loginType, setLoginType] = useState({ full: true, family: false });
 
   const [checked, setValue] = useState(false);
   const [loginLoading, setLoginLoading] = useState(false);
@@ -32,11 +32,11 @@ export default function Login() {
   };
 
   //FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
-  const handleLoginCom = ({ target: { name } }) => {
+  const handleLoginType = ({ target: { name } }) => {
-    if (name == "user") {
+    if (name == "full") {
-      setLoginCom({ [name]: true, family: false });
+      setLoginType({ [name]: true, family: false });
-    } else {
+    } else if(name='family') {
-      setLoginCom({ [name]: false, family: true });
+      setLoginType({ [name]: false, family: true });
     }
   };
 
@@ -56,8 +56,9 @@ export default function Login() {
   // FUNCTION TO HANDLE USER LOGIN
   const doLogin = ({ target: { name } }) => {
     setMsgError("");
+    setLoginError(false)
     setLoginLoading(true);
-    let postData = {}; // Post Data for API
+    let postData; // Post Data for API
     if (!email || !password) {
       setLoginLoading(false);
       setMsgError("Please fill all the fields");
@@ -67,14 +68,15 @@ export default function Login() {
       return;
     }
 
-    if (name == "userlogin") { // Post Data Info for normal Login
+    if (name == "loginfull") { // Post Data Info for normal Login
       postData = {
         username: email,
         password: password,
         sessionid: "STARTING",
+        login_mode: 1100,
         action: 11025,
       };
-    } else if (name == "familylogin") { // Post Data Info for family Login
+    } else if (name == "loginfamily") { // Post Data Info for family Login
       postData = {
         username: email,
         pin: password,
@@ -82,8 +84,14 @@ export default function Login() {
         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;
     }
-
     userApi.logInUser(postData).then((res) => {
         if (res.status != 200 || res.data.internal_return < 0) {
           // setMsgError("Wrong, email/password");
@@ -112,6 +120,11 @@ export default function Login() {
       });
   };
 
+  useEffect(()=>{
+    setMail('')
+    setPassword('')
+  },[loginType.full, loginType.family])
+
   return (
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
@@ -145,20 +158,20 @@ export default function Login() {
               {/* switch login component */}
               <div className="flex justify-start items-end">
                 <button
-                  name="user"
+                  name="full"
                   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]"
+                    loginType.full && "border-r-2 h-[45px]"
                   }`}
-                  onClick={handleLoginCom}
+                  onClick={handleLoginType}
                 >
                   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]"
+                    loginType.family && "border-l-2 h-[45px]"
                   }`}
-                  onClick={handleLoginCom}
+                  onClick={handleLoginType}
                 >
                   Family
                 </button>
@@ -168,7 +181,7 @@ export default function Login() {
 
               {/* for login component */}
               {
-                loginCom.user ? (
+                loginType.full ? (
                   //user login compoenent
                   <div className="p-2 input-area border-2 border-[#4687ba]">
                     <div className="input-item mb-5">
@@ -219,7 +232,7 @@ export default function Login() {
                     <div className="signin-area mb-3.5">
                       <div className="flex justify-center">
                         <button
-                          name="userlogin"
+                          name="loginfull"
                           onClick={doLogin}
                           type="button"
                           disabled={loginLoading}
@@ -228,7 +241,7 @@ export default function Login() {
                           {loginLoading ? (
                             <div className="signup btn-loader"></div>
                           ) : (
-                            <span>Continue</span>
+                            <>Continue</>
                           )}
                         </button>
                       </div>
@@ -302,7 +315,7 @@ export default function Login() {
                     <div className="signin-area mb-1.5">
                       <div className="flex justify-center">
                         <button
-                          name="familylogin"
+                          name="loginfamily"
                           onClick={doLogin}
                           disabled={loginLoading}
                           type="button"
@@ -311,7 +324,7 @@ export default function Login() {
                           {loginLoading ? (
                             <div className="signup btn-loader"></div>
                           ) : (
-                            <span>Continue</span>
+                            <>Continue</>
                           )}
                         </button>
                       </div>