Split user directory views
This commit is contained in:
Johannes Zellner
@@ -1,118 +0,0 @@
|
||||
<script setup>
|
||||
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { Button, FormGroup, Checkbox, PasswordInput, TextInput } from 'pankow';
|
||||
import { copyToClipboard } from '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({});
|
||||
|
||||
// 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>
|
||||
<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>
|
||||
@@ -1,187 +0,0 @@
|
||||
<script setup>
|
||||
|
||||
import { useI18n } from 'vue-i18n';
|
||||
const i18n = useI18n();
|
||||
const t = i18n.t;
|
||||
|
||||
import { ref, onMounted, useTemplateRef, computed } from 'vue';
|
||||
import { Button, Dialog, TableView, FormGroup, TextInput, InputDialog } from 'pankow';
|
||||
import { copyToClipboard } from 'pankow/utils';
|
||||
import Section from './Section.vue';
|
||||
import DashboardModel from '../models/DashboardModel.js';
|
||||
import UserDirectoryModel from '../models/UserDirectoryModel.js';
|
||||
|
||||
const dashboardModel = DashboardModel.create();
|
||||
const userDirectoryModel = UserDirectoryModel.create();
|
||||
|
||||
const columns = {
|
||||
name: { label: 'Name', sort: true },
|
||||
actions: {}
|
||||
};
|
||||
|
||||
const inputDialog = useTemplateRef('inputDialog');
|
||||
const editDialog = useTemplateRef('editDialog');
|
||||
|
||||
const clients = ref([]);
|
||||
const adminFqdn = ref('');
|
||||
|
||||
// edit or add
|
||||
const submitBusy = ref(false);
|
||||
const submitError = ref('');
|
||||
const clientId = ref('');
|
||||
const clientSecret = ref('');
|
||||
const clientName = ref('');
|
||||
const clientLoginRedirectUri = ref('');
|
||||
const clientTokenSignatureAlgorithm = ref('RS256');
|
||||
|
||||
const isValid = computed(() => {
|
||||
if (!clientName.value) return false;
|
||||
if (!clientLoginRedirectUri.value) return false;
|
||||
if (!clientTokenSignatureAlgorithm.value) return false;
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
async function onAdd() {
|
||||
submitBusy.value = false;
|
||||
clientId.value = '';
|
||||
clientSecret.value = '';
|
||||
clientName.value = '';
|
||||
clientLoginRedirectUri.value = '';
|
||||
clientTokenSignatureAlgorithm.value = 'RS256';
|
||||
|
||||
editDialog.value.open();
|
||||
}
|
||||
|
||||
async function onEdit(client) {
|
||||
submitBusy.value = false;
|
||||
clientId.value = client.id;
|
||||
clientSecret.value = client.secret;
|
||||
clientName.value = client.name;
|
||||
clientLoginRedirectUri.value = client.loginRedirectUri;
|
||||
clientTokenSignatureAlgorithm.value = client.tokenSignatureAlgorithm;
|
||||
|
||||
editDialog.value.open();
|
||||
}
|
||||
|
||||
async function onSubmit() {
|
||||
if (!isValid.value) return;
|
||||
|
||||
submitBusy.value = true;
|
||||
const [error] = await userDirectoryModel.updateOpenIdClient(clientId.value, clientName.value, clientLoginRedirectUri.value, clientTokenSignatureAlgorithm.value);
|
||||
if (error) {
|
||||
submitBusy.value = false;
|
||||
submitError.value = error.body ? error.body.message : 'Internal error';
|
||||
return console.error(error);
|
||||
}
|
||||
|
||||
await refresh();
|
||||
editDialog.value.close();
|
||||
|
||||
submitBusy.value = false;
|
||||
}
|
||||
|
||||
async function onRemove(client) {
|
||||
const yes = await inputDialog.value.confirm({
|
||||
message: t('oidc.deleteClientDialog.title', { client: client.name }) + ' ' + t('oidc.deleteClientDialog.description'),
|
||||
confirmStyle: 'danger',
|
||||
confirmLabel: t('main.dialog.delete'),
|
||||
rejectLabel: t('main.dialog.cancel')
|
||||
});
|
||||
|
||||
if (!yes) return;
|
||||
|
||||
await userDirectoryModel.removeOpenIdClient(client.id);
|
||||
await refresh();
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
const [error, result] = await userDirectoryModel.getOpenIdClients();
|
||||
if (error) return console.error(error);
|
||||
clients.value = result;
|
||||
}
|
||||
|
||||
function onCopyToClipboard(value) {
|
||||
copyToClipboard(value);
|
||||
window.pankow.notify({ type: 'success', text: 'Copied to clipboard!' });
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const [error, result] = await dashboardModel.config();
|
||||
if (error) return console.error(error);
|
||||
|
||||
adminFqdn.value = result.adminFqdn;
|
||||
|
||||
await refresh();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<InputDialog ref="inputDialog" />
|
||||
<Dialog ref="editDialog"
|
||||
:title="clientId ? $t('oidc.editClientDialog.title', { client: clientName }) : $t('oidc.newClientDialog.title')"
|
||||
:confirm-active="isValid"
|
||||
:confirm-busy="submitBusy"
|
||||
:confirm-label="clientId ? $t('main.dialog.save') : $t('oidc.newClientDialog.createAction')"
|
||||
:reject-label="$t('main.dialog.close')"
|
||||
reject-style="secondary"
|
||||
@confirm="onSubmit()"
|
||||
>
|
||||
<form novalidate @submit.prevent="onSubmit()" autocomplete="off">
|
||||
<input style="display: none" type="submit" :disabled="!isValid"/>
|
||||
|
||||
<p class="text-danger" ng-show="submitError">{{ submitError }}</p>
|
||||
|
||||
<FormGroup v-show="clientId">
|
||||
<label for="clientIdInput">{{ $t('oidc.client.id') }}</label>
|
||||
<TextInput id="clientIdInput" v-model="clientId" @click="onCopyToClipboard(clientId)" style="cursor: copy" readonly/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup v-show="clientSecret">
|
||||
<label for="clientSecretInput">{{ $t('oidc.client.secret') }}</label>
|
||||
<TextInput id="clientSecretInput" v-model="clientSecret" @click="onCopyToClipboard(clientSecret)" style="cursor: copy" readonly/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<label for="clientNameInput">{{ $t('oidc.client.name') }}</label>
|
||||
<TextInput id="clientNameInput" v-model="clientName" required/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<label for="clientLoginRedirectUriInput">{{ $t('oidc.client.loginRedirectUri') }}</label>
|
||||
<TextInput id="clientLoginRedirectUriInput" v-model="clientLoginRedirectUri" required/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<label class="control-label">{{ $t('oidc.client.signingAlgorithm') }}</label>
|
||||
<select v-model="clientTokenSignatureAlgorithm">
|
||||
<option value="RS256">RS256</option>
|
||||
<option value="EdDSA">EdDSA</option>
|
||||
</select>
|
||||
</FormGroup>
|
||||
</form>
|
||||
</Dialog>
|
||||
|
||||
<Section :title="$t('oidc.title')">
|
||||
<template #header-buttons>
|
||||
<Button @click="onAdd()" icon="fa-solid fa-plus">{{ $t('oidc.clients.newClient') }}</Button>
|
||||
</template>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="info-label">{{ $t('oidc.env.discoveryUrl') }} <sup><a href="https://docs.cloudron.io/user-directory/#endpoints" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
|
||||
<div class="info-value">https://{{ adminFqdn }}/.well-known/openid-configuration</div>
|
||||
</div>
|
||||
|
||||
<TableView :columns="columns" :model="clients" @row-click="onEdit">
|
||||
<template #actions="client">
|
||||
<div class="table-actions">
|
||||
<Button tool secondary small icon="fa-solid fa-pencil-alt" @click.stop="onEdit(client)"></Button>
|
||||
<Button tool danger small icon="fa-solid fa-trash-alt" @click.stop="onRemove(client)"></Button>
|
||||
</div>
|
||||
</template>
|
||||
</TableView>
|
||||
</Section>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user