snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

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

@@ -0,0 +1,33 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import EnterE2EPasswordModal from '.';
+import * as stories from './EnterE2EPasswordModal.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+	const { baseElement } = render(<Story />);
+	expect(baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />);
+
+	const results = await axe(container);
+	expect(results).toHaveNoViolations();
+});
+
+it('should render modal and the password input should be focused', () => {
+	const inputPlaceholder = 'Please enter your E2E password';
+	render(<EnterE2EPasswordModal onConfirm={() => undefined} onClose={() => undefined} onCancel={() => undefined} />, {
+		wrapper: mockAppRoot()
+			.withTranslations('en', 'core', {
+				Please_enter_E2EE_password: inputPlaceholder,
+			})
+			.build(),
+	});
+	expect(screen.getByPlaceholderText(inputPlaceholder)).toHaveFocus();
+});

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

@@ -0,0 +1,14 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import type { Meta, StoryFn } from '@storybook/react';
+import { action } from 'storybook/actions';
+
+import EnterE2EPasswordModal from '.';
+
+export default {
+	component: EnterE2EPasswordModal,
+	decorators: [mockAppRoot().withTranslations('en', 'core', {}).buildStoryDecorator()],
+} satisfies Meta<typeof EnterE2EPasswordModal>;
+
+export const Default: StoryFn<typeof EnterE2EPasswordModal> = () => (
+	<EnterE2EPasswordModal onConfirm={action('submit')} onClose={action('close')} onCancel={action('cancel')} />
+);

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

@@ -0,0 +1,125 @@
+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';
+
+export type EnterE2EPasswordModalProps = {
+	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(() => {
+		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={handleValidatePassword} {...props} />}
+			variant='warning'
+			title={t('Enter_E2E_password')}
+			icon='warning'
+			cancelText={t('Do_It_Later')}
+			confirmText={t('Enable_encryption')}
+			onClose={onClose}
+			onCancel={onCancel}
+		>
+			<Box>{t('E2E_password_request_text')}</Box>
+			<FieldGroup marginBlockStart={24} width='full'>
+				<Field>
+					<FieldRow>
+						<Controller
+							name='password'
+							control={control}
+							rules={{ required: t('Invalid_pass') }}
+							render={({ field, fieldState: { error, invalid } }) => (
+								<PasswordInput
+									{...field}
+									error={error?.message}
+									aria-invalid={invalid ? 'true' : 'false'}
+									aria-required='true'
+									aria-describedby={error ? `${passwordInputId}-error` : undefined}
+									placeholder={t('Please_enter_E2EE_password')}
+								/>
+							)}
+						/>
+					</FieldRow>
+					{errors.password && (
+						<FieldError id={`${passwordInputId}-error`} role='alert'>
+							{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>
+	);
+};
+
+export default EnterE2EPasswordModal;

apps/meteor/client/views/e2e/EnterE2EPasswordModal/__snapshots__/EnterE2EPasswordModal.spec.tsx.snap

@@ -0,0 +1,149 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders Default without crashing 1`] = `
+<body>
+  <div>
+    <dialog
+      aria-labelledby="_r_1_-title"
+      aria-modal="true"
+      class="rcx-box rcx-box--full rcx-modal"
+      open=""
+    >
+      <form
+        class="rcx-box rcx-box--full rcx-modal__inner rcx-css-qtwduz"
+      >
+        <header
+          class="rcx-box rcx-box--full rcx-modal__header"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__header-inner"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-trljwa rcx-css-1xb12qx"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-warning rcx-icon rcx-css-zozvgz"
+              >
+                
+              </i>
+            </div>
+            <div
+              class="rcx-box rcx-box--full rcx-modal__header-text rcx-css-trljwa rcx-css-lma364"
+            >
+              <h2
+                class="rcx-box rcx-box--full rcx-modal__title"
+                id="_r_1_-title"
+              >
+                Enter_E2E_password
+              </h2>
+            </div>
+            <button
+              aria-label="Close"
+              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-trljwa rcx-css-lma364"
+              tabindex="-1"
+              type="button"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+              >
+                
+              </i>
+            </button>
+          </div>
+        </header>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__content rcx-css-1vw7itl"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__content-wrapper rcx-css-r1bpeb"
+          >
+            <div
+              class="rcx-box rcx-box--full"
+            >
+              E2E_password_request_text
+            </div>
+            <fieldset
+              class="rcx-box rcx-box--full rcx-field-group rcx-css-1kyd72y"
+              role="group"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-field rcx-field-group__item"
+              >
+                <span
+                  class="rcx-box rcx-box--full rcx-field__row"
+                >
+                  <label
+                    class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+                  >
+                    <input
+                      aria-invalid="false"
+                      aria-required="true"
+                      class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-password rcx-input-box"
+                      name="password"
+                      placeholder="Please_enter_E2EE_password"
+                      size="1"
+                      type="password"
+                      value=""
+                    />
+                    <span
+                      class="rcx-box rcx-box--full rcx-input-box__addon"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="rcx-box rcx-box--full rcx-icon--name-eye-off rcx-icon rcx-css-1bepdyv"
+                      >
+                        
+                      </i>
+                    </span>
+                  </label>
+                </span>
+                <span
+                  class="rcx-box rcx-box--full rcx-field__row rcx-css-idbaye"
+                >
+                  <a
+                    class="rcx-box rcx-box--full rcx-field__link"
+                    href="#"
+                  >
+                    Forgot_E2EE_Password
+                  </a>
+                </span>
+              </div>
+            </fieldset>
+          </div>
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
+        >
+          <div
+            class="rcx-button-group rcx-button-group--align-end"
+            role="group"
+          >
+            <button
+              class="rcx-box rcx-box--full rcx-button--secondary rcx-button"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Do_It_Later
+              </span>
+            </button>
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button"
+              type="submit"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Enable_encryption
+              </span>
+            </button>
+          </div>
+        </div>
+      </form>
+    </dialog>
+  </div>
+</body>
+`;

apps/meteor/client/views/e2e/EnterE2EPasswordModal/index.ts

@@ -0,0 +1 @@
+export { default } from './EnterE2EPasswordModal';

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

@@ -0,0 +1,57 @@
+import { Box, CodeSnippet } from '@rocket.chat/fuselage';
+import { useClipboard } from '@rocket.chat/fuselage-hooks';
+import { ExternalLink, GenericModal } from '@rocket.chat/ui-client';
+import { useId } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { links } from '../../lib/links';
+
+export type SaveE2EPasswordModalProps = {
+	randomPassword: string;
+	onClose: () => void;
+	onCancel: () => void;
+	onConfirm: () => void;
+};
+
+const DOCS_URL = links.go.e2eeGuide;
+
+const SaveE2EPasswordModal = ({ randomPassword, onClose, onCancel, onConfirm }: SaveE2EPasswordModalProps) => {
+	const { t } = useTranslation();
+	const { copy, hasCopied } = useClipboard(randomPassword);
+	const passwordId = useId();
+
+	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_new_E2EE_password')}
+			annotation={t('You_can_do_from_account_preferences')}
+		>
+			<p>
+				{t('E2E_password_reveal_text')}
+				<ExternalLink to={DOCS_URL} marginInlineStart={4}>
+					{t('Learn_more_about_E2EE')}
+				</ExternalLink>
+			</p>
+			<Box is='p' fontWeight='bold' marginBlock={20}>
+				{t('E2E_password_save_text')}
+			</Box>
+			<p id={passwordId}>{t('Your_E2EE_password_is')}</p>
+			<CodeSnippet
+				aria-labelledby={passwordId}
+				buttonText={hasCopied ? t('Copied') : t('Copy')}
+				buttonDisabled={hasCopied}
+				onClick={() => copy()}
+				marginBlockStart={8}
+			>
+				{randomPassword}
+			</CodeSnippet>
+		</GenericModal>
+	);
+};
+
+export default SaveE2EPasswordModal;