feat(auth): display message on login when token expires

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;

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": {

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",
+      });
+    }
+    
   }
 }

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>