Merge branch 'inactivity-functionality' into 'master'

Inactivity functionality

See merge request !54

src/stores/token.ts

@@ -14,7 +14,8 @@ export const useTokenStore = defineStore({
         tokenTimer: null as ReturnType<typeof setTimeout> | null,
         jwtToken: "",
         username: null as string | null,
-        isConnectedToBank: null as boolean | null
+        isConnectedToBank: null as boolean | null,
+        isActive: true
     }),
 
     persist: {
@@ -26,7 +27,7 @@ export const useTokenStore = defineStore({
             let response;
             try {
                 response = await getJwtToken(username, password);
-                if (response !== undefined && response.data.useername !== "") {
+                if (response !== undefined && response.data.username !== "") {
                     const data = response.data;
                     if (data !== "" && data !== undefined) {
                         this.jwtToken = data;
@@ -52,11 +53,8 @@ export const useTokenStore = defineStore({
 
         async refreshToken() {
             try {
-                console.log("potetmos")
                 const response = await refreshToken(this.jwtToken);
-                console.log(response)
                 if (response !== undefined) {
-                    console.log(response)
                     this.jwtToken = response.data;
                     this.displayPopUp = false;
                     this.startTimer();
@@ -66,10 +64,15 @@ export const useTokenStore = defineStore({
             }
         },
 
+        setActive(boolean: boolean) {
+            this.isActive = boolean;
+        },
+
         logout() {
             this.jwtToken = "";
             this.username = null;
             this.isConnectedToBank = null;
+            this.displayPopUp = false;
             this.timerClear();
             router.push("/login").then(r => r);
         },
@@ -86,12 +89,13 @@ export const useTokenStore = defineStore({
 
             // Set a new timer for displayPopUp after 10 seconds (10000 ms)
             this.timer = setTimeout(() => {
-                this.displayPopUp = true;
+                console.log(this.isActive)
+                if (this.isActive) this.refreshToken()
+                else this.displayPopUp = true;
             }, 300000);
 
             // Set a new timer for logout after 15 seconds (15000 ms)
             this.tokenTimer = setTimeout(() => {
-                this.displayPopUp = false;
                 this.logout();
             }, 360000);
         },

src/views/HomePageView.vue

 <script setup lang="ts">
 import TopNav from '@/components/navigation/TopNav.vue'
 import SideNav from '@/components/navigation/SideNav.vue'
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch, onUnmounted } from 'vue';
 import { useTokenStore } from '@/stores/token';
 import HomePagePopUp from './HomePage/HomePagePopUp.vue';
 
@@ -11,6 +11,29 @@ const showPopup = ref(false);
 onMounted(() => {
   showPopup.value = store.displayPopUp;
   console.log('showPopup', store.displayPopUp);
+
+  setInterval(() => {
+    // After a certain interval, assume user is inactive
+    useTokenStore().setActive(false);
+  }, 10000);
+
+  const handleMouseMove = () => {
+    useTokenStore().setActive(true);
+  };
+
+  const handleKeyDown = () => {
+    useTokenStore().setActive(true);
+  };
+
+  // Add event listeners when the component is mounted
+  document.addEventListener('mousemove', handleMouseMove);
+  document.addEventListener('keydown', handleKeyDown);
+
+  // Cleanup: Remove event listeners when the component is unmounted
+  onUnmounted(() => {
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('keydown', handleKeyDown);
+  });
 });
 
 watch(