feat: create link to open modal

Author: dougfabris

apps/meteor/app/e2e/server/methods/resetOwnE2EKey.ts

@@ -22,7 +22,9 @@ Meteor.methods<ServerMethods>({
 		}
 
 		if (!(await resetUserE2EEncriptionKey(userId, false))) {
-			return false;
+			throw new Meteor.Error('failed-reset-e2e-password', 'Failed to reset E2E password', {
+				method: 'resetOwnE2EKey',
+			});
 		}
 		return true;
 	}),

apps/meteor/client/views/account/security/AccountSecurityPage.tsx

@@ -49,15 +49,15 @@ const AccountSecurityPage = (): ReactElement => {
 					{allowPasswordChange && (
 						<FormProvider {...methods}>
 							<Accordion>
-								<AccordionItem title={t('Password')} expanded={!require2faSetup}>
+								<AccordionItem title={t('Password')} defaultExpanded={!require2faSetup}>
 									<ChangePassword id={passwordFormId} />
 								</AccordionItem>
 							</Accordion>
 						</FormProvider>
 					)}
 					<Accordion>
 						{(twoFactorTOTP || showEmailTwoFactor) && twoFactorEnabled && (
-							<AccordionItem expanded={require2faSetup} title={t('Two Factor Authentication')}>
+							<AccordionItem defaultExpanded={require2faSetup} title={t('Two Factor Authentication')}>
 								{require2faSetup && (
 									<Callout type='warning' title={t('Enable_two-factor_authentication')} mbe='24px'>
 										{t('Enable_two-factor_authentication_callout_description')}

apps/meteor/client/views/account/security/EndToEnd.tsx

@@ -1,22 +1,22 @@
 import { Box, PasswordInput, Field, FieldGroup, FieldLabel, FieldRow, FieldError, FieldHint, Button, Divider } from '@rocket.chat/fuselage';
-import { useToastMessageDispatch, useMethod, useTranslation, useLogout } from '@rocket.chat/ui-contexts';
+import { useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
 import DOMPurify from 'dompurify';
 import { Accounts } from 'meteor/accounts-base';
 import type { ComponentProps, ReactElement } from 'react';
-import { useId, useCallback, useEffect } from 'react';
+import { useId, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
 import { e2e } from '../../../lib/e2ee/rocketchat.e2e';
+import { useResetE2EPasswordMutation } from '../../hooks/useResetE2EPasswordMutation';
 
 const EndToEnd = (props: ComponentProps<typeof Box>): ReactElement => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
-	const logout = useLogout();
 
 	const publicKey = Accounts.storageLocation.getItem('public_key');
 	const privateKey = Accounts.storageLocation.getItem('private_key');
 
-	const resetE2eKey = useMethod('e2e.resetOwnE2EKey');
+	const resetE2EPassword = useResetE2EPasswordMutation();
 
 	const {
 		handleSubmit,
@@ -48,18 +48,6 @@ const EndToEnd = (props: ComponentProps<typeof Box>): ReactElement => {
 		}
 	};
 
-	const handleResetE2eKey = useCallback(async () => {
-		try {
-			const result = await resetE2eKey();
-			if (result) {
-				dispatchToastMessage({ type: 'success', message: t('User_e2e_key_was_reset') });
-				logout();
-			}
-		} catch (error) {
-			dispatchToastMessage({ type: 'error', message: error });
-		}
-	}, [dispatchToastMessage, resetE2eKey, logout, t]);
-
 	useEffect(() => {
 		if (password?.trim() === '') {
 			resetField('passwordConfirm');
@@ -161,7 +149,7 @@ const EndToEnd = (props: ComponentProps<typeof Box>): ReactElement => {
 					{t('Reset_E2E_Key')}
 				</Box>
 				<Box is='p' fontScale='p1' mbe={12} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(t('E2E_Reset_Key_Explanation')) }} />
-				<Button onClick={handleResetE2eKey} data-qa-type='e2e-encryption-reset-key-button'>
+				<Button onClick={() => resetE2EPassword.mutate()} data-qa-type='e2e-encryption-reset-key-button'>
 					{t('Reset_E2E_Key')}
 				</Button>
 			</Box>

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

@@ -1,10 +1,12 @@
-import { Box, PasswordInput, Field, FieldGroup, FieldRow, FieldError } from '@rocket.chat/fuselage';
+import { Box, PasswordInput, Field, FieldGroup, FieldRow, FieldError, FieldLink } from '@rocket.chat/fuselage';
 import { GenericModal } from '@rocket.chat/ui-client';
 import DOMPurify from 'dompurify';
-import { useEffect, useId } from 'react';
+import { useEffect, useId, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import { useResetE2EPasswordMutation } from '../../hooks/useResetE2EPasswordMutation';
+
 type EnterE2EPasswordModalProps = {
 	onConfirm: (password: string) => void;
 	onClose: () => void;
@@ -13,6 +15,9 @@ type EnterE2EPasswordModalProps = {
 
 const EnterE2EPasswordModal = ({ onConfirm, onClose, onCancel }: EnterE2EPasswordModalProps) => {
 	const { t } = useTranslation();
+	const [confirmResetPassword, setConfirmResetPassword] = useState(false);
+	const resetE2EPassword = useResetE2EPasswordMutation({ options: { onSettled: () => onClose() } });
+
 	const {
 		handleSubmit,
 		control,
@@ -30,6 +35,22 @@ const EnterE2EPasswordModal = ({ onConfirm, onClose, onCancel }: EnterE2EPasswor
 		setFocus('password');
 	}, [setFocus]);
 
+	if (confirmResetPassword) {
+		return (
+			<GenericModal
+				variant='warning'
+				title={t('Reset_E2EE_password')}
+				icon='warning'
+				confirmText={t('Reset_E2EE_password')}
+				onClose={onClose}
+				onCancel={onClose}
+				onConfirm={() => resetE2EPassword.mutate()}
+			>
+				<Box is='p'>{t('Reset_E2EE_password_description')}</Box>
+			</GenericModal>
+		);
+	}
+
 	return (
 		<GenericModal
 			wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(({ password }) => onConfirm(password))} {...props} />}
@@ -66,6 +87,18 @@ const EnterE2EPasswordModal = ({ onConfirm, onClose, onCancel }: EnterE2EPasswor
 							{errors.password.message}
 						</FieldError>
 					)}
+					<FieldRow alignSelf='end'>
+						<FieldLink
+							href='#'
+							target={undefined}
+							onClick={(e) => {
+								e.preventDefault();
+								setConfirmResetPassword(true);
+							}}
+						>
+							{t('Forgot_E2EE_Password')}
+						</FieldLink>
+					</FieldRow>
 				</Field>
 			</FieldGroup>
 		</GenericModal>

apps/meteor/client/views/hooks/useResetE2EPasswordMutation.ts

@@ -0,0 +1,24 @@
+import { useLogout, useMethod, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import type { MutationOptions } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+export const useResetE2EPasswordMutation = ({ options }: { options?: MutationOptions } = {}) => {
+	const { t } = useTranslation();
+
+	const logout = useLogout();
+	const resetE2eKey = useMethod('e2e.resetOwnE2EKey');
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	return useMutation({
+		mutationFn: async () => resetE2eKey(),
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('User_e2e_key_was_reset') });
+			logout();
+		},
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+		...options,
+	});
+};

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

@@ -2292,6 +2292,7 @@
   "Forgot_Password_Email_Subject": "[Site_Name] - Password Recovery",
   "Forgot_password": "Forgot your password?",
   "Forgot_password_section": "Forgot password",
+  "Forgot_E2EE_Password": "Forgot E2EE password?",
   "Format": "Format",
   "Forward": "Forward",
   "Forward_chat": "Forward chat",
@@ -4329,6 +4330,8 @@
   "Reset": "Reset",
   "Reset_Connection": "Reset Connection",
   "Reset_E2E_Key": "Reset E2EE key",
+  "Reset_E2EE_password": "Reset E2EE password",
+  "Reset_E2EE_password_description": "Resetting will log you out and generate a new E2EE password upon logging back in. You‘ll regain access to encrypted rooms with online members, but not to those without any members online.",
   "Reset_TOTP": "Reset TOTP",
   "Reset_password": "Reset password",
   "Reset_priorities": "Reset priorities",