refactor(editor): Migrate AuthView and associated components to composition api (#10713)

packages/editor-ui/src/views/AuthView.vue

@@ -1,44 +1,37 @@
-<script lang="ts">
-import { type PropType, defineComponent } from 'vue';
-
-import Logo from '@/components/Logo.vue';
+<script setup lang="ts">
 import SSOLogin from '@/components/SSOLogin.vue';
 import type { IFormBoxConfig } from '@/Interface';
 
-export default defineComponent({
-	name: 'AuthView',
-	components: {
-		Logo,
-		SSOLogin,
+withDefaults(
+	defineProps<{
+		form: IFormBoxConfig;
+		formLoading?: boolean;
+		subtitle?: string;
+		withSso?: boolean;
+	}>(),
+	{
+		formLoading: false,
+		withSso: false,
 	},
-	props: {
-		form: {
-			type: Object as PropType<IFormBoxConfig>,
-		},
-		formLoading: {
-			type: Boolean,
-			default: false,
-		},
-		subtitle: {
-			type: String,
-		},
-		withSso: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	methods: {
-		onUpdate(e: { name: string; value: string }) {
-			this.$emit('update', e);
-		},
-		onSubmit(values: { [key: string]: string }) {
-			this.$emit('submit', values);
-		},
-		onSecondaryClick() {
-			this.$emit('secondaryClick');
-		},
-	},
-});
+);
+
+const emit = defineEmits<{
+	update: [{ name: string; value: string }];
+	submit: [values: { [key: string]: string }];
+	secondaryClick: [];
+}>();
+
+const onUpdate = (e: { name: string; value: string }) => {
+	emit('update', e);
+};
+
+const onSubmit = (values: { [key: string]: string }) => {
+	emit('submit', values);
+};
+
+const onSecondaryClick = () => {
+	emit('secondaryClick');
+};
 </script>
 
 <template>

packages/editor-ui/src/views/ChangePasswordView.vue

@@ -1,48 +1,111 @@
-<script lang="ts">
-import AuthView from '@/views/AuthView.vue';
-import { useToast } from '@/composables/useToast';
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
-import { defineComponent } from 'vue';
-import type { IFormBoxConfig } from '@/Interface';
-import { MFA_AUTHENTICATION_TOKEN_INPUT_MAX_LENGTH, VIEWS } from '@/constants';
-import { mapStores } from 'pinia';
+import AuthView from '@/views/AuthView.vue';
+
+import { useI18n } from '@/composables/useI18n';
+import { useToast } from '@/composables/useToast';
 import { useUsersStore } from '@/stores/users.store';
 
-export default defineComponent({
-	name: 'ChangePasswordView',
-	components: {
-		AuthView,
-	},
-	setup() {
+import type { IFormBoxConfig } from '@/Interface';
+import { MFA_AUTHENTICATION_TOKEN_INPUT_MAX_LENGTH, VIEWS } from '@/constants';
+
+const usersStore = useUsersStore();
+
+const locale = useI18n();
+const toast = useToast();
+const router = useRouter();
+
+const password = ref('');
+const loading = ref(false);
+const config = ref<IFormBoxConfig | null>(null);
+
+const passwordsMatch = (value: string | number | boolean | null | undefined) => {
+	if (typeof value !== 'string') {
+		return false;
+	}
+
+	if (value !== password.value) {
 		return {
-			...useToast(),
+			messageKey: 'auth.changePassword.passwordsMustMatchError',
 		};
-	},
-	data() {
-		return {
-			password: '',
-			loading: false,
-			config: null as null | IFormBoxConfig,
+	}
+
+	return false;
+};
+
+const getResetToken = () => {
+	return !router.currentRoute.value.query.token ||
+		typeof router.currentRoute.value.query.token !== 'string'
+		? null
+		: router.currentRoute.value.query.token;
+};
+
+const getMfaEnabled = () => {
+	if (!router.currentRoute.value.query.mfaEnabled) return null;
+	return router.currentRoute.value.query.mfaEnabled === 'true' ? true : false;
+};
+
+const isFormWithMFAToken = (values: { [key: string]: string }): values is { mfaToken: string } => {
+	return 'mfaToken' in values;
+};
+
+const onSubmit = async (values: { [key: string]: string }) => {
+	if (!isFormWithMFAToken(values)) return;
+	try {
+		loading.value = true;
+		const token = getResetToken();
+
+		if (token) {
+			const changePasswordParameters = {
+				token,
+				password: password.value,
+				...(values.mfaToken && { mfaToken: values.mfaToken }),
 			};
-	},
-	computed: {
-		...mapStores(useUsersStore),
-	},
-	async mounted() {
+
+			await usersStore.changePassword(changePasswordParameters);
+
+			toast.showMessage({
+				type: 'success',
+				title: locale.baseText('auth.changePassword.passwordUpdated'),
+				message: locale.baseText('auth.changePassword.passwordUpdatedMessage'),
+			});
+
+			await router.push({ name: VIEWS.SIGNIN });
+		} else {
+			toast.showError(
+				new Error(locale.baseText('auth.validation.missingParameters')),
+				locale.baseText('auth.changePassword.error'),
+			);
+		}
+	} catch (error) {
+		toast.showError(error, locale.baseText('auth.changePassword.error'));
+	}
+	loading.value = false;
+};
+
+const onInput = (e: { name: string; value: string }) => {
+	if (e.name === 'password') {
+		password.value = e.value;
+	}
+};
+
+onMounted(async () => {
 	const form: IFormBoxConfig = {
-			title: this.$locale.baseText('auth.changePassword'),
-			buttonText: this.$locale.baseText('auth.changePassword'),
-			redirectText: this.$locale.baseText('auth.signin'),
+		title: locale.baseText('auth.changePassword'),
+		buttonText: locale.baseText('auth.changePassword'),
+		redirectText: locale.baseText('auth.signin'),
 		redirectLink: '/signin',
 		inputs: [
 			{
 				name: 'password',
 				properties: {
-						label: this.$locale.baseText('auth.newPassword'),
+					label: locale.baseText('auth.newPassword'),
 					type: 'password',
 					required: true,
 					validationRules: [{ name: 'DEFAULT_PASSWORD_RULES' }],
-						infoText: this.$locale.baseText('auth.defaultPasswordRequirements'),
+					infoText: locale.baseText('auth.defaultPasswordRequirements'),
 					autocomplete: 'new-password',
 					capitalize: true,
 				},
@@ -50,12 +113,12 @@ export default defineComponent({
 			{
 				name: 'password2',
 				properties: {
-						label: this.$locale.baseText('auth.changePassword.reenterNewPassword'),
+					label: locale.baseText('auth.changePassword.reenterNewPassword'),
 					type: 'password',
 					required: true,
 					validators: {
 						TWO_PASSWORDS_MATCH: {
-								validate: this.passwordsMatch,
+							validate: passwordsMatch,
 						},
 					},
 					validationRules: [{ name: 'TWO_PASSWORDS_MATCH' }],
@@ -66,8 +129,8 @@ export default defineComponent({
 		],
 	};
 
-		const token = this.getResetToken();
-		const mfaEnabled = this.getMfaEnabled();
+	const token = getResetToken();
+	const mfaEnabled = getMfaEnabled();
 
 	if (mfaEnabled) {
 		form.inputs.push({
@@ -75,8 +138,8 @@ export default defineComponent({
 			initialValue: '',
 			properties: {
 				required: true,
-					label: this.$locale.baseText('mfa.code.input.label'),
-					placeholder: this.$locale.baseText('mfa.code.input.placeholder'),
+				label: locale.baseText('mfa.code.input.label'),
+				placeholder: locale.baseText('mfa.code.input.placeholder'),
 				maxlength: MFA_AUTHENTICATION_TOKEN_INPUT_MAX_LENGTH,
 				capitalize: true,
 				validateOnBlur: true,
@@ -84,80 +147,18 @@ export default defineComponent({
 		});
 	}
 
-		this.config = form;
+	config.value = form;
 
 	try {
 		if (!token) {
-				throw new Error(this.$locale.baseText('auth.changePassword.missingTokenError'));
+			throw new Error(locale.baseText('auth.changePassword.missingTokenError'));
 		}
 
-			await this.usersStore.validatePasswordToken({ token });
+		await usersStore.validatePasswordToken({ token });
 	} catch (e) {
-			this.showError(e, this.$locale.baseText('auth.changePassword.tokenValidationError'));
-			void this.$router.replace({ name: VIEWS.SIGNIN });
+		toast.showError(e, locale.baseText('auth.changePassword.tokenValidationError'));
+		void router.replace({ name: VIEWS.SIGNIN });
 	}
-	},
-	methods: {
-		passwordsMatch(value: string | number | boolean | null | undefined) {
-			if (typeof value !== 'string') {
-				return false;
-			}
-
-			if (value !== this.password) {
-				return {
-					messageKey: 'auth.changePassword.passwordsMustMatchError',
-				};
-			}
-
-			return false;
-		},
-		onInput(e: { name: string; value: string }) {
-			if (e.name === 'password') {
-				this.password = e.value;
-			}
-		},
-		getResetToken() {
-			return !this.$route.query.token || typeof this.$route.query.token !== 'string'
-				? null
-				: this.$route.query.token;
-		},
-		getMfaEnabled() {
-			if (!this.$route.query.mfaEnabled) return null;
-			return this.$route.query.mfaEnabled === 'true' ? true : false;
-		},
-		async onSubmit(values: { mfaToken: string }) {
-			try {
-				this.loading = true;
-				const token = this.getResetToken();
-
-				if (token) {
-					const changePasswordParameters = {
-						token,
-						password: this.password,
-						...(values.mfaToken && { mfaToken: values.mfaToken }),
-					};
-
-					await this.usersStore.changePassword(changePasswordParameters);
-
-					this.showMessage({
-						type: 'success',
-						title: this.$locale.baseText('auth.changePassword.passwordUpdated'),
-						message: this.$locale.baseText('auth.changePassword.passwordUpdatedMessage'),
-					});
-
-					await this.$router.push({ name: VIEWS.SIGNIN });
-				} else {
-					this.showError(
-						new Error(this.$locale.baseText('auth.validation.missingParameters')),
-						this.$locale.baseText('auth.changePassword.error'),
-					);
-				}
-			} catch (error) {
-				this.showError(error, this.$locale.baseText('auth.changePassword.error'));
-			}
-			this.loading = false;
-		},
-	},
 });
 </script>
 

packages/editor-ui/src/views/ForgotMyPasswordView.vue

@@ -1,36 +1,26 @@
-<script lang="ts">
+<script setup lang="ts">
 import AuthView from './AuthView.vue';
-import { useToast } from '@/composables/useToast';
-
-import { defineComponent } from 'vue';
 import type { IFormBoxConfig } from '@/Interface';
-import { mapStores } from 'pinia';
+import { useI18n } from '@/composables/useI18n';
+import { useToast } from '@/composables/useToast';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
+import { computed, ref } from 'vue';
 
-export default defineComponent({
-	name: 'ForgotMyPasswordView',
-	components: {
-		AuthView,
-	},
-	setup() {
-		return {
-			...useToast(),
-		};
-	},
-	data() {
-		return {
-			loading: false,
-		};
-	},
-	computed: {
-		...mapStores(useSettingsStore, useUsersStore),
-		formConfig(): IFormBoxConfig {
+const settingsStore = useSettingsStore();
+const usersStore = useUsersStore();
+
+const toast = useToast();
+const locale = useI18n();
+
+const loading = ref(false);
+
+const formConfig = computed(() => {
 	const EMAIL_INPUTS: IFormBoxConfig['inputs'] = [
 		{
 			name: 'email',
 			properties: {
-						label: this.$locale.baseText('auth.email'),
+				label: locale.baseText('auth.email'),
 				type: 'email',
 				required: true,
 				validationRules: [{ name: 'VALID_EMAIL' }],
@@ -44,22 +34,22 @@ export default defineComponent({
 		{
 			name: 'no-smtp-warning',
 			properties: {
-						label: this.$locale.baseText('forgotPassword.noSMTPToSendEmailWarning'),
+				label: locale.baseText('forgotPassword.noSMTPToSendEmailWarning'),
 				type: 'info',
 			},
 		},
 	];
 
 	const DEFAULT_FORM_CONFIG = {
-				title: this.$locale.baseText('forgotPassword.recoverPassword'),
-				redirectText: this.$locale.baseText('forgotPassword.returnToSignIn'),
+		title: locale.baseText('forgotPassword.recoverPassword'),
+		redirectText: locale.baseText('forgotPassword.returnToSignIn'),
 		redirectLink: '/signin',
 	};
 
-			if (this.settingsStore.isSmtpSetup) {
+	if (settingsStore.isSmtpSetup) {
 		return {
 			...DEFAULT_FORM_CONFIG,
-					buttonText: this.$locale.baseText('forgotPassword.getRecoveryLink'),
+			buttonText: locale.baseText('forgotPassword.getRecoveryLink'),
 			inputs: EMAIL_INPUTS,
 		};
 	}
@@ -67,42 +57,46 @@ export default defineComponent({
 		...DEFAULT_FORM_CONFIG,
 		inputs: NO_SMTP_INPUTS,
 	};
-		},
-	},
-	methods: {
-		async onSubmit(values: { email: string }) {
-			try {
-				this.loading = true;
-				await this.usersStore.sendForgotPasswordEmail(values);
+});
 
-				this.showMessage({
+const isFormWithEmail = (values: { [key: string]: string }): values is { email: string } => {
+	return 'email' in values;
+};
+
+const onSubmit = async (values: { [key: string]: string }) => {
+	if (!isFormWithEmail(values)) {
+		return;
+	}
+	try {
+		loading.value = true;
+		await usersStore.sendForgotPasswordEmail(values);
+
+		toast.showMessage({
 			type: 'success',
-					title: this.$locale.baseText('forgotPassword.recoveryEmailSent'),
-					message: this.$locale.baseText('forgotPassword.emailSentIfExists', {
+			title: locale.baseText('forgotPassword.recoveryEmailSent'),
+			message: locale.baseText('forgotPassword.emailSentIfExists', {
 				interpolate: { email: values.email },
 			}),
 		});
 	} catch (error) {
-				let message = this.$locale.baseText('forgotPassword.smtpErrorContactAdministrator');
+		let message = locale.baseText('forgotPassword.smtpErrorContactAdministrator');
 		if (error.httpStatusCode) {
 			const { httpStatusCode: status } = error;
 			if (status === 429) {
-						message = this.$locale.baseText('forgotPassword.tooManyRequests');
+				message = locale.baseText('forgotPassword.tooManyRequests');
 			} else if (error.httpStatusCode === 422) {
-						message = this.$locale.baseText(error.message);
+				message = locale.baseText(error.message);
 			}
 
-					this.showMessage({
+			toast.showMessage({
 				type: 'error',
-						title: this.$locale.baseText('forgotPassword.sendingEmailError'),
+				title: locale.baseText('forgotPassword.sendingEmailError'),
 				message,
 			});
 		}
 	}
-			this.loading = false;
-		},
-	},
-});
+	loading.value = false;
+};
 </script>
 
 <template>

packages/editor-ui/src/views/SamlOnboarding.vue

@@ -1,14 +1,17 @@
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
-import { ElNotification as Notification } from 'element-plus';
 import type { IFormBoxConfig } from 'n8n-design-system';
 import AuthView from '@/views/AuthView.vue';
-import { i18n as locale } from '@/plugins/i18n';
-import { useSSOStore } from '@/stores/sso.store';
 import { VIEWS } from '@/constants';
+import { useI18n } from '@/composables/useI18n';
+import { useToast } from '@/composables/useToast';
+import { useSSOStore } from '@/stores/sso.store';
 
 const router = useRouter();
+const locale = useI18n();
+const toast = useToast();
+
 const ssoStore = useSSOStore();
 
 const loading = ref(false);
@@ -40,18 +43,22 @@ const FORM_CONFIG: IFormBoxConfig = reactive({
 		},
 	],
 });
-const onSubmit = async (values: { firstName: string; lastName: string }) => {
+
+const isFormWithFirstAndLastName = (values: {
+	[key: string]: string;
+}): values is { firstName: string; lastName: string } => {
+	return 'firstName' in values && 'lastName' in values;
+};
+
+const onSubmit = async (values: { [key: string]: string }) => {
+	if (!isFormWithFirstAndLastName(values)) return;
 	try {
 		loading.value = true;
 		await ssoStore.updateUser(values);
 		await router.push({ name: VIEWS.HOMEPAGE });
 	} catch (error) {
 		loading.value = false;
-		Notification.error({
-			title: 'Error',
-			message: error.message,
-			position: 'bottom-right',
-		});
+		toast.showError(error, 'Error', error.message);
 	}
 };
 </script>

packages/editor-ui/src/views/SetupView.vue

@@ -1,33 +1,38 @@
-<script lang="ts">
-import AuthView from './AuthView.vue';
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
 import { useToast } from '@/composables/useToast';
+import { useI18n } from '@/composables/useI18n';
+
+import { usePostHog } from '@/stores/posthog.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useUIStore } from '@/stores/ui.store';
+import { useUsersStore } from '@/stores/users.store';
+
 import type { IFormBoxConfig } from '@/Interface';
 import { MORE_ONBOARDING_OPTIONS_EXPERIMENT, VIEWS } from '@/constants';
-import { mapStores } from 'pinia';
-import { useUIStore } from '@/stores/ui.store';
-import { useSettingsStore } from '@/stores/settings.store';
-import { useUsersStore } from '@/stores/users.store';
-import { usePostHog } from '@/stores/posthog.store';
 
-export default defineComponent({
-	name: 'SetupView',
-	components: {
-		AuthView,
-	},
-	setup() {
-		return useToast();
-	},
-	data() {
-		const FORM_CONFIG: IFormBoxConfig = {
-			title: this.$locale.baseText('auth.setup.setupOwner'),
-			buttonText: this.$locale.baseText('auth.setup.next'),
+import AuthView from '@/views/AuthView.vue';
+
+const posthogStore = usePostHog();
+const settingsStore = useSettingsStore();
+const uiStore = useUIStore();
+const usersStore = useUsersStore();
+
+const toast = useToast();
+const locale = useI18n();
+const router = useRouter();
+
+const loading = ref(false);
+const formConfig: IFormBoxConfig = reactive({
+	title: locale.baseText('auth.setup.setupOwner'),
+	buttonText: locale.baseText('auth.setup.next'),
 	inputs: [
 		{
 			name: 'email',
 			properties: {
-						label: this.$locale.baseText('auth.email'),
+				label: locale.baseText('auth.email'),
 				type: 'email',
 				required: true,
 				validationRules: [{ name: 'VALID_EMAIL' }],
@@ -38,7 +43,7 @@ export default defineComponent({
 		{
 			name: 'firstName',
 			properties: {
-						label: this.$locale.baseText('auth.firstName'),
+				label: locale.baseText('auth.firstName'),
 				maxlength: 32,
 				required: true,
 				autocomplete: 'given-name',
@@ -48,7 +53,7 @@ export default defineComponent({
 		{
 			name: 'lastName',
 			properties: {
-						label: this.$locale.baseText('auth.lastName'),
+				label: locale.baseText('auth.lastName'),
 				maxlength: 32,
 				required: true,
 				autocomplete: 'family-name',
@@ -58,11 +63,11 @@ export default defineComponent({
 		{
 			name: 'password',
 			properties: {
-						label: this.$locale.baseText('auth.password'),
+				label: locale.baseText('auth.password'),
 				type: 'password',
 				required: true,
 				validationRules: [{ name: 'DEFAULT_PASSWORD_RULES' }],
-						infoText: this.$locale.baseText('auth.defaultPasswordRequirements'),
+				infoText: locale.baseText('auth.defaultPasswordRequirements'),
 				autocomplete: 'new-password',
 				capitalize: true,
 			},
@@ -70,60 +75,49 @@ export default defineComponent({
 		{
 			name: 'agree',
 			properties: {
-						label: this.$locale.baseText('auth.agreement.label'),
+				label: locale.baseText('auth.agreement.label'),
 				type: 'checkbox',
 			},
 		},
 	],
-		};
+});
 
-		return {
-			FORM_CONFIG,
-			loading: false,
-		};
-	},
-	computed: {
-		...mapStores(useSettingsStore, useUIStore, useUsersStore, usePostHog),
-	},
-	methods: {
-		async onSubmit(values: { [key: string]: string | boolean }) {
+const onSubmit = async (values: { [key: string]: string | boolean }) => {
 	try {
-				const forceRedirectedHere = this.settingsStore.showSetupPage;
+		const forceRedirectedHere = settingsStore.showSetupPage;
 		const isPartOfOnboardingExperiment =
-					this.posthogStore.getVariant(MORE_ONBOARDING_OPTIONS_EXPERIMENT.name) ===
+			posthogStore.getVariant(MORE_ONBOARDING_OPTIONS_EXPERIMENT.name) ===
 			MORE_ONBOARDING_OPTIONS_EXPERIMENT.variant;
-				this.loading = true;
-				await this.usersStore.createOwner(
+		loading.value = true;
+		await usersStore.createOwner(
 			values as { firstName: string; lastName: string; email: string; password: string },
 		);
 
 		if (values.agree === true) {
 			try {
-						await this.uiStore.submitContactEmail(values.email.toString(), values.agree);
+				await uiStore.submitContactEmail(values.email.toString(), values.agree);
 			} catch {}
 		}
 
 		if (forceRedirectedHere) {
 			if (isPartOfOnboardingExperiment) {
-						await this.$router.push({ name: VIEWS.WORKFLOWS });
+				await router.push({ name: VIEWS.WORKFLOWS });
 			} else {
-						await this.$router.push({ name: VIEWS.NEW_WORKFLOW });
+				await router.push({ name: VIEWS.NEW_WORKFLOW });
 			}
 		} else {
-					await this.$router.push({ name: VIEWS.USERS_SETTINGS });
+			await router.push({ name: VIEWS.USERS_SETTINGS });
 		}
 	} catch (error) {
-				this.showError(error, this.$locale.baseText('auth.setup.settingUpOwnerError'));
+		toast.showError(error, locale.baseText('auth.setup.settingUpOwnerError'));
 	}
-			this.loading = false;
-		},
-	},
-});
+	loading.value = false;
+};
 </script>
 
 <template>
 	<AuthView
-		:form="FORM_CONFIG"
+		:form="formConfig"
 		:form-loading="loading"
 		data-test-id="setup-form"
 		@submit="onSubmit"

packages/editor-ui/src/views/SigninView.vue

@@ -1,62 +1,68 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
 import AuthView from './AuthView.vue';
 import MfaView from './MfaView.vue';
+
 import { useToast } from '@/composables/useToast';
-import type { IFormBoxConfig } from '@/Interface';
-import { MFA_AUTHENTICATION_REQUIRED_ERROR_CODE, VIEWS, MFA_FORM } from '@/constants';
-import { mapStores } from 'pinia';
+import { useI18n } from '@/composables/useI18n';
+import { useTelemetry } from '@/composables/useTelemetry';
+
 import { useUsersStore } from '@/stores/users.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useCloudPlanStore } from '@/stores/cloudPlan.store';
-import { useUIStore } from '@/stores/ui.store';
 
-export default defineComponent({
-	name: 'SigninView',
-	components: {
-		AuthView,
-		MfaView,
-	},
-	setup() {
-		return {
-			...useToast(),
-		};
-	},
-	data() {
-		return {
-			FORM_CONFIG: {} as IFormBoxConfig,
-			loading: false,
-			showMfaView: false,
-			email: '',
-			password: '',
-			reportError: false,
-		};
-	},
-	computed: {
-		...mapStores(useUsersStore, useSettingsStore, useUIStore, useCloudPlanStore),
-		userHasMfaEnabled() {
-			return !!this.usersStore.currentUser?.mfaEnabled;
-		},
-	},
-	mounted() {
-		let emailLabel = this.$locale.baseText('auth.email');
-		const ldapLoginLabel = this.settingsStore.ldapLoginLabel;
-		const isLdapLoginEnabled = this.settingsStore.isLdapLoginEnabled;
-		if (isLdapLoginEnabled && ldapLoginLabel) {
-			emailLabel = ldapLoginLabel;
+import type { IFormBoxConfig } from '@/Interface';
+import { MFA_AUTHENTICATION_REQUIRED_ERROR_CODE, VIEWS, MFA_FORM } from '@/constants';
+
+const usersStore = useUsersStore();
+const settingsStore = useSettingsStore();
+const cloudPlanStore = useCloudPlanStore();
+
+const route = useRoute();
+const router = useRouter();
+
+const toast = useToast();
+const locale = useI18n();
+const telemetry = useTelemetry();
+
+const loading = ref(false);
+const showMfaView = ref(false);
+const email = ref('');
+const password = ref('');
+const reportError = ref(false);
+
+const ldapLoginLabel = computed(() => settingsStore.ldapLoginLabel);
+const isLdapLoginEnabled = computed(() => settingsStore.isLdapLoginEnabled);
+const emailLabel = computed(() => {
+	let label = locale.baseText('auth.email');
+	if (isLdapLoginEnabled.value && ldapLoginLabel.value) {
+		label = ldapLoginLabel.value;
 	}
-		this.FORM_CONFIG = {
-			title: this.$locale.baseText('auth.signin'),
-			buttonText: this.$locale.baseText('auth.signin'),
-			redirectText: this.$locale.baseText('forgotPassword'),
+	return label;
+});
+
+const redirectLink = computed(() => {
+	if (!settingsStore.isDesktopDeployment) {
+		return '/forgot-password';
+	}
+	return undefined;
+});
+
+const formConfig: IFormBoxConfig = reactive({
+	title: locale.baseText('auth.signin'),
+	buttonText: locale.baseText('auth.signin'),
+	redirectText: locale.baseText('forgotPassword'),
+	redirectLink: redirectLink.value,
 	inputs: [
 		{
 			name: 'email',
 			properties: {
-						label: emailLabel,
+				label: emailLabel.value,
 				type: 'email',
 				required: true,
-						...(!isLdapLoginEnabled && { validationRules: [{ name: 'VALID_EMAIL' }] }),
+				...(!isLdapLoginEnabled.value && { validationRules: [{ name: 'VALID_EMAIL' }] }),
 				showRequiredAsterisk: false,
 				validateOnBlur: false,
 				autocomplete: 'email',
@@ -66,7 +72,7 @@ export default defineComponent({
 		{
 			name: 'password',
 			properties: {
-						label: this.$locale.baseText('auth.password'),
+				label: locale.baseText('auth.password'),
 				type: 'password',
 				required: true,
 				showRequiredAsterisk: false,
@@ -76,116 +82,126 @@ export default defineComponent({
 			},
 		},
 	],
-		};
+});
 
-		if (!this.settingsStore.isDesktopDeployment) {
-			this.FORM_CONFIG.redirectLink = '/forgot-password';
-		}
-	},
-	methods: {
-		async onMFASubmitted(form: { token?: string; recoveryCode?: string }) {
-			await this.login({
-				email: this.email,
-				password: this.password,
+const onMFASubmitted = async (form: { token?: string; recoveryCode?: string }) => {
+	await login({
+		email: email.value,
+		password: password.value,
 		token: form.token,
 		recoveryCode: form.recoveryCode,
 	});
-		},
-		async onEmailPasswordSubmitted(form: { email: string; password: string }) {
-			await this.login(form);
-		},
-		isRedirectSafe() {
-			const redirect = this.getRedirectQueryParameter();
+};
+
+const isFormWithEmailAndPassword = (values: {
+	[key: string]: string;
+}): values is { email: string; password: string } => {
+	return 'email' in values && 'password' in values;
+};
+
+const onEmailPasswordSubmitted = async (form: { [key: string]: string }) => {
+	if (!isFormWithEmailAndPassword(form)) return;
+	await login(form);
+};
+
+const isRedirectSafe = () => {
+	const redirect = getRedirectQueryParameter();
 	return redirect.startsWith('/') || redirect.startsWith(window.location.origin);
-		},
-		getRedirectQueryParameter() {
+};
+
+const getRedirectQueryParameter = () => {
 	let redirect = '';
-			if (typeof this.$route.query?.redirect === 'string') {
-				redirect = decodeURIComponent(this.$route.query?.redirect);
+	if (typeof route.query?.redirect === 'string') {
+		redirect = decodeURIComponent(route.query?.redirect);
 	}
 	return redirect;
-		},
-		async login(form: { email: string; password: string; token?: string; recoveryCode?: string }) {
+};
+
+const login = async (form: {
+	email: string;
+	password: string;
+	token?: string;
+	recoveryCode?: string;
+}) => {
 	try {
-				this.loading = true;
-				await this.usersStore.loginWithCreds({
+		loading.value = true;
+		await usersStore.loginWithCreds({
 			email: form.email,
 			password: form.password,
 			mfaToken: form.token,
 			mfaRecoveryCode: form.recoveryCode,
 		});
-				this.loading = false;
-				if (this.settingsStore.isCloudDeployment) {
+		loading.value = false;
+		if (settingsStore.isCloudDeployment) {
 			try {
-						await this.cloudPlanStore.checkForCloudPlanData();
+				await cloudPlanStore.checkForCloudPlanData();
 			} catch (error) {
 				console.warn('Failed to check for cloud plan data', error);
 			}
 		}
-				await this.settingsStore.getSettings();
-				this.clearAllStickyNotifications();
+		await settingsStore.getSettings();
+		toast.clearAllStickyNotifications();
 
-				this.$telemetry.track('User attempted to login', {
-					result: this.showMfaView ? 'mfa_success' : 'success',
+		telemetry.track('User attempted to login', {
+			result: showMfaView.value ? 'mfa_success' : 'success',
 		});
 
-				if (this.isRedirectSafe()) {
-					const redirect = this.getRedirectQueryParameter();
+		if (isRedirectSafe()) {
+			const redirect = getRedirectQueryParameter();
 			if (redirect.startsWith('http')) {
 				window.location.href = redirect;
 				return;
 			}
 
-					void this.$router.push(redirect);
+			void router.push(redirect);
 			return;
 		}
 
-				await this.$router.push({ name: VIEWS.HOMEPAGE });
+		await router.push({ name: VIEWS.HOMEPAGE });
 	} catch (error) {
 		if (error.errorCode === MFA_AUTHENTICATION_REQUIRED_ERROR_CODE) {
-					this.showMfaView = true;
-					this.cacheCredentials(form);
+			showMfaView.value = true;
+			cacheCredentials(form);
 			return;
 		}
 
-				this.$telemetry.track('User attempted to login', {
-					result: this.showMfaView ? 'mfa_token_rejected' : 'credentials_error',
+		telemetry.track('User attempted to login', {
+			result: showMfaView.value ? 'mfa_token_rejected' : 'credentials_error',
 		});
 
-				if (!this.showMfaView) {
-					this.showError(error, this.$locale.baseText('auth.signin.error'));
-					this.loading = false;
+		if (!showMfaView.value) {
+			toast.showError(error, locale.baseText('auth.signin.error'));
+			loading.value = false;
 			return;
 		}
 
-				this.reportError = true;
+		reportError.value = true;
 	}
-		},
-		onBackClick(fromForm: string) {
-			this.reportError = false;
+};
+
+const onBackClick = (fromForm: string) => {
+	reportError.value = false;
 	if (fromForm === MFA_FORM.MFA_TOKEN) {
-				this.showMfaView = false;
-				this.loading = false;
+		showMfaView.value = false;
+		loading.value = false;
 	}
-		},
-		onFormChanged(toForm: string) {
+};
+const onFormChanged = (toForm: string) => {
 	if (toForm === MFA_FORM.MFA_RECOVERY_CODE) {
-				this.reportError = false;
+		reportError.value = false;
 	}
-		},
-		cacheCredentials(form: { email: string; password: string }) {
-			this.email = form.email;
-			this.password = form.password;
-		},
-	},
-});
+};
+const cacheCredentials = (form: { email: string; password: string }) => {
+	email.value = form.email;
+	password.value = form.password;
+};
 </script>
 
 <template>
 	<div>
 		<AuthView
 			v-if="!showMfaView"
-			:form="FORM_CONFIG"
+			:form="formConfig"
 			:form-loading="loading"
 			:with-sso="true"
 			data-test-id="signin-form"