finished login form validation and self-destroying notifications

src/views/Login.vue

@@ -1,29 +1,36 @@
 <template>
     <img src="/src/assets/logo.png">
-    <form class="m-auto needs-validation" novalidate>
+    <form class="m-auto" novalidate>
         <h1 class="h3 mb-4">Bitte einloggen</h1>
         <div class="form-floating">
             <input 
                 type="text" 
                 class="form-control" 
+                :class="validation.username"
                 id="usernameInput" 
                 v-model="input.username" 
                 placeholder="Benutzername" 
-                required
+                aria-labeledby="username-feedback"
             >
-
-            <label for="usernameInput">Benutzername</label>
+            <label id="username-feedback" for="usernameInput">Benutzername</label>
+             <div class="invalid-feedback">
+                {{valMessages.username}}
+            </div>
         </div>
         <div class="form-floating mb-4">
             <input 
                 type="password" 
                 class="form-control" 
+                :class="validation.password"
                 id="passwordInput" 
                 v-model="input.password" 
                 placeholder="Passwort"
-                required
+                aria-describedby="passwordFeedback"
             >
             <label for="passwordInput">Passwort</label>
+            <div id="passwordFeedback" class="invalid-feedback">
+                {{valMessages.password}}
+            </div>
         </div>
 
         <button 
@@ -38,25 +45,83 @@
 
 <script setup lang="ts">
 import { useUser } from '@/stores/user'
-import { reactive } from 'vue'
+import { truncate } from 'fs/promises'
+import { reactive, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 const userStore = useUser()
-
 const router = useRouter()
 
+const validation = reactive({
+    failure: false,
+    username: {
+        'is-invalid': false,
+    },
+    password: {
+        'is-invalid': false
+    }
+})
+
+const valMessages = reactive({
+    username: '',
+    password: ''
+})
+
 const input = reactive({
     username: '',
     password: '',
 })
 
+watch(() => input.username, (username) => {
+    if(username.length > 0) validation.username['is-invalid'] = false
+})
+watch(() => input.password, (password) => {
+    if(password.length > 0) validation.password['is-invalid'] = false
+})
+
 async function onClick() {
-    /**TODO #20 Use sessionStorage or localStorage based on rememberMe! */
-    if(await userStore.login(input.username, input.password)) {
-        router.push({name: 'Home'})
-    }
+    resetFailureState()
     
+    if(input.username === '') {
+        validation.username['is-invalid'] = true
+        valMessages.username = 'Benutzername kann nicht leer sein.'
+        validation.failure = true
+    }
+    if(input.password === ''){
+        validation.password['is-invalid'] = true
+        valMessages.password = 'Passwort kann nicht leer sein'
+        validation.failure = true
+    }
+
+    if(validation.failure) return
+
+    const result = await userStore.login(input.username, input.password)
+
+    switch(result) {
+        case true:
+            router.push({name: 'Home'})
+            break;
+        case 'E_INVALID_AUTH_PASSWORD: Password mis-match':
+            validation.password['is-invalid'] = true
+            valMessages.password = 'Passwort falsch.'
+            break;
+        case 'E_INVALID_AUTH_UID: User not found':
+            validation.username['is-invalid'] = true
+            valMessages.username = 'Benutzer nicht gefunden'
+            break;
+    }
+
 }
+
+const resetFailureState = () => {
+    validation.failure = false
+    validation.password['is-invalid'] = false
+    validation.username['is-invalid'] = false
+    valMessages.password = ''
+    valMessages.username = ''
+}
+
+
     
 </script>