From 08b31860b34a9c56c2ba9c2e5cc6073987a76e3e Mon Sep 17 00:00:00 2001
From: Sockenklaus <sockenklaus@gmail.com>
Date: Sat, 23 Oct 2021 09:37:17 +0200
Subject: [PATCH] removed obsolete remember me button, added notification when
 trying to go down a protected route

---
 src/components/Notification.vue |  2 --
 src/router/index.ts             | 11 +++++++++--
 src/stores/user.ts              |  6 +++---
 src/views/Login.vue             | 14 +++-----------
 4 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/components/Notification.vue b/src/components/Notification.vue
index 846c349..3da81ab 100644
--- a/src/components/Notification.vue
+++ b/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">
diff --git a/src/router/index.ts b/src/router/index.ts
index a10df9e..a5591bf 100644
--- a/src/router/index.ts
+++ b/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.requiresAdmin && !useUser().isAdmin) return false
+  if (to.meta.requiresAuth && !useUser().isLoggedIn) {
+    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
diff --git a/src/stores/user.ts b/src/stores/user.ts
index 1ad8bf4..293aff5 100644
--- a/src/stores/user.ts
+++ b/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()
 
@@ -71,7 +71,7 @@ export const useUser = defineStore({
                 if (axios.isAxiosError(err) && err.response && err.response.data){  
 
                     const data = err.response.data as AuthErrResult
-                    
+
                     notifications.add(data.notification.type, data.notification.text)
 
                 }
@@ -116,7 +116,7 @@ export const useUser = defineStore({
         enabled: true,
         strategies: [
             {
-                storage: localStorage
+                storage: sessionStorage
             }
         ]
     }
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 91f3c02..2ed0790 100644
--- a/src/views/Login.vue
+++ b/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'})
     }