fix(editor): Allow password managers to autocomplete MFA code during login (#18865)

packages/frontend/@n8n/design-system/src/types/form.ts

@@ -95,5 +95,6 @@ export type InputAutocompletePropType =
 	| 'current-password'
 	| 'given-name'
 	| 'family-name'
+	| 'one-time-code'
 	| 'email'; // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
 export type ElementPlusSizePropType = '' | 'small' | 'large' | 'default' | undefined;

packages/frontend/editor-ui/src/views/MfaView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { IFormInputs } from '@/Interface';
+import type { IFormInputs, InputAutocompletePropType } from '@/Interface';
 import Logo from '@/components/Logo/Logo.vue';
 import {
 	MFA_AUTHENTICATION_RECOVERY_CODE_INPUT_MAX_LENGTH,
@@ -33,6 +33,7 @@ const showRecoveryCodeForm = ref(false);
 const verifyingMfaCode = ref(false);
 const formError = ref('');
 const { reportError } = toRefs(props);
+const mfaFormRef = ref<{ $el?: HTMLElement } | null>(null);
 
 // ---------------------------------------------------------------------------
 // #region Composable
@@ -64,6 +65,7 @@ const formField = (
 	placeholder: string,
 	maxlength: number,
 	focus = true,
+	autocomplete: InputAutocompletePropType = 'off',
 ) => {
 	return {
 		name,
@@ -75,6 +77,7 @@ const formField = (
 			capitalize: true,
 			validateOnBlur: false,
 			focusInitially: focus,
+			autocomplete,
 		},
 	};
 };
@@ -97,6 +100,7 @@ const onBackClick = () => {
 	hasAnyChanges.value = true;
 	formInputs.value = [mfaCodeFieldWithDefaults()];
 	emit('onBackClick', MFA_FORM.MFA_RECOVERY_CODE);
+	focusMfaCodeAfterPasswordManager();
 };
 
 const onSubmit = (formData: unknown) => {
@@ -108,6 +112,19 @@ const onSubmit = (formData: unknown) => {
 	emit('submit', data);
 };
 
+const focusMfaCodeAfterPasswordManager = () => {
+	setTimeout(() => {
+		if (mfaFormRef.value) {
+			const container = mfaFormRef.value.$el;
+			if (!container) return;
+			const inputElement = container.querySelector('input[name="mfaCode"]') as HTMLInputElement;
+			if (inputElement) {
+				inputElement.focus();
+			}
+		}
+	}, 200);
+};
+
 const onInput = ({ target: { value, name } }: { target: { value: string; name: string } }) => {
 	const isSubmittingMfaCode = name === 'mfaCode';
 	const inputValidLength = isSubmittingMfaCode
@@ -149,6 +166,8 @@ const mfaCodeFieldWithDefaults = () => {
 		i18.baseText('mfa.code.input.label'),
 		i18.baseText('mfa.code.input.placeholder'),
 		MFA_AUTHENTICATION_CODE_INPUT_MAX_LENGTH,
+		false,
+		'one-time-code',
 	);
 };
 
@@ -168,6 +187,8 @@ const {
 
 onMounted(() => {
 	formInputs.value = [mfaCodeFieldWithDefaults()];
+
+	focusMfaCodeAfterPasswordManager();
 });
 
 // #endregion
@@ -190,6 +211,7 @@ onMounted(() => {
 					data-test-id="mfa-login-form"
 					:inputs="formInputs"
 					:event-bus="formBus"
+					ref="mfaFormRef"
 					@input="onInput"
 					@submit="onSubmit"
 				/>