Actually do form validation for ldap provider UI

dashboard/src/views/UserDirectoryLdapProviderView.vue

@@ -13,8 +13,6 @@ const dashboardModel = DashboardModel.create();
 const userDirectoryModel = UserDirectoryModel.create();
 
 const adminDomain = ref({});
-
-// form
 const editError = ref({});
 const busy = ref(false);
 const enabled = ref(false);
@@ -23,7 +21,9 @@ const secret = ref('');
 const allowlist = ref('');
 
 const isValid = computed(() => {
-  // TODO check all
+  if (!enabled.value) return true;
+  if (!secret.value) return false;
+  if (!allowlist.value) return false;
   return true;
 });
 
@@ -78,7 +78,7 @@ onMounted(async () => {
     <Section :title="$t('users.exposedLdap.title')">
       <p>{{ $t('users.exposedLdap.description') }}</p>
 
-      <form novalidate @submit.prevent="onSubmit()" autocomplete="off">
+      <form @submit.prevent="onSubmit()" autocomplete="off">
         <fieldset :disabled="busy">
           <input style="display: none" type="submit" :disabled="busy || !isValid" />
 
@@ -93,14 +93,14 @@ onMounted(async () => {
           <FormGroup>
             <label for="secretInput">{{ $t('users.exposedLdap.secret.label') }}</label>
             <p class="small" v-html="$t('users.exposedLdap.secret.description', { userDN: 'cn=admin,ou=system,dc=cloudron' })"></p>
-            <PasswordInput id="secretInput" v-model="secret" />
+            <PasswordInput id="secretInput" v-model="secret" required />
             <div class="has-error" v-show="editError.secret">{{ editError.secret }}</div>
           </FormGroup>
 
           <FormGroup>
             <label for="allowlistInput">{{ $t('users.exposedLdap.ipRestriction.label') }}</label>
             <p class="small" v-html="$t('users.exposedLdap.ipRestriction.description')"></p>
-            <textarea id="allowlistInput" v-model="allowlist" :placeholder="$t('users.exposedLdap.ipRestriction.placeholder')" rows="4"></textarea>
+            <textarea id="allowlistInput" v-model="allowlist" :placeholder="$t('users.exposedLdap.ipRestriction.placeholder')" rows="4" required></textarea>
             <div class="has-error" v-show="editError.allowlist">{{ editError.allowlist }}</div>
           </FormGroup>
         </fieldset>