self destroying notifications, working on validating login form

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">

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)
         }
     }
 })

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>