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/Routers.jsx

@@ -29,6 +29,7 @@ import CalendarPage from "./views/CalendarPage";
 import ResourcePage from "./views/ResourcePage";
 import MyTaskPage from "./views/MyTaskPage";
 import MyJobsPage from "./views/MyJobsPage";
+import ReferralPage from "./views/ReferralPage";
 
 export default function Routers() {
   return (
@@ -81,6 +82,7 @@ export default function Routers() {
           <Route exact path="/profile" element={<AuthProfilePage />} />
           <Route exact path="/user-profile" element={<UserProfilePage />} />
           <Route exact path="/settings" element={<SettingsPage />} />
+          <Route exact path="/referral" element={<ReferralPage />} />
         </Route>
         <Route path="*" element={<FourZeroFour />} />
       </Routes>

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

src/components/Partials/MobileSideBar.jsx

@@ -168,6 +168,19 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
                   </span>
                 </NavLink>
               </li>
+              <li className="item group">
+                <NavLink
+                  to="/referral"
+                  className="nav-item flex items-center justify-start space-x-3.5"
+                >
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
+                    <Icons name="history" />
+                  </span>
+                  <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
+                  Refer a Friend
+                  </span>
+                </NavLink>
+              </li>
             </ul>
           </div>
         </div>

src/components/Partials/Sidebar.jsx

@@ -237,6 +237,27 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   </span>
                 </NavLink>
               </li>
+
+              <li className="item group">
+                <NavLink
+                  to="/referral"
+                  className={`nav-item flex items-center ${
+                    ((navData) => (navData.isActive ? "active" : ""),
+                    sidebar ? "justify-start space-x-3.5" : "justify-center")
+                  }`}
+                >
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                    <Icons name="history" />
+                  </span>
+                  <span
+                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                      sidebar ? "active flex-1" : "w-0"
+                    }`}
+                  >
+                    Refer a Friend
+                  </span>
+                </NavLink>
+              </li>
             </ul>
           </div>
         </div>

src/components/Referral/Index.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import Layout from '../Partials/Layout'
+import ReferralDisplay from './ReferralDisplay'
+
+function Referral() {
+  return (
+    <Layout>
+        <ReferralDisplay />
+    </Layout>
+  )
+}
+
+export default Referral

src/components/Referral/ReferralDisplay.jsx

@@ -0,0 +1,116 @@
+import React, { useState } from 'react'
+
+function ReferralDisplay() {
+    let [referralList, setReferralList] = useState([]) // dummy remove later and call from API
+
+    //STATE FOR CONTROLLED INPUTS
+    let [inputs, setInputs] = useState({
+        firstname: '',
+        lastname: '',
+        email: '',
+        status: 'pending'
+    })
+
+    // FUNCTION TO HANDLE INPUT CHANGE
+    const handleChange = ({target:{name, value}}) => {
+        setInputs(prev => ({...prev, [name]:value}))
+    }
+
+    //FUNCTION TO HANDLE SUBMIT
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        //valid inputs before submitting. Just for texting remove later
+        setReferralList(prev => [...prev, inputs])
+        setInputs({
+            firstname: '',
+            lastname: '',
+            email: '',
+            status: 'pending'
+        })
+    }
+
+  return (
+    <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+        <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+            <div className="referral w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
+                <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Send Referral</h2>
+               <form className='referral-info' onSubmit={handleSubmit}>
+                    <div className='md:flex items-center my-4'>
+                        <label className='w-full md:w-1/4 text-slate-900 text-lg'>Firstname <span className='text-red-500'>*</span></label>
+                        <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                            value={inputs.firstname} 
+                            name='firstname' 
+                            type="text" 
+                            placeholder='Firstname' 
+                            required
+                            onChange={handleChange}
+                            />
+                    </div>
+
+                    <div className='md:flex items-center my-4'>
+                        <label className='w-full md:w-1/4 text-slate-900 text-lg'>Lastname <span className='text-red-500'>*</span></label>
+                        <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                            value={inputs.lastname} 
+                            name='lastname' 
+                            type="text" 
+                            placeholder='Lastname' 
+                            required
+                            onChange={handleChange}
+                            />
+                    </div>
+
+                    <div className='md:flex items-center my-4'>
+                        <label className='w-full md:w-1/4 text-slate-900 text-lg'>Email <span className='text-red-500'>*</span></label>
+                        <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                            value={inputs.email} 
+                            name='email' 
+                            type="email" 
+                            placeholder='Email' 
+                            required
+                            onChange={handleChange}
+                            />
+                    </div>
+                    <hr />
+                    <div className='referral-btn flex justify-end items-center py-4 border-b-4'>
+                        <button type='submit' className='text-lg text-white bg-sky-blue p-2 hover:opacity-90 rounded-md'>Send Message</button>
+                    </div>
+               </form>
+            </div>
+        </div>
+
+        <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+            <div className="referral w-full  md:p-8 p-4 h-[400px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Referral List</h2>
+                <table className="referral-list w-full table-auto border-collapse text-left">
+                    <thead className='border-b-2'>
+                        <tr className='text-slate-600'>
+                        <th className="py-3">Added/Name</th>
+                        <th className="py-3">Email</th>
+                        <th className="py-3">Status</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {referralList.length ? 
+                        referralList.map(item => (
+                            <tr className='text-slate-500'>
+                                <td className="py-3">{item.firstname} {item.lastname}</td>
+                                <td className="py-3">{item.email}</td>
+                                <td className="py-3">{item.status}</td>
+                            </tr>
+                        ))
+                        :
+                        (<tr className='text-slate-500'>
+                            <td colSpan={3}>No Item Found on referral List</td>
+                        </tr>
+                        )
+                        }
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default ReferralDisplay

src/views/ReferralPage.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import Referral from '../components/Referral/Index'
+
+function ReferralPage() {
+  return (
+    <>
+    <Referral />
+    </>
+  )
+}
+
+export default ReferralPage