externalldap: remove usage of secret placeholder

This commit is contained in:
Girish Ramakrishnan
2025-10-08 18:40:27 +02:00
parent b790d085bb
commit 9226baa63c
3 changed files with 115 additions and 101 deletions
+53 -40
View File
@@ -1,7 +1,7 @@
<script setup>
import { ref, useTemplateRef, onMounted, computed, inject } from 'vue';
import { Dialog, Button, Icon, FormGroup, SingleSelect, Checkbox, TextInput, ProgressBar, PasswordInput } from '@cloudron/pankow';
import { ref, useTemplateRef, onMounted, inject } from 'vue';
import { Dialog, Button, Icon, FormGroup, MaskedInput, SingleSelect, Checkbox, TextInput, ProgressBar } from '@cloudron/pankow';
import { prettyLongDate } from '@cloudron/pankow/utils';
import Section from './Section.vue';
import UserDirectoryModel from '../models/UserDirectoryModel.js';
@@ -46,15 +46,26 @@ const bindDn = ref('');
const bindPassword = ref('');
const autoCreate = ref(false);
const isValid = computed(() => {
if (!provider.value) return false;
if (!url.value) return false;
if (!baseDn.value) return false;
if (!filter.value) return false;
if (bindDn.value && !bindPassword.value) return false;
const form = useTemplateRef('form');
const isFormValid = ref(false);
function checkValidity() {
isFormValid.value = form.value.checkValidity();
}
return true;
});
function onProviderChange() {
url.value = '';
acceptSelfSignedCerts.value = false;
baseDn.value = '';
filter.value = '';
usernameField.value = '';
syncGroups.value = false;
groupBaseDn.value = '';
groupFilter.value = '';
groupnameField.value = '';
bindDn.value = '';
bindPassword.value = '';
autoCreate.value = false;
}
async function onConfigure() {
if (!features.value.externalLdap) return subscriptionRequiredDialog.value.open();
@@ -76,10 +87,12 @@ async function onConfigure() {
autoCreate.value = config.value.autoCreate;
dialog.value.open();
setTimeout(checkValidity, 100); // update state of the confirm button
}
async function onSubmit() {
if (!isValid.value) return;
if (!form.value.reportValidity()) return;
editBusy.value = true;
editError.value = {};
@@ -91,7 +104,7 @@ async function onSubmit() {
config.acceptSelfSignedCerts = acceptSelfSignedCerts.value;
config.autoCreate = autoCreate.value;
config.syncGroups = syncGroups.value;
config.bindPassword = bindPassword.value;
if (bindPassword.value) config.bindPassword = bindPassword.value;
// those values are known and thus overwritten
config.baseDn = 'ou=users,dc=cloudron';
@@ -115,7 +128,7 @@ async function onSubmit() {
if (bindDn.value) {
config.bindDn = bindDn.value;
config.bindPassword = bindPassword.value;
if (bindPassword.value) config.bindPassword = bindPassword.value;
}
}
@@ -230,78 +243,78 @@ onMounted(async () => {
:title="$t('users.externalLdapDialog.title')"
:confirm-label="$t('main.dialog.save')"
:confirm-busy="editBusy"
:confirm-active="!editBusy && isValid"
:confirm-active="!editBusy && isFormValid"
:reject-label="$t('main.dialog.cancel')"
reject-style="secondary"
@confirm="onSubmit()"
>
<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" 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">
<input style="display: none" type="submit" :disabled="editBusy || !isFormValid" />
<div v-show="provider !== 'noop'">
<form novalidate @submit.prevent="onSubmit()" autocomplete="off">
<fieldset :disabled="editBusy">
<input style="display: none" type="submit" :disabled="editBusy || !isValid" />
<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>
<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" />
<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>
<FormGroup :class="{ 'has-error': editError.baseDn }" v-show="provider !== 'cloudron'">
<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="provider !== 'cloudron'" />
<TextInput v-model="baseDn" id="baseDnInput" placeholder="ou=users,dc=example,dc=com" required />
</FormGroup>
<FormGroup :class="{ 'has-error': editError.filter }" v-show="provider !== 'cloudron'">
<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="provider !== 'cloudron'" />
<TextInput v-model="filter" id="filterInput" placeholder="(objectClass=inetOrgPerson)" required />
</FormGroup>
<FormGroup :class="{ 'has-error': editError.usernameField }" v-show="provider !== 'cloudron'">
<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')" />
<FormGroup :class="{ 'has-error': editError.groupBaseDn }" v-show="syncGroups && provider !== 'cloudron'">
<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="syncGroups && provider !== 'cloudron'" />
<TextInput v-model="groupBaseDn" id="groupBaseDnInput" placeholder="ou=groups,dc=example,dc=com" required />
</FormGroup>
<FormGroup :class="{ 'has-error': editError.groupFilter }" v-show="syncGroups && provider !== 'cloudron'">
<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="syncGroups && provider !== 'cloudron'" />
<TextInput v-model="groupFilter" id="groupFilterInput" placeholder="(objectClass=groupOfNames)" required />
</FormGroup>
<FormGroup :class="{ 'has-error': editError.groupnameField }" v-show="syncGroups && provider !== 'cloudron'">
<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="syncGroups && provider !== 'cloudron'" />
<TextInput v-model="groupnameField" id="groupnameFieldInput" placeholder="cn" required />
</FormGroup>
<FormGroup :class="{ 'has-error': editError.credentials }" v-show="provider !== 'cloudron'">
<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>
<PasswordInput v-model="bindPassword" id="bindPasswordInput" />
<MaskedInput v-model="bindPassword" id="bindPasswordInput" />
</FormGroup>
<Checkbox v-model="autoCreate" :label="$t('users.externalLdap.autocreateUsersOnLogin')" />
</fieldset>
</form>
</div>
</div>
</fieldset>
</form>
</Dialog>
<Section :title="$t('users.externalLdap.title')" :title-badge="!features.externalLdap ? 'Upgrade' : ''">