[IMPROVE] Rewrite Save Encryption Password Modal (#22447)

* improve: rewrite modal

* fix: translation keys

* fix: review

* fix: lint

Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>

app/e2e/client/EnterE2EPasswordModal.tsx

@@ -37,7 +37,7 @@ const EnterE2EPasswordModal = ({
 		<GenericModal
 			variant='warning'
 			title={t('Enter_E2E_password')}
-			cancelText={t('I_ll_do_it_later')}
+			cancelText={t('Do_It_Later')}
 			confirmText={t('Decode_Key')}
 			onConfirm={handleConfirm}
 			onClose={onClose}

app/e2e/client/SaveE2EPasswordModal.tsx

@@ -0,0 +1,33 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ReactElement } from 'react';
+
+import GenericModal from '../../../client/components/GenericModal';
+import { useTranslation } from '../../../client/contexts/TranslationContext';
+
+const SaveE2EPasswordModal = ({
+	passwordRevealText,
+	onClose,
+	onCancel,
+	onConfirm,
+}: {
+	passwordRevealText: string;
+	onClose: () => void;
+	onCancel: () => void;
+	onConfirm: () => void;
+}): ReactElement => {
+	const t = useTranslation();
+
+	return (
+		<GenericModal
+			onClose={onClose}
+			onCancel={onCancel}
+			onConfirm={onConfirm}
+			cancelText={t('Do_It_Later')}
+			confirmText={t('I_Saved_My_Password')}
+			variant='warning'
+			title={t('Save_Your_Encryption_Password')}
+		><Box dangerouslySetInnerHTML={{ __html: passwordRevealText }} /></GenericModal>
+	);
+};
+
+export default SaveE2EPasswordModal;

app/e2e/client/rocketchat.e2e.js

@@ -21,12 +21,13 @@ import {
 } from './helper';
 import * as banners from '../../../client/lib/banners';
 import { Rooms, Subscriptions, Messages } from '../../models';
-import { call, modal } from '../../ui-utils';
+import { call } from '../../ui-utils';
 import './events.js';
 import './tabbar';
 import { log, logError } from './logger';
 import { waitUntilFind } from './waitUntilFind';
 import { imperativeModal } from '../../../client/lib/imperativeModal';
+import SaveE2EPasswordModal from './SaveE2EPasswordModal';
 import EnterE2EPasswordModal from './EnterE2EPasswordModal';
 
 let failedToDecodeKey = false;
@@ -147,26 +148,26 @@ class E2E extends Emitter {
 			});
 
 			this.openAlert({
-				title: TAPi18n.__('Save_your_encryption_password'),
+				title: TAPi18n.__('Save_Your_Encryption_Password'),
 				html: TAPi18n.__('Click_here_to_view_and_copy_your_password'),
 				modifiers: ['large'],
 				closable: false,
 				icon: 'key',
 				action: () => {
-					modal.open({
-						title: TAPi18n.__('Save_your_encryption_password'),
-						html: true,
-						text: `<div>${ passwordRevealText }</div>`,
-						showConfirmButton: true,
-						showCancelButton: true,
-						confirmButtonText: TAPi18n.__('I_saved_my_password_close_this_message'),
-						cancelButtonText: TAPi18n.__('I_ll_do_it_later'),
-					}, (confirm) => {
-						if (!confirm) {
-							return;
-						}
-						Meteor._localStorage.removeItem('e2e.randomPassword');
-						this.closeAlert();
+					imperativeModal.open({ component: SaveE2EPasswordModal,
+						props: {
+							passwordRevealText,
+							onClose: imperativeModal.close,
+							onCancel: () => {
+								this.closeAlert();
+								imperativeModal.close();
+							},
+							onConfirm: () => {
+								Meteor._localStorage.removeItem('e2e.randomPassword');
+								this.closeAlert();
+								imperativeModal.close();
+							},
+						},
 					});
 				},
 			});

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

@@ -1429,6 +1429,7 @@
   "Display_setting_permissions": "Display permissions to change settings",
   "Display_unread_counter": "Display number of unread messages",
   "Displays_action_text": "Displays action text",
+  "Do_It_Later": "Do It Later",
   "Do_not_display_unread_counter": "Do not display any counter of this channel",
   "Do_not_provide_this_code_to_anyone": "Do not provide this code to anyone.",
   "Do_Nothing": "Do Nothing",
@@ -2048,8 +2049,7 @@
   "How_responsive_was_the_chat_agent": "How responsive was the chat agent?",
   "How_satisfied_were_you_with_this_chat": "How satisfied were you with this chat?",
   "How_to_handle_open_sessions_when_agent_goes_offline": "How to Handle Open Sessions When Agent Goes Offline",
-  "I_ll_do_it_later": "I'll do it later",
-  "I_saved_my_password_close_this_message": "I saved my password, close this message",
+  "I_Saved_My_Password": "I Saved My Password",
   "Idle_Time_Limit": "Idle Time Limit",
   "Idle_Time_Limit_Description": "Period of time until status changes to away. Value needs to be in seconds.",
   "if_they_are_from": "(if they are from %s)",
@@ -3574,7 +3574,7 @@
   "Save_Mobile_Bandwidth": "Save Mobile Bandwidth",
   "Save_to_enable_this_action": "Save to enable this action",
   "Save_To_Webdav": "Save to WebDAV",
-  "Save_your_encryption_password": "Save your encryption password",
+  "Save_Your_Encryption_Password": "Save Your Encryption Password",
   "save-others-livechat-room-info": "Save Others Omnichannel Room Info",
   "save-others-livechat-room-info_description": "Permission to save information from other omnichannel rooms",
   "Saved": "Saved",