fix access to form in checkValidity

dashboard/src/components/AppImportDialog.vue

@@ -25,8 +25,8 @@ const encryptionPassword = ref('');
 const encryptedFilenames = ref(false);
 
 const isFormValid = ref(false);
-function validateForm() {
-  isFormValid.value = form.value && form.value.checkValidity();
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
 }
 
 async function onSubmit() {
@@ -251,7 +251,7 @@ function onBackupConfigChanged(event) {
       }
     }
 
-    setTimeout(validateForm, 100); // update state of the confirm button
+    setTimeout(checkValidity, 100); // update state of the confirm button
   };
 
   reader.readAsText(event.target.files[0]);
@@ -262,7 +262,7 @@ function onUploadBackupConfig() {
 }
 
 watchEffect(() => {
-  if (providerConfig.value.credentials) setTimeout(validateForm, 100);
+  if (providerConfig.value.credentials) setTimeout(checkValidity, 100);
 });
 
 defineExpose({
@@ -310,7 +310,7 @@ defineExpose({
           </button>
         </p>
 
-        <form @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="validateForm()">
+        <form @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
           <fieldset :disabled="busy">
             <input style="display: none;" type="submit"/>
 

dashboard/src/components/BackupSiteAddDialog.vue

@@ -16,7 +16,6 @@ const backupSitesModel = BackupSitesModel.create();
 const systemModel = SystemModel.create();
 
 const dialog = useTemplateRef('dialog');
-const form = useTemplateRef('form');
 const step = ref('storage');
 const newSiteId = ref('');
 const name = ref('');
@@ -227,10 +226,10 @@ function onCancel() {
   dialog.value.close();
 }
 
-const isValid = ref(false);
-
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
 function checkValidity() {
-  isValid.value = form.value.checkValidity();
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
 }
 
 defineExpose({
@@ -301,7 +300,7 @@ defineExpose({
       <div v-if="step === 'storage'">
         <form @submit.prevent="onSubmit()" autocomplete="off" ref="form" @change="checkValidity()">
           <fieldset :disabled="busy">
-            <input style="display: none;" type="submit" :disabled="!isValid"/>
+            <input style="display: none;" type="submit" :disabled="!isFormValid"/>
 
             <FormGroup>
               <label for="nameInput">{{ $t('backups.configureBackupStorage.name') }}</label>
@@ -378,7 +377,7 @@ defineExpose({
 
               <div style="display: flex; gap: 6px; align-items: end;">
                 <Button secondary v-if="!busy" :disabled="busy" @click="onCancel()">{{ $t('main.dialog.cancel') }}</Button>
-                <Button primary :disabled="busy || !isValid" :loading="busy" @click="onSubmit()">{{ useEncryption ? $t('main.action.next') : $t('main.dialog.save') }}</Button>
+                <Button primary :disabled="busy || !isFormValid" :loading="busy" @click="onSubmit()">{{ useEncryption ? $t('main.action.next') : $t('main.dialog.save') }}</Button>
               </div>
             </div>
           </fieldset>

dashboard/src/components/DockerRegistryDialog.vue

@@ -37,7 +37,7 @@ const password = ref('');
 const form = useTemplateRef('form');
 const isFormValid = ref(false);
 function checkValidity() {
-  isFormValid.value = form.value.checkValidity();
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
 }
 
 async function onSubmit() {

dashboard/src/components/DomainDialog.vue

@@ -31,7 +31,7 @@ const dnsConfig = ref(DomainsModel.createEmptyConfig());
 const form = useTemplateRef('form');
 const isFormValid = ref(false);
 function checkValidity() {
-  isFormValid.value = form.value.checkValidity();
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
 }
 
 async function onSubmit() {

dashboard/src/components/ExternalLdap.vue

@@ -49,7 +49,7 @@ const autoCreate = ref(false);
 const form = useTemplateRef('form');
 const isFormValid = ref(false);
 function checkValidity() {
-  isFormValid.value = form.value.checkValidity();
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
 }
 
 function onProviderChange() {

dashboard/src/components/MailRelaySettingsItem.vue

@@ -54,7 +54,7 @@ function usesPasswordAuth(provider) {
 const form = useTemplateRef('form');
 const isFormValid = ref(false);
 function checkValidity() {
-  isFormValid.value = form.value.checkValidity();
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
 }
 
 function onProviderChange() {
@@ -97,6 +97,8 @@ async function onShowDialog() {
 }
 
 async function onSubmit() {
+  if (!form.value.reportValidity()) return;
+
   busy.value = true;
   formError.value = '';
 

dashboard/src/components/MailboxDialog.vue

@@ -47,7 +47,7 @@ async function onRemoveAlias(index) {
 const form = useTemplateRef('form');
 const isFormValid = ref(false);
 function validateForm() {
-  isFormValid.value = form.value && form.value.checkValidity();
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
 }
 
 async function onSubmit() {

dashboard/src/components/SetupAccount.vue

@@ -38,7 +38,7 @@ watch(password, () => {
 
 const isFormValid = ref(false);
 function validateForm() {
-  isFormValid.value = form.value.checkValidity();
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
 
   if (isFormValid.value) {
     if (password.value !== passwordRepeat.value) isFormValid.value = false;

dashboard/src/components/UserDialog.vue

@@ -53,7 +53,7 @@ function onAvatarChanged(file) {
 
 const isFormValid = ref(false);
 function validateForm() {
-  isFormValid.value = form.value && form.value.checkValidity();
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
 }
 
 async function onSubmit() {