Bugfix/#264703 login redirect

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 />
+    <SessionCheckerPopup />
     <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 SessionCheckerPopup from '@/components/misc/SessionCheckerPopup.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,20 +15,25 @@ 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;
+                } else if (err.status === null || err.status === undefined) {
+                    checkActiveSession();
                 }
             });
     };

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;
+}