jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Make LDAP view that contains the server and external ldap

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

6
dashboard/src/Index.vue
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" />

68
dashboard/src/views/UserDirectoryLdapServerView.vue → dashboard/src/components/LdapServer.vue
View File

@@ -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
dashboard/src/views/LdapView.vue Normal file
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>

3
dashboard/src/views/UserDirectorySettingsView.vue
View File

@@ -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>