mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-02 07:01:30 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(editor): Migrate SettingsLdapView.vue to composition API (#10916)

Browse source
This commit is contained in:
Ricardo Espinoza 2024-09-23 07:52:08 -04:00 committed by GitHub
parent f75ca41fc0
commit 39310c01fb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 538 additions and 551 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

457
packages/editor-ui/src/views/SettingsLdapView.vue
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script setup lang="ts">
import type { CSSProperties } from 'vue'; import type { CSSProperties } from 'vue';
import { defineComponent } from 'vue'; import { computed, onMounted, ref } from 'vue';
import { capitalizeFirstLetter } from '@/utils/htmlUtils'; import { capitalizeFirstLetter } from '@/utils/htmlUtils';
import { convertToDisplayDate } from '@/utils/typesUtils'; import { convertToDisplayDate } from '@/utils/typesUtils';
import { useToast } from '@/composables/useToast'; import { useToast } from '@/composables/useToast';
@ -11,7 +11,6 @@ import type {
ILdapSyncTable, ILdapSyncTable,
IFormInput, IFormInput,
IFormInputs, IFormInputs,
IUser,
} from '@/Interface'; } from '@/Interface';
import { MODAL_CONFIRM } from '@/constants'; import { MODAL_CONFIRM } from '@/constants';
@ -19,12 +18,11 @@ import humanizeDuration from 'humanize-duration';
import { ElTable, ElTableColumn } from 'element-plus'; import { ElTable, ElTableColumn } from 'element-plus';
import type { Events } from 'v3-infinite-loading'; import type { Events } from 'v3-infinite-loading';
import InfiniteLoading from 'v3-infinite-loading'; import InfiniteLoading from 'v3-infinite-loading';
import { mapStores } from 'pinia';
import { useUsersStore } from '@/stores/users.store';
import { useSettingsStore } from '@/stores/settings.store'; import { useSettingsStore } from '@/stores/settings.store';
import { useUIStore } from '@/stores/ui.store'; import { useUIStore } from '@/stores/ui.store';
import { createFormEventBus } from 'n8n-design-system/utils'; import { createFormEventBus } from 'n8n-design-system/utils';
import type { TableColumnCtx } from 'element-plus'; import type { TableColumnCtx } from 'element-plus';
import { useI18n } from '@/composables/useI18n';
type TableRow = { type TableRow = {
status: string; status: string;
@ -64,55 +62,34 @@ type CellClassStyleMethodParams<T> = {
columnIndex: number; columnIndex: number;
}; };
export default defineComponent({ const toast = useToast();
name: 'SettingsLdapView', const i18n = useI18n();
components: { const message = useMessage();
InfiniteLoading,
ElTable, const settingsStore = useSettingsStore();
ElTableColumn, const uiStore = useUIStore();
},
setup() { const dataTable = ref<ILdapSyncTable[]>([]);
return { const tableKey = ref(0);
...useToast(), const adConfig = ref<ILdapConfig>();
...useMessage(), const loadingTestConnection = ref(false);
}; const loadingDryRun = ref(false);
}, const loadingLiveRun = ref(false);
data() { const loadingTable = ref(false);
return { const hasAnyChanges = ref(false);
dataTable: [] as ILdapSyncTable[], const formInputs = ref<IFormInputs | null>(null);
tableKey: 0, const formBus = createFormEventBus();
adConfig: {} as ILdapConfig, const readyToSubmit = ref(false);
loadingTestConnection: false, const page = ref(0);
loadingDryRun: false, const loginEnabled = ref(false);
loadingLiveRun: false, const syncEnabled = ref(false);
loadingTable: false, const ldapConfigFormRef = ref<{ getValues: () => LDAPConfigForm }>();
hasAnyChanges: false,
formInputs: null as null | IFormInputs, const isLDAPFeatureEnabled = computed(() => settingsStore.settings.enterprise.ldap);
formBus: createFormEventBus(),
readyToSubmit: false, const goToUpgrade = async () => await uiStore.goToUpgrade('ldap', 'upgrade-ldap');
page: 0,
loginEnabled: false, const cellClassStyle = ({ row, column }: CellClassStyleMethodParams<TableRow>): CSSProperties => {
syncEnabled: false,
};
},
computed: {
...mapStores(useUsersStore, useSettingsStore, useUIStore),
currentUser(): null | IUser {
return this.usersStore.currentUser;
},
isLDAPFeatureEnabled(): boolean {
return this.settingsStore.settings.enterprise.ldap;
},
},
async mounted() {
if (!this.isLDAPFeatureEnabled) return;
await this.getLdapConfig();
},
methods: {
goToUpgrade() {
void this.uiStore.goToUpgrade('ldap', 'upgrade-ldap');
},
cellClassStyle({ row, column }: CellClassStyleMethodParams<TableRow>): CSSProperties {
if (column.property === 'status') { if (column.property === 'status') {
if (row.status === 'Success') { if (row.status === 'Success') {
return { color: 'green' }; return { color: 'green' };
@ -128,20 +105,23 @@ export default defineComponent({
} }
} }
return {}; return {};
}, };
onInput(input: { name: string; value: string | number | boolean }) {
const onInput = (input: { name: string; value: string | number | boolean }) => {
if (input.name === 'loginEnabled' && typeof input.value === 'boolean') { if (input.name === 'loginEnabled' && typeof input.value === 'boolean') {
this.loginEnabled = input.value; loginEnabled.value = input.value;
} }
if (input.name === 'synchronizationEnabled' && typeof input.value === 'boolean') { if (input.name === 'synchronizationEnabled' && typeof input.value === 'boolean') {
this.syncEnabled = input.value; syncEnabled.value = input.value;
} }
this.hasAnyChanges = true; hasAnyChanges.value = true;
}, };
onReadyToSubmit(ready: boolean) {
this.readyToSubmit = ready; const onReadyToSubmit = (ready: boolean) => {
}, readyToSubmit.value = ready;
syncDataMapper(sync: ILdapSyncData): ILdapSyncTable { };
const syncDataMapper = (sync: ILdapSyncData): ILdapSyncTable => {
const startedAt = new Date(sync.startedAt); const startedAt = new Date(sync.startedAt);
const endedAt = new Date(sync.endedAt); const endedAt = new Date(sync.endedAt);
const runTimeInMinutes = endedAt.getTime() - startedAt.getTime(); const runTimeInMinutes = endedAt.getTime() - startedAt.getTime();
@ -150,23 +130,23 @@ export default defineComponent({
runMode: capitalizeFirstLetter(sync.runMode), runMode: capitalizeFirstLetter(sync.runMode),
status: capitalizeFirstLetter(sync.status), status: capitalizeFirstLetter(sync.status),
endedAt: convertToDisplayDate(endedAt.getTime()), endedAt: convertToDisplayDate(endedAt.getTime()),
details: this.$locale.baseText('settings.ldap.usersScanned', { details: i18n.baseText('settings.ldap.usersScanned', {
interpolate: { interpolate: {
scanned: sync.scanned.toString(), scanned: sync.scanned.toString(),
}, },
}), }),
}; };
}, };
async onSubmit(): Promise<void> {
const onSubmit = async () => {
// We want to save all form values (incl. the hidden onces), so we are using // 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 // `values` data prop of the `FormInputs` child component since they are all preserved there
const formInputsRef = this.$refs.ldapConfigForm as { getValues: () => LDAPConfigForm }; if (!hasAnyChanges.value || !ldapConfigFormRef.value) {
const formValues = formInputsRef.getValues();
if (!this.hasAnyChanges || !formInputsRef) {
return; return;
} }
const formValues = ldapConfigFormRef.value.getValues();
const newConfiguration: ILdapConfig = { const newConfiguration: ILdapConfig = {
loginEnabled: formValues.loginEnabled, loginEnabled: formValues.loginEnabled,
loginLabel: formValues.loginLabel, loginLabel: formValues.loginLabel,
@ -191,16 +171,18 @@ export default defineComponent({
let saveForm = true; let saveForm = true;
if (!adConfig.value) return;
try { try {
if (this.adConfig.loginEnabled && !newConfiguration.loginEnabled) { if (adConfig.value.loginEnabled && !newConfiguration.loginEnabled) {
const confirmAction = await this.confirm( const confirmAction = await message.confirm(
this.$locale.baseText('settings.ldap.confirmMessage.beforeSaveForm.message'), i18n.baseText('settings.ldap.confirmMessage.beforeSaveForm.message'),
this.$locale.baseText('settings.ldap.confirmMessage.beforeSaveForm.headline'), i18n.baseText('settings.ldap.confirmMessage.beforeSaveForm.headline'),
{ {
cancelButtonText: this.$locale.baseText( cancelButtonText: i18n.baseText(
'settings.ldap.confirmMessage.beforeSaveForm.cancelButtonText', 'settings.ldap.confirmMessage.beforeSaveForm.cancelButtonText',
), ),
confirmButtonText: this.$locale.baseText( confirmButtonText: i18n.baseText(
'settings.ldap.confirmMessage.beforeSaveForm.confirmButtonText', 'settings.ldap.confirmMessage.beforeSaveForm.confirmButtonText',
), ),
}, },
@ -210,140 +192,144 @@ export default defineComponent({
} }
if (!saveForm) { if (!saveForm) {
this.hasAnyChanges = true; hasAnyChanges.value = true;
} }
this.adConfig = await this.settingsStore.updateLdapConfig(newConfiguration); adConfig.value = await settingsStore.updateLdapConfig(newConfiguration);
this.showToast({ toast.showToast({
title: this.$locale.baseText('settings.ldap.updateConfiguration'), title: i18n.baseText('settings.ldap.updateConfiguration'),
message: '', message: '',
type: 'success', type: 'success',
}); });
} catch (error) { } catch (error) {
this.showError(error, this.$locale.baseText('settings.ldap.configurationError')); toast.showError(error, i18n.baseText('settings.ldap.configurationError'));
} finally { } finally {
if (saveForm) { if (saveForm) {
this.hasAnyChanges = false; hasAnyChanges.value = false;
} }
} }
}, };
onSaveClick() {
this.formBus.emit('submit'); const onSaveClick = () => {
}, formBus.emit('submit');
async onTestConnectionClick() { };
this.loadingTestConnection = true;
const onTestConnectionClick = async () => {
loadingTestConnection.value = true;
try { try {
await this.settingsStore.testLdapConnection(); await settingsStore.testLdapConnection();
this.showToast({ toast.showToast({
title: this.$locale.baseText('settings.ldap.connectionTest'), title: i18n.baseText('settings.ldap.connectionTest'),
message: this.$locale.baseText('settings.ldap.toast.connection.success'), message: i18n.baseText('settings.ldap.toast.connection.success'),
type: 'success', type: 'success',
}); });
} catch (error) { } catch (error) {
this.showToast({ toast.showToast({
title: this.$locale.baseText('settings.ldap.connectionTestError'), title: i18n.baseText('settings.ldap.connectionTestError'),
message: error.message, message: error.message,
type: 'error', type: 'error',
}); });
} finally { } finally {
this.loadingTestConnection = false; loadingTestConnection.value = false;
} }
}, };
async onDryRunClick() {
this.loadingDryRun = true; const onDryRunClick = async () => {
loadingDryRun.value = true;
try { try {
await this.settingsStore.runLdapSync({ type: 'dry' }); await settingsStore.runLdapSync({ type: 'dry' });
this.showToast({ toast.showToast({
title: this.$locale.baseText('settings.ldap.runSync.title'), title: i18n.baseText('settings.ldap.runSync.title'),
message: this.$locale.baseText('settings.ldap.toast.sync.success'), message: i18n.baseText('settings.ldap.toast.sync.success'),
type: 'success', type: 'success',
}); });
} catch (error) { } catch (error) {
this.showError(error, this.$locale.baseText('settings.ldap.synchronizationError')); toast.showError(error, i18n.baseText('settings.ldap.synchronizationError'));
} finally { } finally {
this.loadingDryRun = false; loadingDryRun.value = false;
await this.reloadLdapSynchronizations(); await reloadLdapSynchronizations();
} }
}, };
async onLiveRunClick() {
this.loadingLiveRun = true; const onLiveRunClick = async () => {
loadingLiveRun.value = true;
try { try {
await this.settingsStore.runLdapSync({ type: 'live' }); await settingsStore.runLdapSync({ type: 'live' });
this.showToast({ toast.showToast({
title: this.$locale.baseText('settings.ldap.runSync.title'), title: i18n.baseText('settings.ldap.runSync.title'),
message: this.$locale.baseText('settings.ldap.toast.sync.success'), message: i18n.baseText('settings.ldap.toast.sync.success'),
type: 'success', type: 'success',
}); });
} catch (error) { } catch (error) {
this.showError(error, this.$locale.baseText('settings.ldap.synchronizationError')); toast.showError(error, i18n.baseText('settings.ldap.synchronizationError'));
} finally { } finally {
this.loadingLiveRun = false; loadingLiveRun.value = false;
await this.reloadLdapSynchronizations(); await reloadLdapSynchronizations();
} }
}, };
async getLdapConfig() {
const getLdapConfig = async () => {
try { try {
this.adConfig = await this.settingsStore.getLdapConfig(); adConfig.value = await settingsStore.getLdapConfig();
this.loginEnabled = this.adConfig.loginEnabled; loginEnabled.value = adConfig.value.loginEnabled;
this.syncEnabled = this.adConfig.synchronizationEnabled; syncEnabled.value = adConfig.value.synchronizationEnabled;
const whenLoginEnabled: IFormInput['shouldDisplay'] = (values) => const whenLoginEnabled: IFormInput['shouldDisplay'] = (values) => values.loginEnabled === true;
values.loginEnabled === true;
const whenSyncAndLoginEnabled: IFormInput['shouldDisplay'] = (values) => const whenSyncAndLoginEnabled: IFormInput['shouldDisplay'] = (values) =>
values.synchronizationEnabled === true && values.loginEnabled === true; values.synchronizationEnabled === true && values.loginEnabled === true;
const whenAdminBindingAndLoginEnabled: IFormInput['shouldDisplay'] = (values) => const whenAdminBindingAndLoginEnabled: IFormInput['shouldDisplay'] = (values) =>
values.bindingType === 'admin' && values.loginEnabled === true; values.bindingType === 'admin' && values.loginEnabled === true;
this.formInputs = [ formInputs.value = [
{ {
name: 'loginEnabled', name: 'loginEnabled',
initialValue: this.adConfig.loginEnabled, initialValue: adConfig.value.loginEnabled,
properties: { properties: {
type: 'toggle', type: 'toggle',
label: this.$locale.baseText('settings.ldap.form.loginEnabled.label'), label: i18n.baseText('settings.ldap.form.loginEnabled.label'),
tooltipText: this.$locale.baseText('settings.ldap.form.loginEnabled.tooltip'), tooltipText: i18n.baseText('settings.ldap.form.loginEnabled.tooltip'),
required: true, required: true,
}, },
}, },
{ {
name: 'loginLabel', name: 'loginLabel',
initialValue: this.adConfig.loginLabel, initialValue: adConfig.value.loginLabel,
properties: { properties: {
label: this.$locale.baseText('settings.ldap.form.loginLabel.label'), label: i18n.baseText('settings.ldap.form.loginLabel.label'),
required: true, required: true,
placeholder: this.$locale.baseText('settings.ldap.form.loginLabel.placeholder'), placeholder: i18n.baseText('settings.ldap.form.loginLabel.placeholder'),
infoText: this.$locale.baseText('settings.ldap.form.loginLabel.infoText'), infoText: i18n.baseText('settings.ldap.form.loginLabel.infoText'),
}, },
shouldDisplay: whenLoginEnabled, shouldDisplay: whenLoginEnabled,
}, },
{ {
name: 'serverAddress', name: 'serverAddress',
initialValue: this.adConfig.connectionUrl, initialValue: adConfig.value.connectionUrl,
properties: { properties: {
label: this.$locale.baseText('settings.ldap.form.serverAddress.label'), label: i18n.baseText('settings.ldap.form.serverAddress.label'),
required: true, required: true,
capitalize: true, capitalize: true,
placeholder: this.$locale.baseText('settings.ldap.form.serverAddress.placeholder'), placeholder: i18n.baseText('settings.ldap.form.serverAddress.placeholder'),
infoText: this.$locale.baseText('settings.ldap.form.serverAddress.infoText'), infoText: i18n.baseText('settings.ldap.form.serverAddress.infoText'),
}, },
shouldDisplay: whenLoginEnabled, shouldDisplay: whenLoginEnabled,
}, },
{ {
name: 'port', name: 'port',
initialValue: this.adConfig.connectionPort, initialValue: adConfig.value.connectionPort,
properties: { properties: {
type: 'number', type: 'number',
label: this.$locale.baseText('settings.ldap.form.port.label'), label: i18n.baseText('settings.ldap.form.port.label'),
capitalize: true, capitalize: true,
infoText: this.$locale.baseText('settings.ldap.form.port.infoText'), infoText: i18n.baseText('settings.ldap.form.port.infoText'),
}, },
shouldDisplay: whenLoginEnabled, shouldDisplay: whenLoginEnabled,
}, },
{ {
name: 'connectionSecurity', name: 'connectionSecurity',
initialValue: this.adConfig.connectionSecurity, initialValue: adConfig.value.connectionSecurity,
properties: { properties: {
type: 'select', type: 'select',
label: this.$locale.baseText('settings.ldap.form.connectionSecurity.label'), label: i18n.baseText('settings.ldap.form.connectionSecurity.label'),
infoText: this.$locale.baseText('settings.ldap.form.connectionSecurity.infoText'), infoText: i18n.baseText('settings.ldap.form.connectionSecurity.infoText'),
options: [ options: [
{ {
label: 'None', label: 'None',
@ -365,10 +351,10 @@ export default defineComponent({
}, },
{ {
name: 'allowUnauthorizedCerts', name: 'allowUnauthorizedCerts',
initialValue: this.adConfig.allowUnauthorizedCerts, initialValue: adConfig.value.allowUnauthorizedCerts,
properties: { properties: {
type: 'toggle', type: 'toggle',
label: this.$locale.baseText('settings.ldap.form.allowUnauthorizedCerts.label'), label: i18n.baseText('settings.ldap.form.allowUnauthorizedCerts.label'),
required: false, required: false,
}, },
shouldDisplay(values): boolean { shouldDisplay(values): boolean {
@ -377,13 +363,13 @@ export default defineComponent({
}, },
{ {
name: 'baseDn', name: 'baseDn',
initialValue: this.adConfig.baseDn, initialValue: adConfig.value.baseDn,
properties: { properties: {
label: this.$locale.baseText('settings.ldap.form.baseDn.label'), label: i18n.baseText('settings.ldap.form.baseDn.label'),
required: true, required: true,
capitalize: true, capitalize: true,
placeholder: this.$locale.baseText('settings.ldap.form.baseDn.placeholder'), placeholder: i18n.baseText('settings.ldap.form.baseDn.placeholder'),
infoText: this.$locale.baseText('settings.ldap.form.baseDn.infoText'), infoText: i18n.baseText('settings.ldap.form.baseDn.infoText'),
}, },
shouldDisplay: whenLoginEnabled, shouldDisplay: whenLoginEnabled,
}, },
@ -392,8 +378,8 @@ export default defineComponent({
initialValue: 'admin', initialValue: 'admin',
properties: { properties: {
type: 'select', type: 'select',
label: this.$locale.baseText('settings.ldap.form.bindingType.label'), label: i18n.baseText('settings.ldap.form.bindingType.label'),
infoText: this.$locale.baseText('settings.ldap.form.bindingType.infoText'), infoText: i18n.baseText('settings.ldap.form.bindingType.infoText'),
options: [ options: [
{ {
value: 'admin', value: 'admin',
@ -409,43 +395,43 @@ export default defineComponent({
}, },
{ {
name: 'adminDn', name: 'adminDn',
initialValue: this.adConfig.bindingAdminDn, initialValue: adConfig.value.bindingAdminDn,
properties: { properties: {
label: this.$locale.baseText('settings.ldap.form.adminDn.label'), label: i18n.baseText('settings.ldap.form.adminDn.label'),
placeholder: this.$locale.baseText('settings.ldap.form.adminDn.placeholder'), placeholder: i18n.baseText('settings.ldap.form.adminDn.placeholder'),
infoText: this.$locale.baseText('settings.ldap.form.adminDn.infoText'), infoText: i18n.baseText('settings.ldap.form.adminDn.infoText'),
capitalize: true, capitalize: true,
}, },
shouldDisplay: whenAdminBindingAndLoginEnabled, shouldDisplay: whenAdminBindingAndLoginEnabled,
}, },
{ {
name: 'adminPassword', name: 'adminPassword',
initialValue: this.adConfig.bindingAdminPassword, initialValue: adConfig.value.bindingAdminPassword,
properties: { properties: {
label: this.$locale.baseText('settings.ldap.form.adminPassword.label'), label: i18n.baseText('settings.ldap.form.adminPassword.label'),
type: 'password', type: 'password',
capitalize: true, capitalize: true,
infoText: this.$locale.baseText('settings.ldap.form.adminPassword.infoText'), infoText: i18n.baseText('settings.ldap.form.adminPassword.infoText'),
}, },
shouldDisplay: whenAdminBindingAndLoginEnabled, shouldDisplay: whenAdminBindingAndLoginEnabled,
}, },
{ {
name: 'userFilter', name: 'userFilter',
initialValue: this.adConfig.userFilter, initialValue: adConfig.value.userFilter,
properties: { properties: {
label: this.$locale.baseText('settings.ldap.form.userFilter.label'), label: i18n.baseText('settings.ldap.form.userFilter.label'),
type: 'text', type: 'text',
required: false, required: false,
capitalize: true, capitalize: true,
placeholder: this.$locale.baseText('settings.ldap.form.userFilter.placeholder'), placeholder: i18n.baseText('settings.ldap.form.userFilter.placeholder'),
infoText: this.$locale.baseText('settings.ldap.form.userFilter.infoText'), infoText: i18n.baseText('settings.ldap.form.userFilter.infoText'),
}, },
shouldDisplay: whenLoginEnabled, shouldDisplay: whenLoginEnabled,
}, },
{ {
name: 'attributeMappingInfo', name: 'attributeMappingInfo',
properties: { properties: {
label: this.$locale.baseText('settings.ldap.form.attributeMappingInfo.label'), label: i18n.baseText('settings.ldap.form.attributeMappingInfo.label'),
type: 'info', type: 'info',
labelSize: 'large', labelSize: 'large',
labelAlignment: 'left', labelAlignment: 'left',
@ -454,152 +440,153 @@ export default defineComponent({
}, },
{ {
name: 'ldapId', name: 'ldapId',
initialValue: this.adConfig.ldapIdAttribute, initialValue: adConfig.value.ldapIdAttribute,
properties: { properties: {
label: this.$locale.baseText('settings.ldap.form.ldapId.label'), label: i18n.baseText('settings.ldap.form.ldapId.label'),
type: 'text', type: 'text',
required: true, required: true,
capitalize: true, capitalize: true,
placeholder: this.$locale.baseText('settings.ldap.form.ldapId.placeholder'), placeholder: i18n.baseText('settings.ldap.form.ldapId.placeholder'),
infoText: this.$locale.baseText('settings.ldap.form.ldapId.infoText'), infoText: i18n.baseText('settings.ldap.form.ldapId.infoText'),
}, },
shouldDisplay: whenLoginEnabled, shouldDisplay: whenLoginEnabled,
}, },
{ {
name: 'loginId', name: 'loginId',
initialValue: this.adConfig.loginIdAttribute, initialValue: adConfig.value.loginIdAttribute,
properties: { properties: {
label: this.$locale.baseText('settings.ldap.form.loginId.label'), label: i18n.baseText('settings.ldap.form.loginId.label'),
type: 'text', type: 'text',
autocomplete: 'email', autocomplete: 'email',
required: true, required: true,
capitalize: true, capitalize: true,
placeholder: this.$locale.baseText('settings.ldap.form.loginId.placeholder'), placeholder: i18n.baseText('settings.ldap.form.loginId.placeholder'),
infoText: this.$locale.baseText('settings.ldap.form.loginId.infoText'), infoText: i18n.baseText('settings.ldap.form.loginId.infoText'),
}, },
shouldDisplay: whenLoginEnabled, shouldDisplay: whenLoginEnabled,
}, },
{ {
name: 'email', name: 'email',
initialValue: this.adConfig.emailAttribute, initialValue: adConfig.value.emailAttribute,
properties: { properties: {
label: this.$locale.baseText('settings.ldap.form.email.label'), label: i18n.baseText('settings.ldap.form.email.label'),
type: 'text', type: 'text',
autocomplete: 'email', autocomplete: 'email',
required: true, required: true,
capitalize: true, capitalize: true,
placeholder: this.$locale.baseText('settings.ldap.form.email.placeholder'), placeholder: i18n.baseText('settings.ldap.form.email.placeholder'),
infoText: this.$locale.baseText('settings.ldap.form.email.infoText'), infoText: i18n.baseText('settings.ldap.form.email.infoText'),
}, },
shouldDisplay: whenLoginEnabled, shouldDisplay: whenLoginEnabled,
}, },
{ {
name: 'firstName', name: 'firstName',
initialValue: this.adConfig.firstNameAttribute, initialValue: adConfig.value.firstNameAttribute,
properties: { properties: {
label: this.$locale.baseText('settings.ldap.form.firstName.label'), label: i18n.baseText('settings.ldap.form.firstName.label'),
type: 'text', type: 'text',
autocomplete: 'email', autocomplete: 'email',
required: true, required: true,
capitalize: true, capitalize: true,
placeholder: this.$locale.baseText('settings.ldap.form.firstName.placeholder'), placeholder: i18n.baseText('settings.ldap.form.firstName.placeholder'),
infoText: this.$locale.baseText('settings.ldap.form.firstName.infoText'), infoText: i18n.baseText('settings.ldap.form.firstName.infoText'),
}, },
shouldDisplay: whenLoginEnabled, shouldDisplay: whenLoginEnabled,
}, },
{ {
name: 'lastName', name: 'lastName',
initialValue: this.adConfig.lastNameAttribute, initialValue: adConfig.value.lastNameAttribute,
properties: { properties: {
label: this.$locale.baseText('settings.ldap.form.lastName.label'), label: i18n.baseText('settings.ldap.form.lastName.label'),
type: 'text', type: 'text',
autocomplete: 'email', autocomplete: 'email',
required: true, required: true,
capitalize: true, capitalize: true,
placeholder: this.$locale.baseText('settings.ldap.form.lastName.placeholder'), placeholder: i18n.baseText('settings.ldap.form.lastName.placeholder'),
infoText: this.$locale.baseText('settings.ldap.form.lastName.infoText'), infoText: i18n.baseText('settings.ldap.form.lastName.infoText'),
}, },
shouldDisplay: whenLoginEnabled, shouldDisplay: whenLoginEnabled,
}, },
{ {
name: 'synchronizationEnabled', name: 'synchronizationEnabled',
initialValue: this.adConfig.synchronizationEnabled, initialValue: adConfig.value.synchronizationEnabled,
properties: { properties: {
type: 'toggle', type: 'toggle',
label: this.$locale.baseText('settings.ldap.form.synchronizationEnabled.label'), label: i18n.baseText('settings.ldap.form.synchronizationEnabled.label'),
tooltipText: this.$locale.baseText( tooltipText: i18n.baseText('settings.ldap.form.synchronizationEnabled.tooltip'),
'settings.ldap.form.synchronizationEnabled.tooltip',
),
required: true, required: true,
}, },
shouldDisplay: whenLoginEnabled, shouldDisplay: whenLoginEnabled,
}, },
{ {
name: 'synchronizationInterval', name: 'synchronizationInterval',
initialValue: this.adConfig.synchronizationInterval, initialValue: adConfig.value.synchronizationInterval,
properties: { properties: {
type: 'number', type: 'number',
label: this.$locale.baseText('settings.ldap.form.synchronizationInterval.label'), label: i18n.baseText('settings.ldap.form.synchronizationInterval.label'),
infoText: this.$locale.baseText( infoText: i18n.baseText('settings.ldap.form.synchronizationInterval.infoText'),
'settings.ldap.form.synchronizationInterval.infoText',
),
}, },
shouldDisplay: whenSyncAndLoginEnabled, shouldDisplay: whenSyncAndLoginEnabled,
}, },
{ {
name: 'pageSize', name: 'pageSize',
initialValue: this.adConfig.searchPageSize, initialValue: adConfig.value.searchPageSize,
properties: { properties: {
type: 'number', type: 'number',
label: this.$locale.baseText('settings.ldap.form.pageSize.label'), label: i18n.baseText('settings.ldap.form.pageSize.label'),
infoText: this.$locale.baseText('settings.ldap.form.pageSize.infoText'), infoText: i18n.baseText('settings.ldap.form.pageSize.infoText'),
}, },
shouldDisplay: whenSyncAndLoginEnabled, shouldDisplay: whenSyncAndLoginEnabled,
}, },
{ {
name: 'searchTimeout', name: 'searchTimeout',
initialValue: this.adConfig.searchTimeout, initialValue: adConfig.value.searchTimeout,
properties: { properties: {
type: 'number', type: 'number',
label: this.$locale.baseText('settings.ldap.form.searchTimeout.label'), label: i18n.baseText('settings.ldap.form.searchTimeout.label'),
infoText: this.$locale.baseText('settings.ldap.form.searchTimeout.infoText'), infoText: i18n.baseText('settings.ldap.form.searchTimeout.infoText'),
}, },
shouldDisplay: whenSyncAndLoginEnabled, shouldDisplay: whenSyncAndLoginEnabled,
}, },
]; ];
} catch (error) { } catch (error) {
this.showError(error, this.$locale.baseText('settings.ldap.configurationError')); toast.showError(error, i18n.baseText('settings.ldap.configurationError'));
} }
}, };
async getLdapSynchronizations(state: Parameters<Events['infinite']>[0]) {
const getLdapSynchronizations = async (state: Parameters<Events['infinite']>[0]) => {
try { try {
this.loadingTable = true; loadingTable.value = true;
const data = await this.settingsStore.getLdapSynchronizations({ const data = await settingsStore.getLdapSynchronizations({
page: this.page, page: page.value,
}); });
if (data.length !== 0) { if (data.length !== 0) {
this.dataTable.push(...data.map(this.syncDataMapper)); dataTable.value.push(...data.map(syncDataMapper));
this.page += 1; page.value += 1;
state.loaded(); state.loaded();
} else { } else {
state.complete(); state.complete();
} }
this.loadingTable = false; loadingTable.value = false;
} catch (error) { } catch (error) {
this.showError(error, this.$locale.baseText('settings.ldap.synchronizationError')); toast.showError(error, i18n.baseText('settings.ldap.synchronizationError'));
} }
}, };
async reloadLdapSynchronizations() {
const reloadLdapSynchronizations = async () => {
try { try {
this.page = 0; page.value = 0;
this.tableKey += 1; tableKey.value += 1;
this.dataTable = []; dataTable.value = [];
} catch (error) { } catch (error) {
this.showError(error, this.$locale.baseText('settings.ldap.synchronizationError')); toast.showError(error, i18n.baseText('settings.ldap.synchronizationError'));
} }
}, };
},
onMounted(async () => {
if (!isLDAPFeatureEnabled.value) return;
await getLdapConfig();
}); });
</script> </script>
@ -607,20 +594,20 @@ export default defineComponent({
<div v-if="!isLDAPFeatureEnabled"> <div v-if="!isLDAPFeatureEnabled">
<div :class="[$style.header, 'mb-2xl']"> <div :class="[$style.header, 'mb-2xl']">
<n8n-heading size="2xlarge"> <n8n-heading size="2xlarge">
{{ $locale.baseText('settings.ldap') }} {{ i18n.baseText('settings.ldap') }}
</n8n-heading> </n8n-heading>
</div> </div>
<n8n-info-tip type="note" theme="info" tooltip-placement="right" class="mb-l"> <n8n-info-tip type="note" theme="info" tooltip-placement="right" class="mb-l">
{{ $locale.baseText('settings.ldap.note') }} {{ i18n.baseText('settings.ldap.note') }}
</n8n-info-tip> </n8n-info-tip>
<n8n-action-box <n8n-action-box
:description="$locale.baseText('settings.ldap.disabled.description')" :description="i18n.baseText('settings.ldap.disabled.description')"
:button-text="$locale.baseText('settings.ldap.disabled.buttonText')" :button-text="i18n.baseText('settings.ldap.disabled.buttonText')"
@click:button="goToUpgrade" @click:button="goToUpgrade"
> >
<template #heading> <template #heading>
<span>{{ $locale.baseText('settings.ldap.disabled.title') }}</span> <span>{{ i18n.baseText('settings.ldap.disabled.title') }}</span>
</template> </template>
</n8n-action-box> </n8n-action-box>
</div> </div>
@ -628,18 +615,18 @@ export default defineComponent({
<div :class="$style.container"> <div :class="$style.container">
<div :class="$style.header"> <div :class="$style.header">
<n8n-heading size="2xlarge"> <n8n-heading size="2xlarge">
{{ $locale.baseText('settings.ldap') }} {{ i18n.baseText('settings.ldap') }}
</n8n-heading> </n8n-heading>
</div> </div>
<div :class="$style.docsInfoTip"> <div :class="$style.docsInfoTip">
<n8n-info-tip theme="info" type="note"> <n8n-info-tip theme="info" type="note">
<span v-n8n-html="$locale.baseText('settings.ldap.infoTip')"></span> <span v-n8n-html="i18n.baseText('settings.ldap.infoTip')"></span>
</n8n-info-tip> </n8n-info-tip>
</div> </div>
<div :class="$style.settingsForm"> <div :class="$style.settingsForm">
<n8n-form-inputs <n8n-form-inputs
v-if="formInputs" v-if="formInputs"
ref="ldapConfigForm" ref="ldapConfigFormRef"
:inputs="formInputs" :inputs="formInputs"
:event-bus="formBus" :event-bus="formBus"
:column-view="true" :column-view="true"
@ -654,8 +641,8 @@ export default defineComponent({
v-if="loginEnabled" v-if="loginEnabled"
:label=" :label="
loadingTestConnection loadingTestConnection
? $locale.baseText('settings.ldap.testingConnection') ? i18n.baseText('settings.ldap.testingConnection')
: $locale.baseText('settings.ldap.testConnection') : i18n.baseText('settings.ldap.testConnection')
" "
size="large" size="large"
class="mr-s" class="mr-s"
@ -664,7 +651,7 @@ export default defineComponent({
@click="onTestConnectionClick" @click="onTestConnectionClick"
/> />
<n8n-button <n8n-button
:label="$locale.baseText('settings.ldap.save')" :label="i18n.baseText('settings.ldap.save')"
size="large" size="large"
:disabled="!hasAnyChanges || !readyToSubmit" :disabled="!hasAnyChanges || !readyToSubmit"
@click="onSaveClick" @click="onSaveClick"
@ -673,7 +660,7 @@ export default defineComponent({
</div> </div>
<div v-if="loginEnabled"> <div v-if="loginEnabled">
<n8n-heading tag="h1" class="mb-xl mt-3xl" size="medium">{{ <n8n-heading tag="h1" class="mb-xl mt-3xl" size="medium">{{
$locale.baseText('settings.ldap.section.synchronization.title') i18n.baseText('settings.ldap.section.synchronization.title')
}}</n8n-heading> }}</n8n-heading>
<div :class="$style.syncTable"> <div :class="$style.syncTable">
<ElTable <ElTable
@ -688,26 +675,26 @@ export default defineComponent({
> >
<ElTableColumn <ElTableColumn
prop="status" prop="status"
:label="$locale.baseText('settings.ldap.synchronizationTable.column.status')" :label="i18n.baseText('settings.ldap.synchronizationTable.column.status')"
/> />
<ElTableColumn <ElTableColumn
prop="endedAt" prop="endedAt"
:label="$locale.baseText('settings.ldap.synchronizationTable.column.endedAt')" :label="i18n.baseText('settings.ldap.synchronizationTable.column.endedAt')"
/> />
<ElTableColumn <ElTableColumn
prop="runMode" prop="runMode"
:label="$locale.baseText('settings.ldap.synchronizationTable.column.runMode')" :label="i18n.baseText('settings.ldap.synchronizationTable.column.runMode')"
/> />
<ElTableColumn <ElTableColumn
prop="runTime" prop="runTime"
:label="$locale.baseText('settings.ldap.synchronizationTable.column.runTime')" :label="i18n.baseText('settings.ldap.synchronizationTable.column.runTime')"
/> />
<ElTableColumn <ElTableColumn
prop="details" prop="details"
:label="$locale.baseText('settings.ldap.synchronizationTable.column.details')" :label="i18n.baseText('settings.ldap.synchronizationTable.column.details')"
/> />
<template #empty>{{ <template #empty>{{
$locale.baseText('settings.ldap.synchronizationTable.empty.message') i18n.baseText('settings.ldap.synchronizationTable.empty.message')
}}</template> }}</template>
<template #append> <template #append>
<InfiniteLoading target=".el-table__body-wrapper" @infinite="getLdapSynchronizations"> <InfiniteLoading target=".el-table__body-wrapper" @infinite="getLdapSynchronizations">
@ -717,7 +704,7 @@ export default defineComponent({
</div> </div>
<div class="pb-3xl"> <div class="pb-3xl">
<n8n-button <n8n-button
:label="$locale.baseText('settings.ldap.dryRun')" :label="i18n.baseText('settings.ldap.dryRun')"
type="secondary" type="secondary"
size="large" size="large"
class="mr-s" class="mr-s"
@ -726,7 +713,7 @@ export default defineComponent({
@click="onDryRunClick" @click="onDryRunClick"
/> />
<n8n-button <n8n-button
:label="$locale.baseText('settings.ldap.synchronizeNow')" :label="i18n.baseText('settings.ldap.synchronizeNow')"
size="large" size="large"
:disabled="hasAnyChanges || !readyToSubmit" :disabled="hasAnyChanges || !readyToSubmit"
:loading="loadingLiveRun" :loading="loadingLiveRun"