Make LDAP view that contains the server and external ldap

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>

dashboard/src/views/UserDirectoryLdapServerView.vue

@@ -1,120 +0,0 @@
-<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 '../components/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>
-  <div class="content">
-    <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>
-  </div>
-</template>

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>