mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-18 10:31:15 +00:00
feat(core): Add LDAP support (#3835)
This commit is contained in:
Ricardo Espinoza
786
packages/editor-ui/src/views/SettingsLdapView.vue
Normal file
786
packages/editor-ui/src/views/SettingsLdapView.vue
Normal file
@@ -0,0 +1,786 @@
|
||||
<template>
|
||||
<div v-if="!isLDAPFeatureEnabled">
|
||||
<div :class="[$style.header, 'mb-2xl']">
|
||||
<n8n-heading size="2xlarge">
|
||||
{{ $locale.baseText('settings.ldap') }}
|
||||
</n8n-heading>
|
||||
</div>
|
||||
|
||||
<n8n-info-tip type="note" theme="info-light" tooltipPlacement="right">
|
||||
<div>
|
||||
LDAP allows users to authenticate with their centralized account. It's compatible with
|
||||
services that provide an LDAP interface like Active Directory, Okta and Jumpcloud.
|
||||
</div>
|
||||
<br />
|
||||
</n8n-info-tip>
|
||||
<n8n-action-box
|
||||
:description="$locale.baseText('settings.ldap.disabled.description')"
|
||||
:buttonText="$locale.baseText('settings.ldap.disabled.buttonText')"
|
||||
@click="onContactUsClick"
|
||||
>
|
||||
<template #heading>
|
||||
<span>{{ $locale.baseText('settings.ldap.disabled.title') }}</span>
|
||||
</template>
|
||||
</n8n-action-box>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div :class="$style.container">
|
||||
<div :class="$style.header">
|
||||
<n8n-heading size="2xlarge">
|
||||
{{ $locale.baseText('settings.ldap') }}
|
||||
</n8n-heading>
|
||||
</div>
|
||||
<div :class="$style.docsInfoTip">
|
||||
<n8n-info-tip theme="info" type="note">
|
||||
<template>
|
||||
<span v-html="$locale.baseText('settings.ldap.infoTip')"></span>
|
||||
</template>
|
||||
</n8n-info-tip>
|
||||
</div>
|
||||
<div :class="$style.settingsForm">
|
||||
<n8n-form-inputs
|
||||
v-if="formInputs"
|
||||
ref="ldapConfigForm"
|
||||
:inputs="formInputs"
|
||||
:eventBus="formBus"
|
||||
:columnView="true"
|
||||
verticalSpacing="l"
|
||||
@input="onInput"
|
||||
@ready="onReadyToSubmit"
|
||||
@submit="onSubmit"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<n8n-button
|
||||
v-if="loginEnabled"
|
||||
:label="
|
||||
loadingTestConnection
|
||||
? $locale.baseText('settings.ldap.testingConnection')
|
||||
: $locale.baseText('settings.ldap.testConnection')
|
||||
"
|
||||
size="large"
|
||||
class="mr-s"
|
||||
:disabled="hasAnyChanges || !readyToSubmit"
|
||||
:loading="loadingTestConnection"
|
||||
@click="onTestConnectionClick"
|
||||
/>
|
||||
<n8n-button
|
||||
:label="$locale.baseText('settings.ldap.save')"
|
||||
size="large"
|
||||
:disabled="!hasAnyChanges || !readyToSubmit"
|
||||
@click="onSaveClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="loginEnabled">
|
||||
<n8n-heading tag="h1" class="mb-xl mt-3xl" size="medium">{{
|
||||
$locale.baseText('settings.ldap.section.synchronization.title')
|
||||
}}</n8n-heading>
|
||||
<div :class="$style.syncTable">
|
||||
<el-table
|
||||
v-loading="loadingTable"
|
||||
:border="true"
|
||||
:stripe="true"
|
||||
:data="dataTable"
|
||||
:cell-style="cellClassStyle"
|
||||
style="width: 100%"
|
||||
height="250"
|
||||
:key="tableKey"
|
||||
>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
:label="$locale.baseText('settings.ldap.synchronizationTable.column.status')"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="endedAt"
|
||||
:label="$locale.baseText('settings.ldap.synchronizationTable.column.endedAt')"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="runMode"
|
||||
:label="$locale.baseText('settings.ldap.synchronizationTable.column.runMode')"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="runTime"
|
||||
:label="$locale.baseText('settings.ldap.synchronizationTable.column.runTime')"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="details"
|
||||
:label="$locale.baseText('settings.ldap.synchronizationTable.column.details')"
|
||||
>
|
||||
</el-table-column>
|
||||
<template #empty>{{
|
||||
$locale.baseText('settings.ldap.synchronizationTable.empty.message')
|
||||
}}</template>
|
||||
<template #append>
|
||||
<infinite-loading
|
||||
@infinite="getLdapSynchronizations"
|
||||
force-use-infinite-wrapper=".el-table__body-wrapper"
|
||||
>
|
||||
</infinite-loading>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="pb-3xl">
|
||||
<n8n-button
|
||||
:label="$locale.baseText('settings.ldap.dryRun')"
|
||||
type="secondary"
|
||||
size="large"
|
||||
class="mr-s"
|
||||
:disabled="hasAnyChanges || !readyToSubmit"
|
||||
:loading="loadingDryRun"
|
||||
@click="onDryRunClick"
|
||||
/>
|
||||
<n8n-button
|
||||
:label="$locale.baseText('settings.ldap.synchronizeNow')"
|
||||
size="large"
|
||||
:disabled="hasAnyChanges || !readyToSubmit"
|
||||
:loading="loadingLiveRun"
|
||||
@click="onLiveRunClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { convertToDisplayDate } from '@/utils';
|
||||
import { showMessage } from '@/mixins/showMessage';
|
||||
import {
|
||||
ILdapConfig,
|
||||
ILdapSyncData,
|
||||
ILdapSyncTable,
|
||||
IFormInput,
|
||||
IFormInputs,
|
||||
IUser,
|
||||
} from '@/Interface';
|
||||
import Vue from 'vue';
|
||||
import mixins from 'vue-typed-mixins';
|
||||
|
||||
import humanizeDuration from 'humanize-duration';
|
||||
import { rowCallbackParams, cellCallbackParams, ElTable } from 'element-ui/types/table';
|
||||
import { capitalizeFirstLetter } from '@/utils';
|
||||
import InfiniteLoading from 'vue-infinite-loading';
|
||||
import { mapStores } from 'pinia';
|
||||
import { useUsersStore } from '@/stores/users';
|
||||
import { useSettingsStore } from '@/stores/settings';
|
||||
import { getLdapSynchronizations } from '@/api/ldap';
|
||||
import { N8N_CONTACT_EMAIL, N8N_SALES_EMAIL } from '@/constants';
|
||||
import { ElTableColumn } from 'element-ui/types/table-column';
|
||||
|
||||
type FormValues = {
|
||||
loginEnabled: boolean;
|
||||
loginLabel: string;
|
||||
serverAddress: string;
|
||||
baseDn: string;
|
||||
bindingType: string;
|
||||
adminDn: string;
|
||||
adminPassword: string;
|
||||
loginId: string;
|
||||
email: string;
|
||||
lastName: string;
|
||||
firstName: string;
|
||||
ldapId: string;
|
||||
synchronizationEnabled: boolean;
|
||||
allowUnauthorizedCerts: boolean;
|
||||
synchronizationInterval: number;
|
||||
userFilter: string;
|
||||
pageSize: number;
|
||||
searchTimeout: number;
|
||||
port: number;
|
||||
connectionSecurity: string;
|
||||
};
|
||||
|
||||
type tableRow = {
|
||||
status: string;
|
||||
startAt: string;
|
||||
endedAt: string;
|
||||
error: string;
|
||||
runMode: string;
|
||||
};
|
||||
|
||||
type rowType = rowCallbackParams & tableRow;
|
||||
|
||||
type cellType = cellCallbackParams & { property: keyof tableRow };
|
||||
|
||||
export default mixins(showMessage).extend({
|
||||
name: 'SettingsLdapView',
|
||||
components: {
|
||||
InfiniteLoading,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataTable: [] as ILdapSyncTable[],
|
||||
tableKey: 0,
|
||||
adConfig: {} as ILdapConfig,
|
||||
loadingTestConnection: false,
|
||||
loadingDryRun: false,
|
||||
loadingLiveRun: false,
|
||||
loadingTable: false,
|
||||
hasAnyChanges: false,
|
||||
formInputs: null as null | IFormInputs,
|
||||
formBus: new Vue(),
|
||||
readyToSubmit: false,
|
||||
page: 0,
|
||||
loginEnabled: false,
|
||||
syncEnabled: false,
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
if (!this.isLDAPFeatureEnabled) return;
|
||||
await this.getLdapConfig();
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useUsersStore, useSettingsStore),
|
||||
currentUser(): null | IUser {
|
||||
return this.usersStore.currentUser;
|
||||
},
|
||||
isLDAPFeatureEnabled(): boolean {
|
||||
return this.settingsStore.settings.enterprise.ldap === true;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onContactUsClick(event: MouseEvent): void {
|
||||
const email = this.settingsStore.isCloudDeployment ? N8N_CONTACT_EMAIL : N8N_SALES_EMAIL;
|
||||
location.href = `mailto:${email}`;
|
||||
},
|
||||
cellClassStyle({ row, column }: { row: rowType; column: cellType }) {
|
||||
if (column.property === 'status') {
|
||||
if (row.status === 'Success') {
|
||||
return { color: 'green' };
|
||||
} else if (row.status === 'Error') {
|
||||
return { color: 'red' };
|
||||
}
|
||||
}
|
||||
if (column.property === 'runMode') {
|
||||
if (row.runMode === 'Dry') {
|
||||
return { color: 'orange' };
|
||||
} else if (row.runMode === 'Live') {
|
||||
return { color: 'blue' };
|
||||
}
|
||||
}
|
||||
return {};
|
||||
},
|
||||
onInput(input: { name: string; value: string | number | boolean }) {
|
||||
if (input.name === 'loginEnabled' && typeof input.value === 'boolean') {
|
||||
this.loginEnabled = input.value;
|
||||
}
|
||||
if (input.name === 'synchronizationEnabled' && typeof input.value === 'boolean') {
|
||||
this.syncEnabled = input.value;
|
||||
}
|
||||
this.hasAnyChanges = true;
|
||||
},
|
||||
onReadyToSubmit(ready: boolean) {
|
||||
this.readyToSubmit = ready;
|
||||
},
|
||||
syncDataMapper(sync: ILdapSyncData): ILdapSyncTable {
|
||||
const startedAt = new Date(sync.startedAt);
|
||||
const endedAt = new Date(sync.endedAt);
|
||||
const runTimeInMinutes = endedAt.getTime() - startedAt.getTime();
|
||||
return {
|
||||
runTime: humanizeDuration(runTimeInMinutes),
|
||||
runMode: capitalizeFirstLetter(sync.runMode),
|
||||
status: capitalizeFirstLetter(sync.status),
|
||||
endedAt: convertToDisplayDate(endedAt.getTime()),
|
||||
details: this.$locale.baseText('settings.ldap.usersScanned', {
|
||||
interpolate: {
|
||||
scanned: sync.scanned.toString(),
|
||||
},
|
||||
}),
|
||||
};
|
||||
},
|
||||
async onSubmit(): Promise<void> {
|
||||
// We want to save all form values (incl. the hidden onces), so we are using
|
||||
// `values` data prop of the `FormInputs` child component since they are all preserved there
|
||||
const formInputs = this.$refs.ldapConfigForm as (Vue & { values: FormValues }) | undefined;
|
||||
if (!this.hasAnyChanges || !formInputs) {
|
||||
return;
|
||||
}
|
||||
|
||||
const newConfiguration: ILdapConfig = {
|
||||
loginEnabled: formInputs.values.loginEnabled,
|
||||
loginLabel: formInputs.values.loginLabel,
|
||||
connectionUrl: formInputs.values.serverAddress,
|
||||
allowUnauthorizedCerts: formInputs.values.allowUnauthorizedCerts,
|
||||
connectionPort: +formInputs.values.port,
|
||||
connectionSecurity: formInputs.values.connectionSecurity,
|
||||
baseDn: formInputs.values.baseDn,
|
||||
bindingAdminDn: formInputs.values.bindingType === 'admin' ? formInputs.values.adminDn : '',
|
||||
bindingAdminPassword:
|
||||
formInputs.values.bindingType === 'admin' ? formInputs.values.adminPassword : '',
|
||||
emailAttribute: formInputs.values.email,
|
||||
firstNameAttribute: formInputs.values.firstName,
|
||||
lastNameAttribute: formInputs.values.lastName,
|
||||
loginIdAttribute: formInputs.values.loginId,
|
||||
ldapIdAttribute: formInputs.values.ldapId,
|
||||
userFilter: formInputs.values.userFilter,
|
||||
synchronizationEnabled: formInputs.values.synchronizationEnabled,
|
||||
synchronizationInterval: +formInputs.values.synchronizationInterval,
|
||||
searchPageSize: +formInputs.values.pageSize,
|
||||
searchTimeout: +formInputs.values.searchTimeout,
|
||||
};
|
||||
|
||||
let saveForm = true;
|
||||
|
||||
try {
|
||||
if (this.adConfig.loginEnabled === true && newConfiguration.loginEnabled === false) {
|
||||
saveForm = await this.confirmMessage(
|
||||
this.$locale.baseText('settings.ldap.confirmMessage.beforeSaveForm.message'),
|
||||
this.$locale.baseText('settings.ldap.confirmMessage.beforeSaveForm.headline'),
|
||||
null,
|
||||
this.$locale.baseText('settings.ldap.confirmMessage.beforeSaveForm.cancelButtonText'),
|
||||
this.$locale.baseText('settings.ldap.confirmMessage.beforeSaveForm.confirmButtonText'),
|
||||
);
|
||||
}
|
||||
|
||||
if (!saveForm) {
|
||||
this.hasAnyChanges = true;
|
||||
}
|
||||
|
||||
this.adConfig = await this.settingsStore.updateLdapConfig(newConfiguration);
|
||||
this.$showToast({
|
||||
title: this.$locale.baseText('settings.ldap.updateConfiguration'),
|
||||
message: '',
|
||||
type: 'success',
|
||||
});
|
||||
} catch (error) {
|
||||
this.$showError(error, this.$locale.baseText('settings.ldap.configurationError'));
|
||||
} finally {
|
||||
if (saveForm) {
|
||||
this.hasAnyChanges = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
onSaveClick() {
|
||||
this.formBus.$emit('submit');
|
||||
},
|
||||
async onTestConnectionClick() {
|
||||
this.loadingTestConnection = true;
|
||||
try {
|
||||
await this.settingsStore.testLdapConnection();
|
||||
this.$showToast({
|
||||
title: this.$locale.baseText('settings.ldap.connectionTest'),
|
||||
message: this.$locale.baseText('settings.ldap.toast.connection.success'),
|
||||
type: 'success',
|
||||
});
|
||||
} catch (error) {
|
||||
this.$showToast({
|
||||
title: this.$locale.baseText('settings.ldap.connectionTestError'),
|
||||
message: error.message,
|
||||
type: 'error',
|
||||
});
|
||||
} finally {
|
||||
this.loadingTestConnection = false;
|
||||
}
|
||||
},
|
||||
async onDryRunClick() {
|
||||
this.loadingDryRun = true;
|
||||
try {
|
||||
await this.settingsStore.runLdapSync({ type: 'dry' });
|
||||
this.$showToast({
|
||||
title: this.$locale.baseText('settings.ldap.runSync.title'),
|
||||
message: this.$locale.baseText('settings.ldap.toast.sync.success'),
|
||||
type: 'success',
|
||||
});
|
||||
} catch (error) {
|
||||
this.$showError(error, this.$locale.baseText('settings.ldap.synchronizationError'));
|
||||
} finally {
|
||||
this.loadingDryRun = false;
|
||||
await this.reloadLdapSynchronizations();
|
||||
}
|
||||
},
|
||||
async onLiveRunClick() {
|
||||
this.loadingLiveRun = true;
|
||||
try {
|
||||
await this.settingsStore.runLdapSync({ type: 'live' });
|
||||
this.$showToast({
|
||||
title: this.$locale.baseText('settings.ldap.runSync.title'),
|
||||
message: this.$locale.baseText('settings.ldap.toast.sync.success'),
|
||||
type: 'success',
|
||||
});
|
||||
} catch (error) {
|
||||
this.$showError(error, this.$locale.baseText('settings.ldap.synchronizationError'));
|
||||
} finally {
|
||||
this.loadingLiveRun = false;
|
||||
await this.reloadLdapSynchronizations();
|
||||
}
|
||||
},
|
||||
async getLdapConfig() {
|
||||
try {
|
||||
this.adConfig = await this.settingsStore.getLdapConfig();
|
||||
this.loginEnabled = this.adConfig.loginEnabled;
|
||||
this.syncEnabled = this.adConfig.synchronizationEnabled;
|
||||
const whenLoginEnabled: IFormInput['shouldDisplay'] = (values) =>
|
||||
values['loginEnabled'] === true;
|
||||
const whenSyncAndLoginEnabled: IFormInput['shouldDisplay'] = (values) =>
|
||||
values['synchronizationEnabled'] === true && values['loginEnabled'] === true;
|
||||
const whenAdminBindingAndLoginEnabled: IFormInput['shouldDisplay'] = (values) =>
|
||||
values['bindingType'] === 'admin' && values['loginEnabled'] === true;
|
||||
this.formInputs = [
|
||||
{
|
||||
name: 'loginEnabled',
|
||||
initialValue: this.adConfig.loginEnabled,
|
||||
properties: {
|
||||
type: 'toggle',
|
||||
label: this.$locale.baseText('settings.ldap.form.loginEnabled.label'),
|
||||
tooltipText: this.$locale.baseText('settings.ldap.form.loginEnabled.tooltip'),
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'loginLabel',
|
||||
initialValue: this.adConfig.loginLabel,
|
||||
properties: {
|
||||
label: this.$locale.baseText('settings.ldap.form.loginLabel.label'),
|
||||
required: true,
|
||||
placeholder: this.$locale.baseText('settings.ldap.form.loginLabel.placeholder'),
|
||||
infoText: this.$locale.baseText('settings.ldap.form.loginLabel.infoText'),
|
||||
},
|
||||
shouldDisplay: whenLoginEnabled,
|
||||
},
|
||||
{
|
||||
name: 'serverAddress',
|
||||
initialValue: this.adConfig.connectionUrl,
|
||||
properties: {
|
||||
label: this.$locale.baseText('settings.ldap.form.serverAddress.label'),
|
||||
required: true,
|
||||
capitalize: true,
|
||||
placeholder: this.$locale.baseText('settings.ldap.form.serverAddress.placeholder'),
|
||||
infoText: this.$locale.baseText('settings.ldap.form.serverAddress.infoText'),
|
||||
},
|
||||
shouldDisplay: whenLoginEnabled,
|
||||
},
|
||||
{
|
||||
name: 'port',
|
||||
initialValue: this.adConfig.connectionPort,
|
||||
properties: {
|
||||
type: 'number',
|
||||
label: this.$locale.baseText('settings.ldap.form.port.label'),
|
||||
capitalize: true,
|
||||
infoText: this.$locale.baseText('settings.ldap.form.port.infoText'),
|
||||
},
|
||||
shouldDisplay: whenLoginEnabled,
|
||||
},
|
||||
{
|
||||
name: 'connectionSecurity',
|
||||
initialValue: this.adConfig.connectionSecurity,
|
||||
properties: {
|
||||
type: 'select',
|
||||
label: this.$locale.baseText('settings.ldap.form.connectionSecurity.label'),
|
||||
infoText: this.$locale.baseText('settings.ldap.form.connectionSecurity.infoText'),
|
||||
options: [
|
||||
{
|
||||
label: 'None',
|
||||
value: 'none',
|
||||
},
|
||||
{
|
||||
label: 'TLS',
|
||||
value: 'tls',
|
||||
},
|
||||
{
|
||||
label: 'STARTTLS',
|
||||
value: 'startTls',
|
||||
},
|
||||
],
|
||||
required: true,
|
||||
capitalize: true,
|
||||
},
|
||||
shouldDisplay: whenLoginEnabled,
|
||||
},
|
||||
{
|
||||
name: 'allowUnauthorizedCerts',
|
||||
initialValue: this.adConfig.allowUnauthorizedCerts,
|
||||
properties: {
|
||||
type: 'toggle',
|
||||
label: this.$locale.baseText('settings.ldap.form.allowUnauthorizedCerts.label'),
|
||||
required: false,
|
||||
},
|
||||
shouldDisplay(values): boolean {
|
||||
return values['connectionSecurity'] !== 'none' && values['loginEnabled'] === true;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'baseDn',
|
||||
initialValue: this.adConfig.baseDn,
|
||||
properties: {
|
||||
label: this.$locale.baseText('settings.ldap.form.baseDn.label'),
|
||||
required: true,
|
||||
capitalize: true,
|
||||
placeholder: this.$locale.baseText('settings.ldap.form.baseDn.placeholder'),
|
||||
infoText: this.$locale.baseText('settings.ldap.form.baseDn.infoText'),
|
||||
},
|
||||
shouldDisplay: whenLoginEnabled,
|
||||
},
|
||||
{
|
||||
name: 'bindingType',
|
||||
initialValue: 'admin',
|
||||
properties: {
|
||||
type: 'select',
|
||||
label: this.$locale.baseText('settings.ldap.form.bindingType.label'),
|
||||
infoText: this.$locale.baseText('settings.ldap.form.bindingType.infoText'),
|
||||
options: [
|
||||
{
|
||||
value: 'admin',
|
||||
label: 'Admin',
|
||||
},
|
||||
{
|
||||
value: 'anonymous',
|
||||
label: 'Anonymous',
|
||||
},
|
||||
],
|
||||
},
|
||||
shouldDisplay: whenLoginEnabled,
|
||||
},
|
||||
{
|
||||
name: 'adminDn',
|
||||
initialValue: this.adConfig.bindingAdminDn,
|
||||
properties: {
|
||||
label: this.$locale.baseText('settings.ldap.form.adminDn.label'),
|
||||
placeholder: this.$locale.baseText('settings.ldap.form.adminDn.placeholder'),
|
||||
infoText: this.$locale.baseText('settings.ldap.form.adminDn.infoText'),
|
||||
capitalize: true,
|
||||
},
|
||||
shouldDisplay: whenAdminBindingAndLoginEnabled,
|
||||
},
|
||||
{
|
||||
name: 'adminPassword',
|
||||
initialValue: this.adConfig.bindingAdminPassword,
|
||||
properties: {
|
||||
label: this.$locale.baseText('settings.ldap.form.adminPassword.label'),
|
||||
type: 'password',
|
||||
capitalize: true,
|
||||
infoText: this.$locale.baseText('settings.ldap.form.adminPassword.infoText'),
|
||||
},
|
||||
shouldDisplay: whenAdminBindingAndLoginEnabled,
|
||||
},
|
||||
{
|
||||
name: 'userFilter',
|
||||
initialValue: this.adConfig.userFilter,
|
||||
properties: {
|
||||
label: this.$locale.baseText('settings.ldap.form.userFilter.label'),
|
||||
type: 'text',
|
||||
required: false,
|
||||
capitalize: true,
|
||||
placeholder: this.$locale.baseText('settings.ldap.form.userFilter.placeholder'),
|
||||
infoText: this.$locale.baseText('settings.ldap.form.userFilter.infoText'),
|
||||
},
|
||||
shouldDisplay: whenLoginEnabled,
|
||||
},
|
||||
{
|
||||
name: 'attributeMappingInfo',
|
||||
properties: {
|
||||
label: this.$locale.baseText('settings.ldap.form.attributeMappingInfo.label'),
|
||||
type: 'info',
|
||||
labelSize: 'large',
|
||||
labelAlignment: 'left',
|
||||
},
|
||||
shouldDisplay: whenLoginEnabled,
|
||||
},
|
||||
{
|
||||
name: 'ldapId',
|
||||
initialValue: this.adConfig.ldapIdAttribute,
|
||||
properties: {
|
||||
label: this.$locale.baseText('settings.ldap.form.ldapId.label'),
|
||||
type: 'text',
|
||||
required: true,
|
||||
capitalize: true,
|
||||
placeholder: this.$locale.baseText('settings.ldap.form.ldapId.placeholder'),
|
||||
infoText: this.$locale.baseText('settings.ldap.form.ldapId.infoText'),
|
||||
},
|
||||
shouldDisplay: whenLoginEnabled,
|
||||
},
|
||||
{
|
||||
name: 'loginId',
|
||||
initialValue: this.adConfig.loginIdAttribute,
|
||||
properties: {
|
||||
label: this.$locale.baseText('settings.ldap.form.loginId.label'),
|
||||
type: 'text',
|
||||
autocomplete: 'email',
|
||||
required: true,
|
||||
capitalize: true,
|
||||
placeholder: this.$locale.baseText('settings.ldap.form.loginId.placeholder'),
|
||||
infoText: this.$locale.baseText('settings.ldap.form.loginId.infoText'),
|
||||
},
|
||||
shouldDisplay: whenLoginEnabled,
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
initialValue: this.adConfig.emailAttribute,
|
||||
properties: {
|
||||
label: this.$locale.baseText('settings.ldap.form.email.label'),
|
||||
type: 'text',
|
||||
autocomplete: 'email',
|
||||
required: true,
|
||||
capitalize: true,
|
||||
placeholder: this.$locale.baseText('settings.ldap.form.email.placeholder'),
|
||||
infoText: this.$locale.baseText('settings.ldap.form.email.infoText'),
|
||||
},
|
||||
shouldDisplay: whenLoginEnabled,
|
||||
},
|
||||
{
|
||||
name: 'firstName',
|
||||
initialValue: this.adConfig.firstNameAttribute,
|
||||
properties: {
|
||||
label: this.$locale.baseText('settings.ldap.form.firstName.label'),
|
||||
type: 'text',
|
||||
autocomplete: 'email',
|
||||
required: true,
|
||||
capitalize: true,
|
||||
placeholder: this.$locale.baseText('settings.ldap.form.firstName.placeholder'),
|
||||
infoText: this.$locale.baseText('settings.ldap.form.firstName.infoText'),
|
||||
},
|
||||
shouldDisplay: whenLoginEnabled,
|
||||
},
|
||||
{
|
||||
name: 'lastName',
|
||||
initialValue: this.adConfig.lastNameAttribute,
|
||||
properties: {
|
||||
label: this.$locale.baseText('settings.ldap.form.lastName.label'),
|
||||
type: 'text',
|
||||
autocomplete: 'email',
|
||||
required: true,
|
||||
capitalize: true,
|
||||
placeholder: this.$locale.baseText('settings.ldap.form.lastName.placeholder'),
|
||||
infoText: this.$locale.baseText('settings.ldap.form.lastName.infoText'),
|
||||
},
|
||||
shouldDisplay: whenLoginEnabled,
|
||||
},
|
||||
{
|
||||
name: 'synchronizationEnabled',
|
||||
initialValue: this.adConfig.synchronizationEnabled,
|
||||
properties: {
|
||||
type: 'toggle',
|
||||
label: this.$locale.baseText('settings.ldap.form.synchronizationEnabled.label'),
|
||||
tooltipText: this.$locale.baseText(
|
||||
'settings.ldap.form.synchronizationEnabled.tooltip',
|
||||
),
|
||||
required: true,
|
||||
},
|
||||
shouldDisplay: whenLoginEnabled,
|
||||
},
|
||||
{
|
||||
name: 'synchronizationInterval',
|
||||
initialValue: this.adConfig.synchronizationInterval,
|
||||
properties: {
|
||||
type: 'number',
|
||||
label: this.$locale.baseText('settings.ldap.form.synchronizationInterval.label'),
|
||||
infoText: this.$locale.baseText(
|
||||
'settings.ldap.form.synchronizationInterval.infoText',
|
||||
),
|
||||
},
|
||||
shouldDisplay: whenSyncAndLoginEnabled,
|
||||
},
|
||||
{
|
||||
name: 'pageSize',
|
||||
initialValue: this.adConfig.searchPageSize,
|
||||
properties: {
|
||||
type: 'number',
|
||||
label: this.$locale.baseText('settings.ldap.form.pageSize.label'),
|
||||
infoText: this.$locale.baseText('settings.ldap.form.pageSize.infoText'),
|
||||
},
|
||||
shouldDisplay: whenSyncAndLoginEnabled,
|
||||
},
|
||||
{
|
||||
name: 'searchTimeout',
|
||||
initialValue: this.adConfig.searchTimeout,
|
||||
properties: {
|
||||
type: 'number',
|
||||
label: this.$locale.baseText('settings.ldap.form.searchTimeout.label'),
|
||||
infoText: this.$locale.baseText('settings.ldap.form.searchTimeout.infoText'),
|
||||
},
|
||||
shouldDisplay: whenSyncAndLoginEnabled,
|
||||
},
|
||||
];
|
||||
} catch (error) {
|
||||
this.$showError(error, this.$locale.baseText('settings.ldap.configurationError'));
|
||||
}
|
||||
},
|
||||
async getLdapSynchronizations(state: any) {
|
||||
try {
|
||||
this.loadingTable = true;
|
||||
const data = await this.settingsStore.getLdapSynchronizations({
|
||||
page: this.page,
|
||||
});
|
||||
|
||||
if (data.length !== 0) {
|
||||
this.dataTable.push(...data.map(this.syncDataMapper));
|
||||
this.page += 1;
|
||||
state.loaded();
|
||||
} else {
|
||||
state.complete();
|
||||
}
|
||||
this.loadingTable = false;
|
||||
} catch (error) {
|
||||
this.$showError(error, this.$locale.baseText('settings.ldap.synchronizationError'));
|
||||
}
|
||||
},
|
||||
async reloadLdapSynchronizations() {
|
||||
try {
|
||||
this.page = 0;
|
||||
this.tableKey += 1;
|
||||
this.dataTable = [];
|
||||
} catch (error) {
|
||||
this.$showError(error, this.$locale.baseText('settings.ldap.synchronizationError'));
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.container {
|
||||
> * {
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
}
|
||||
|
||||
.syncTable {
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
|
||||
*:first-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.enableFeatureContainer {
|
||||
margin-bottom: var(--spacing-1xl);
|
||||
}
|
||||
|
||||
.enableFeatureContainer > span {
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: var(--font-weight-bold);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.enableFeatureContainer {
|
||||
> * {
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.sectionHeader {
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
.settingsForm {
|
||||
:global(.form-text) {
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
}
|
||||
|
||||
.docsInfoTip {
|
||||
&,
|
||||
& > div {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user