added the session countdown and added facebook logo and link

.env

@@ -14,4 +14,7 @@ VITE_APP_PREVIEW_DOCS_URL=https://www.wrenchboard.com/
 VITE_APP_THEME_API_URL=https://api.wrenchboard/api/api
 
 # main url
-VITE_APP_MAINSITE_URL=https://www.wrenchboard.com
+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/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")}
+              src={toAbsoluteUrl("media/svg/brand-logos/facebook-4.svg")}
-              className="theme-light-show h-15px me-3"
+              className="h-15px me-3"
             />
-            <img
+            Sign in with Facebook
-              alt="Logo"
-              src={toAbsoluteUrl("media/svg/brand-logos/apple-black-dark.svg")}
-              className="theme-dark-show h-15px me-3"
-            />
-            Sign in with Apple
           </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 className="mb-10 bg-light-info p-8 rounded">
-          
-        // </div>
 
-        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