From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 20 Jun 2025 12:03:47 +0000 (+0000)
Subject: frontend: Log in users when the app is being reloaded
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=3a015540d67073ce8bce560a336106c2323eaef5;p=pbs.git

frontend: Log in users when the app is being reloaded

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 478422f9..c529a52d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -4,6 +4,17 @@
 	// Authentication
 	import { useAuthStore } from '@/stores/auth'
 	const auth = useAuthStore()
+
+	// Import utils
+	import { deleteAccessToken } from "@/utils/auth";
+
+	function logout() {
+		// Drop all stored authentication data
+		auth.logout();
+
+		// Drop the current access token
+		deleteAccessToken();
+	}
 </script>
 
 <template>
@@ -33,7 +44,7 @@
 						</a>
 
 						<div class="navbar-dropdown is-boxed">
-							<a class="navbar-item" href="#" @click.prevent="auth.logout">
+							<a class="navbar-item" href="#" @click.prevent="logout">
 								{{ $t("Log Out") }}
 							</a>
 						</div>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 2302f5c8..3f61ded6 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -37,4 +37,11 @@ app.use(
 	})
 )
 
-app.mount('#app')
+// Authentication
+import { useAuthStore } from '@/stores/auth';
+const auth = useAuthStore();
+
+// Fetch authentication credentials and the mount the app
+auth.restore().finally(() => {
+	app.mount("#app")
+});
diff --git a/frontend/src/stores/auth.ts b/frontend/src/stores/auth.ts
index 9eec0946..6f5a0973 100644
--- a/frontend/src/stores/auth.ts
+++ b/frontend/src/stores/auth.ts
@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import type { User } from "@/types/User"
+import { fetchCurrentUser } from "@/utils/auth"
 
 interface AuthState {
 	user: User | null;
@@ -22,5 +23,11 @@ export const useAuthStore = defineStore("auth", {
 			this.user = null;
 			this.isLoggedIn = false;
 		},
+
+		async restore() {
+			const user: User = await fetchCurrentUser();
+			if (user)
+				this.setUser(user);
+		},
 	},
 });
diff --git a/frontend/src/utils/auth.ts b/frontend/src/utils/auth.ts
index ba3291cb..9f01302b 100644
--- a/frontend/src/utils/auth.ts
+++ b/frontend/src/utils/auth.ts
@@ -18,6 +18,10 @@ function setAccessToken(token: string): void {
 	localStorage.setItem("token", token)
 }
 
+export function deleteAccessToken(): void {
+	localStorage.removeItem("token")
+}
+
 /*
 	Takes username and password and logs in the user
 */