From 7a24c23bdd2b3f403e2b68a6f5bc40ceae8cf9b2 Mon Sep 17 00:00:00 2001
From: Girish Ramakrishnan <girish@cloudron.io>
Date: Sun, 5 Oct 2025 10:53:08 +0200
Subject: [PATCH] Make LDAP view that contains the server and external ldap

---
 dashboard/public/translation/en.json          |  6 +-
 dashboard/src/Index.vue                       |  6 +-
 .../LdapServer.vue}                           | 68 +++++++++----------
 dashboard/src/views/LdapView.vue              | 15 ++++
 .../src/views/UserDirectorySettingsView.vue   |  3 -
 5 files changed, 55 insertions(+), 43 deletions(-)
 rename dashboard/src/{views/UserDirectoryLdapServerView.vue => components/LdapServer.vue} (50%)
 create mode 100644 dashboard/src/views/LdapView.vue

diff --git a/dashboard/public/translation/en.json b/dashboard/public/translation/en.json
index 8961c648e..85bbd03e9 100644
--- a/dashboard/public/translation/en.json
+++ b/dashboard/public/translation/en.json
@@ -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",
diff --git a/dashboard/src/Index.vue b/dashboard/src/Index.vue
index aed84907b..767d5c44a 100644
--- a/dashboard/src/Index.vue
+++ b/dashboard/src/Index.vue
@@ -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" />
diff --git a/dashboard/src/views/UserDirectoryLdapServerView.vue b/dashboard/src/components/LdapServer.vue
similarity index 50%
rename from dashboard/src/views/UserDirectoryLdapServerView.vue
rename to dashboard/src/components/LdapServer.vue
index 6dc54d0ae..1155e1eba 100644
--- a/dashboard/src/views/UserDirectoryLdapServerView.vue
+++ b/dashboard/src/components/LdapServer.vue
@@ -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>
diff --git a/dashboard/src/views/LdapView.vue b/dashboard/src/views/LdapView.vue
new file mode 100644
index 000000000..3870b183f
--- /dev/null
+++ b/dashboard/src/views/LdapView.vue
@@ -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>
diff --git a/dashboard/src/views/UserDirectorySettingsView.vue b/dashboard/src/views/UserDirectorySettingsView.vue
index 3c3c0b292..af342ef1e 100644
--- a/dashboard/src/views/UserDirectorySettingsView.vue
+++ b/dashboard/src/views/UserDirectorySettingsView.vue
@@ -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>