added error msg box

.env

@@ -19,5 +19,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=5
 
+REACT_APP_LOGIN_ERROR_TIMEOUT=7000
+
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227

src/components/AuthPages/Login/index.jsx

@@ -17,11 +17,15 @@ export default function Login() {
 
   //login error state
   const [loginError, setLoginError] = useState(false);
+  // for the catch error
+  const [msgError, setMsgError] = useState('');
 
   const rememberMe = () => {
     setValue(!checked);
   };
 
+  console.log(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT)
+
   // email
   const [email, setMail] = useState("");
   const handleEmail = (e) => {
@@ -34,41 +38,56 @@ export default function Login() {
   };
   const navigate = useNavigate();
   const userApi = new usersService();
+
+
   const doLogin = async () => {
-    if (email !== "" && password !== "") {
-      var postData = {
-        username: email,
-        password: password,
-        sessionid: 'STARTING'
-      };
-      const loginResult = await userApi.logInUser(postData);  // just for a test
-      //debugger;
-      // if (email === "support@mermsemr.com") {
-      if (loginResult.data.status > 0 && loginResult.data.internal_return == 100 && loginResult.data.session != '') { // just for a start
-        localStorage.setItem("email", `${loginResult.data.email}`);
-        localStorage.setItem("member_id", `${loginResult.data.member_id}`);
-        localStorage.setItem("uid", `${loginResult.data.uid}`);
-        localStorage.setItem("session_token", `${loginResult.data.session}`);
-        localStorage.setItem("added", `${loginResult.data.added}`);
-        localStorage.setItem("city", `${loginResult.data.city}`);
-        localStorage.setItem("country", `${loginResult.data.country}`);
-        localStorage.setItem("firstname", `${loginResult.data.firstname}`);
-        localStorage.setItem("last_login", `${loginResult.data.last_login}`);
-        localStorage.setItem("lastname", `${loginResult.data.lastname}`);
-        localStorage.setItem("state", `${loginResult.data.state}`);
-        localStorage.setItem("zip_code", `${loginResult.data.zip_code}`);
-        localStorage.setItem("session", `${loginResult.data.session}`);
-        setLoginLoading(true);
-        // userApi.getUserReminders(); //testing
-        setTimeout(() => {
-          toast.success("Login Successfully");
-          navigate("/", { replace: true });
-          setLoginLoading(false);
-        }, 2000);
-      } else {
-        // toast.error("Invalid Credential");
-        setLoginError(true)
+    if (email == '' && password == '') {
+      setMsgError('Please fill in fields')
+    }
+    try {
+      if (email !== "" && password !== "") {
+        var postData = {
+          username: email,
+          password: password,
+          sessionid: 'STARTING'
+        };
+        const loginResult = await userApi.logInUser(postData);  // just for a test
+        //debugger;
+        // if (email === "support@mermsemr.com") {
+        if (loginResult.data.status > 0 && loginResult.data.internal_return == 100 && loginResult.data.session != '') { // just for a start
+          localStorage.setItem("email", `${loginResult.data.email}`);
+          localStorage.setItem("member_id", `${loginResult.data.member_id}`);
+          localStorage.setItem("uid", `${loginResult.data.uid}`);
+          localStorage.setItem("session_token", `${loginResult.data.session}`);
+          localStorage.setItem("added", `${loginResult.data.added}`);
+          localStorage.setItem("city", `${loginResult.data.city}`);
+          localStorage.setItem("country", `${loginResult.data.country}`);
+          localStorage.setItem("firstname", `${loginResult.data.firstname}`);
+          localStorage.setItem("last_login", `${loginResult.data.last_login}`);
+          localStorage.setItem("lastname", `${loginResult.data.lastname}`);
+          localStorage.setItem("state", `${loginResult.data.state}`);
+          localStorage.setItem("zip_code", `${loginResult.data.zip_code}`);
+          localStorage.setItem("session", `${loginResult.data.session}`);
+          setLoginLoading(true);
+          // userApi.getUserReminders(); //testing
+          setTimeout(() => {
+            toast.success("Login Successfully");
+            navigate("/", { replace: true });
+            setLoginLoading(false);
+          }, 2000);
+        } else {
+          // toast.error("Invalid Credential");
+          setLoginError(true)
+        }
       }
+    } catch (error) {
+      console.log(error)
+      setMsgError('An error occurred')
+    } finally {
+      setTimeout(() => {
+        setLoginError(false)
+        setMsgError(null)
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT))
     }
   };
 
@@ -78,11 +97,11 @@ export default function Login() {
         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='mb-12'>
+            <Link to='#'>
+              <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+            </Link>
+          </div>
           <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">
@@ -150,6 +169,8 @@ export default function Login() {
                   Forgot Password
                 </a>
               </div> */}
+                {loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">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]">{msgError}</div>}
                 <div className="signin-area mb-3.5">
                   <div className="flex justify-center">
                     <button
@@ -165,7 +186,6 @@ export default function Login() {
                       )}
                     </button>
                   </div>
-                  {loginError && <p class="text-center text-red-700 pb-4">Invalid username or password</p>}
                   <BrandBtn link='#' imgSrc={googleLogo} brand='Google' />
                   <BrandBtn link='#' imgSrc={facebookLogo} brand='Facebook' />
                   <BrandBtn link='#' imgSrc={appleLogo} brand='Apple' />
@@ -178,7 +198,7 @@ export default function Login() {
                   </a>
                 </p>
               </div> */}
-              <div className="pt-5 text-[#181c32] text-center font-semibold text-base">This site is protected by hCaptcha and the our Privacy Policy and Terms of Service apply.</div>
+                <div className="pt-5 text-[#181c32] text-center font-semibold text-base">This site is protected by hCaptcha and the our Privacy Policy and Terms of Service apply.</div>
               </div>
             </div>
           </div>

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -33,6 +33,7 @@ export default function InputCom({
           className="input-field placeholder:text-base text-bese px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
           type={type}
           id={name}
+          required
         />
         {iconName && (
           <div className="absolute right-6 bottom-[19px] z-10">