Use same pattern for form validation

dashboard/src/components/FallbackEmailDialog.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, useTemplateRef, computed } from 'vue';
+import { ref, useTemplateRef } from 'vue';
 import { EmailInput, PasswordInput, Dialog, FormGroup } from '@cloudron/pankow';
 import { isValidEmail } from '@cloudron/pankow/utils';
 import ProfileModel from '../models/ProfileModel.js';
@@ -15,15 +15,18 @@ const busy = ref (false);
 const email = ref('');
 const password = ref('');
 
-const isFormValid = computed(() => {
-  if (email.value && !isValidEmail(email.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 (!isValidEmail(email.value)) isFormValid.value = false;
+  }
+}
 
 async function onSubmit() {
-  if (!isFormValid.value) return;
+  if (!form.value.reportValidity()) return;
 
   busy.value = true;
   formError.value = {};
@@ -56,6 +59,8 @@ defineExpose({
     busy.value = false;
     formError.value = {};
     dialog.value.open();
+
+    setTimeout(checkValidity, 100); // update state of the confirm button
   }
 });
 
@@ -73,21 +78,21 @@ defineExpose({
      reject-style="secondary"
      @confirm="onSubmit"
   >
-    <form @submit.prevent="onSubmit" autocomplete="off">
+    <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.email">
           <label>{{ $t('profile.changeEmail.email') }}</label>
-          <EmailInput v-model="email" />
+          <EmailInput v-model="email" required/>
           <div class="error-label" v-if="formError.email">{{ formError.email }}</div>
         </FormGroup>
 
         <FormGroup :has-error="formError.password">
           <label>{{ $t('profile.changeEmail.password') }}</label>
-          <PasswordInput v-model="password" />
+          <PasswordInput v-model="password" required/>
           <div class="error-label" v-if="formError.password">{{ formError.password }}</div>
         </FormGroup>
       </fieldset>