feat:#4 added persistent storage option

frontend/package-lock.json

@@ -21,6 +21,7 @@
         "country-flag-emoji-polyfill": "^0.1.8",
         "ical.js": "^1.5.0",
         "pinia": "^2.1.7",
+        "pinia-plugin-persistedstate": "^3.2.1",
         "primeflex": "^3.3.1",
         "primeicons": "^6.0.1",
         "primevue": "^3.50.0",
@@ -6794,6 +6795,14 @@
         }
       }
     },
+    "node_modules/pinia-plugin-persistedstate": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.1.tgz",
+      "integrity": "sha512-MK++8LRUsGF7r45PjBFES82ISnPzyO6IZx3CH5vyPseFLZCk1g2kgx6l/nW8pEBKxxd4do0P6bJw+mUSZIEZUQ==",
+      "peerDependencies": {
+        "pinia": "^2.0.0"
+      }
+    },
     "node_modules/pinia/node_modules/vue-demi": {
       "version": "0.14.6",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",

frontend/package.json

@@ -26,6 +26,7 @@
     "country-flag-emoji-polyfill": "^0.1.8",
     "ical.js": "^1.5.0",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
     "primevue": "^3.50.0",

frontend/src/main.ts

@@ -56,12 +56,15 @@ import Calendar from "primevue/calendar";
 import i18n from "./i18n";
 import { VueQueryPlugin } from "@tanstack/vue-query";
 import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 polyfillCountryFlagEmojis();
 
 const app = createApp(App);
 const pinia = createPinia();
 
+pinia.use(piniaPluginPersistedstate)
+
 app.use(VueQueryPlugin, {
   queryClientConfig: {
     defaultOptions: {

frontend/src/store/tokenStore.ts

@@ -20,6 +20,7 @@ const tokenStore = defineStore("tokenStore", {
   state: () => ({
     token: "",
   }),
+  persist: true,
   actions: {
     setToken(token: string) {
       this.token = token;

frontend/src/view/UserCalendar.vue

@@ -3,7 +3,7 @@
 import CalendarViewer from "@/components/CalendarViewer.vue";
 import DynamicPage from "@/view/DynamicPage.vue";
 import { useI18n } from "vue-i18n";
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { extractToken } from "@/helpers/token.ts";
 import { useToast } from "primevue/usetoast";
 import moduleStore from "@/store/moduleStore.ts";
@@ -41,6 +41,11 @@ function loadCalendar() {
   tokenStore().setToken(token.value);
 }
 
+onMounted(() => {
+  if (token.value && token.value !== "") {
+    loadCalendar();
+  }
+});
 
 </script>