fix(a11y): Added inline error to Enter E2EE password modal (#36350)

Co-authored-by: Douglas Fabris <devfabris@gmail.com>

Author: ergot-rp

apps/meteor/client/lib/e2ee/rocketchat.e2e.ts

@@ -521,29 +521,36 @@ class E2E extends Emitter {
 		return randomPassword;
 	}
 
-	openEnterE2EEPasswordModal(onEnterE2EEPassword?: (password: string) => void) {
+	openEnterE2EEPasswordModal(onEnterE2EEPassword: (password: string) => Promise<void>) {
+		const close = () => {
+			this.closeAlert();
+			imperativeModal.close();
+		};
 		imperativeModal.open({
 			component: EnterE2EPasswordModal,
 			props: {
-				onClose: imperativeModal.close,
+				onClose: close,
 				onCancel: () => {
 					failedToDecodeKey = false;
 					dispatchToastMessage({ type: 'info', message: t('End_To_End_Encryption_Not_Enabled') });
-					this.closeAlert();
-					imperativeModal.close();
+					close();
 				},
-				onConfirm: (password) => {
-					onEnterE2EEPassword?.(password);
-					this.closeAlert();
-					imperativeModal.close();
+				onConfirm: async (password) => {
+					await onEnterE2EEPassword(password);
+					dispatchToastMessage({ type: 'success', message: t('E2E_encryption_enabled') });
+					close();
 				},
 			},
 		});
 	}
 
-	async requestPasswordAlert(): Promise<string> {
+	async requestPasswordAlert(validatePassword: (password: string) => Promise<void>): Promise<void> {
 		return new Promise((resolve) => {
-			const showModal = () => this.openEnterE2EEPasswordModal((password) => resolve(password));
+			const showModal = () =>
+				this.openEnterE2EEPasswordModal(async (password) => {
+					await validatePassword(password);
+					resolve();
+				});
 
 			const showAlert = () => {
 				this.openAlert({
@@ -566,48 +573,47 @@ class E2E extends Emitter {
 		});
 	}
 
-	async requestPasswordModal(): Promise<string> {
-		return new Promise((resolve) => this.openEnterE2EEPasswordModal((password) => resolve(password)));
+	async requestPasswordModal(validatePassword: (password: string) => Promise<void>): Promise<void> {
+		return new Promise((resolve) => {
+			this.openEnterE2EEPasswordModal(async (password) => {
+				await validatePassword(password);
+				resolve();
+			});
+		});
 	}
 
 	async decodePrivateKeyFlow() {
-		const password = await this.requestPasswordModal();
-
 		if (!this.db_private_key) {
 			return;
 		}
 
 		try {
-			const privateKey = await this.keychain.decryptKey(this.db_private_key, password);
+			let privateKey: string | undefined;
+			await this.requestPasswordModal(async (password) => {
+				privateKey = await this.keychain.decryptKey(this.db_private_key as string, password);
+			});
 
 			if (this.db_public_key && privateKey) {
 				await this.loadKeys({ public_key: this.db_public_key, private_key: privateKey });
-				this.setState('READY');
 			} else {
 				await this.createAndLoadKeys();
-				this.setState('READY');
 			}
+			this.setState('READY');
+
 			dispatchToastMessage({ type: 'success', message: t('E2E_encryption_enabled') });
 		} catch (error) {
 			this.setState('ENTER_PASSWORD');
-			dispatchToastMessage({ type: 'error', message: t('Your_E2EE_password_is_incorrect') });
 			dispatchToastMessage({ type: 'info', message: t('End_To_End_Encryption_Not_Enabled') });
-			throw new Error('E2E -> Error decrypting private key', { cause: error });
+			throw new Error('E2E -> Error loading keys', { cause: error });
 		}
 	}
 
 	async decodePrivateKey(privateKey: string): Promise<string> {
-		// const span = log.span('decodePrivateKey');
-		const password = await this.requestPasswordAlert();
-		try {
-			const privKey = await this.keychain.decryptKey(privateKey, password);
-			return privKey;
-		} catch (error) {
-			this.setState('ENTER_PASSWORD');
-			dispatchToastMessage({ type: 'error', message: t('Your_E2EE_password_is_incorrect') });
-			dispatchToastMessage({ type: 'info', message: t('End_To_End_Encryption_Not_Enabled') });
-			throw new Error('E2E -> Error decrypting private key', { cause: error });
-		}
+		let decryptedKey: string | undefined;
+		await this.requestPasswordAlert(async (password) => {
+			decryptedKey = await this.keychain.decryptKey(privateKey, password);
+		});
+		return decryptedKey as string;
 	}
 
 	async decryptFileContent(file: IUploadWithUser): Promise<IUploadWithUser> {

apps/meteor/client/views/e2e/EnterE2EPasswordModal/EnterE2EPasswordModal.tsx

@@ -1,33 +1,51 @@
 import { Box, PasswordInput, Field, FieldGroup, FieldRow, FieldError, FieldLink } from '@rocket.chat/fuselage';
 import { GenericModal } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import { useEffect, useId, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import { useResetE2EPasswordMutation } from '../../hooks/useResetE2EPasswordMutation';
 
+const isInvalidE2EEPasswordError = (error: unknown): boolean => error instanceof DOMException && error.name === 'OperationError';
+
 type EnterE2EPasswordModalProps = {
-	onConfirm: (password: string) => void;
+	onConfirm: (password: string) => void | Promise<void>;
 	onClose: () => void;
 	onCancel: () => void;
 };
 
 const EnterE2EPasswordModal = ({ onConfirm, onClose, onCancel }: EnterE2EPasswordModalProps) => {
 	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
 	const [confirmResetPassword, setConfirmResetPassword] = useState(false);
 	const resetE2EPassword = useResetE2EPasswordMutation({ options: { onSettled: () => onClose() } });
 
 	const {
 		handleSubmit,
 		control,
 		setFocus,
+		setError,
 		formState: { errors },
 	} = useForm({
 		defaultValues: {
 			password: '',
 		},
 	});
 
+	const handleValidatePassword = handleSubmit(async ({ password }) => {
+		try {
+			await onConfirm(password);
+		} catch (error) {
+			if (isInvalidE2EEPasswordError(error)) {
+				setError('password', { message: t('Incorrect_encryption_password') });
+				return;
+			}
+			dispatchToastMessage({ type: 'error', message: error });
+			onClose();
+		}
+	});
+
 	const passwordInputId = useId();
 
 	useEffect(() => {
@@ -52,7 +70,7 @@ const EnterE2EPasswordModal = ({ onConfirm, onClose, onCancel }: EnterE2EPasswor
 
 	return (
 		<GenericModal
-			wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(({ password }) => onConfirm(password))} {...props} />}
+			wrapperFunction={(props) => <Box is='form' onSubmit={handleValidatePassword} {...props} />}
 			variant='warning'
 			title={t('Enter_E2E_password')}
 			icon='warning'

apps/meteor/tests/e2e/e2e-encryption/e2ee-passphrase-management.spec.ts

@@ -247,6 +247,7 @@ test.describe.serial('E2EE Passphrase Management - Room Setup States', () => {
 	});
 
 	test('expect enter password state on encrypted room', async ({ page }) => {
+		const enterE2EEPasswordModal = new EnterE2EEPasswordModal(page);
 		await page.goto('/home');
 
 		// Logout to remove e2ee keys
@@ -276,9 +277,7 @@ test.describe.serial('E2EE Passphrase Management - Room Setup States', () => {
 
 		await poHomeChannel.btnRoomEnterE2EEPassword.click();
 
-		await page.locator('#modal-root input').fill(e2eePassword);
-
-		await page.locator('#modal-root .rcx-button--primary').click();
+		await enterE2EEPasswordModal.enterPassword(e2eePassword);
 
 		await expect(poHomeChannel.bannerEnterE2EEPassword).not.toBeVisible();
 

packages/i18n/src/locales/en.i18n.json

@@ -2668,6 +2668,7 @@
   "Incoming_voice_call": "Incoming voice call",
   "Incoming_voice_call_canceled_suddenly": "An Incoming Voice Call was canceled suddenly.",
   "Incoming_voice_call_canceled_user_not_registered": "An Incoming Voice Call was canceled due to an unexpected error.",
+  "Incorrect_encryption_password": "Incorrect encryption password",
   "Industry": "Industry",
   "Info": "Info",
   "Information_to_keep_top_of_mind": "Information to keep top-of-mind",
@@ -6034,7 +6035,6 @@
   "You_will_not_be_able_to_recover_file": "You will not be able to recover this file!",
   "You_wont_receive_email_notifications_because_you_have_not_verified_your_email": "You won't receive email notifications because you have not verified your email.",
   "Your_E2EE_password_is": "Your E2EE password is:",
-  "Your_E2EE_password_is_incorrect": "Your E2EE password is incorrect",
   "Your_TOTP_has_been_reset": "Your Two Factor TOTP has been reset.",
   "Your_e2e_key_has_been_reset": "Your e2e key has been reset.",
   "Your_email_address_has_changed": "Your email address has been changed.",

packages/i18n/src/locales/nb.i18n.json

@@ -5918,7 +5918,6 @@
   "You_will_not_be_able_to_recover_file": "Du vil ikke kunne gjenopprette denne filen!",
   "You_wont_receive_email_notifications_because_you_have_not_verified_your_email": "Du mottar ikke e-postvarsler fordi du ikke har bekreftet e-posten din.",
   "Your_E2EE_password_is": "Ditt E2EE-passord er:",
-  "Your_E2EE_password_is_incorrect": "E2EE-passordet ditt er feil",
   "Your_TOTP_has_been_reset": "To-faktor TOTP har blitt tilbakestilt.",
   "Your_e2e_key_has_been_reset": "E2e-nøkkelen din har blitt tilbakestilt.",
   "Your_email_address_has_changed": "E-postadressen din har blitt endret.",

packages/i18n/src/locales/nn.i18n.json

@@ -5205,7 +5205,6 @@
   "You_will_not_be_able_to_recover_file": "Du vil ikke kunne gjenopprette denne filen!",
   "You_wont_receive_email_notifications_because_you_have_not_verified_your_email": "Du mottar ikke e-postvarsler fordi du ikke har bekreftet e-posten din.",
   "Your_E2EE_password_is": "Ditt E2EE-passord er:",
-  "Your_E2EE_password_is_incorrect": "E2EE-passordet ditt er feil",
   "Your_email_has_been_queued_for_sending": "E-posten din har vært i kø for å sende",
   "Your_entry_has_been_deleted": "Oppføringen din er slettet.",
   "Your_file_has_been_deleted": "Filen din er slettet.",

packages/i18n/src/locales/pt-BR.i18n.json

@@ -6018,7 +6018,6 @@
   "You_will_not_be_able_to_recover_file": "Não será possível recuperar este arquivo!",
   "You_wont_receive_email_notifications_because_you_have_not_verified_your_email": "Você não receberá notificações de e-mail, porque você não confirmou seu e-mail.",
   "Your_E2EE_password_is": "Sua senha do E2EE é:",
-  "Your_E2EE_password_is_incorrect": "Sua senha do E2EE está incorreta",
   "Your_TOTP_has_been_reset": "Seu TOTP de dois fatores foi redefinido.",
   "Your_e2e_key_has_been_reset": "Sua chave e2e foi redefinida.",
   "Your_email_address_has_changed": "Seu endereço de e-mail foi alterado.",

packages/i18n/src/locales/sv.i18n.json

@@ -5663,7 +5663,6 @@
   "You_will_not_be_able_to_recover_file": "Du kommer inte att kunna återskapa den här filen!",
   "You_wont_receive_email_notifications_because_you_have_not_verified_your_email": "Du kommer inte att få e-postmeddelanden eftersom du inte har verifierat din e-post.",
   "Your_E2EE_password_is": "Ditt E2EE-lösenord är:",
-  "Your_E2EE_password_is_incorrect": "Ditt E2EE-lösenord är felaktigt",
   "Your_TOTP_has_been_reset": "Ditt tidsbaserade engångslösenord för tvåfaktorsautentisering har återställts.",
   "Your_e2e_key_has_been_reset": "Din E2E-nyckel har återställts.",
   "Your_email_address_has_changed": "Din e-postadress har ändrats.",

packages/i18n/src/locales/zh.i18n.json

@@ -5909,7 +5909,6 @@
   "You_will_not_be_able_to_recover_file": "您将不能恢复此文件！",
   "You_wont_receive_email_notifications_because_you_have_not_verified_your_email": "您将不会收到电子邮件通知，因为您还没有验证您的电子邮箱地址。",
   "Your_E2EE_password_is": "你的 E2EE 密码是：",
-  "Your_E2EE_password_is_incorrect": "你的 E2EE 密码不正确",
   "Your_TOTP_has_been_reset": "您的两步验证 TOTP 已重置。",
   "Your_e2e_key_has_been_reset": "您的端到端加密密钥已被重置",
   "Your_email_address_has_changed": "您的电子邮箱已更改。",