Merge branch 'added-login-page-links' of WrenchBoard/WrenchAgents into master

.env

@@ -11,4 +11,10 @@ VITE_APP_PURCHASE_URL=https://www.wrenchboard.com/
 VITE_APP_PREVIEW_URL=https://www.wrenchboard.com/demo1/
 VITE_APP_PREVIEW_REACT_URL=https://www.wrenchboard.com
 VITE_APP_PREVIEW_DOCS_URL=https://www.wrenchboard.com/
-VITE_APP_THEME_API_URL=https://api.wrenchboard/api/api
+VITE_APP_THEME_API_URL=https://api.wrenchboard/api/api
+
+# main url
+VITE_APP_MAINSITE_URL=https://www.wrenchboard.com
+VITE_APP_SESSION_EXPIRE_CHECKER=60000
+VITE_APP_SESSION_EXPIRE_MINUTES=900000
+VITE_APP_WRENCH_IDENTITY_SITE=https://dev-ident.wrenchboard.com/

.env.development

@@ -11,4 +11,10 @@ VITE_APP_PURCHASE_URL=https://themeforest.net/item/metronic-responsive-admin-das
 VITE_APP_PREVIEW_URL=https://preview.keenthemes.com/metronic8/react/demo1/
 VITE_APP_PREVIEW_REACT_URL=https://preview.keenthemes.com/metronic8/react
 VITE_APP_PREVIEW_DOCS_URL=https://preview.keenthemes.com/metronic8/react/docs
-VITE_APP_THEME_API_URL=https://preview.keenthemes.com/theme-api/api
+VITE_APP_THEME_API_URL=https://preview.keenthemes.com/theme-api/api
+
+# main url
+VITE_APP_MAINSITE_URL=https://www.wrenchboard.com
+VITE_APP_SESSION_EXPIRE_CHECKER=60000
+VITE_APP_SESSION_EXPIRE_MINUTES=900000
+VITE_APP_WRENCH_IDENTITY_SITE=https://dev-ident.wrenchboard.com/

.env.production

@@ -11,4 +11,10 @@ VITE_APP_PURCHASE_URL=https://themeforest.net/item/metronic-responsive-admin-das
 VITE_APP_PREVIEW_URL=https://preview.keenthemes.com/metronic8/react/demo1/
 VITE_APP_PREVIEW_REACT_URL=https://preview.keenthemes.com/metronic8/react
 VITE_APP_PREVIEW_DOCS_URL=https://preview.keenthemes.com/metronic8/react/docs
-VITE_APP_THEME_API_URL=https://preview.keenthemes.com/theme-api/api
+VITE_APP_THEME_API_URL=https://preview.keenthemes.com/theme-api/api
+
+# main url
+VITE_APP_MAINSITE_URL=https://www.wrenchboard.com
+VITE_APP_SESSION_EXPIRE_CHECKER=60000
+VITE_APP_SESSION_EXPIRE_MINUTES=900000
+VITE_APP_WRENCH_IDENTITY_SITE=https://dev-ident.wrenchboard.com/

src/app/modules/auth/AuthLayout.tsx

@@ -15,6 +15,11 @@ const AuthLayout = () => {
     };
   }, []);
 
+  const contactLink: string = `${
+    import.meta.env.VITE_APP_MAINSITE_URL
+  }/contact`;
+  const termsLink: string = `${import.meta.env.VITE_APP_MAINSITE_URL}/terms`;
+
   return (
     <div className="d-flex flex-column flex-lg-row flex-column-fluid h-100">
       {/* begin::Body */}
@@ -33,11 +38,21 @@ const AuthLayout = () => {
         <div className="d-flex flex-center flex-wrap px-5">
           {/* begin::Links */}
           <div className="d-flex fw-semibold text-primary fs-base">
-            <a href="#" className="px-5" target="_blank">
+            <a
+              href={termsLink}
+              className="px-5"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               Terms
             </a>
 
-            <a href="#" className="px-5" target="_blank">
+            <a
+              href={contactLink}
+              className="px-5"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               Contact Us
             </a>
           </div>
@@ -48,9 +63,7 @@ const AuthLayout = () => {
       {/* end::Body */}
 
       {/* begin::Aside */}
-      <div
-        className="d-flex flex-lg-row-fluid w-lg-50 bgi-size-cover bgi-position-center order-1 order-lg-2"
-      >
+      <div className="d-flex flex-lg-row-fluid w-lg-50 bgi-size-cover bgi-position-center order-1 order-lg-2">
         {/* begin::Content */}
         <div className="d-flex flex-column flex-center py-15 px-5 px-md-15 w-100">
           {/* begin::Logo */}
@@ -66,8 +79,8 @@ const AuthLayout = () => {
           {/* begin::Image */}
           <img
             className="mx-auto w-275px w-md-50 w-xl-500px mb-10 mb-lg-20"
-            src={toAbsoluteUrl("media/misc/auth-screens.png")}
-            alt=""
+            src={toAbsoluteUrl("media/misc/agents-auth-screens.png")}
+            alt="WrenchBoard-start-img"
           />
           {/* end::Image */}
 

src/app/modules/auth/components/Login.tsx

@@ -7,6 +7,8 @@ import { getUserByToken, login } from "../core/_requests";
 import { toAbsoluteUrl } from "../../../../_metronic/helpers";
 import { useAuth } from "../core/Auth";
 
+const SOCIAL_LINK = import.meta.env.VITE_APP_WRENCH_IDENTITY_SITE;
+
 const loginSchema = Yup.object().shape({
   email: Yup.string()
     .email("Wrong email format")
@@ -25,7 +27,7 @@ const initialValues = {
 };
 
 // email: "admin@demo.com",
-  // password: "demo",
+// password: "demo",
 /*
   Formik+YUP+Typescript:
   https://jaredpalmer.com/formik/docs/tutorial#getfieldprops
@@ -75,7 +77,9 @@ export function Login() {
         <div className="col-md-6">
           {/* begin::Google link */}
           <a
-            href="#"
+            href={SOCIAL_LINK}
+            target="_blank"
+            rel="noopener noreferrer"
             className="btn btn-flex btn-outline btn-text-gray-700 btn-active-color-primary bg-state-light flex-center text-nowrap w-100"
           >
             <img
@@ -93,20 +97,17 @@ export function Login() {
         <div className="col-md-6">
           {/* begin::Google link */}
           <a
-            href="#"
+            href={SOCIAL_LINK}
+            target="_blank"
+            rel="noopener noreferrer"
             className="btn btn-flex btn-outline btn-text-gray-700 btn-active-color-primary bg-state-light flex-center text-nowrap w-100"
           >
             <img
               alt="Logo"
-              src={toAbsoluteUrl("media/svg/brand-logos/apple-black.svg")}
-              className="theme-light-show h-15px me-3"
+              src={toAbsoluteUrl("media/svg/brand-logos/facebook-4.svg")}
+              className="h-15px me-3"
             />
-            <img
-              alt="Logo"
-              src={toAbsoluteUrl("media/svg/brand-logos/apple-black-dark.svg")}
-              className="theme-dark-show h-15px me-3"
-            />
-            Sign in with Apple
+            Sign in with Facebook
           </a>
           {/* end::Google link */}
         </div>
@@ -126,13 +127,11 @@ export function Login() {
         <div className="mb-lg-15 alert alert-danger">
           <div className="alert-text font-weight-bold">{formik.status}</div>
         </div>
-      ) : (
-        // <div className="mb-10 bg-light-info p-8 rounded">
-          
-        // </div>
+      ) : // <div className="mb-10 bg-light-info p-8 rounded">
 
-        null
-      )}
+      // </div>
+
+      null}
 
       {/* begin::Form group */}
       <div className="fv-row mb-8">

src/app/modules/auth/core/Auth.tsx

@@ -3,6 +3,7 @@ import {
   FC,
   useState,
   useEffect,
+  useCallback,
   createContext,
   useContext,
   Dispatch,
@@ -39,6 +40,15 @@ const useAuth = () => {
 const AuthProvider: FC<WithChildren> = ({ children }) => {
   const [auth, setAuth] = useState<AuthModel | undefined>(authHelper.getAuth());
   const [currentUser, setCurrentUser] = useState<UserModel | undefined>();
+  const [lastActivityTime, setLastActivityTime] = useState(Date.now());
+
+  let checkExpirationInMinutes: number = Number(
+    import.meta.env.VITE_APP_SESSION_EXPIRE_MINUTES
+  );
+  let expirationChecker: number = Number(
+    import.meta.env.VITE_APP_SESSION_EXPIRE_CHECKER
+  );
+
   const saveAuth = (auth: AuthModel | undefined) => {
     setAuth(auth);
     if (auth) {
@@ -53,6 +63,42 @@ const AuthProvider: FC<WithChildren> = ({ children }) => {
     setCurrentUser(undefined);
   };
 
+  useEffect((): any => {
+    const expireSession = () => {
+      localStorage.removeItem("wrenchboard-agent-auth-details");
+      logout();
+    };
+
+    const checkInactivity = setInterval(() => {
+      let currentTime: number = Date.now();
+      let checkLastActivityTime: number = lastActivityTime;
+
+      if (currentTime - checkLastActivityTime > checkExpirationInMinutes) {
+        expireSession();
+      }
+    }, expirationChecker);
+
+    // cleaning up listeners
+    return () => {
+      clearInterval(checkInactivity);
+    };
+  }, [lastActivityTime]);
+
+  // Reset last activity time on user input
+  const resetTime = useCallback(() => {
+    setLastActivityTime(Date.now());
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("mousemove", resetTime);
+    window.addEventListener("keydown", resetTime);
+
+    return () => {
+      window.removeEventListener("mousemove", resetTime);
+      window.removeEventListener("keydown", resetTime);
+    };
+  }, [resetTime]);
+
   return (
     <AuthContext.Provider
       value={{ auth, saveAuth, currentUser, setCurrentUser, logout }}

src/app/modules/auth/core/AuthHelpers.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {AuthModel} from './_models'
 
-const AUTH_LOCAL_STORAGE_KEY = 'kt-auth-react-v'
+const AUTH_LOCAL_STORAGE_KEY = 'wrenchboard-agent-auth-details'
 const getAuth = (): AuthModel | undefined => {
   if (!localStorage) {
     return