119 lines
4.3 KiB
Vue
119 lines
4.3 KiB
Vue
<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>
|