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

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,55 +62,34 @@ 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 {
+const toast = useToast();
+const i18n = useI18n();
+const message = useMessage();
+
+const settingsStore = useSettingsStore();
+const uiStore = useUIStore();
+
+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 }>();
+
+const isLDAPFeatureEnabled = computed(() => settingsStore.settings.enterprise.ldap);
+
+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' };
@@ -128,20 +105,23 @@ export default defineComponent({
 		}
 	}
 	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') {
-				this.loginEnabled = input.value;
+		loginEnabled.value = input.value;
 	}
 	if (input.name === 'synchronizationEnabled' && typeof input.value === 'boolean') {
-				this.syncEnabled = input.value;
+		syncEnabled.value = input.value;
 	}
-			this.hasAnyChanges = true;
-		},
-		onReadyToSubmit(ready: boolean) {
-			this.readyToSubmit = ready;
-		},
-		syncDataMapper(sync: ILdapSyncData): ILdapSyncTable {
+	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();
@@ -150,23 +130,23 @@ export default defineComponent({
 		runMode: capitalizeFirstLetter(sync.runMode),
 		status: capitalizeFirstLetter(sync.status),
 		endedAt: convertToDisplayDate(endedAt.getTime()),
-				details: this.$locale.baseText('settings.ldap.usersScanned', {
+		details: i18n.baseText('settings.ldap.usersScanned', {
 			interpolate: {
 				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
 	// `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();
-
-			if (!this.hasAnyChanges || !formInputsRef) {
+	if (!hasAnyChanges.value || !ldapConfigFormRef.value) {
 		return;
 	}
 
+	const formValues = ldapConfigFormRef.value.getValues();
+
 	const newConfiguration: ILdapConfig = {
 		loginEnabled: formValues.loginEnabled,
 		loginLabel: formValues.loginLabel,
@@ -191,16 +171,18 @@ export default defineComponent({
 
 	let saveForm = true;
 
+	if (!adConfig.value) return;
+
 	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'),
+		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: this.$locale.baseText(
+					cancelButtonText: i18n.baseText(
 						'settings.ldap.confirmMessage.beforeSaveForm.cancelButtonText',
 					),
-							confirmButtonText: this.$locale.baseText(
+					confirmButtonText: i18n.baseText(
 						'settings.ldap.confirmMessage.beforeSaveForm.confirmButtonText',
 					),
 				},
@@ -210,140 +192,144 @@ export default defineComponent({
 		}
 
 		if (!saveForm) {
-					this.hasAnyChanges = true;
+			hasAnyChanges.value = true;
 		}
 
-				this.adConfig = await this.settingsStore.updateLdapConfig(newConfiguration);
-				this.showToast({
-					title: this.$locale.baseText('settings.ldap.updateConfiguration'),
+		adConfig.value = await settingsStore.updateLdapConfig(newConfiguration);
+		toast.showToast({
+			title: i18n.baseText('settings.ldap.updateConfiguration'),
 			message: '',
 			type: 'success',
 		});
 	} catch (error) {
-				this.showError(error, this.$locale.baseText('settings.ldap.configurationError'));
+		toast.showError(error, i18n.baseText('settings.ldap.configurationError'));
 	} finally {
 		if (saveForm) {
-					this.hasAnyChanges = false;
+			hasAnyChanges.value = false;
 		}
 	}
-		},
-		onSaveClick() {
-			this.formBus.emit('submit');
-		},
-		async onTestConnectionClick() {
-			this.loadingTestConnection = true;
+};
+
+const onSaveClick = () => {
+	formBus.emit('submit');
+};
+
+const onTestConnectionClick = async () => {
+	loadingTestConnection.value = true;
 	try {
-				await this.settingsStore.testLdapConnection();
-				this.showToast({
-					title: this.$locale.baseText('settings.ldap.connectionTest'),
-					message: this.$locale.baseText('settings.ldap.toast.connection.success'),
+		await settingsStore.testLdapConnection();
+		toast.showToast({
+			title: i18n.baseText('settings.ldap.connectionTest'),
+			message: i18n.baseText('settings.ldap.toast.connection.success'),
 			type: 'success',
 		});
 	} catch (error) {
-				this.showToast({
-					title: this.$locale.baseText('settings.ldap.connectionTestError'),
+		toast.showToast({
+			title: i18n.baseText('settings.ldap.connectionTestError'),
 			message: error.message,
 			type: 'error',
 		});
 	} finally {
-				this.loadingTestConnection = false;
+		loadingTestConnection.value = false;
 	}
-		},
-		async onDryRunClick() {
-			this.loadingDryRun = true;
+};
+
+const onDryRunClick = async () => {
+	loadingDryRun.value = 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'),
+		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) {
-				this.showError(error, this.$locale.baseText('settings.ldap.synchronizationError'));
+		toast.showError(error, i18n.baseText('settings.ldap.synchronizationError'));
 	} finally {
-				this.loadingDryRun = false;
-				await this.reloadLdapSynchronizations();
+		loadingDryRun.value = false;
+		await reloadLdapSynchronizations();
 	}
-		},
-		async onLiveRunClick() {
-			this.loadingLiveRun = true;
+};
+
+const onLiveRunClick = async () => {
+	loadingLiveRun.value = 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'),
+		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) {
-				this.showError(error, this.$locale.baseText('settings.ldap.synchronizationError'));
+		toast.showError(error, i18n.baseText('settings.ldap.synchronizationError'));
 	} finally {
-				this.loadingLiveRun = false;
-				await this.reloadLdapSynchronizations();
+		loadingLiveRun.value = false;
+		await reloadLdapSynchronizations();
 	}
-		},
-		async getLdapConfig() {
+};
+
+const getLdapConfig = async () => {
 	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;
+		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;
-				this.formInputs = [
+		formInputs.value = [
 			{
 				name: 'loginEnabled',
-						initialValue: this.adConfig.loginEnabled,
+				initialValue: adConfig.value.loginEnabled,
 				properties: {
 					type: 'toggle',
-							label: this.$locale.baseText('settings.ldap.form.loginEnabled.label'),
-							tooltipText: this.$locale.baseText('settings.ldap.form.loginEnabled.tooltip'),
+					label: i18n.baseText('settings.ldap.form.loginEnabled.label'),
+					tooltipText: i18n.baseText('settings.ldap.form.loginEnabled.tooltip'),
 					required: true,
 				},
 			},
 			{
 				name: 'loginLabel',
-						initialValue: this.adConfig.loginLabel,
+				initialValue: adConfig.value.loginLabel,
 				properties: {
-							label: this.$locale.baseText('settings.ldap.form.loginLabel.label'),
+					label: i18n.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'),
+					placeholder: i18n.baseText('settings.ldap.form.loginLabel.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.loginLabel.infoText'),
 				},
 				shouldDisplay: whenLoginEnabled,
 			},
 			{
 				name: 'serverAddress',
-						initialValue: this.adConfig.connectionUrl,
+				initialValue: adConfig.value.connectionUrl,
 				properties: {
-							label: this.$locale.baseText('settings.ldap.form.serverAddress.label'),
+					label: i18n.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'),
+					placeholder: i18n.baseText('settings.ldap.form.serverAddress.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.serverAddress.infoText'),
 				},
 				shouldDisplay: whenLoginEnabled,
 			},
 			{
 				name: 'port',
-						initialValue: this.adConfig.connectionPort,
+				initialValue: adConfig.value.connectionPort,
 				properties: {
 					type: 'number',
-							label: this.$locale.baseText('settings.ldap.form.port.label'),
+					label: i18n.baseText('settings.ldap.form.port.label'),
 					capitalize: true,
-							infoText: this.$locale.baseText('settings.ldap.form.port.infoText'),
+					infoText: i18n.baseText('settings.ldap.form.port.infoText'),
 				},
 				shouldDisplay: whenLoginEnabled,
 			},
 			{
 				name: 'connectionSecurity',
-						initialValue: this.adConfig.connectionSecurity,
+				initialValue: adConfig.value.connectionSecurity,
 				properties: {
 					type: 'select',
-							label: this.$locale.baseText('settings.ldap.form.connectionSecurity.label'),
-							infoText: this.$locale.baseText('settings.ldap.form.connectionSecurity.infoText'),
+					label: i18n.baseText('settings.ldap.form.connectionSecurity.label'),
+					infoText: i18n.baseText('settings.ldap.form.connectionSecurity.infoText'),
 					options: [
 						{
 							label: 'None',
@@ -365,10 +351,10 @@ export default defineComponent({
 			},
 			{
 				name: 'allowUnauthorizedCerts',
-						initialValue: this.adConfig.allowUnauthorizedCerts,
+				initialValue: adConfig.value.allowUnauthorizedCerts,
 				properties: {
 					type: 'toggle',
-							label: this.$locale.baseText('settings.ldap.form.allowUnauthorizedCerts.label'),
+					label: i18n.baseText('settings.ldap.form.allowUnauthorizedCerts.label'),
 					required: false,
 				},
 				shouldDisplay(values): boolean {
@@ -377,13 +363,13 @@ export default defineComponent({
 			},
 			{
 				name: 'baseDn',
-						initialValue: this.adConfig.baseDn,
+				initialValue: adConfig.value.baseDn,
 				properties: {
-							label: this.$locale.baseText('settings.ldap.form.baseDn.label'),
+					label: i18n.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'),
+					placeholder: i18n.baseText('settings.ldap.form.baseDn.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.baseDn.infoText'),
 				},
 				shouldDisplay: whenLoginEnabled,
 			},
@@ -392,8 +378,8 @@ export default defineComponent({
 				initialValue: 'admin',
 				properties: {
 					type: 'select',
-							label: this.$locale.baseText('settings.ldap.form.bindingType.label'),
-							infoText: this.$locale.baseText('settings.ldap.form.bindingType.infoText'),
+					label: i18n.baseText('settings.ldap.form.bindingType.label'),
+					infoText: i18n.baseText('settings.ldap.form.bindingType.infoText'),
 					options: [
 						{
 							value: 'admin',
@@ -409,43 +395,43 @@ export default defineComponent({
 			},
 			{
 				name: 'adminDn',
-						initialValue: this.adConfig.bindingAdminDn,
+				initialValue: adConfig.value.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'),
+					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: this.adConfig.bindingAdminPassword,
+				initialValue: adConfig.value.bindingAdminPassword,
 				properties: {
-							label: this.$locale.baseText('settings.ldap.form.adminPassword.label'),
+					label: i18n.baseText('settings.ldap.form.adminPassword.label'),
 					type: 'password',
 					capitalize: true,
-							infoText: this.$locale.baseText('settings.ldap.form.adminPassword.infoText'),
+					infoText: i18n.baseText('settings.ldap.form.adminPassword.infoText'),
 				},
 				shouldDisplay: whenAdminBindingAndLoginEnabled,
 			},
 			{
 				name: 'userFilter',
-						initialValue: this.adConfig.userFilter,
+				initialValue: adConfig.value.userFilter,
 				properties: {
-							label: this.$locale.baseText('settings.ldap.form.userFilter.label'),
+					label: i18n.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'),
+					placeholder: i18n.baseText('settings.ldap.form.userFilter.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.userFilter.infoText'),
 				},
 				shouldDisplay: whenLoginEnabled,
 			},
 			{
 				name: 'attributeMappingInfo',
 				properties: {
-							label: this.$locale.baseText('settings.ldap.form.attributeMappingInfo.label'),
+					label: i18n.baseText('settings.ldap.form.attributeMappingInfo.label'),
 					type: 'info',
 					labelSize: 'large',
 					labelAlignment: 'left',
@@ -454,152 +440,153 @@ export default defineComponent({
 			},
 			{
 				name: 'ldapId',
-						initialValue: this.adConfig.ldapIdAttribute,
+				initialValue: adConfig.value.ldapIdAttribute,
 				properties: {
-							label: this.$locale.baseText('settings.ldap.form.ldapId.label'),
+					label: i18n.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'),
+					placeholder: i18n.baseText('settings.ldap.form.ldapId.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.ldapId.infoText'),
 				},
 				shouldDisplay: whenLoginEnabled,
 			},
 			{
 				name: 'loginId',
-						initialValue: this.adConfig.loginIdAttribute,
+				initialValue: adConfig.value.loginIdAttribute,
 				properties: {
-							label: this.$locale.baseText('settings.ldap.form.loginId.label'),
+					label: i18n.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'),
+					placeholder: i18n.baseText('settings.ldap.form.loginId.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.loginId.infoText'),
 				},
 				shouldDisplay: whenLoginEnabled,
 			},
 			{
 				name: 'email',
-						initialValue: this.adConfig.emailAttribute,
+				initialValue: adConfig.value.emailAttribute,
 				properties: {
-							label: this.$locale.baseText('settings.ldap.form.email.label'),
+					label: i18n.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'),
+					placeholder: i18n.baseText('settings.ldap.form.email.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.email.infoText'),
 				},
 				shouldDisplay: whenLoginEnabled,
 			},
 			{
 				name: 'firstName',
-						initialValue: this.adConfig.firstNameAttribute,
+				initialValue: adConfig.value.firstNameAttribute,
 				properties: {
-							label: this.$locale.baseText('settings.ldap.form.firstName.label'),
+					label: i18n.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'),
+					placeholder: i18n.baseText('settings.ldap.form.firstName.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.firstName.infoText'),
 				},
 				shouldDisplay: whenLoginEnabled,
 			},
 			{
 				name: 'lastName',
-						initialValue: this.adConfig.lastNameAttribute,
+				initialValue: adConfig.value.lastNameAttribute,
 				properties: {
-							label: this.$locale.baseText('settings.ldap.form.lastName.label'),
+					label: i18n.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'),
+					placeholder: i18n.baseText('settings.ldap.form.lastName.placeholder'),
+					infoText: i18n.baseText('settings.ldap.form.lastName.infoText'),
 				},
 				shouldDisplay: whenLoginEnabled,
 			},
 			{
 				name: 'synchronizationEnabled',
-						initialValue: this.adConfig.synchronizationEnabled,
+				initialValue: adConfig.value.synchronizationEnabled,
 				properties: {
 					type: 'toggle',
-							label: this.$locale.baseText('settings.ldap.form.synchronizationEnabled.label'),
-							tooltipText: this.$locale.baseText(
-								'settings.ldap.form.synchronizationEnabled.tooltip',
-							),
+					label: i18n.baseText('settings.ldap.form.synchronizationEnabled.label'),
+					tooltipText: i18n.baseText('settings.ldap.form.synchronizationEnabled.tooltip'),
 					required: true,
 				},
 				shouldDisplay: whenLoginEnabled,
 			},
 			{
 				name: 'synchronizationInterval',
-						initialValue: this.adConfig.synchronizationInterval,
+				initialValue: adConfig.value.synchronizationInterval,
 				properties: {
 					type: 'number',
-							label: this.$locale.baseText('settings.ldap.form.synchronizationInterval.label'),
-							infoText: this.$locale.baseText(
-								'settings.ldap.form.synchronizationInterval.infoText',
-							),
+					label: i18n.baseText('settings.ldap.form.synchronizationInterval.label'),
+					infoText: i18n.baseText('settings.ldap.form.synchronizationInterval.infoText'),
 				},
 				shouldDisplay: whenSyncAndLoginEnabled,
 			},
 			{
 				name: 'pageSize',
-						initialValue: this.adConfig.searchPageSize,
+				initialValue: adConfig.value.searchPageSize,
 				properties: {
 					type: 'number',
-							label: this.$locale.baseText('settings.ldap.form.pageSize.label'),
-							infoText: this.$locale.baseText('settings.ldap.form.pageSize.infoText'),
+					label: i18n.baseText('settings.ldap.form.pageSize.label'),
+					infoText: i18n.baseText('settings.ldap.form.pageSize.infoText'),
 				},
 				shouldDisplay: whenSyncAndLoginEnabled,
 			},
 			{
 				name: 'searchTimeout',
-						initialValue: this.adConfig.searchTimeout,
+				initialValue: adConfig.value.searchTimeout,
 				properties: {
 					type: 'number',
-							label: this.$locale.baseText('settings.ldap.form.searchTimeout.label'),
-							infoText: this.$locale.baseText('settings.ldap.form.searchTimeout.infoText'),
+					label: i18n.baseText('settings.ldap.form.searchTimeout.label'),
+					infoText: i18n.baseText('settings.ldap.form.searchTimeout.infoText'),
 				},
 				shouldDisplay: whenSyncAndLoginEnabled,
 			},
 		];
 	} 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 {
-				this.loadingTable = true;
-				const data = await this.settingsStore.getLdapSynchronizations({
-					page: this.page,
+		loadingTable.value = true;
+		const data = await settingsStore.getLdapSynchronizations({
+			page: page.value,
 		});
 
 		if (data.length !== 0) {
-					this.dataTable.push(...data.map(this.syncDataMapper));
-					this.page += 1;
+			dataTable.value.push(...data.map(syncDataMapper));
+			page.value += 1;
 			state.loaded();
 		} else {
 			state.complete();
 		}
-				this.loadingTable = false;
+		loadingTable.value = false;
 	} 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 {
-				this.page = 0;
-				this.tableKey += 1;
-				this.dataTable = [];
+		page.value = 0;
+		tableKey.value += 1;
+		dataTable.value = [];
 	} 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>
 
@@ -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"