From 39310c01fbf304595d43da45e05f916dd4d0e1e1 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Mon, 23 Sep 2024 07:52:08 -0400
Subject: [PATCH] refactor(editor): Migrate `SettingsLdapView.vue` to
 composition API (#10916)

---
 .../editor-ui/src/views/SettingsLdapView.vue  | 1089 ++++++++---------
 1 file changed, 538 insertions(+), 551 deletions(-)

diff --git a/packages/editor-ui/src/views/SettingsLdapView.vue b/packages/editor-ui/src/views/SettingsLdapView.vue
index 6cab6b1ba5..b0c497e817 100644
--- a/packages/editor-ui/src/views/SettingsLdapView.vue
+++ b/packages/editor-ui/src/views/SettingsLdapView.vue
@@ -1,6 +1,6 @@
-<script lang="ts">
+<script setup lang="ts">
 import type { CSSProperties } from 'vue';
-import { defineComponent } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { capitalizeFirstLetter } from '@/utils/htmlUtils';
 import { convertToDisplayDate } from '@/utils/typesUtils';
 import { useToast } from '@/composables/useToast';
@@ -11,7 +11,6 @@ import type {
 	ILdapSyncTable,
 	IFormInput,
 	IFormInputs,
-	IUser,
 } from '@/Interface';
 import { MODAL_CONFIRM } from '@/constants';
 
@@ -19,12 +18,11 @@ import humanizeDuration from 'humanize-duration';
 import { ElTable, ElTableColumn } from 'element-plus';
 import type { Events } 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 { useUIStore } from '@/stores/ui.store';
 import { createFormEventBus } from 'n8n-design-system/utils';
 import type { TableColumnCtx } from 'element-plus';
+import { useI18n } from '@/composables/useI18n';
 
 type TableRow = {
 	status: string;
@@ -64,542 +62,531 @@ type CellClassStyleMethodParams<T> = {
 	columnIndex: number;
 };
 
-export default defineComponent({
-	name: 'SettingsLdapView',
-	components: {
-		InfiniteLoading,
-		ElTable,
-		ElTableColumn,
-	},
-	setup() {
-		return {
-			...useToast(),
-			...useMessage(),
-		};
-	},
-	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: createFormEventBus(),
-			readyToSubmit: false,
-			page: 0,
-			loginEnabled: false,
-			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 (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 formInputsRef = this.$refs.ldapConfigForm as { getValues: () => LDAPConfigForm };
-			const formValues = formInputsRef.getValues();
+const toast = useToast();
+const i18n = useI18n();
+const message = useMessage();
 
-			if (!this.hasAnyChanges || !formInputsRef) {
-				return;
-			}
+const settingsStore = useSettingsStore();
+const uiStore = useUIStore();
 
-			const newConfiguration: ILdapConfig = {
-				loginEnabled: formValues.loginEnabled,
-				loginLabel: formValues.loginLabel,
-				connectionUrl: formValues.serverAddress,
-				allowUnauthorizedCerts: formValues.allowUnauthorizedCerts,
-				connectionPort: +formValues.port,
-				connectionSecurity: formValues.connectionSecurity,
-				baseDn: formValues.baseDn,
-				bindingAdminDn: formValues.bindingType === 'admin' ? formValues.adminDn : '',
-				bindingAdminPassword: formValues.bindingType === 'admin' ? formValues.adminPassword : '',
-				emailAttribute: formValues.email,
-				firstNameAttribute: formValues.firstName,
-				lastNameAttribute: formValues.lastName,
-				loginIdAttribute: formValues.loginId,
-				ldapIdAttribute: formValues.ldapId,
-				userFilter: formValues.userFilter,
-				synchronizationEnabled: formValues.synchronizationEnabled,
-				synchronizationInterval: +formValues.synchronizationInterval,
-				searchPageSize: +formValues.pageSize,
-				searchTimeout: +formValues.searchTimeout,
-			};
+const dataTable = ref<ILdapSyncTable[]>([]);
+const tableKey = ref(0);
+const adConfig = ref<ILdapConfig>();
+const loadingTestConnection = ref(false);
+const loadingDryRun = ref(false);
+const loadingLiveRun = ref(false);
+const loadingTable = ref(false);
+const hasAnyChanges = ref(false);
+const formInputs = ref<IFormInputs | null>(null);
+const formBus = createFormEventBus();
+const readyToSubmit = ref(false);
+const page = ref(0);
+const loginEnabled = ref(false);
+const syncEnabled = ref(false);
+const ldapConfigFormRef = ref<{ getValues: () => LDAPConfigForm }>();
 
-			let saveForm = true;
+const isLDAPFeatureEnabled = computed(() => settingsStore.settings.enterprise.ldap);
 
-			try {
-				if (this.adConfig.loginEnabled && !newConfiguration.loginEnabled) {
-					const confirmAction = await this.confirm(
-						this.$locale.baseText('settings.ldap.confirmMessage.beforeSaveForm.message'),
-						this.$locale.baseText('settings.ldap.confirmMessage.beforeSaveForm.headline'),
+const goToUpgrade = async () => await uiStore.goToUpgrade('ldap', 'upgrade-ldap');
+
+const cellClassStyle = ({ row, column }: CellClassStyleMethodParams<TableRow>): CSSProperties => {
+	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 {};
+};
+
+const onInput = (input: { name: string; value: string | number | boolean }) => {
+	if (input.name === 'loginEnabled' && typeof input.value === 'boolean') {
+		loginEnabled.value = input.value;
+	}
+	if (input.name === 'synchronizationEnabled' && typeof input.value === 'boolean') {
+		syncEnabled.value = input.value;
+	}
+	hasAnyChanges.value = true;
+};
+
+const onReadyToSubmit = (ready: boolean) => {
+	readyToSubmit.value = ready;
+};
+
+const 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: i18n.baseText('settings.ldap.usersScanned', {
+			interpolate: {
+				scanned: sync.scanned.toString(),
+			},
+		}),
+	};
+};
+
+const onSubmit = async () => {
+	// 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
+	if (!hasAnyChanges.value || !ldapConfigFormRef.value) {
+		return;
+	}
+
+	const formValues = ldapConfigFormRef.value.getValues();
+
+	const newConfiguration: ILdapConfig = {
+		loginEnabled: formValues.loginEnabled,
+		loginLabel: formValues.loginLabel,
+		connectionUrl: formValues.serverAddress,
+		allowUnauthorizedCerts: formValues.allowUnauthorizedCerts,
+		connectionPort: +formValues.port,
+		connectionSecurity: formValues.connectionSecurity,
+		baseDn: formValues.baseDn,
+		bindingAdminDn: formValues.bindingType === 'admin' ? formValues.adminDn : '',
+		bindingAdminPassword: formValues.bindingType === 'admin' ? formValues.adminPassword : '',
+		emailAttribute: formValues.email,
+		firstNameAttribute: formValues.firstName,
+		lastNameAttribute: formValues.lastName,
+		loginIdAttribute: formValues.loginId,
+		ldapIdAttribute: formValues.ldapId,
+		userFilter: formValues.userFilter,
+		synchronizationEnabled: formValues.synchronizationEnabled,
+		synchronizationInterval: +formValues.synchronizationInterval,
+		searchPageSize: +formValues.pageSize,
+		searchTimeout: +formValues.searchTimeout,
+	};
+
+	let saveForm = true;
+
+	if (!adConfig.value) return;
+
+	try {
+		if (adConfig.value.loginEnabled && !newConfiguration.loginEnabled) {
+			const confirmAction = await message.confirm(
+				i18n.baseText('settings.ldap.confirmMessage.beforeSaveForm.message'),
+				i18n.baseText('settings.ldap.confirmMessage.beforeSaveForm.headline'),
+				{
+					cancelButtonText: i18n.baseText(
+						'settings.ldap.confirmMessage.beforeSaveForm.cancelButtonText',
+					),
+					confirmButtonText: i18n.baseText(
+						'settings.ldap.confirmMessage.beforeSaveForm.confirmButtonText',
+					),
+				},
+			);
+
+			saveForm = confirmAction === MODAL_CONFIRM;
+		}
+
+		if (!saveForm) {
+			hasAnyChanges.value = true;
+		}
+
+		adConfig.value = await settingsStore.updateLdapConfig(newConfiguration);
+		toast.showToast({
+			title: i18n.baseText('settings.ldap.updateConfiguration'),
+			message: '',
+			type: 'success',
+		});
+	} catch (error) {
+		toast.showError(error, i18n.baseText('settings.ldap.configurationError'));
+	} finally {
+		if (saveForm) {
+			hasAnyChanges.value = false;
+		}
+	}
+};
+
+const onSaveClick = () => {
+	formBus.emit('submit');
+};
+
+const onTestConnectionClick = async () => {
+	loadingTestConnection.value = true;
+	try {
+		await settingsStore.testLdapConnection();
+		toast.showToast({
+			title: i18n.baseText('settings.ldap.connectionTest'),
+			message: i18n.baseText('settings.ldap.toast.connection.success'),
+			type: 'success',
+		});
+	} catch (error) {
+		toast.showToast({
+			title: i18n.baseText('settings.ldap.connectionTestError'),
+			message: error.message,
+			type: 'error',
+		});
+	} finally {
+		loadingTestConnection.value = false;
+	}
+};
+
+const onDryRunClick = async () => {
+	loadingDryRun.value = true;
+	try {
+		await settingsStore.runLdapSync({ type: 'dry' });
+		toast.showToast({
+			title: i18n.baseText('settings.ldap.runSync.title'),
+			message: i18n.baseText('settings.ldap.toast.sync.success'),
+			type: 'success',
+		});
+	} catch (error) {
+		toast.showError(error, i18n.baseText('settings.ldap.synchronizationError'));
+	} finally {
+		loadingDryRun.value = false;
+		await reloadLdapSynchronizations();
+	}
+};
+
+const onLiveRunClick = async () => {
+	loadingLiveRun.value = true;
+	try {
+		await settingsStore.runLdapSync({ type: 'live' });
+		toast.showToast({
+			title: i18n.baseText('settings.ldap.runSync.title'),
+			message: i18n.baseText('settings.ldap.toast.sync.success'),
+			type: 'success',
+		});
+	} catch (error) {
+		toast.showError(error, i18n.baseText('settings.ldap.synchronizationError'));
+	} finally {
+		loadingLiveRun.value = false;
+		await reloadLdapSynchronizations();
+	}
+};
+
+const getLdapConfig = async () => {
+	try {
+		adConfig.value = await settingsStore.getLdapConfig();
+		loginEnabled.value = adConfig.value.loginEnabled;
+		syncEnabled.value = adConfig.value.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;
+		formInputs.value = [
+			{
+				name: 'loginEnabled',
+				initialValue: adConfig.value.loginEnabled,
+				properties: {
+					type: 'toggle',
+					label: i18n.baseText('settings.ldap.form.loginEnabled.label'),
+					tooltipText: i18n.baseText('settings.ldap.form.loginEnabled.tooltip'),
+					required: true,
+				},
+			},
+			{
+				name: 'loginLabel',
+				initialValue: adConfig.value.loginLabel,
+				properties: {
+					label: i18n.baseText('settings.ldap.form.loginLabel.label'),
+					required: true,
+					placeholder: i18n.baseText('settings.ldap.form.loginLabel.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.loginLabel.infoText'),
+				},
+				shouldDisplay: whenLoginEnabled,
+			},
+			{
+				name: 'serverAddress',
+				initialValue: adConfig.value.connectionUrl,
+				properties: {
+					label: i18n.baseText('settings.ldap.form.serverAddress.label'),
+					required: true,
+					capitalize: true,
+					placeholder: i18n.baseText('settings.ldap.form.serverAddress.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.serverAddress.infoText'),
+				},
+				shouldDisplay: whenLoginEnabled,
+			},
+			{
+				name: 'port',
+				initialValue: adConfig.value.connectionPort,
+				properties: {
+					type: 'number',
+					label: i18n.baseText('settings.ldap.form.port.label'),
+					capitalize: true,
+					infoText: i18n.baseText('settings.ldap.form.port.infoText'),
+				},
+				shouldDisplay: whenLoginEnabled,
+			},
+			{
+				name: 'connectionSecurity',
+				initialValue: adConfig.value.connectionSecurity,
+				properties: {
+					type: 'select',
+					label: i18n.baseText('settings.ldap.form.connectionSecurity.label'),
+					infoText: i18n.baseText('settings.ldap.form.connectionSecurity.infoText'),
+					options: [
 						{
-							cancelButtonText: this.$locale.baseText(
-								'settings.ldap.confirmMessage.beforeSaveForm.cancelButtonText',
-							),
-							confirmButtonText: this.$locale.baseText(
-								'settings.ldap.confirmMessage.beforeSaveForm.confirmButtonText',
-							),
+							label: 'None',
+							value: 'none',
 						},
-					);
+						{
+							label: 'TLS',
+							value: 'tls',
+						},
+						{
+							label: 'STARTTLS',
+							value: 'startTls',
+						},
+					],
+					required: true,
+					capitalize: true,
+				},
+				shouldDisplay: whenLoginEnabled,
+			},
+			{
+				name: 'allowUnauthorizedCerts',
+				initialValue: adConfig.value.allowUnauthorizedCerts,
+				properties: {
+					type: 'toggle',
+					label: i18n.baseText('settings.ldap.form.allowUnauthorizedCerts.label'),
+					required: false,
+				},
+				shouldDisplay(values): boolean {
+					return values.connectionSecurity !== 'none' && values.loginEnabled === true;
+				},
+			},
+			{
+				name: 'baseDn',
+				initialValue: adConfig.value.baseDn,
+				properties: {
+					label: i18n.baseText('settings.ldap.form.baseDn.label'),
+					required: true,
+					capitalize: true,
+					placeholder: i18n.baseText('settings.ldap.form.baseDn.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.baseDn.infoText'),
+				},
+				shouldDisplay: whenLoginEnabled,
+			},
+			{
+				name: 'bindingType',
+				initialValue: 'admin',
+				properties: {
+					type: 'select',
+					label: i18n.baseText('settings.ldap.form.bindingType.label'),
+					infoText: i18n.baseText('settings.ldap.form.bindingType.infoText'),
+					options: [
+						{
+							value: 'admin',
+							label: 'Admin',
+						},
+						{
+							value: 'anonymous',
+							label: 'Anonymous',
+						},
+					],
+				},
+				shouldDisplay: whenLoginEnabled,
+			},
+			{
+				name: 'adminDn',
+				initialValue: adConfig.value.bindingAdminDn,
+				properties: {
+					label: i18n.baseText('settings.ldap.form.adminDn.label'),
+					placeholder: i18n.baseText('settings.ldap.form.adminDn.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.adminDn.infoText'),
+					capitalize: true,
+				},
+				shouldDisplay: whenAdminBindingAndLoginEnabled,
+			},
+			{
+				name: 'adminPassword',
+				initialValue: adConfig.value.bindingAdminPassword,
+				properties: {
+					label: i18n.baseText('settings.ldap.form.adminPassword.label'),
+					type: 'password',
+					capitalize: true,
+					infoText: i18n.baseText('settings.ldap.form.adminPassword.infoText'),
+				},
+				shouldDisplay: whenAdminBindingAndLoginEnabled,
+			},
+			{
+				name: 'userFilter',
+				initialValue: adConfig.value.userFilter,
+				properties: {
+					label: i18n.baseText('settings.ldap.form.userFilter.label'),
+					type: 'text',
+					required: false,
+					capitalize: true,
+					placeholder: i18n.baseText('settings.ldap.form.userFilter.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.userFilter.infoText'),
+				},
+				shouldDisplay: whenLoginEnabled,
+			},
+			{
+				name: 'attributeMappingInfo',
+				properties: {
+					label: i18n.baseText('settings.ldap.form.attributeMappingInfo.label'),
+					type: 'info',
+					labelSize: 'large',
+					labelAlignment: 'left',
+				},
+				shouldDisplay: whenLoginEnabled,
+			},
+			{
+				name: 'ldapId',
+				initialValue: adConfig.value.ldapIdAttribute,
+				properties: {
+					label: i18n.baseText('settings.ldap.form.ldapId.label'),
+					type: 'text',
+					required: true,
+					capitalize: true,
+					placeholder: i18n.baseText('settings.ldap.form.ldapId.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.ldapId.infoText'),
+				},
+				shouldDisplay: whenLoginEnabled,
+			},
+			{
+				name: 'loginId',
+				initialValue: adConfig.value.loginIdAttribute,
+				properties: {
+					label: i18n.baseText('settings.ldap.form.loginId.label'),
+					type: 'text',
+					autocomplete: 'email',
+					required: true,
+					capitalize: true,
+					placeholder: i18n.baseText('settings.ldap.form.loginId.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.loginId.infoText'),
+				},
+				shouldDisplay: whenLoginEnabled,
+			},
+			{
+				name: 'email',
+				initialValue: adConfig.value.emailAttribute,
+				properties: {
+					label: i18n.baseText('settings.ldap.form.email.label'),
+					type: 'text',
+					autocomplete: 'email',
+					required: true,
+					capitalize: true,
+					placeholder: i18n.baseText('settings.ldap.form.email.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.email.infoText'),
+				},
+				shouldDisplay: whenLoginEnabled,
+			},
+			{
+				name: 'firstName',
+				initialValue: adConfig.value.firstNameAttribute,
+				properties: {
+					label: i18n.baseText('settings.ldap.form.firstName.label'),
+					type: 'text',
+					autocomplete: 'email',
+					required: true,
+					capitalize: true,
+					placeholder: i18n.baseText('settings.ldap.form.firstName.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.firstName.infoText'),
+				},
+				shouldDisplay: whenLoginEnabled,
+			},
+			{
+				name: 'lastName',
+				initialValue: adConfig.value.lastNameAttribute,
+				properties: {
+					label: i18n.baseText('settings.ldap.form.lastName.label'),
+					type: 'text',
+					autocomplete: 'email',
+					required: true,
+					capitalize: true,
+					placeholder: i18n.baseText('settings.ldap.form.lastName.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.lastName.infoText'),
+				},
+				shouldDisplay: whenLoginEnabled,
+			},
+			{
+				name: 'synchronizationEnabled',
+				initialValue: adConfig.value.synchronizationEnabled,
+				properties: {
+					type: 'toggle',
+					label: i18n.baseText('settings.ldap.form.synchronizationEnabled.label'),
+					tooltipText: i18n.baseText('settings.ldap.form.synchronizationEnabled.tooltip'),
+					required: true,
+				},
+				shouldDisplay: whenLoginEnabled,
+			},
+			{
+				name: 'synchronizationInterval',
+				initialValue: adConfig.value.synchronizationInterval,
+				properties: {
+					type: 'number',
+					label: i18n.baseText('settings.ldap.form.synchronizationInterval.label'),
+					infoText: i18n.baseText('settings.ldap.form.synchronizationInterval.infoText'),
+				},
+				shouldDisplay: whenSyncAndLoginEnabled,
+			},
+			{
+				name: 'pageSize',
+				initialValue: adConfig.value.searchPageSize,
+				properties: {
+					type: 'number',
+					label: i18n.baseText('settings.ldap.form.pageSize.label'),
+					infoText: i18n.baseText('settings.ldap.form.pageSize.infoText'),
+				},
+				shouldDisplay: whenSyncAndLoginEnabled,
+			},
+			{
+				name: 'searchTimeout',
+				initialValue: adConfig.value.searchTimeout,
+				properties: {
+					type: 'number',
+					label: i18n.baseText('settings.ldap.form.searchTimeout.label'),
+					infoText: i18n.baseText('settings.ldap.form.searchTimeout.infoText'),
+				},
+				shouldDisplay: whenSyncAndLoginEnabled,
+			},
+		];
+	} catch (error) {
+		toast.showError(error, i18n.baseText('settings.ldap.configurationError'));
+	}
+};
 
-					saveForm = confirmAction === MODAL_CONFIRM;
-				}
+const getLdapSynchronizations = async (state: Parameters<Events['infinite']>[0]) => {
+	try {
+		loadingTable.value = true;
+		const data = await settingsStore.getLdapSynchronizations({
+			page: page.value,
+		});
 
-				if (!saveForm) {
-					this.hasAnyChanges = true;
-				}
+		if (data.length !== 0) {
+			dataTable.value.push(...data.map(syncDataMapper));
+			page.value += 1;
+			state.loaded();
+		} else {
+			state.complete();
+		}
+		loadingTable.value = false;
+	} catch (error) {
+		toast.showError(error, i18n.baseText('settings.ldap.synchronizationError'));
+	}
+};
 
-				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: Parameters<Events['infinite']>[0]) {
-			try {
-				this.loadingTable = true;
-				const data = await this.settingsStore.getLdapSynchronizations({
-					page: this.page,
-				});
+const reloadLdapSynchronizations = async () => {
+	try {
+		page.value = 0;
+		tableKey.value += 1;
+		dataTable.value = [];
+	} catch (error) {
+		toast.showError(error, i18n.baseText('settings.ldap.synchronizationError'));
+	}
+};
 
-				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'));
-			}
-		},
-	},
+onMounted(async () => {
+	if (!isLDAPFeatureEnabled.value) return;
+	await getLdapConfig();
 });
 </script>
 
@@ -607,20 +594,20 @@ export default defineComponent({
 	<div v-if="!isLDAPFeatureEnabled">
 		<div :class="[$style.header, 'mb-2xl']">
 			<n8n-heading size="2xlarge">
-				{{ $locale.baseText('settings.ldap') }}
+				{{ i18n.baseText('settings.ldap') }}
 			</n8n-heading>
 		</div>
 
 		<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-action-box
-			:description="$locale.baseText('settings.ldap.disabled.description')"
-			:button-text="$locale.baseText('settings.ldap.disabled.buttonText')"
+			:description="i18n.baseText('settings.ldap.disabled.description')"
+			:button-text="i18n.baseText('settings.ldap.disabled.buttonText')"
 			@click:button="goToUpgrade"
 		>
 			<template #heading>
-				<span>{{ $locale.baseText('settings.ldap.disabled.title') }}</span>
+				<span>{{ i18n.baseText('settings.ldap.disabled.title') }}</span>
 			</template>
 		</n8n-action-box>
 	</div>
@@ -628,18 +615,18 @@ export default defineComponent({
 		<div :class="$style.container">
 			<div :class="$style.header">
 				<n8n-heading size="2xlarge">
-					{{ $locale.baseText('settings.ldap') }}
+					{{ i18n.baseText('settings.ldap') }}
 				</n8n-heading>
 			</div>
 			<div :class="$style.docsInfoTip">
 				<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>
 			</div>
 			<div :class="$style.settingsForm">
 				<n8n-form-inputs
 					v-if="formInputs"
-					ref="ldapConfigForm"
+					ref="ldapConfigFormRef"
 					:inputs="formInputs"
 					:event-bus="formBus"
 					:column-view="true"
@@ -654,8 +641,8 @@ export default defineComponent({
 					v-if="loginEnabled"
 					:label="
 						loadingTestConnection
-							? $locale.baseText('settings.ldap.testingConnection')
-							: $locale.baseText('settings.ldap.testConnection')
+							? i18n.baseText('settings.ldap.testingConnection')
+							: i18n.baseText('settings.ldap.testConnection')
 					"
 					size="large"
 					class="mr-s"
@@ -664,7 +651,7 @@ export default defineComponent({
 					@click="onTestConnectionClick"
 				/>
 				<n8n-button
-					:label="$locale.baseText('settings.ldap.save')"
+					:label="i18n.baseText('settings.ldap.save')"
 					size="large"
 					:disabled="!hasAnyChanges || !readyToSubmit"
 					@click="onSaveClick"
@@ -673,7 +660,7 @@ export default defineComponent({
 		</div>
 		<div v-if="loginEnabled">
 			<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>
 			<div :class="$style.syncTable">
 				<ElTable
@@ -688,26 +675,26 @@ export default defineComponent({
 				>
 					<ElTableColumn
 						prop="status"
-						:label="$locale.baseText('settings.ldap.synchronizationTable.column.status')"
+						:label="i18n.baseText('settings.ldap.synchronizationTable.column.status')"
 					/>
 					<ElTableColumn
 						prop="endedAt"
-						:label="$locale.baseText('settings.ldap.synchronizationTable.column.endedAt')"
+						:label="i18n.baseText('settings.ldap.synchronizationTable.column.endedAt')"
 					/>
 					<ElTableColumn
 						prop="runMode"
-						:label="$locale.baseText('settings.ldap.synchronizationTable.column.runMode')"
+						:label="i18n.baseText('settings.ldap.synchronizationTable.column.runMode')"
 					/>
 					<ElTableColumn
 						prop="runTime"
-						:label="$locale.baseText('settings.ldap.synchronizationTable.column.runTime')"
+						:label="i18n.baseText('settings.ldap.synchronizationTable.column.runTime')"
 					/>
 					<ElTableColumn
 						prop="details"
-						:label="$locale.baseText('settings.ldap.synchronizationTable.column.details')"
+						:label="i18n.baseText('settings.ldap.synchronizationTable.column.details')"
 					/>
 					<template #empty>{{
-						$locale.baseText('settings.ldap.synchronizationTable.empty.message')
+						i18n.baseText('settings.ldap.synchronizationTable.empty.message')
 					}}</template>
 					<template #append>
 						<InfiniteLoading target=".el-table__body-wrapper" @infinite="getLdapSynchronizations">
@@ -717,7 +704,7 @@ export default defineComponent({
 			</div>
 			<div class="pb-3xl">
 				<n8n-button
-					:label="$locale.baseText('settings.ldap.dryRun')"
+					:label="i18n.baseText('settings.ldap.dryRun')"
 					type="secondary"
 					size="large"
 					class="mr-s"
@@ -726,7 +713,7 @@ export default defineComponent({
 					@click="onDryRunClick"
 				/>
 				<n8n-button
-					:label="$locale.baseText('settings.ldap.synchronizeNow')"
+					:label="i18n.baseText('settings.ldap.synchronizeNow')"
 					size="large"
 					:disabled="hasAnyChanges || !readyToSubmit"
 					:loading="loadingLiveRun"