feat: disable navigation to some pages if there is no user logged in

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useLanguageStore } from './stores/i18n';
+import { useLanguageStore } from './stores/language';
 import { useTokenStore } from './stores/token';
 
 const language = useLanguageStore();

frontend/src/router/index.ts

@@ -1,23 +1,29 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { useTokenStore } from '@/stores/token'
 
 import Home from '../views/Home.vue'
 import Collection from '@/views/Collection.vue'
 import Calendar from '@/views/Calendar.vue'
+import CalendarEvent from '@/views/CalendarEvent.vue'
 import Todo from '@/views/Todo.vue'
 import Admin from '@/views/Admin.vue'
+import Login from '@/views/Login.vue'
 
 import NotFound from '@/views/NotFound.vue'
 
 const routes = [
-  { path: '/home', component: Home },
-  { path: '/collection', component: Collection },
-  { path: '/calendar', component: Calendar},
-  { path: '/todo', component: Todo},
-  { path: '/admin', component: Admin },
+  { path: '/home', name: "Home", component: Home },
+  { path: '/collection', name: "Collection", meta: { requireLoggedInCheck: true }, component: Collection },
+  { path: '/calendar', name: "Calendar", meta: { requireLoggedInCheck: true }, component: Calendar },
+  { path: '/todo', name: "Todo", meta: { requireLoggedInCheck: true }, component: Todo },
+  { path: '/admin', name: "Admin", meta: { requireLoggedInCheck: true }, component: Admin },
 
-  { path: '/404', component: NotFound },
+  { path: '/calendar/event', name: "CalendarEvent", meta: { requireLoggedInCheck: true }, component: CalendarEvent },
+  { path: '/login', name: "Collection", meta: { requireLoggedOutCheck: true }, component: Login },
 
-  { path: '/', redirect: '/home' },
+  { path: '/404', name: "NotFound", component: NotFound },
+
+  { path: '/', name: "Default", redirect: '/home' },
   { path: '/:pathMatch(.*)*', redirect: '/404' },
 ];
 
@@ -26,4 +32,20 @@ const router = createRouter({
   routes: routes,
 });
 
+router.beforeEach((to, from) => {
+  // Only check for those flagged.
+  const token = useTokenStore();
+  if (to.meta.requireLoggedInCheck) {
+    if (!token.isLoggedIn) {
+      return { name: 'Default', replace: true };
+    }
+  } else if (to.meta.requireLoggedOutCheck) {
+    if (token.isLoggedIn) {
+      return { name: 'Default', replace: true };
+    }
+  } else {
+    return true;
+  }
+})
+
 export default router

frontend/src/views/CalendarEvent.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Congratulations</h1>
+  <p>This is calendar event.</p>
+</template>
+
+<style scoped></style>

frontend/src/views/Home.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="container">
+  <div class="container" style="margin-top: 1.25rem;">
     <article>
       <h1 class="title">coconut-leaf</h1>
       <p>A light, self-host and multi-account calendar system.</p>
@@ -13,8 +13,4 @@
   </div>
 </template>
 
-<style scoped>
-div.container {
-  margin-top: 1.25rem;
-}
-</style>
+<style scoped></style>

frontend/src/views/Login.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Congratulations</h1>
+  <p>This is login.</p>
+</template>
+
+<style scoped></style>