[IMPROVE] Rewrite Enter Encryption Password Modal

app/e2e/client/EnterE2EPasswordModal.tsx

@@ -0,0 +1,64 @@
+import { Box, PasswordInput, Field, FieldGroup } from '@rocket.chat/fuselage';
+import React, { ReactElement, useState, useCallback } from 'react';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+
+import GenericModal from '../../../client/components/GenericModal';
+import { useTranslation } from '../../../client/contexts/TranslationContext';
+
+const EnterE2EPasswordModal = ({
+	onConfirm,
+	onClose,
+	onCancel,
+}: {
+	onConfirm: (password: string) => void;
+	onClose: () => void;
+	onCancel: () => void;
+}): ReactElement => {
+	const t = useTranslation();
+	const [password, setPassword] = useState('');
+	const [passwordError, setPasswordError] = useState<string | undefined>();
+
+	const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+		e.target.value !== '' && setPasswordError(undefined);
+		setPassword(e.currentTarget.value);
+	}, [setPassword]);
+
+
+	const handleConfirm = useMutableCallback((): void => {
+		if (password === '') {
+			setPasswordError(t('Invalid_pass'));
+			return;
+		}
+
+		return onConfirm(password);
+	});
+
+	return (
+		<GenericModal
+			variant='warning'
+			title={t('Enter_E2E_password')}
+			cancelText={t('I_ll_do_it_later')}
+			confirmText={t('Decode_Key')}
+			onConfirm={handleConfirm}
+			onClose={onClose}
+			onCancel={onCancel}
+		>
+			<Box dangerouslySetInnerHTML={{ __html: t('E2E_password_request_text') }} />
+			<FieldGroup mbs='x24' w='full'>
+				<Field>
+					<Field.Row>
+						<PasswordInput
+							error={passwordError}
+							value={password}
+							onChange={handleChange}
+							placeholder={t('New_Password_Placeholder')}
+						/>
+					</Field.Row>
+					<Field.Error>{passwordError}</Field.Error>
+				</Field>
+			</FieldGroup>
+		</GenericModal>
+	);
+};
+
+export default EnterE2EPasswordModal;

app/e2e/client/rocketchat.e2e.js

@@ -26,6 +26,8 @@ import './events.js';
 import './tabbar';
 import { log, logError } from './logger';
 import { waitUntilFind } from './waitUntilFind';
+import { imperativeModal } from '../../../client/lib/imperativeModal';
+import EnterE2EPasswordModal from './EnterE2EPasswordModal';
 
 let failedToDecodeKey = false;
 
@@ -295,24 +297,20 @@ class E2E extends Emitter {
 	async requestPassword() {
 		return new Promise((resolve) => {
 			const showModal = () => {
-				modal.open({
-					title: TAPi18n.__('Enter_E2E_password_to_decode_your_key'),
-					type: 'input',
-					inputType: 'password',
-					html: true,
-					text: `<div>${ TAPi18n.__('E2E_password_request_text') }</div>`,
-					showConfirmButton: true,
-					showCancelButton: true,
-					confirmButtonText: TAPi18n.__('Decode_Key'),
-					cancelButtonText: TAPi18n.__('I_ll_do_it_later'),
-				}, (password) => {
-					if (password) {
-						this.closeAlert();
-						resolve(password);
-					}
-				}, () => {
-					failedToDecodeKey = false;
-					this.closeAlert();
+				imperativeModal.open({ component: EnterE2EPasswordModal,
+					props: {
+						onClose: imperativeModal.close,
+						onCancel: () => {
+							failedToDecodeKey = false;
+							this.closeAlert();
+							imperativeModal.close();
+						},
+						onConfirm: (password) => {
+							resolve(password);
+							this.closeAlert();
+							imperativeModal.close();
+						},
+					},
 				});
 			};
 

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -1588,7 +1588,7 @@
   "Enter_authentication_code": "Enter authentication code",
   "Enter_Behaviour": "Enter key Behaviour",
   "Enter_Behaviour_Description": "This changes if the enter key will send a message or do a line break",
-  "Enter_E2E_password_to_decode_your_key": "Enter E2E password to decode your key",
+  "Enter_E2E_password": "Enter E2E password",
   "Enter_name_here": "Enter name here",
   "Enter_Normal": "Normal mode (send with Enter)",
   "Enter_to": "Enter to",