From a5aab746b02b831f0c777b4947de8ba602989321 Mon Sep 17 00:00:00 2001
From: Felix Ruf <felix.ruf@aoe.com>
Date: Wed, 10 Jul 2024 17:34:01 +0200
Subject: [PATCH 1/2] updated faulty method signiture, added automatic
 reloading on session timeout, added popup to indicate a session timeout

---
 .../UserBundle/Resources/config/routing.yml   |  4 +-
 src/Resources/src/App.vue                     |  2 +
 src/Resources/src/api/api.ts                  | 36 ++++++++------
 .../src/components/misc/FocusAlert.vue        | 49 +++++++++++++++++++
 4 files changed, 74 insertions(+), 17 deletions(-)
 create mode 100644 src/Resources/src/components/misc/FocusAlert.vue

diff --git a/src/Mealz/UserBundle/Resources/config/routing.yml b/src/Mealz/UserBundle/Resources/config/routing.yml
index 504cea5e3..b8bf6a162 100644
--- a/src/Mealz/UserBundle/Resources/config/routing.yml
+++ b/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
\ No newline at end of file
diff --git a/src/Resources/src/App.vue b/src/Resources/src/App.vue
index 0f0447361..e7d41d321 100644
--- a/src/Resources/src/App.vue
+++ b/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();
diff --git a/src/Resources/src/api/api.ts b/src/Resources/src/api/api.ts
index d2691a515..ea109fd9e 100644
--- a/src/Resources/src/api/api.ts
+++ b/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 };
 }
diff --git a/src/Resources/src/components/misc/FocusAlert.vue b/src/Resources/src/components/misc/FocusAlert.vue
new file mode 100644
index 000000000..9506946b1
--- /dev/null
+++ b/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>
\ No newline at end of file

From ddc29ea79739c0ec85f27f13e4d9d82388f8a4c3 Mon Sep 17 00:00:00 2001
From: Felix Ruf <felix.ruf@aoe.com>
Date: Thu, 11 Jul 2024 09:59:38 +0200
Subject: [PATCH 2/2] added text and styling to SessionCheckerPopup, exported
 session checking from checkActiveSession

---
 src/Resources/src/App.vue                     |  4 +-
 src/Resources/src/api/api.ts                  | 32 +++++-----
 .../src/components/misc/FocusAlert.vue        | 49 ----------------
 .../components/misc/SessionCheckerPopup.vue   | 58 +++++++++++++++++++
 src/Resources/src/locales/de.json             |  5 +-
 src/Resources/src/locales/en.json             |  7 ++-
 src/Resources/src/tools/checkActiveSession.ts | 11 +++-
 7 files changed, 93 insertions(+), 73 deletions(-)
 delete mode 100644 src/Resources/src/components/misc/FocusAlert.vue
 create mode 100644 src/Resources/src/components/misc/SessionCheckerPopup.vue

diff --git a/src/Resources/src/App.vue b/src/Resources/src/App.vue
index e7d41d321..3eab9ffe4 100644
--- a/src/Resources/src/App.vue
+++ b/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();
diff --git a/src/Resources/src/api/api.ts b/src/Resources/src/api/api.ts
index ea109fd9e..3f3fcdbd7 100644
--- a/src/Resources/src/api/api.ts
+++ b/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 };
 }
diff --git a/src/Resources/src/components/misc/FocusAlert.vue b/src/Resources/src/components/misc/FocusAlert.vue
deleted file mode 100644
index 9506946b1..000000000
--- a/src/Resources/src/components/misc/FocusAlert.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/Resources/src/components/misc/SessionCheckerPopup.vue b/src/Resources/src/components/misc/SessionCheckerPopup.vue
new file mode 100644
index 000000000..8a8811b5b
--- /dev/null
+++ b/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>
diff --git a/src/Resources/src/locales/de.json b/src/Resources/src/locales/de.json
index 39b24191a..96e9846cb 100644
--- a/src/Resources/src/locales/de.json
+++ b/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",
diff --git a/src/Resources/src/locales/en.json b/src/Resources/src/locales/en.json
index e18ce5f16..fa492e768 100644
--- a/src/Resources/src/locales/en.json
+++ b/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"
 }
diff --git a/src/Resources/src/tools/checkActiveSession.ts b/src/Resources/src/tools/checkActiveSession.ts
index 003a9a57e..195dce46f 100644
--- a/src/Resources/src/tools/checkActiveSession.ts
+++ b/src/Resources/src/tools/checkActiveSession.ts
@@ -2,8 +2,8 @@ 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) {
@@ -11,9 +11,14 @@ export default async function checkActiveSession(stringToStore: string | null =
     }
 }
 
-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;
+}