From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 20 Jun 2025 13:17:49 +0000 (+0000)
Subject: frontend: Make authentication a composable
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=00d8c633f5b8a149afff4ddc4255a645e9682858;p=pbs.git

frontend: Make authentication a composable

This should allow us to re-use the code better.

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

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 54fb2e57..84d56491 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -2,19 +2,8 @@
 	import { RouterLink, RouterView } from "vue-router"
 
 	// 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();
-	}
+	import { useAuth } from "@/composables/auth";
+	const auth = useAuth();
 </script>
 
 <template>
@@ -36,17 +25,17 @@
 				</div>
 
 				<div class="navbar-end">
-					<RouterLink to="/login" class="navbar-item" v-if="!auth.isLoggedIn">
+					<RouterLink to="/login" class="navbar-item" v-if="!auth.isLoggedIn.value">
 						{{ $t("Login") }}
 					</RouterLink>
 
 					<div v-else class="navbar-item has-dropdown is-hoverable">
 						<a class="navbar-link" href="#">
-							{{ auth.user?.name }}
+							{{ auth.user.value?.name }}
 						</a>
 
 						<div class="navbar-dropdown is-boxed">
-							<a class="navbar-item" href="#" @click.prevent="logout">
+							<a class="navbar-item" href="#" @click.prevent="auth.logout">
 								{{ $t("Log Out") }}
 							</a>
 						</div>
diff --git a/frontend/src/utils/auth.ts b/frontend/src/api/auth.ts
similarity index 93%
rename from frontend/src/utils/auth.ts
rename to frontend/src/api/auth.ts
index 9f01302b..2c56d1c8 100644
--- a/frontend/src/utils/auth.ts
+++ b/frontend/src/api/auth.ts
@@ -26,7 +26,7 @@ export function deleteAccessToken(): void {
 	Takes username and password and logs in the user
 */
 
-export async function login(username: string, password: string): Promise<User> {
+export async function authenticateUser(username: string, password: string): Promise<User> {
 	const response = await fetch("/api/v1/auth/user", {
 		method : "POST",
 
diff --git a/frontend/src/composables/auth.ts b/frontend/src/composables/auth.ts
new file mode 100644
index 00000000..9021be7f
--- /dev/null
+++ b/frontend/src/composables/auth.ts
@@ -0,0 +1,40 @@
+import { computed } from "vue";
+
+// Import types
+import type { User } from "@/types/User";
+
+// Authentication Store
+import { useAuthStore } from "@/stores/auth";
+
+// Import API
+import { authenticateUser, deleteAccessToken } from "@/api/auth";
+
+export function useAuth() {
+	const store = useAuthStore();
+
+	// Logs in the user
+	async function login(username: string, password: string) {
+		const user: User = await authenticateUser(username, password);
+		if (user)
+			store.setUser(user);
+	}
+
+	// Logs out the user
+	async function logout() {
+		// Drop all stored authentication data
+		store.logout();
+
+		// Drop the current access token
+		deleteAccessToken();
+	}
+
+	return {
+		// Methods
+		login  : login,
+		logout : logout,
+
+		// Store properties
+		user       : computed(() => store.user),
+		isLoggedIn : computed(() => store.isLoggedIn),
+	}
+}
diff --git a/frontend/src/stores/auth.ts b/frontend/src/stores/auth.ts
index 6f5a0973..af7a1fdc 100644
--- a/frontend/src/stores/auth.ts
+++ b/frontend/src/stores/auth.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import type { User } from "@/types/User"
-import { fetchCurrentUser } from "@/utils/auth"
+import { fetchCurrentUser } from "@/api/auth"
 
 interface AuthState {
 	user: User | null;
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index d1e5cf34..da2266fd 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -9,19 +9,13 @@
 	import { useRouter } from "vue-router"
 	const router = useRouter()
 
-	// Import types
-	import type { User } from "@/types/User"
-
-	// Import utils
-	import { login } from "@/utils/auth"
+	// Import composables
+	import { useAuth } from "@/composables/auth";
+	const auth = useAuth();
 
 	// Import components
 	import Notification from "../components/Notification.vue"
 
-	// Authentication Store
-	import { useAuthStore } from '@/stores/auth';
-	const auth = useAuthStore();
-
 	// Error string shown to the user in case something went wrong
 	const error = ref<string | null>(null)
 
@@ -29,15 +23,13 @@
 	const username = ref<string>("")
 	const password = ref<string>("")
 
-	async function submit() {
+	async function login() {
 		// Reset the error
 		error.value = null
 
 		try {
 			// Perform login
-			const user: User = await login(username.value, password.value);
-			if (user)
-				auth.setUser(user);
+			await auth.login(username.value, password.value);
 
 			// Redirect back to the index page
 			router.push("/")
@@ -60,7 +52,7 @@
 						{{ error }}
 					</Notification>
 
-					<form @submit.prevent="submit">
+					<form @submit.prevent="login">
 						<div class="field">
 							<p class="control has-icons-left">
 								<input class="input" type="text" v-model="username"