fix: show login when session 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/stores/auth.ts

@@ -7,9 +7,11 @@ export const useAuthStore = defineStore("auth", {
   state: (): {
     user: IUser | null;
     jwt: string;
+    logoutTimer: number | null;
   } => ({
     user: null,
     jwt: "",
+    logoutTimer: null,
   }),
   getters: {
     // user and jwt getter removed, no longer needed
@@ -37,5 +39,8 @@ export const useAuthStore = defineStore("auth", {
     clearUser() {
       this.$reset();
     },
+    setLogoutTimer(logoutTimer: number | null) {
+      this.logoutTimer = logoutTimer;
+    },
   },
 });

frontend/src/utils/auth.ts

@@ -16,6 +16,17 @@ export function parseToken(token: string) {
   const authStore = useAuthStore();
   authStore.jwt = token;
   authStore.setUser(data.user);
+
+  if (authStore.logoutTimer) {
+    clearTimeout(authStore.logoutTimer);
+  }
+
+  const expiresAt = new Date(data.exp! * 1000);
+  authStore.setLogoutTimer(
+    window.setTimeout(() => {
+      logout("inactivity");
+    }, expiresAt.getTime() - Date.now())
+  );
 }
 
 export async function validateLogin() {
@@ -92,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();
@@ -102,6 +113,15 @@ 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,9 @@
     <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 +73,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();