added text and styling to SessionCheckerPopup, exported session check…

…ing from checkActiveSession

src/Resources/src/App.vue

@@ -8,7 +8,7 @@
       <vue3-progress-bar />
     </div>
     <DebtPopup />
-    <FocusAlert />
+    <SessionCheckerPopup />
     <Content class="relative z-[2] grow pb-12" />
     <Footer
       v-if="!showParticipations"
@@ -25,7 +25,7 @@ import { useRoute } from 'vue-router';
 import { computed, onMounted, onUpdated, ref, watch } from 'vue';
 import { useComponentHeights } from '@/services/useComponentHeights';
 import DebtPopup from './components/debtPopup/DebtPopup.vue';
-import FocusAlert from '@/components/misc/FocusAlert.vue';
+import SessionCheckerPopup from '@/components/misc/SessionCheckerPopup.vue';
 
 const route = useRoute();
 const { setNavBarHeight, windowWidth } = useComponentHeights();

src/Resources/src/api/api.ts

@@ -19,23 +19,23 @@ export default function useApi<T>(method: string, url: string, contentType = 'ap
                 'content-type': contentType
             }
         })
-        .then((res) => {
-            response.value = res.data as T;
-        })
-        .catch((err) => {
-            error.value = true;
+            .then((res) => {
+                response.value = res.data as T;
+            })
+            .catch((err) => {
+                error.value = true;
 
-            if (
-                err.response !== null &&
-                err.response !== undefined &&
-                err.response.data !== null &&
-                err.response.data !== undefined
-            ) {
-                response.value = err.response.data;
-            } else if (err.status === null || err.status === undefined) {
-                checkActiveSession();
-            }
-        });
+                if (
+                    err.response !== null &&
+                    err.response !== undefined &&
+                    err.response.data !== null &&
+                    err.response.data !== undefined
+                ) {
+                    response.value = err.response.data;
+                } else if (err.status === null || err.status === undefined) {
+                    checkActiveSession();
+                }
+            });
     };
     return { response, request, error };
 }

src/Resources/src/components/misc/SessionCheckerPopup.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <PopupModal :isOpen="isOpen">
+      <div class="max-w-[300px] p-4">
+        <h4 class="text-center align-middle">
+          {{ t('session.timeout_header') }}
+        </h4>
+        <p class="text-center align-middle">
+          {{ t('session.timeout_text') }}
+        </p>
+        <CreateButton
+          class="cursor-pointer"
+          :btnText="t('session.reload')"
+          :managed="true"
+          @click="handleReload()"
+        />
+      </div>
+    </PopupModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PopupModal from '@/components/misc/PopupModal.vue';
+import CreateButton from '@/components/misc/CreateButton.vue';
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { saveAndReload, isSessionActive } from '@/tools/checkActiveSession';
+
+const { t } = useI18n();
+
+// 600.000
+const TEN_MINUTES_MILLIS = 600000;
+
+const isOpen = ref(false);
+const timestamp = ref<number>(0);
+
+onMounted(() => {
+  timestamp.value = Date.now();
+  window.addEventListener('focus', () => checkSessionCallback());
+});
+
+function handleReload() {
+  isOpen.value = false;
+  saveAndReload();
+}
+
+async function checkSessionCallback() {
+  if (Date.now() - timestamp.value > TEN_MINUTES_MILLIS) {
+    try {
+      timestamp.value = Date.now();
+      const sessionActive = await isSessionActive();
+      isOpen.value = !sessionActive;
+    } catch (error) {
+      isOpen.value = true;
+    }
+  }
+}
+</script>

src/Resources/src/locales/de.json

@@ -287,7 +287,10 @@
     "download": "Pdf downloaden"
   },
   "session": {
-    "expired": "Session abgelaufen!"
+    "expired": "Session abgelaufen!",
+    "timeout_header": "Die Session ist abgelaufen!",
+    "timeout_text": "Die Seite muss neugeladen werden, um die Session wiederherzustellen.",
+    "reload": "Neu laden"
   },
   "slot": {
     "create": "Slot erstellen",

src/Resources/src/locales/en.json

@@ -287,7 +287,10 @@
     "download": "Download pdf"
   },
   "session": {
-    "expired": "Session expired!"
+    "expired": "Session expired!",
+    "timeout_header": "The session timed out!",
+    "timeout_text": "The page has to be reloaded in order to restore the session.",
+    "reload": "Reload"
   },
   "slot": {
     "create": "create Slot",
@@ -306,7 +309,7 @@
   },
   "password": "Password",
   "popup": {
-    "processing": "Die Anfrage wird bearbeitet"
+    "processing": "The request is being processed"
   },
   "username": "Username"
 }

src/Resources/src/tools/checkActiveSession.ts

@@ -2,18 +2,23 @@ import useSessionStorage from '@/services/useSessionStorage';
 
 export default async function checkActiveSession(stringToStore: string | null = null) {
     try {
-        const response = await fetch(window.location.href);
-        if (response.status !== 200) {
+        const isActive = await isSessionActive();
+        if (isActive === false) {
             saveAndReload(stringToStore);
         }
     } catch (error) {
         saveAndReload(stringToStore);
     }
 }
 
-function saveAndReload(stringToStore: string | null = null) {
+export function saveAndReload(stringToStore: string | null = null) {
     if (stringToStore !== null) {
         useSessionStorage().saveData(stringToStore);
     }
     window.location.reload();
 }
+
+export async function isSessionActive() {
+    const response = await fetch(window.location.href);
+    return response.status === 200;
+}