removed obsolete remember me button, added notification when trying to go down a protected route

src/components/Notification.vue

@@ -1,7 +1,5 @@
 <template>
 
-    {{notifications}}
-
     <transition-group name="toasts" tag="div" class="toast-container position-absolute top-0 start-50 mt-3 translate-middle-x">
         <div v-for="(note) in notifications" :key="note[0]" class="show toast border-0 text-white" :class="`bg-${note[1].type}`" role="alert" aria-live="assertive" aria-atomic="true">
             <div class="d-flex">

src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import { useUser } from '@/stores/user'
+import { useNotifications } from '@/stores/notifications'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -33,8 +34,14 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from) => {
-  if (to.meta.requiresAuth && !useUser().isLoggedIn) return '/login'
+  if (to.meta.requiresAuth && !useUser().isLoggedIn) {
-  if (to.meta.requiresAdmin && !useUser().isAdmin) return false
+    useNotifications().add('danger', `You are not allowed to go down this route!`)
+    return '/login'
+  }
+  if (to.meta.requiresAdmin && !useUser().isAdmin) {
+    useNotifications().add('danger', `You are not allowed to go down this route!`)
+    return false
+  }
 })
 
 export default router

src/stores/user.ts

@@ -47,7 +47,7 @@ export const useUser = defineStore({
     },
 
     actions: {
-        async login(username: string, password: string, rememberMe: boolean): Promise<boolean> {
+        async login(username: string, password: string): Promise<boolean> {
         
             const notifications = useNotifications()
 
@@ -116,7 +116,7 @@ export const useUser = defineStore({
         enabled: true,
         strategies: [
             {
-                storage: localStorage
+                storage: sessionStorage
             }
         ]
     }

src/views/Login.vue

@@ -1,23 +1,16 @@
 <template>
     <img src="/src/assets/logo.png">
     <form class="m-auto">
-        <h1 class="h3 mb-3">Bitte einloggen</h1>
+        <h1 class="h3 mb-4">Bitte einloggen</h1>
         <div class="form-floating">
             <input type="text" class="form-control" id="usernameInput" v-model="input.username" placeholder="Benutzername">
             <label for="usernameInput">Benutzername</label>
         </div>
-        <div class="form-floating">
+        <div class="form-floating mb-4">
             <input type="password" class="form-control" id="passwordInput" v-model="input.password" placeholder="Passwort">
             <label for="passwordInput">Passwort</label>
         </div>
 
-        <div class="form-check my-3 mx-auto" style="width: 170px">
-            <input class="form-check-input" v-model="input.rememberMe" type="checkbox" id="rememberMeCheckbox">
-            <label for="rememberMeCheckbox" class="form-check-label">
-                Eingeloggt bleiben
-            </label>
-        </div>
-
         <button class="btn btn-lg btn-success w-100 mb-5" @click.prevent="onClick">Einloggen</button>
     </form>
 </template>
@@ -34,12 +27,11 @@ const router = useRouter()
 const input = reactive({
     username: '',
     password: '',
-    rememberMe: false
 })
 
 async function onClick() {
     /**TODO #20 Use sessionStorage or localStorage based on rememberMe! */
-    if(await userStore.login(input.username, input.password, input.rememberMe)) {
+    if(await userStore.login(input.username, input.password)) {
         router.push({name: 'Home'})
     }