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 54fb2e5799ecd1689b7236c9ddf3dac11b8d2793..84d56491f35f5d69be09309107eced5e4aad38c7 100644 (file)
--- 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 9f01302b0a8a3215cc84c05fbf1d50f2a3c24128..2c56d1c8bbc102a46173b5b1619121bf7854efaa 100644 (file)
--- 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 (file)
index 0000000..9021be7
--- /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 6f5a097321db204ff81658482e06703061ec0d56..af7a1fdc9fcfc888129a3b8525b8f159d41c1236 100644 (file)
--- 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 d1e5cf3465c3696d1ebb4823618f779d3548a379..da2266fd55dad29b3334b63f4ecaf91b45e460dc 100644 (file)
--- 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"