From c15c13fd3883f6a17a152cef4db29fba3d485649 Mon Sep 17 00:00:00 2001
From: Yisroel Baum <yisroel.d.baum@gmail.com>
Date: Mon, 3 Aug 2026 19:46:33 +0300
Subject: [PATCH] add frontend logout

---
 frontend/website/src/stores/auth.ts          | 15 +++++++
 frontend/website/src/views/DashboardView.vue | 43 ++++++++++++++++++++
 2 files changed, 58 insertions(+)

diff --git a/frontend/website/src/stores/auth.ts b/frontend/website/src/stores/auth.ts
index d720f18..fc9eef3 100644
--- a/frontend/website/src/stores/auth.ts
+++ b/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,
   }
 })
diff --git a/frontend/website/src/views/DashboardView.vue b/frontend/website/src/views/DashboardView.vue
index 90b1b1d..c61783f 100644
--- a/frontend/website/src/views/DashboardView.vue
+++ b/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;