add frontend logout

frontend/website/src/stores/auth.ts

@@ -101,6 +101,20 @@ export const useAuthStore = defineStore('auth', () => {
     }
   }
 
+  async function logout(): Promise<void> {
+    try {
+      await fetch(`${API_BASE}/api/logout`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          Accept: 'application/json',
+        },
+      })
+    } finally {
+      user.value = null
+    }
+  }
+
   return {
     user,
     loading,
@@ -108,5 +122,6 @@ export const useAuthStore = defineStore('auth', () => {
     isAuthenticated,
     fetchMe,
     login,
+    logout,
   }
 })

frontend/website/src/views/DashboardView.vue

@@ -1,11 +1,23 @@
 <script setup lang="ts">
+import { useRouter } from 'vue-router'
+
 import BrandWordmark from '@/components/BrandWordmark.vue'
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+const router = useRouter()
+
+async function handleLogout(): Promise<void> {
+  await authStore.logout()
+  await router.push({ name: 'login' })
+}
 </script>
 
 <template>
   <main class="dashboard-page">
     <header>
       <BrandWordmark theme="dark" />
+      <button type="button" class="logout-button" @click="handleLogout">Log out</button>
     </header>
 
     <section>
@@ -29,10 +41,41 @@ import BrandWordmark from '@/components/BrandWordmark.vue'
 }
 
 header {
+  display: flex;
   width: min(100%, 76rem);
+  align-items: center;
+  justify-content: space-between;
   margin: 0 auto;
 }
 
+.logout-button {
+  min-height: 2.75rem;
+  padding: 0.7rem 1.1rem;
+  border: 0;
+  border-radius: 0.7rem;
+  color: #fffdf7;
+  background: #183a31;
+  box-shadow: 0 0.55rem 1.2rem rgb(24 58 49 / 14%);
+  font-size: 0.82rem;
+  font-weight: 750;
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    transform 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.logout-button:hover {
+  background: #285c4e;
+  box-shadow: 0 0.7rem 1.4rem rgb(24 58 49 / 18%);
+  transform: translateY(-1px);
+}
+
+.logout-button:focus-visible {
+  outline: 3px solid rgb(86 127 112 / 34%);
+  outline-offset: 0.25rem;
+}
+
 section {
   width: min(100%, 42rem);
   margin: clamp(6rem, 18vh, 12rem) auto 0;