updated faulty method signiture, added automatic reloading on session…

… timeout, added popup to indicate a session timeout

src/Mealz/UserBundle/Resources/config/routing.yml

@@ -1,6 +1,6 @@
 MealzUserBundle_login:
     path:  /login
-    defaults: { _controller: App\Mealz\UserBundle\Controller\SecurityController::loginAction }
+    defaults: { _controller: App\Mealz\UserBundle\Controller\SecurityController::login }
     methods:  [GET, POST]
 
 MealzUserBundle_logout:
@@ -14,5 +14,5 @@ MealzUserBundle_api_user_data:
 
 MealzUserBundle_api_login:
     path: /api/login
-    defaults: { _controller: App\Mealz\UserBundle\Controller\SecurityController::loginAction }
+    defaults: { _controller: App\Mealz\UserBundle\Controller\SecurityController::login }
     methods: POST

src/Resources/src/App.vue

@@ -8,6 +8,7 @@
       <vue3-progress-bar />
     </div>
     <DebtPopup />
+    <FocusAlert />
     <Content class="relative z-[2] grow pb-12" />
     <Footer
       v-if="!showParticipations"
@@ -24,6 +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';
 
 const route = useRoute();
 const { setNavBarHeight, windowWidth } = useComponentHeights();

src/Resources/src/api/api.ts

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import { ref } from 'vue';
+import checkActiveSession from '@/tools/checkActiveSession';
 
 const instance = axios.create({
     baseURL: window.location.origin,
@@ -14,22 +15,27 @@ export default function useApi<T>(method: string, url: string, contentType = 'ap
             method: method,
             url: url,
             data: data,
-            headers: { 'content-type': contentType }
+            headers: {
+                'content-type': contentType
+            }
         })
-            .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;
-                }
-            });
+        .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();
+            }
+        });
     };
     return { response, request, error };
 }

src/Resources/src/components/misc/FocusAlert.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <PopupModal
+      :isOpen="isOpen"
+    >
+      <div
+        class="max-w-[300px] p-4"
+      >
+        <p
+          class="max-w-[300px] text-center align-middle font-bold"
+        >
+          __Session_abgelaufen_text_Platzhalter__
+        </p>
+        <CreateButton
+          btnText="Reload"
+          :managed=true
+          @click="isOpen = false"
+        />
+      </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';
+
+const TEN_MINUTES_MILLIS = 600000
+
+const isOpen = ref(false);
+const timestamp = ref<number>(0);
+
+onMounted(() => {
+  console.log('Mounted FocusAlert')
+  timestamp.value = Date.now();
+  window.addEventListener('focus', async () => {
+    console.log('received focus!');
+    if (Date.now() - timestamp.value > TEN_MINUTES_MILLIS) {
+      try {
+        timestamp.value = Date.now();
+        await fetch(window.location.href);
+      } catch (error) {
+        isOpen.value = true;
+      }
+    }
+  });
+});
+</script>