From ab3a2911c3cec8bc4b326393ea7aab5a4c8d10cd Mon Sep 17 00:00:00 2001
From: Girish Ramakrishnan <girish@cloudron.io>
Date: Wed, 8 Oct 2025 20:06:05 +0200
Subject: [PATCH] do not attach v-if to the form since we cannot find it by ref
 anymore

---
 dashboard/src/components/ExternalLdap.vue     | 94 +++++++++----------
 .../src/components/MailRelaySettingsItem.vue  |  4 +-
 2 files changed, 48 insertions(+), 50 deletions(-)

diff --git a/dashboard/src/components/ExternalLdap.vue b/dashboard/src/components/ExternalLdap.vue
index 7a3514f65..d94699bbc 100644
--- a/dashboard/src/components/ExternalLdap.vue
+++ b/dashboard/src/components/ExternalLdap.vue
@@ -250,69 +250,67 @@ onMounted(async () => {
       >
       <p class="has-error text-center" v-show="editError.generic">{{ editError.generic }}</p>
 
+      <FormGroup>
+        <label for="ldapProvider">{{ $t('users.externalLdap.provider') }} <sup><a href="https://docs.cloudron.io/user-directory/#external-directory" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+        <SingleSelect id="ldapProvider" @select="onProviderChange" v-model="provider" :options="availableProviders" option-key="value" option-label="name"/>
+        <div class="warning-label" v-show="provider === 'noop' && config.provider !== 'noop'">{{ $t('users.externalLdap.disableWarning') }}</div>
+      </FormGroup>
+
       <form ref="form" @submit.prevent="onSubmit()" autocomplete="off" @input="checkValidity()">
-        <fieldset :disabled="editBusy">
+        <fieldset :disabled="editBusy" v-if="provider !== 'noop'">
           <input style="display: none" type="submit" :disabled="editBusy || !isFormValid" />
 
-          <FormGroup>
-            <label for="ldapProvider">{{ $t('users.externalLdap.provider') }} <sup><a href="https://docs.cloudron.io/user-directory/#external-directory" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
-            <SingleSelect id="ldapProvider" @select="onProviderChange" v-model="provider" :options="availableProviders" option-key="value" option-label="name" required/>
-            <div class="warning-label" v-show="provider === 'noop' && config.provider !== 'noop'">{{ $t('users.externalLdap.disableWarning') }}</div>
+          <FormGroup :class="{ 'has-error': editError.url }">
+            <label class="control-label" for="configUrlInput">{{ $t('users.externalLdap.server') }}</label>
+            <TextInput id="configUrlInput" v-model="url" placeholder="ldaps://example.com:636" required/>
           </FormGroup>
 
-          <div v-if="provider !== 'noop'">
-            <FormGroup :class="{ 'has-error': editError.url }">
-              <label class="control-label" for="configUrlInput">{{ $t('users.externalLdap.server') }}</label>
-              <TextInput id="configUrlInput" v-model="url" placeholder="ldaps://example.com:636" required/>
-            </FormGroup>
+          <Checkbox v-model="acceptSelfSignedCerts" :label="$t('users.externalLdap.acceptSelfSignedCert')" />
+          <p class="has-error" v-show="editError.acceptSelfSignedCerts">{{ $t('users.externalLdap.errorSelfSignedCert') }}</p>
 
-            <Checkbox v-model="acceptSelfSignedCerts" :label="$t('users.externalLdap.acceptSelfSignedCert')" />
-            <p class="has-error" v-show="editError.acceptSelfSignedCerts">{{ $t('users.externalLdap.errorSelfSignedCert') }}</p>
+          <FormGroup :class="{ 'has-error': editError.baseDn }" v-if="provider !== 'cloudron'">
+            <label for="baseDnInput">{{ $t('users.externalLdap.baseDn') }}</label>
+            <TextInput v-model="baseDn" id="baseDnInput" placeholder="ou=users,dc=example,dc=com" required />
+          </FormGroup>
 
-            <FormGroup :class="{ 'has-error': editError.baseDn }" v-if="provider !== 'cloudron'">
-              <label for="baseDnInput">{{ $t('users.externalLdap.baseDn') }}</label>
-              <TextInput v-model="baseDn" id="baseDnInput" placeholder="ou=users,dc=example,dc=com" required />
-            </FormGroup>
+          <FormGroup :class="{ 'has-error': editError.filter }" v-if="provider !== 'cloudron'">
+            <label for="filterInput">{{ $t('users.externalLdap.filter') }}</label>
+            <TextInput v-model="filter" id="filterInput" placeholder="(objectClass=inetOrgPerson)" required />
+          </FormGroup>
 
-            <FormGroup :class="{ 'has-error': editError.filter }" v-if="provider !== 'cloudron'">
-              <label for="filterInput">{{ $t('users.externalLdap.filter') }}</label>
-              <TextInput v-model="filter" id="filterInput" placeholder="(objectClass=inetOrgPerson)" required />
-            </FormGroup>
+          <FormGroup :class="{ 'has-error': editError.usernameField }" v-if="provider !== 'cloudron'">
+            <label for="usernameFieldInput">{{ $t('users.externalLdap.usernameField') }}</label>
+            <TextInput v-model="usernameField" id="usernameFieldInput" placeholder="uid or sAMAcountName" />
+          </FormGroup>
 
-            <FormGroup :class="{ 'has-error': editError.usernameField }" v-if="provider !== 'cloudron'">
-              <label for="usernameFieldInput">{{ $t('users.externalLdap.usernameField') }}</label>
-              <TextInput v-model="usernameField" id="usernameFieldInput" placeholder="uid or sAMAcountName" />
-            </FormGroup>
+          <Checkbox v-model="syncGroups" :label="$t('users.externalLdap.syncGroups')" />
 
-            <Checkbox v-model="syncGroups" :label="$t('users.externalLdap.syncGroups')" />
+          <FormGroup :class="{ 'has-error': editError.groupBaseDn }" v-if="syncGroups && provider !== 'cloudron'">
+            <label for="groupBaseDnInput">{{ $t('users.externalLdap.groupBaseDn') }}</label>
+            <TextInput v-model="groupBaseDn" id="groupBaseDnInput" placeholder="ou=groups,dc=example,dc=com" required />
+          </FormGroup>
 
-            <FormGroup :class="{ 'has-error': editError.groupBaseDn }" v-if="syncGroups && provider !== 'cloudron'">
-              <label for="groupBaseDnInput">{{ $t('users.externalLdap.groupBaseDn') }}</label>
-              <TextInput v-model="groupBaseDn" id="groupBaseDnInput" placeholder="ou=groups,dc=example,dc=com" required />
-            </FormGroup>
+          <FormGroup :class="{ 'has-error': editError.groupFilter }" v-if="syncGroups && provider !== 'cloudron'">
+            <label for="groupFilterInput">{{ $t('users.externalLdap.groupFilter') }}</label>
+            <TextInput v-model="groupFilter" id="groupFilterInput" placeholder="(objectClass=groupOfNames)" required />
+          </FormGroup>
 
-            <FormGroup :class="{ 'has-error': editError.groupFilter }" v-if="syncGroups && provider !== 'cloudron'">
-              <label for="groupFilterInput">{{ $t('users.externalLdap.groupFilter') }}</label>
-              <TextInput v-model="groupFilter" id="groupFilterInput" placeholder="(objectClass=groupOfNames)" required />
-            </FormGroup>
+          <FormGroup :class="{ 'has-error': editError.groupnameField }" v-if="syncGroups && provider !== 'cloudron'">
+            <label for="groupnameFieldInput">{{ $t('users.externalLdap.groupnameField') }}</label>
+            <TextInput v-model="groupnameField" id="groupnameFieldInput" placeholder="cn" required />
+          </FormGroup>
 
-            <FormGroup :class="{ 'has-error': editError.groupnameField }" v-if="syncGroups && provider !== 'cloudron'">
-              <label for="groupnameFieldInput">{{ $t('users.externalLdap.groupnameField') }}</label>
-              <TextInput v-model="groupnameField" id="groupnameFieldInput" placeholder="cn" required />
-            </FormGroup>
+          <FormGroup :class="{ 'has-error': editError.credentials }" v-if="provider !== 'cloudron'">
+            <label for="bindDnInput">{{ $t('users.externalLdap.bindUsername') }}</label>
+            <TextInput v-model="bindDn" id="bindDnInput" placeholder="uid=admin,ou=Users,dc=example,dc=com" />
+          </FormGroup>
 
-            <FormGroup :class="{ 'has-error': editError.credentials }" v-if="provider !== 'cloudron'">
-              <label for="bindDnInput">{{ $t('users.externalLdap.bindUsername') }}</label>
-              <TextInput v-model="bindDn" id="bindDnInput" placeholder="uid=admin,ou=Users,dc=example,dc=com" />
-            </FormGroup>
+          <FormGroup :class="{ 'has-error': editError.credentials }">
+            <label for="bindPasswordInput">{{ $t('users.externalLdap.bindPassword') }}</label>
+            <MaskedInput v-model="bindPassword" id="bindPasswordInput" />
+          </FormGroup>
 
-            <FormGroup :class="{ 'has-error': editError.credentials }">
-              <label for="bindPasswordInput">{{ $t('users.externalLdap.bindPassword') }}</label>
-              <MaskedInput v-model="bindPassword" id="bindPasswordInput" />
-            </FormGroup>
-
-            <Checkbox v-model="autoCreate" :label="$t('users.externalLdap.autocreateUsersOnLogin')" />
-          </div>
+          <Checkbox v-model="autoCreate" :label="$t('users.externalLdap.autocreateUsersOnLogin')" />
         </fieldset>
       </form>
     </Dialog>
diff --git a/dashboard/src/components/MailRelaySettingsItem.vue b/dashboard/src/components/MailRelaySettingsItem.vue
index 3a29db33e..fcc7eaf06 100644
--- a/dashboard/src/components/MailRelaySettingsItem.vue
+++ b/dashboard/src/components/MailRelaySettingsItem.vue
@@ -173,8 +173,8 @@ async function onSubmit() {
 
         <div class="text-danger" v-if="formError">{{ formError }}</div>
 
-        <form ref="form" @submit.prevent="onSubmit()" autocomplete="off" v-if="usesExternalServer(provider)" @input="checkValidity()">
-          <fieldset :disabled="busy">
+        <form ref="form" @submit.prevent="onSubmit()" autocomplete="off" @input="checkValidity()">
+          <fieldset :disabled="busy" v-if="usesExternalServer(provider)">
             <input type="submit" style="display: none" :disabled="busy || !isFormValid"/>
 
             <FormGroup>