Use same pattern for form validation

dashboard/src/components/PasswordChangeDialog.vue

@@ -15,16 +15,18 @@ const newPassword = ref('');
 const newPasswordRepeat = ref('');
 const password = ref('');
 
-const isFormValid = computed(() => {
-  if (!newPassword.value) return false;
-  if (newPasswordRepeat.value !== newPassword.value) return false;
-  if (!password.value) return false;
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
 
-  return true;
-});
+  if (isFormValid.value) {
+      if (newPasswordRepeat.value !== newPassword.value) isFormValid.value = false;
+  }
+}
 
 async function onSubmit() {
-  if (!isFormValid.value) return;
+  if (!form.value.reportValidity()) return;
 
   busy.value = true;
   formError.value = {};
@@ -58,6 +60,8 @@ defineExpose({
     busy.value = false;
     formError.value = {};
     dialog.value.open();
+
+    setTimeout(checkValidity, 100); // update state of the confirm button
   }
 });
 
@@ -75,27 +79,27 @@ defineExpose({
      reject-style="secondary"
      @confirm="onSubmit"
   >
-    <form @submit.prevent="onSubmit">
+    <form @submit.prevent="onSubmit" autocomplete="off" ref="form"  @input="checkValidity()">
       <fieldset :disabled="busy">
-        <input type="submit" style="display: none;" :disabled="!isFormValid"/>
+        <input type="submit" style="display: none;">
 
         <div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
 
         <FormGroup :has-error="formError.newPassword">
           <label>{{ $t('profile.changePassword.newPassword') }}</label>
-          <PasswordInput v-model="newPassword" />
+          <PasswordInput v-model="newPassword" required/>
           <div class="error-label" v-if="formError.newPassword">{{ formError.newPassword }}</div>
         </FormGroup>
 
         <FormGroup :has-error="newPasswordRepeat.length !== 0 && newPassword !== newPasswordRepeat">
           <label>{{ $t('profile.changePassword.newPasswordRepeat') }}</label>
-          <PasswordInput v-model="newPasswordRepeat" />
+          <PasswordInput v-model="newPasswordRepeat" required />
           <div class="error-label" v-if="newPasswordRepeat.length && newPassword !== newPasswordRepeat">{{ $t('profile.changePassword.errorPasswordsDontMatch') }}</div>
         </FormGroup>
 
         <FormGroup :has-error="formError.password">
           <label>{{ $t('profile.changePassword.currentPassword') }}</label>
-          <PasswordInput v-model="password" />
+          <PasswordInput v-model="password" required />
           <div class="error-label" v-if="formError.password">{{ formError.password }}</div>
         </FormGroup>
       </fieldset>