Added Pinia account state tracking. Also modified router to go to Start if no account is defined.

src/main.ts

@@ -3,8 +3,7 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import "./registerServiceWorker";
 import router from "./router";
-import store from "./store";
-
+import { useAccountStore } from "./store/account";
 import "./assets/styles/tailwind.css";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
@@ -50,7 +49,6 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 createApp(App)
   .component("fa", FontAwesomeIcon)
-  .use(store)
   .use(createPinia())
   .use(router)
   .mount("#app");

src/router/index.ts

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
+import { useAccountStore } from "../store/account";
 import HomeView from "../views/HomeView.vue";
 
 const routes: Array<RouteRecordRaw> = [
@@ -109,4 +110,14 @@ const router = createRouter({
   routes,
 });
 
+router.beforeEach(async (to) => {
+  // redirect to start page if no account
+  const publicPages = ["/start"];
+  const authRequired = !publicPages.includes(to.path);
+  const authStore = useAccountStore();
+
+  if (authRequired && !authStore.account) {
+    return "/start";
+  }
+});
 export default router;

src/store/account.ts

@@ -4,16 +4,19 @@ import { defineStore } from "pinia";
 export const useAccountStore = defineStore({
   id: "account",
   state: () => ({
-    firstName: "",
-    lastName: "",
+    account: JSON.parse(
+      typeof localStorage["account"] == "undefined"
+        ? null
+        : localStorage["account"]
+    ),
   }),
-
+  getters: {
+    firstName: (state) => state.account.firstName,
+    lastName: (state) => state.account.lastName,
+  },
   actions: {
     reset() {
-      this.$patch({
-        firstName: "",
-        lastName: "",
-      });
+      localStorage.removeItem("account");
     },
   },
 });

src/store/index.ts

@@ -1,9 +0,0 @@
-import { createStore } from "vuex";
-
-export default createStore({
-  state: {},
-  getters: {},
-  mutations: {},
-  actions: {},
-  modules: {},
-});