feat: add logout for navbar

frontend/src/App.vue

@@ -1,10 +1,41 @@
 <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>
@@ -14,15 +45,15 @@ const token = useTokenStore();
         <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">
+      <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">
+    <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>
@@ -36,7 +67,7 @@ const token = useTokenStore();
           <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>
+          <a v-if="token.isLoggedIn" class="button is-primary" @click="logout">Logout</a>
         </p>
 
         <div class="navbar-item has-dropdown is-hoverable">
@@ -51,8 +82,11 @@ const token = useTokenStore();
       </div>
     </div>
   </nav>
+
   <!-- The output result of router -->
   <router-view></router-view>
+
+  <MessageBox ref="messagebox" />
 </template>
 
 <style scoped></style>

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: {

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';