From bc56f65abd74eea10c0677fe6231dea863b46ce9 Mon Sep 17 00:00:00 2001
From: Sockenklaus <sockenklaus@gmail.com>
Date: Sun, 24 Oct 2021 21:43:10 +0200
Subject: [PATCH] self destroying notifications, working on validating login
 form

---
 src/components/Notification.vue |  1 -
 src/stores/notifications.ts     |  4 +++-
 src/views/Login.vue             | 29 +++++++++++++++++++++++++----
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/components/Notification.vue b/src/components/Notification.vue
index 3da81ab..91518ed 100644
--- a/src/components/Notification.vue
+++ b/src/components/Notification.vue
@@ -1,5 +1,4 @@
 <template>
-
     <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/stores/notifications.ts b/src/stores/notifications.ts
index 04ac506..f14c64b 100644
--- a/src/stores/notifications.ts
+++ b/src/stores/notifications.ts
@@ -15,13 +15,15 @@ export const useNotifications = defineStore('notifications', {
         },
 
         add(type : string, text: string) : void {
+            const id = uuidv4()
             this.notifications.set(
-                uuidv4(), 
+                id, 
                 {
                     type:type,
                     text:text,
                 }
             )
+            setTimeout(() => this.remove(id), 1500)
         }
     }
 })
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 2ed0790..d8e5fa3 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,17 +1,38 @@
 <template>
     <img src="/src/assets/logo.png">
-    <form class="m-auto">
+    <form class="m-auto needs-validation" novalidate>
         <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">
+            <input 
+                type="text" 
+                class="form-control" 
+                id="usernameInput" 
+                v-model="input.username" 
+                placeholder="Benutzername" 
+                required
+            >
+
             <label for="usernameInput">Benutzername</label>
         </div>
         <div class="form-floating mb-4">
-            <input type="password" class="form-control" id="passwordInput" v-model="input.password" placeholder="Passwort">
+            <input 
+                type="password" 
+                class="form-control" 
+                id="passwordInput" 
+                v-model="input.password" 
+                placeholder="Passwort"
+                required
+            >
             <label for="passwordInput">Passwort</label>
         </div>
 
-        <button class="btn btn-lg btn-success w-100 mb-5" @click.prevent="onClick">Einloggen</button>
+        <button 
+            type="submit"
+            class="btn btn-lg btn-success w-100 mb-5" 
+            @click.prevent="onClick"
+        >
+            Einloggen
+        </button>
     </form>
 </template>