From 03664c61ba3275792e7fede7bd84a861c835ee81 Mon Sep 17 00:00:00 2001
From: ArielLeyva <msomnium.info@gmail.com>
Date: Wed, 17 Sep 2025 14:03:20 -0400
Subject: [PATCH] feat(auth): display message on login when token expires

---
 frontend/src/css/login.css   |  9 +++++++++
 frontend/src/i18n/en.json    |  5 ++++-
 frontend/src/utils/auth.ts   | 16 +++++++++++++---
 frontend/src/views/Login.vue |  5 ++++-
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/frontend/src/css/login.css b/frontend/src/css/login.css
index 14bfd1a5..62150ee6 100644
--- a/frontend/src/css/login.css
+++ b/frontend/src/css/login.css
@@ -45,6 +45,15 @@
   animation: 0.2s opac forwards;
 }
 
+#login .logout-message {
+  background: var(--icon-orange);
+  color: #fff;
+  padding: 0.5em;
+  text-align: center;
+  animation: 0.2s opac forwards;
+  text-transform: none;
+}
+
 @keyframes opac {
   0% {
     opacity: 0;
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 4070619d..9411d91e 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -101,7 +101,10 @@
     "submit": "Login",
     "username": "Username",
     "usernameTaken": "Username already taken",
-    "wrongCredentials": "Wrong credentials"
+    "wrongCredentials": "Wrong credentials",
+    "logout_reasons": {
+      "inactivity": "You have been logged out due to inactivity."
+    }
   },
   "permanent": "Permanent",
   "prompts": {
diff --git a/frontend/src/utils/auth.ts b/frontend/src/utils/auth.ts
index 114b5edb..b790990b 100644
--- a/frontend/src/utils/auth.ts
+++ b/frontend/src/utils/auth.ts
@@ -24,7 +24,7 @@ export function parseToken(token: string) {
   const expiresAt = new Date(data.exp! * 1000);
   authStore.setLogoutTimer(
     window.setTimeout(() => {
-      logout();
+      logout('inactivity');
     }, expiresAt.getTime() - Date.now())
   );
 }
@@ -103,7 +103,7 @@ export async function signup(username: string, password: string) {
   }
 }
 
-export function logout() {
+export function logout(reason?: string) {
   document.cookie = "auth=; Max-Age=0; Path=/; SameSite=Strict;";
 
   const authStore = useAuthStore();
@@ -113,6 +113,16 @@ export function logout() {
   if (noAuth) {
     window.location.reload();
   } else {
-    router.push({ path: "/login" });
+    if(typeof reason === "string" && reason.trim() !== "") {
+      router.push({ 
+        path: "/login", 
+        query: { "logout-reason": reason }
+      });
+    } else {
+      router.push({ 
+        path: "/login",
+      });
+    }
+    
   }
 }
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index 5804789a..03e5ea4a 100644
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -3,6 +3,7 @@
     <form @submit="submit">
       <img :src="logoURL" alt="File Browser" />
       <h1>{{ name }}</h1>
+      <p v-if="reason != null" class="logout-message">{{t(`login.logout_reasons.${reason}`)}}</p>
       <div v-if="error !== ''" class="wrong">{{ error }}</div>
 
       <input
@@ -70,6 +71,8 @@ const toggleMode = () => (createMode.value = !createMode.value);
 
 const $showError = inject<IToastError>("$showError")!;
 
+const reason = route.query['logout-reason'] ?? null;
+
 const submit = async (event: Event) => {
   event.preventDefault();
   event.stopPropagation();
@@ -124,4 +127,4 @@ onMounted(() => {
     });
   });
 });
-</script>
+</script>
\ No newline at end of file