Better validation on text fields, change AlertBanner to Snackbar

software/src/pages/loginPage/loginForm.vue

@@ -9,10 +9,28 @@ const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, defaul
 const loginInProgress = ref(false)
 const username = ref("duranduran")
 const password = ref("H4nn0ver")
+const usernameWrong = ref(false)
+const passwordWrong = ref(false)
 
 async function startLogin() {
   loginInProgress.value = true
-  await accountStore.login(username.value, password.value)
+  usernameWrong.value = false
+  passwordWrong.value = false
+
+  if (username.value == null || username.value.length == 0) {
+    usernameWrong.value = true
+  } 
+
+  if (password.value == null || password.value.length == 0) {
+    passwordWrong.value = true
+  }
+
+  if (username.value != null && username.value.length > 0 && 
+    password.value != null && password.value.length > 0)
+  {
+    await accountStore.login(username.value, password.value)
+  }
+
   loginInProgress.value = false
 }
 </script>
@@ -21,14 +39,26 @@ async function startLogin() {
   <card-view :title="$t('menu.login')" prepend-icon="mdi-login" elevation="8">
     <v-row>
       <v-col>
-        <v-text-field :label="$t('account.username')" prepend-icon="mdi-account" clearable v-model="username"/>
+        <v-text-field
+          :label="$t('account.username')"
+          prepend-icon="mdi-account"
+          v-model="username"
+          :error="usernameWrong"
+          clearable
+        />
       </v-col>
     </v-row>
 
     <v-row>
       <v-col>
-        <v-text-field :label="$t('account.password')" prepend-icon="mdi-key" type="password" 
-          clearable v-model="password" />
+        <v-text-field
+          :label="$t('account.password')"
+          prepend-icon="mdi-key"
+          type="password" 
+          v-model="password"
+          :error="passwordWrong"
+          clearable
+        />
       </v-col>
     </v-row>