Make LDAP view that contains the server and external ldap

2025-10-05 10:53:08 +02:00
parent 32f4b72d68
commit 7a24c23bdd
5 changed files with 55 additions and 43 deletions
--- a/dashboard/src/components/LdapServer.vue
+++ b/dashboard/src/components/LdapServer.vue
@@ -0,0 +1,118 @@
+<script setup>
+
+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 './Section.vue';
+import DomainsModel from '../models/DomainsModel.js';
+import DashboardModel from '../models/DashboardModel.js';
+import UserDirectoryModel from '../models/UserDirectoryModel.js';
+
+const domainsModel = DomainsModel.create();
+const dashboardModel = DashboardModel.create();
+const userDirectoryModel = UserDirectoryModel.create();
+
+const adminDomain = ref({});
+const editError = ref({});
+const busy = ref(false);
+const enabled = ref(false);
+const ldapUrl = ref('');
+const secret = ref('');
+const allowlist = ref('');
+
+const isValid = computed(() => {
+  if (enabled.value) {
+    if (!secret.value) return false;
+    if (!allowlist.value) return false;
+  }
+
+  return true;
+});
+
+function onCopyToClipboard(value) {
+  copyToClipboard(value);
+  window.pankow.notify({ type: 'success', text: 'LDAP URL copied!' });
+}
+
+async function onSubmit() {
+  if (!isValid.value) return;
+
+  busy.value = true;
+  editError.value = {};
+
+  const [error] = await userDirectoryModel.setExposedLdapConfig({ enabled: enabled.value, allowlist: allowlist.value, secret: secret.value });
+  busy.value = false;
+
+  if (error) {
+    if (error.status === 400) {
+      if (error.body.message.indexOf('secret') !== -1) editError.value.secret = error.body.message;
+      else editError.value.allowlist = error.body.message;
+    } else {
+      editError.value.generic = error.body ? error.body.message : 'Internal error';
+    }
+  }
+}
+
+onMounted(async () => {
+  let [error, result] = await domainsModel.list();
+  if (error) return console.error(error);
+
+  const domains = result;
+
+  [error, result] = await dashboardModel.config();
+  if (error) return console.error(error);
+
+  ldapUrl.value = `ldaps://${result.adminFqdn}:636`;
+  adminDomain.value = domains.find(d => d.domain === result.adminDomain) || domains[0];
+
+  [error, result] = await userDirectoryModel.getExposedLdapConfig();
+  if (error) return console.error(error);
+
+  enabled.value = result.enabled;
+  secret.value = result.secret;
+  allowlist.value = result.allowlist;
+});
+
+</script>
+
+<template>
+<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" />
+
+        <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="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>
+
+    <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>
+</template>