Added vuelidate to Login-form

src/views/EmployeesDetails.vue

@@ -207,10 +207,6 @@ function onToggleEdit() {
     state.reset()
 }
 
-function onCreateUser() {
-    createUser.value = true
-}
-
 watch(() => [route.params, route.name], ([newParam, newName], [oldParam, oldName]) => {
     if(newName === oldName && newParam !== oldParam) {
         state.fetchFromApi(route.params.id)

src/views/Login.vue

@@ -1,36 +1,39 @@
 <template>
     <img src="/src/assets/logo.png">
+
     <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"
+                :class="classIsInvalid(v$.username)"
                 id="usernameInput" 
                 v-model="input.username" 
                 placeholder="Benutzername" 
                 aria-labeledby="username-feedback"
             >
-            <label id="username-feedback" for="usernameInput">Benutzername</label>
-             <div class="invalid-feedback">
-                {{valMessages.username}}
-            </div>
+            <label 
+                id="username-feedback" 
+                for="usernameInput"
+                :style="styleIsInvalid(v$.username)"
+            >{{ v$.username.$errors[0] ? v$.username.$errors[0].$message : 'Benutzername' }}</label>
         </div>
         <div class="form-floating mb-4">
             <input 
                 type="password" 
                 class="form-control" 
-                :class="validation.password"
+                :class="classIsInvalid(v$.password)"
                 id="passwordInput" 
                 v-model="input.password" 
                 placeholder="Passwort"
                 aria-describedby="passwordFeedback"
             >
-            <label for="passwordInput">Passwort</label>
-            <div id="passwordFeedback" class="invalid-feedback">
-                {{valMessages.password}}
-            </div>
+            <label 
+                for="passwordInput" 
+                :style=" styleIsInvalid(v$.password) "
+            >{{ v$.password.$errors[0] ? v$.password.$errors[0].$message : 'Passwort' }}</label>
+
         </div>
 
         <button 
@@ -45,54 +48,48 @@
 
 <script setup lang="ts">
 import { useUser } from '@/stores/user'
-import { reactive, watch } from 'vue'
+import { reactive, computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
+import useVuelidate from '@vuelidate/core'
+import { helpers, required } from '@vuelidate/validators'
 
 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
+const valPasswordCorrect = () => {
+    return apiResponse.value !== 'E_INVALID_AUTH_PASSWORD: Password mis-match'
+}
+const valUsernameCorrect = () => {
+    return apiResponse.value !== 'E_INVALID_AUTH_UID: User not found'
+}
+
+const rules = computed(() => ({
+    username: {
+        required: helpers.withMessage("Benutzername erforderlich.", required),
+        valUsernameCorrect: helpers.withMessage('Benutzername nicht gefunden.', valUsernameCorrect)
+    },
+    password: {
+        required: helpers.withMessage("Passwort erforderlich.", required),
+        valPasswordCorrect: helpers.withMessage('Passwort falsch.', valPasswordCorrect)
+    }
+}))
+
+watch(input, () => {
+    apiResponse.value = ''
+    v$.value.$reset()
 })
 
+const v$ = useVuelidate(rules, input)
+
+const apiResponse = ref('')
+
 async function onClick() { 
-    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
+    if(!(await v$.value.$validate())) return
 
     const result = await userStore.login(input.username, input.password)
     
@@ -100,27 +97,23 @@ async function onClick() {
         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'
+        case false:
             break;
+        default:
+            apiResponse.value = result
     }
-
 }
 
-const resetFailureState = () => {
-    validation.failure = false
-    validation.password['is-invalid'] = false
-    validation.username['is-invalid'] = false
-    valMessages.password = ''
-    valMessages.username = ''
+function classIsInvalid(object: any) : string {
+    return object.$dirty && object.$invalid ? 'is-invalid' : ''
 }
 
-
+function styleIsInvalid(object: any) : string {
+    if(object.$error){
+        return 'color: red'
+    }
+    return ''
+}
     
 </script>