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,7 +38,13 @@ export default function Login() {
   };
   const navigate = useNavigate();
   const userApi = new usersService();
+
+
   const doLogin = async () => {
+    if (email == '' && password == '') {
+      setMsgError('Please fill in fields')
+    }
+    try {
       if (email !== "" && password !== "") {
         var postData = {
           username: email,
@@ -70,6 +80,15 @@ export default function Login() {
           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))
+    }
   };
 
   return (
@@ -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' />

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">