feat: add persist feature for frontend

frontend/src/App.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { useLanguageStore } from './stores/global';
+import { useLanguageStore } from './stores/i18n';
+import { useTokenStore } from './stores/token';
 
 const language = useLanguageStore();
+const token = useTokenStore();
 
 </script>
 
@@ -23,18 +25,18 @@ const language = useLanguageStore();
       <div id="coleaf-navbar" class="navbar-menu">
         <div class="navbar-start">
           <router-link class="navbar-item" to="/home">Home</router-link>
-          <router-link class="navbar-item" to="/collection">Collection</router-link>
-          <router-link class="navbar-item" to="/calendar">Calendar</router-link>
-          <router-link class="navbar-item" to="/todo">Todo</router-link>
-          <router-link class="navbar-item" to="/admin">Admin</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">
-            <a class="button is-primary" href="/login">Login</a>
+            <router-link v-if="!token.isLoggedIn" class="button is-primary" to="/login">Login</router-link>
           </p>
           <p class="navbar-item">
-            <a class="button is-primary">Logout</a>
+            <a v-if="token.isLoggedIn" class="button is-primary">Logout</a>
           </p>
 
           <div class="navbar-item has-dropdown is-hoverable">

frontend/src/main.ts

@@ -1,14 +1,17 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 import App from './App.vue'
 import router from './router'
 
 import '../public/index.scss'
 
-const app = createApp(App)
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
 
-app.use(createPinia())
-app.use(router)
+const app = createApp(App);
+app.use(pinia);
+app.use(router);
 
-app.mount('#app')
+app.mount('#app');

frontend/src/stores/i18n.ts

@@ -1,9 +1,12 @@
-import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import { Language } from '@/utils/i18n'
 
+interface LanguageState {
+  language: Language
+}
+
 export const useLanguageStore = defineStore('language', {
-  state: () => ({
+  state: (): LanguageState => ({
     language: Language.English
   }),
 
@@ -23,4 +26,10 @@ export const useLanguageStore = defineStore('language', {
       this.changeLanguage(Language.SimplifiedChinese);
     },
   },
+
+  persist: {
+    key: 'ccn-i18n',
+    storage: localStorage,
+    pick: ['language'],
+  },
 })

frontend/src/stores/token.ts

@@ -0,0 +1,30 @@
+import { defineStore } from 'pinia'
+
+interface TokenState {
+    token: string | null
+}
+
+export const useTokenStore = defineStore('token', {
+  state: (): TokenState => ({
+    token: null,
+  }),
+
+  getters: {
+    isLoggedIn: (state) => typeof state.token === 'string',
+  },
+
+  actions: {
+    login(token: string) {
+        this.token = token;
+    },
+    logout() {
+        this.token = null;
+    },
+  },
+
+  persist: {
+    key: 'ccn-token',
+    storage: localStorage,
+    pick: ['token'],
+  },
+})