cloudron-box/dashboard/src/views/UserDirectoryLdapProviderView.vue

<script setup>

import { ref, onMounted, computed } from 'vue';
import { Button, FormGroup, Checkbox, PasswordInput, TextInput } from 'pankow';
import { copyToClipboard } from '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({});

// form
const editError = ref({});
const busy = ref(false);
const enabled = ref(false);
const ldapUrl = ref('');
const secret = ref('');
const allowlist = ref('');

const isValid = computed(() => {
  // TODO check all
  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')">
      <p>{{ $t('users.exposedLdap.description') }}</p>

      <form novalidate @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')" /><sup><a href="https://docs.cloudron.io/user-directory/#directory-server" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup>

          <FormGroup>
            <label for="ldapUrlInput">{{ $t('users.exposedLdap.secret.url') }}</label>
            <TextInput id="ldapUrlInput" v-model="ldapUrl" readonly @click="onCopyToClipboard(ldapUrl)" style="cursor: copy" />
            <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" />
            <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"></textarea>
            <div class="has-error" v-show="editError.allowlist">{{ editError.allowlist }}</div>
          </FormGroup>
        </fieldset>
      </form>

      <br/>

      <p class="has-error" v-show="editError.generic">{{ editError.generic }}</p>

      <div class="button-bar">
        <Button :loading="busy" :disabled="!isValid || busy" @click="onSubmit()">{{ $t('users.settings.saveAction') }}</Button>
      </div>
    </Section>
  </div>
</template>