From e484ded5bee62a92030c071bc8b26e4e59a0a996 Mon Sep 17 00:00:00 2001
From: yyc12345 <yyc12321@outlook.com>
Date: Fri, 15 May 2026 09:39:15 +0800
Subject: [PATCH] feat: add logout for navbar

---
 frontend/src/App.vue         | 108 +++++++++++++++++++++++------------
 frontend/src/stores/token.ts |   1 +
 frontend/src/views/Login.vue |   2 +-
 3 files changed, 73 insertions(+), 38 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index eed4a81..01fdf47 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,58 +1,92 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import { useLanguageStore } from './stores/language';
 import { useTokenStore } from './stores/token';
+import MessageBox from '@/components/MessageBox.vue';
+import { logout as apiCommonLogout } from './api/common';
+import { goToHome } from '@/router';
 
 const language = useLanguageStore();
 const token = useTokenStore();
 
+const isBurgerActive = ref<boolean>(false);
+
+const messagebox = ref<InstanceType<typeof MessageBox> | null>(null);
+
+const logout = async () => {
+  const tokenStore = useTokenStore();
+  const rv = await apiCommonLogout(tokenStore.currentToken);
+  if (rv) {
+    // OK. We logged out.
+    // Clear token.
+    tokenStore.logout();
+    // And go to Home page
+    goToHome();
+  } else {
+    // Show logout error.
+    messagebox.value?.show("Fail to logout due to unknow reason. Consider refreshing page to solve problem.");
+  }
+}
+
+// Process burger menu.
+// This is copied from Bulma website and modified for Vue.
+// Check for click events on the navbar burger icon
+const toggleBurger = () => {
+  // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+  isBurgerActive.value = !isBurgerActive
+}
+
 </script>
 
 <template>
-    <nav class="navbar has-shadow is-spaced bd-navbar" role="navigation" aria-label="main navigation">
-      <div class="navbar-brand">
-        <router-link class="navbar-item" to="/">
-          <img src="/public/favicon.ico"><b style="margin:0 0 0 14px;">coconut-leaf</b>
-        </router-link>
+  <nav class="navbar has-shadow is-spaced bd-navbar" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <router-link class="navbar-item" to="/">
+        <img src="/public/favicon.ico"><b style="margin:0 0 0 14px;">coconut-leaf</b>
+      </router-link>
 
-        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
-          data-target="coleaf-navbar">
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-        </a>
+      <a role="button" class="navbar-burger burger" :class="{ 'is-active': isBurgerActive }" @click="toggleBurger"
+        aria-label="menu" aria-expanded="false" data-target="coleaf-navbar">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+
+    <div id="coleaf-navbar" class="navbar-menu" :class="{ 'is-active': isBurgerActive }">
+      <div class="navbar-start">
+        <router-link class="navbar-item" to="/home">Home</router-link>
+        <router-link v-if="token.isLoggedIn" class="navbar-item" to="/collection">Collection</router-link>
+        <router-link v-if="token.isLoggedIn" class="navbar-item" to="/calendar">Calendar</router-link>
+        <router-link v-if="token.isLoggedIn" class="navbar-item" to="/todo">Todo</router-link>
+        <router-link v-if="token.isLoggedIn" class="navbar-item" to="/admin">Admin</router-link>
       </div>
 
-      <div id="coleaf-navbar" class="navbar-menu">
-        <div class="navbar-start">
-          <router-link class="navbar-item" to="/home">Home</router-link>
-          <router-link v-if="token.isLoggedIn" class="navbar-item" to="/collection">Collection</router-link>
-          <router-link v-if="token.isLoggedIn" class="navbar-item" to="/calendar">Calendar</router-link>
-          <router-link v-if="token.isLoggedIn" class="navbar-item" to="/todo">Todo</router-link>
-          <router-link v-if="token.isLoggedIn" class="navbar-item" to="/admin">Admin</router-link>
-        </div>
+      <div class="navbar-end">
+        <p class="navbar-item">
+          <router-link v-if="!token.isLoggedIn" class="button is-primary" to="/login">Login</router-link>
+        </p>
+        <p class="navbar-item">
+          <a v-if="token.isLoggedIn" class="button is-primary" @click="logout">Logout</a>
+        </p>
 
-        <div class="navbar-end">
-          <p class="navbar-item">
-            <router-link v-if="!token.isLoggedIn" class="button is-primary" to="/login">Login</router-link>
-          </p>
-          <p class="navbar-item">
-            <a v-if="token.isLoggedIn" class="button is-primary">Logout</a>
-          </p>
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a v-if="language.isEnglish" class="navbar-link">English</a>
+          <a v-else-if="language.isSimplifiedChinese" class="navbar-link">简体中文</a>
 
-          <div class="navbar-item has-dropdown is-hoverable">
-            <a v-if="language.isEnglish" class="navbar-link">English</a>
-            <a v-else-if="language.isSimplifiedChinese" class="navbar-link">简体中文</a>
-
-            <div class="navbar-dropdown">
-              <a @click="language.changeToEnglish()" class="navbar-item">English</a>
-              <a @click="language.changeToSimplifiedChinese()" class="navbar-item">简体中文</a>
-            </div>
+          <div class="navbar-dropdown">
+            <a @click="language.changeToEnglish()" class="navbar-item">English</a>
+            <a @click="language.changeToSimplifiedChinese()" class="navbar-item">简体中文</a>
           </div>
         </div>
       </div>
-    </nav>
-    <!-- The output result of router -->
-    <router-view></router-view>
+    </div>
+  </nav>
+
+  <!-- The output result of router -->
+  <router-view></router-view>
+
+  <MessageBox ref="messagebox" />
 </template>
 
 <style scoped></style>
diff --git a/frontend/src/stores/token.ts b/frontend/src/stores/token.ts
index af4ce2c..0bc8876 100644
--- a/frontend/src/stores/token.ts
+++ b/frontend/src/stores/token.ts
@@ -11,6 +11,7 @@ export const useTokenStore = defineStore('token', {
 
   getters: {
     isLoggedIn: (state) => typeof state.token === 'string',
+    currentToken: (state) => state.token as string,
   },
 
   actions: {
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index 27b59fb..e311a83 100644
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import MessageBox from '@/components/MessageBox.vue';
 import { useTokenStore } from '@/stores/token';
+import MessageBox from '@/components/MessageBox.vue';
 import { webLogin as apiCommonWebLogin } from '@/api/common';
 import { goToHome } from '@/router';