Use same pattern for form validation

dashboard/src/components/LdapServer.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted, useTemplateRef } from 'vue';
 import { Button, FormGroup, ClipboardButton, Checkbox, PasswordInput, TextInput, InputGroup } from '@cloudron/pankow';
 import Section from './Section.vue';
 import DomainsModel from '../models/DomainsModel.js';
@@ -19,17 +19,14 @@ const ldapUrl = ref('');
 const secret = ref('');
 const allowlist = ref('');
 
-const isValid = computed(() => {
-  if (enabled.value) {
-    if (!secret.value) return false;
-    if (!allowlist.value) return false;
-  }
-
-  return true;
-});
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
+}
 
 async function onSubmit() {
-  if (!isValid.value) return;
+  if (!form.value.reportValidity()) return;
 
   busy.value = true;
   editError.value = {};
@@ -65,6 +62,8 @@ onMounted(async () => {
   enabled.value = result.enabled;
   secret.value = result.secret;
   allowlist.value = result.allowlist;
+
+  setTimeout(checkValidity, 100); // update state of the confirm button
 });
 
 </script>
@@ -73,9 +72,9 @@ onMounted(async () => {
   <Section :title="$t('users.exposedLdap.title')">
     <div>{{ $t('users.exposedLdap.description') }}</div>
 
-    <form @submit.prevent="onSubmit()" autocomplete="off">
+    <form novalidate @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
       <fieldset :disabled="busy">
-        <input style="display: none" type="submit" :disabled="busy || !isValid" />
+        <input style="display: none" type="submit" />
 
         <Checkbox v-model="enabled" :label="$t('users.exposedLdap.enabled')" help-url="https://docs.cloudron.io/user-directory/#ldap-directory-server"/>
 
@@ -108,6 +107,6 @@ onMounted(async () => {
     <div class="error-label" v-show="editError.generic">{{ editError.generic }}</div>
 
     <br/>
-    <Button :loading="busy" :disabled="!isValid || busy" @click="onSubmit()">{{ $t('users.settings.saveAction') }}</Button>
+    <Button :loading="busy" :disabled="!isFormValid || busy" @click="onSubmit()">{{ $t('users.settings.saveAction') }}</Button>
   </Section>
 </template>