From d62a6dd830852a4140c850f041033f93a04e158d Mon Sep 17 00:00:00 2001 From: dougfabris Date: Wed, 23 Jun 2021 20:48:03 -0300 Subject: [PATCH 1/4] improve: rewrite modal --- app/e2e/client/EnterE2EPasswordModal.tsx | 53 ++++++++++++++++++++++ app/e2e/client/rocketchat.e2e.js | 38 ++++++++-------- packages/rocketchat-i18n/i18n/en.i18n.json | 2 +- 3 files changed, 74 insertions(+), 19 deletions(-) create mode 100644 app/e2e/client/EnterE2EPasswordModal.tsx diff --git a/app/e2e/client/EnterE2EPasswordModal.tsx b/app/e2e/client/EnterE2EPasswordModal.tsx new file mode 100644 index 000000000000..29cd4fe1d01e --- /dev/null +++ b/app/e2e/client/EnterE2EPasswordModal.tsx @@ -0,0 +1,53 @@ +import { Box, PasswordInput, Field, FieldGroup } from '@rocket.chat/fuselage'; +import React, { FC, useState, useCallback } from 'react'; +import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; + +import GenericModal from '../../../client/components/GenericModal'; +import { useTranslation } from '../../../client/contexts/TranslationContext'; + +type EnterE2EPasswordModalProps = { + onConfirm: (password: string) => void; + onClose: () => void; +}; + +const EnterE2EPasswordModal: FC = ({ onClose, onConfirm, ...props }) => { + const t = useTranslation(); + const [password, setPassword] = useState(''); + const [passwordError, setPasswordError] = useState(); + + const handleChange = useCallback((e: React.ChangeEvent) => { + 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 ( + + + + + + + + {passwordError} + + + + ); +}; + +export default EnterE2EPasswordModal; diff --git a/app/e2e/client/rocketchat.e2e.js b/app/e2e/client/rocketchat.e2e.js index 772cb1cf17c5..124a8b9e1e22 100644 --- a/app/e2e/client/rocketchat.e2e.js +++ b/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,24 @@ 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: `
${ TAPi18n.__('E2E_password_request_text') }
`, - 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: { + variant: 'warning', + title: TAPi18n.__('Enter_E2E_password_to_decode_your_key'), + cancelText: TAPi18n.__('I_ll_do_it_later'), + confirmText: TAPi18n.__('Decode_Key'), + onClose: imperativeModal.close, + onCancel: () => { + failedToDecodeKey = false; + this.closeAlert(); + imperativeModal.close(); + }, + onConfirm: (password) => { + resolve(password); + this.closeAlert(); + imperativeModal.close(); + }, + }, }); }; diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json index 64475d5ecb0f..4aea47592cea 100644 --- a/packages/rocketchat-i18n/i18n/en.i18n.json +++ b/packages/rocketchat-i18n/i18n/en.i18n.json @@ -1587,7 +1587,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_to_decode_your_key": "Enter E2E password", "Enter_name_here": "Enter name here", "Enter_Normal": "Normal mode (send with Enter)", "Enter_to": "Enter to", From f4a6c151d01317041bc69de255fa86ec4b7655b2 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Sat, 26 Jun 2021 18:05:08 -0300 Subject: [PATCH 2/4] fix: modal props --- app/e2e/client/EnterE2EPasswordModal.tsx | 11 +++++++++-- app/e2e/client/rocketchat.e2e.js | 4 ---- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/app/e2e/client/EnterE2EPasswordModal.tsx b/app/e2e/client/EnterE2EPasswordModal.tsx index 29cd4fe1d01e..6a3b1196b808 100644 --- a/app/e2e/client/EnterE2EPasswordModal.tsx +++ b/app/e2e/client/EnterE2EPasswordModal.tsx @@ -10,7 +10,7 @@ type EnterE2EPasswordModalProps = { onClose: () => void; }; -const EnterE2EPasswordModal: FC = ({ onClose, onConfirm, ...props }) => { +const EnterE2EPasswordModal: FC = ({ onConfirm, ...props }) => { const t = useTranslation(); const [password, setPassword] = useState(''); const [passwordError, setPasswordError] = useState(); @@ -31,7 +31,14 @@ const EnterE2EPasswordModal: FC = ({ onClose, onConf }); return ( - + diff --git a/app/e2e/client/rocketchat.e2e.js b/app/e2e/client/rocketchat.e2e.js index 124a8b9e1e22..c29bf9b92493 100644 --- a/app/e2e/client/rocketchat.e2e.js +++ b/app/e2e/client/rocketchat.e2e.js @@ -299,10 +299,6 @@ class E2E extends Emitter { const showModal = () => { imperativeModal.open({ component: EnterE2EPasswordModal, props: { - variant: 'warning', - title: TAPi18n.__('Enter_E2E_password_to_decode_your_key'), - cancelText: TAPi18n.__('I_ll_do_it_later'), - confirmText: TAPi18n.__('Decode_Key'), onClose: imperativeModal.close, onCancel: () => { failedToDecodeKey = false; From 9b94eab45b315d0e1c4181092fac0c7e4c7091fd Mon Sep 17 00:00:00 2001 From: dougfabris Date: Tue, 29 Jun 2021 15:02:44 -0300 Subject: [PATCH 3/4] fix: translation key --- app/e2e/client/EnterE2EPasswordModal.tsx | 2 +- packages/rocketchat-i18n/i18n/en.i18n.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/e2e/client/EnterE2EPasswordModal.tsx b/app/e2e/client/EnterE2EPasswordModal.tsx index 6a3b1196b808..b4c4aaedd8dc 100644 --- a/app/e2e/client/EnterE2EPasswordModal.tsx +++ b/app/e2e/client/EnterE2EPasswordModal.tsx @@ -33,7 +33,7 @@ const EnterE2EPasswordModal: FC = ({ onConfirm, ...p return ( Date: Mon, 5 Jul 2021 19:15:51 -0300 Subject: [PATCH 4/4] fix: review --- app/e2e/client/EnterE2EPasswordModal.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/app/e2e/client/EnterE2EPasswordModal.tsx b/app/e2e/client/EnterE2EPasswordModal.tsx index b4c4aaedd8dc..8fdddc115fe5 100644 --- a/app/e2e/client/EnterE2EPasswordModal.tsx +++ b/app/e2e/client/EnterE2EPasswordModal.tsx @@ -1,16 +1,19 @@ import { Box, PasswordInput, Field, FieldGroup } from '@rocket.chat/fuselage'; -import React, { FC, useState, useCallback } from 'react'; +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'; -type EnterE2EPasswordModalProps = { +const EnterE2EPasswordModal = ({ + onConfirm, + onClose, + onCancel, +}: { onConfirm: (password: string) => void; onClose: () => void; -}; - -const EnterE2EPasswordModal: FC = ({ onConfirm, ...props }) => { + onCancel: () => void; +}): ReactElement => { const t = useTranslation(); const [password, setPassword] = useState(''); const [passwordError, setPasswordError] = useState(); @@ -37,7 +40,8 @@ const EnterE2EPasswordModal: FC = ({ onConfirm, ...p cancelText={t('I_ll_do_it_later')} confirmText={t('Decode_Key')} onConfirm={handleConfirm} - {...props} + onClose={onClose} + onCancel={onCancel} >