Make LDAP view that contains the server and external ldap

This commit is contained in:
Girish Ramakrishnan
2025-10-05 10:53:08 +02:00
parent 32f4b72d68
commit 7a24c23bdd
5 changed files with 55 additions and 43 deletions
+4 -2
View File
@@ -373,7 +373,7 @@
"body": "Email sent to {{ email }}"
},
"exposedLdap": {
"description": "The LDAP server can be used by external applications for authentication.",
"description": "The LDAP server lets external apps authenticate users against the Cloudron user directory.",
"ipRestriction": {
"description": "Limit Directory Server access to specific IPs or ranges. Lines starting with <code>#</code> are treated as comments.",
"placeholder": "Line separated IP address or Subnet",
@@ -385,7 +385,9 @@
"url": "Server URL"
},
"cloudflarePortWarning": "Cloudflare proxying must be disabled on the dashboard domain to access the LDAP server",
"enable": "Enable LDAP Server"
"enable": "Enable LDAP Server",
"title": "LDAP Server",
"enabled": "Enable LDAP Server"
},
"userImportDialog": {
"title": "Import Users",
+3 -3
View File
@@ -36,7 +36,7 @@ import SystemUpdateView from './views/SystemUpdateView.vue';
import DockerView from './views/DockerView.vue';
import ServerView from './views/ServerView.vue';
import UserDirectorySettingsView from './views/UserDirectorySettingsView.vue';
import UserDirectoryLdapServerView from './views/UserDirectoryLdapServerView.vue';
import LdapView from './views/LdapView.vue';
import OpenIdView from './views/OpenIdView.vue';
import UsersView from './views/UsersView.vue';
import GroupsView from './views/GroupsView.vue';
@@ -370,8 +370,8 @@ onMounted(async () => {
<DockerView v-else-if="view === VIEWS.DOCKER" />
<SystemUpdateView v-else-if="view === VIEWS.SYSTEM_UPDATE" />
<UserDirectorySettingsView v-else-if="view === VIEWS.USER_DIRECTORY_SETTINGS" />
<UserDirectoryLdapServerView v-else-if="view === VIEWS.LDAP" />
<OpenIdView.vue v-else-if="view === VIEWS.OPENID" />
<LdapView v-else-if="view === VIEWS.LDAP" />
<OpenIdView v-else-if="view === VIEWS.OPENID" />
<UsersView v-else-if="view === VIEWS.USERS" />
<GroupsView v-else-if="view === VIEWS.GROUPS" />
<VolumesView v-else-if="view === VIEWS.VOLUMES" />
@@ -3,7 +3,7 @@
import { ref, onMounted, computed } from 'vue';
import { Button, FormGroup, Checkbox, PasswordInput, TextInput, InputGroup } from '@cloudron/pankow';
import { copyToClipboard } from '@cloudron/pankow/utils';
import Section from '../components/Section.vue';
import Section from './Section.vue';
import DomainsModel from '../models/DomainsModel.js';
import DashboardModel from '../models/DashboardModel.js';
import UserDirectoryModel from '../models/UserDirectoryModel.js';
@@ -76,45 +76,43 @@ onMounted(async () => {
</script>
<template>
<div class="content">
<Section :title="$t('users.exposedLdap.title')">
<div>{{ $t('users.exposedLdap.description') }}</div>
<br/>
<Section :title="$t('users.exposedLdap.title')">
<div>{{ $t('users.exposedLdap.description') }}</div>
<br/>
<form @submit.prevent="onSubmit()" autocomplete="off">
<fieldset :disabled="busy">
<input style="display: none" type="submit" :disabled="busy || !isValid" />
<form @submit.prevent="onSubmit()" autocomplete="off">
<fieldset :disabled="busy">
<input style="display: none" type="submit" :disabled="busy || !isValid" />
<Checkbox v-model="enabled" :label="$t('users.exposedLdap.enabled')" help-url="https://docs.cloudron.io/user-directory/#ldap-directory-server"/>
<Checkbox v-model="enabled" :label="$t('users.exposedLdap.enabled')" help-url="https://docs.cloudron.io/user-directory/#ldap-directory-server"/>
<FormGroup>
<label for="ldapUrlInput">{{ $t('users.exposedLdap.secret.url') }}</label>
<InputGroup>
<TextInput id="ldapUrlInput" v-model="ldapUrl" readonly style="flex-grow: 1;"/>
<Button tool @click="onCopyToClipboard(ldapUrl)" icon="fa fa-clipboard" />
</InputGroup>
<p class="text-small text-warning" v-show="adminDomain.provider === 'cloudflare'">{{ $t('users.exposedLdap.cloudflarePortWarning') }} </p>
</FormGroup>
<FormGroup>
<label for="ldapUrlInput">{{ $t('users.exposedLdap.secret.url') }}</label>
<InputGroup>
<TextInput id="ldapUrlInput" v-model="ldapUrl" readonly style="flex-grow: 1;"/>
<Button tool @click="onCopyToClipboard(ldapUrl)" icon="fa fa-clipboard" />
</InputGroup>
<p class="text-small text-warning" v-show="adminDomain.provider === 'cloudflare'">{{ $t('users.exposedLdap.cloudflarePortWarning') }} </p>
</FormGroup>
<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" required />
<div class="has-error" v-show="editError.secret">{{ editError.secret }}</div>
</FormGroup>
<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" 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" required></textarea>
<div class="has-error" v-show="editError.allowlist">{{ editError.allowlist }}</div>
</FormGroup>
</fieldset>
</form>
<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" required></textarea>
<div class="has-error" v-show="editError.allowlist">{{ editError.allowlist }}</div>
</FormGroup>
</fieldset>
</form>
<div class="error-label" v-show="editError.generic">{{ editError.generic }}</div>
<div class="error-label" v-show="editError.generic">{{ editError.generic }}</div>
<Button :loading="busy" :disabled="!isValid || busy" @click="onSubmit()">{{ $t('users.settings.saveAction') }}</Button>
</Section>
</div>
<Button :loading="busy" :disabled="!isValid || busy" @click="onSubmit()">{{ $t('users.settings.saveAction') }}</Button>
</Section>
</template>
+15
View File
@@ -0,0 +1,15 @@
<script setup>
import LdapServer from '../components/LdapServer.vue';
import ExternalLdap from '../components/ExternalLdap.vue';
</script>
<template>
<div class="content">
<LdapServer />
<ExternalLdap />
</div>
</template>
@@ -4,7 +4,6 @@ import { ref, onMounted, inject } from 'vue';
import { Switch } from '@cloudron/pankow';
import Section from '../components/Section.vue';
import SettingsItem from '../components/SettingsItem.vue';
import ExternalLdap from '../components/ExternalLdap.vue';
import UserDirectoryModel from '../models/UserDirectoryModel.js';
const features = inject('features');
@@ -62,7 +61,5 @@ onMounted(async () => {
<Switch v-model="mandatory2FA" @change="onToggleMandatory2FA" :disabled="busy || !features.profileConfig"/>
</SettingsItem>
</Section>
<ExternalLdap />
</div>
</template>