From a746188d0049eed27d6767c3d6f1f126a7888849 Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Tue, 28 Oct 2025 13:51:05 -0300
Subject: [PATCH 01/19] feat(e2ee): passphrase requirements

---
 .../views/account/security/EndToEnd.tsx       | 10 ++--
 .../account/security/PassphraseVerifier.tsx   | 53 +++++++++++++++++++
 .../security/PassphraseVerifierItem.tsx       | 43 +++++++++++++++
 .../account/security/useVerifyPassphrase.ts   | 24 +++++++++
 .../e2ee-passphrase-management.spec.ts        |  7 ++-
 5 files changed, 133 insertions(+), 4 deletions(-)
 create mode 100644 apps/meteor/client/views/account/security/PassphraseVerifier.tsx
 create mode 100644 apps/meteor/client/views/account/security/PassphraseVerifierItem.tsx
 create mode 100644 apps/meteor/client/views/account/security/useVerifyPassphrase.ts

diff --git a/apps/meteor/client/views/account/security/EndToEnd.tsx b/apps/meteor/client/views/account/security/EndToEnd.tsx
index 6285ac8476fac..24f653af72896 100644
--- a/apps/meteor/client/views/account/security/EndToEnd.tsx
+++ b/apps/meteor/client/views/account/security/EndToEnd.tsx
@@ -7,6 +7,8 @@ import { useId, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 
+import { PassphraseVerifier } from './PassphraseVerifier';
+import { useValidatePassphrase } from './useVerifyPassphrase';
 import { e2e } from '../../../lib/e2ee/rocketchat.e2e';
 import { useResetE2EPasswordMutation } from '../../hooks/useResetE2EPasswordMutation';
 
@@ -40,7 +42,7 @@ const EndToEnd = (props: ComponentProps<typeof Box>): ReactElement => {
 	 */
 	const keysExist = Boolean(publicKey && privateKey);
 
-	const hasTypedPassword = Boolean(password?.trim().length);
+	const passwordIsValid = useValidatePassphrase(password);
 
 	const saveNewPassword = async (data: { password: string; passwordConfirm: string }) => {
 		try {
@@ -61,6 +63,7 @@ const EndToEnd = (props: ComponentProps<typeof Box>): ReactElement => {
 	const passwordId = useId();
 	const e2ePasswordExplanationId = useId();
 	const passwordConfirmId = useId();
+	const passphraseVerifierId = useId();
 
 	return (
 		<Box display='flex' flexDirection='column' alignItems='flex-start' {...props}>
@@ -94,6 +97,7 @@ const EndToEnd = (props: ComponentProps<typeof Box>): ReactElement => {
 								)}
 							/>
 						</FieldRow>
+						{keysExist && <PassphraseVerifier passphrase={password} id={passphraseVerifierId} />}
 						{!keysExist && (
 							<FieldHint id={`${passwordId}-hint`}>
 								<Trans i18nKey='Enter_current_E2EE_password_to_set_new'>
@@ -117,7 +121,7 @@ const EndToEnd = (props: ComponentProps<typeof Box>): ReactElement => {
 							</FieldError>
 						)}
 					</Field>
-					{hasTypedPassword && (
+					{passwordIsValid && (
 						<Field>
 							<FieldLabel htmlFor={passwordConfirmId}>{t('Confirm_new_E2EE_password')}</FieldLabel>
 							<FieldRow>
@@ -149,7 +153,7 @@ const EndToEnd = (props: ComponentProps<typeof Box>): ReactElement => {
 				</FieldGroup>
 				<Button
 					primary
-					disabled={!(keysExist && isValid)}
+					disabled={!(keysExist && isValid && passwordIsValid)}
 					onClick={handleSubmit(saveNewPassword)}
 					mbs={12}
 					data-qa-type='e2e-encryption-save-password-button'
diff --git a/apps/meteor/client/views/account/security/PassphraseVerifier.tsx b/apps/meteor/client/views/account/security/PassphraseVerifier.tsx
new file mode 100644
index 0000000000000..55bb66466c940
--- /dev/null
+++ b/apps/meteor/client/views/account/security/PassphraseVerifier.tsx
@@ -0,0 +1,53 @@
+import { Box } from '@rocket.chat/fuselage';
+import { useId } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { PassphraseVerifierItem } from './PassphraseVerifierItem';
+import { useVerifyPassphrase } from './useVerifyPassphrase';
+
+type PassphraseVerifierProps = {
+	passphrase: string | undefined;
+	id?: string;
+	vertical?: boolean;
+};
+
+type PassphraseVerificationProps = {
+	name: string;
+	isValid: boolean;
+	limit?: number;
+}[];
+
+export const PassphraseVerifier = ({ passphrase, id, vertical }: PassphraseVerifierProps) => {
+	const { t } = useTranslation();
+	const uniqueId = useId();
+
+	const passphraseVerifications: PassphraseVerificationProps = useVerifyPassphrase(passphrase || '');
+
+	if (!passphraseVerifications?.length) {
+		return <span id={id} hidden></span>;
+	}
+
+	return (
+		<>
+			<span id={id} hidden>
+				{t('Password_Policy_Aria_Description')}
+			</span>
+			<Box display='flex' flexDirection='column' mbs={8}>
+				<Box mbe={8} fontScale='c2' id={uniqueId} aria-hidden>
+					{t('Password_must_have')}
+				</Box>
+				<Box display='flex' flexWrap='wrap' role='list' aria-labelledby={uniqueId}>
+					{passphraseVerifications.map(({ isValid, limit, name }) => (
+						<PassphraseVerifierItem
+							key={name}
+							text={t(`${name}-label`, { limit })}
+							isValid={isValid}
+							aria-invalid={!isValid}
+							vertical={!!vertical}
+						/>
+					))}
+				</Box>
+			</Box>
+		</>
+	);
+};
diff --git a/apps/meteor/client/views/account/security/PassphraseVerifierItem.tsx b/apps/meteor/client/views/account/security/PassphraseVerifierItem.tsx
new file mode 100644
index 0000000000000..38d333cda6ec8
--- /dev/null
+++ b/apps/meteor/client/views/account/security/PassphraseVerifierItem.tsx
@@ -0,0 +1,43 @@
+import { Box, Icon } from '@rocket.chat/fuselage';
+import type { AllHTMLAttributes, ComponentProps } from 'react';
+
+const variants: {
+	[key: string]: {
+		icon: ComponentProps<typeof Icon>['name'];
+		color: string;
+	};
+} = {
+	success: {
+		icon: 'success-circle',
+		color: 'status-font-on-success',
+	},
+	error: {
+		icon: 'error-circle',
+		color: 'status-font-on-danger',
+	},
+};
+
+export const PassphraseVerifierItem = ({
+	text,
+	isValid,
+	vertical,
+	...props
+}: { text: string; isValid: boolean; vertical: boolean } & Omit<AllHTMLAttributes<HTMLElement>, 'is'>) => {
+	const { icon, color } = variants[isValid ? 'success' : 'error'];
+	return (
+		<Box
+			display='flex'
+			flexBasis={vertical ? '100%' : '50%'}
+			alignItems='center'
+			mbe={8}
+			fontScale='c1'
+			color={color}
+			role='listitem'
+			aria-label={text}
+			{...props}
+		>
+			<Icon name={icon} color={color} size='x16' mie={4} />
+			<span aria-hidden>{text}</span>
+		</Box>
+	);
+};
diff --git a/apps/meteor/client/views/account/security/useVerifyPassphrase.ts b/apps/meteor/client/views/account/security/useVerifyPassphrase.ts
new file mode 100644
index 0000000000000..30f8040f84c03
--- /dev/null
+++ b/apps/meteor/client/views/account/security/useVerifyPassphrase.ts
@@ -0,0 +1,24 @@
+import { PasswordPolicy } from '@rocket.chat/password-policies';
+import { useMemo } from 'react';
+
+const validator = new PasswordPolicy({
+	enabled: true,
+	minLength: 30,
+	mustContainAtLeastOneLowercase: true,
+	mustContainAtLeastOneUppercase: true,
+	mustContainAtLeastOneNumber: true,
+	mustContainAtLeastOneSpecialCharacter: true,
+	forbidRepeatingCharacters: false,
+});
+
+type PassphraseVerifications = { isValid: boolean; limit?: number; name: string }[];
+
+export const useVerifyPassphrase = (passphrase: string): PassphraseVerifications => {
+	return useMemo(() => validator.sendValidationMessage(passphrase || ''), [passphrase]);
+};
+
+export const useValidatePassphrase = (passphrase: string): boolean => {
+	const passphraseVerifications = useVerifyPassphrase(passphrase);
+
+	return useMemo(() => passphraseVerifications.every(({ isValid }) => isValid), [passphraseVerifications]);
+};
diff --git a/apps/meteor/tests/e2e/e2e-encryption/e2ee-passphrase-management.spec.ts b/apps/meteor/tests/e2e/e2e-encryption/e2ee-passphrase-management.spec.ts
index d018e4315ba35..1f410848ff2a6 100644
--- a/apps/meteor/tests/e2e/e2e-encryption/e2ee-passphrase-management.spec.ts
+++ b/apps/meteor/tests/e2e/e2e-encryption/e2ee-passphrase-management.spec.ts
@@ -121,7 +121,12 @@ test.describe('E2EE Passphrase Management - Initial Setup', () => {
 			const e2EEKeyDecodeFailureBanner = new E2EEKeyDecodeFailureBanner(page);
 			const sidenav = new HomeSidenav(page);
 
-			const newPassword = faker.string.uuid();
+			const newPassword = faker.internet.password({
+				// At least 30 characters
+				length: 30,
+				// At least one lowercase, one uppercase, one number, one special character
+				prefix: faker.string.alphanumeric({ casing: 'mixed' }) + faker.string.symbol(),
+			});
 
 			await setupE2EEPassword(page);
 

From 5152cc3c38280c9457879d523115799816018402 Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Tue, 28 Oct 2025 16:01:07 -0300
Subject: [PATCH 02/19] chore: reuse PasswordVerifier

---
 .../account/security/PassphraseVerifier.tsx   | 12 ++----
 .../security/PassphraseVerifierItem.tsx       | 43 -------------------
 packages/ui-client/src/components/index.ts    |  1 +
 3 files changed, 4 insertions(+), 52 deletions(-)
 delete mode 100644 apps/meteor/client/views/account/security/PassphraseVerifierItem.tsx

diff --git a/apps/meteor/client/views/account/security/PassphraseVerifier.tsx b/apps/meteor/client/views/account/security/PassphraseVerifier.tsx
index 55bb66466c940..82563ac74c87e 100644
--- a/apps/meteor/client/views/account/security/PassphraseVerifier.tsx
+++ b/apps/meteor/client/views/account/security/PassphraseVerifier.tsx
@@ -1,8 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
+import { PasswordVerifierItem } from '@rocket.chat/ui-client';
 import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { PassphraseVerifierItem } from './PassphraseVerifierItem';
 import { useVerifyPassphrase } from './useVerifyPassphrase';
 
 type PassphraseVerifierProps = {
@@ -11,17 +11,11 @@ type PassphraseVerifierProps = {
 	vertical?: boolean;
 };
 
-type PassphraseVerificationProps = {
-	name: string;
-	isValid: boolean;
-	limit?: number;
-}[];
-
 export const PassphraseVerifier = ({ passphrase, id, vertical }: PassphraseVerifierProps) => {
 	const { t } = useTranslation();
 	const uniqueId = useId();
 
-	const passphraseVerifications: PassphraseVerificationProps = useVerifyPassphrase(passphrase || '');
+	const passphraseVerifications = useVerifyPassphrase(passphrase || '');
 
 	if (!passphraseVerifications?.length) {
 		return <span id={id} hidden></span>;
@@ -38,7 +32,7 @@ export const PassphraseVerifier = ({ passphrase, id, vertical }: PassphraseVerif
 				</Box>
 				<Box display='flex' flexWrap='wrap' role='list' aria-labelledby={uniqueId}>
 					{passphraseVerifications.map(({ isValid, limit, name }) => (
-						<PassphraseVerifierItem
+						<PasswordVerifierItem
 							key={name}
 							text={t(`${name}-label`, { limit })}
 							isValid={isValid}
diff --git a/apps/meteor/client/views/account/security/PassphraseVerifierItem.tsx b/apps/meteor/client/views/account/security/PassphraseVerifierItem.tsx
deleted file mode 100644
index 38d333cda6ec8..0000000000000
--- a/apps/meteor/client/views/account/security/PassphraseVerifierItem.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Box, Icon } from '@rocket.chat/fuselage';
-import type { AllHTMLAttributes, ComponentProps } from 'react';
-
-const variants: {
-	[key: string]: {
-		icon: ComponentProps<typeof Icon>['name'];
-		color: string;
-	};
-} = {
-	success: {
-		icon: 'success-circle',
-		color: 'status-font-on-success',
-	},
-	error: {
-		icon: 'error-circle',
-		color: 'status-font-on-danger',
-	},
-};
-
-export const PassphraseVerifierItem = ({
-	text,
-	isValid,
-	vertical,
-	...props
-}: { text: string; isValid: boolean; vertical: boolean } & Omit<AllHTMLAttributes<HTMLElement>, 'is'>) => {
-	const { icon, color } = variants[isValid ? 'success' : 'error'];
-	return (
-		<Box
-			display='flex'
-			flexBasis={vertical ? '100%' : '50%'}
-			alignItems='center'
-			mbe={8}
-			fontScale='c1'
-			color={color}
-			role='listitem'
-			aria-label={text}
-			{...props}
-		>
-			<Icon name={icon} color={color} size='x16' mie={4} />
-			<span aria-hidden>{text}</span>
-		</Box>
-	);
-};
diff --git a/packages/ui-client/src/components/index.ts b/packages/ui-client/src/components/index.ts
index 702dc0550b8b1..132afd1d7f310 100644
--- a/packages/ui-client/src/components/index.ts
+++ b/packages/ui-client/src/components/index.ts
@@ -3,6 +3,7 @@ export * from './EmojiPicker';
 export * from './ExternalLink';
 export * from './DotLeader';
 export * from './CustomFieldsForm';
+export { PasswordVerifierItem } from './PasswordVerifier/PasswordVerifierItem';
 export * from './PasswordVerifier/PasswordVerifier';
 export { default as TextSeparator } from './TextSeparator';
 export * from './TooltipComponent';

From 3379080969d7461d7290b6b7c77a6bc9e401a1f8 Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Tue, 28 Oct 2025 17:51:19 -0300
Subject: [PATCH 03/19] test: fix passphrase conformance

---
 .../e2e-encryption/e2ee-passphrase-management.spec.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/tests/e2e/e2e-encryption/e2ee-passphrase-management.spec.ts b/apps/meteor/tests/e2e/e2e-encryption/e2ee-passphrase-management.spec.ts
index 1f410848ff2a6..21e788a1e633b 100644
--- a/apps/meteor/tests/e2e/e2e-encryption/e2ee-passphrase-management.spec.ts
+++ b/apps/meteor/tests/e2e/e2e-encryption/e2ee-passphrase-management.spec.ts
@@ -124,8 +124,15 @@ test.describe('E2EE Passphrase Management - Initial Setup', () => {
 			const newPassword = faker.internet.password({
 				// At least 30 characters
 				length: 30,
-				// At least one lowercase, one uppercase, one number, one special character
-				prefix: faker.string.alphanumeric({ casing: 'mixed' }) + faker.string.symbol(),
+				prefix:
+					// At least one lowercase,
+					faker.string.alpha({ casing: 'lower' }) +
+					// At least one uppercase,
+					faker.string.alpha({ casing: 'upper' }) +
+					// At least one number,
+					faker.string.numeric() +
+					// At least one symbol
+					faker.string.symbol(),
 			});
 
 			await setupE2EEPassword(page);

From 4f49988ff1de9a5d7bba446a2ca0da19d658801a Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Tue, 28 Oct 2025 19:19:21 -0300
Subject: [PATCH 04/19] fix: keysExist reactivity

---
 .../views/account/security/EndToEnd.tsx       | 34 ++++++++------
 .../account/security/usePasswordPolicy.ts     | 24 ++++++++++
 .../account/security/useVerifyPassphrase.ts   | 24 ----------
 .../password-policies/src/PasswordPolicy.ts   | 25 +++++++----
 packages/password-policies/src/index.ts       |  2 +-
 .../PasswordVerifier/PasswordVerifier.tsx     | 44 ++-----------------
 .../PasswordVerifier/PasswordVerifierList.tsx | 21 +++++----
 packages/ui-client/src/components/index.ts    |  2 +-
 8 files changed, 78 insertions(+), 98 deletions(-)
 create mode 100644 apps/meteor/client/views/account/security/usePasswordPolicy.ts
 delete mode 100644 apps/meteor/client/views/account/security/useVerifyPassphrase.ts
 rename apps/meteor/client/views/account/security/PassphraseVerifier.tsx => packages/ui-client/src/components/PasswordVerifier/PasswordVerifierList.tsx (64%)

diff --git a/apps/meteor/client/views/account/security/EndToEnd.tsx b/apps/meteor/client/views/account/security/EndToEnd.tsx
index 24f653af72896..340921ef40aa7 100644
--- a/apps/meteor/client/views/account/security/EndToEnd.tsx
+++ b/apps/meteor/client/views/account/security/EndToEnd.tsx
@@ -1,25 +1,35 @@
 import { Box, PasswordInput, Field, FieldGroup, FieldLabel, FieldRow, FieldError, FieldHint, Button, Divider } from '@rocket.chat/fuselage';
+import { PasswordVerifierList } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import DOMPurify from 'dompurify';
-import { Accounts } from 'meteor/accounts-base';
 import type { ComponentProps, ReactElement } from 'react';
 import { useId, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { PassphraseVerifier } from './PassphraseVerifier';
-import { useValidatePassphrase } from './useVerifyPassphrase';
+import { usePasswordPolicy } from './usePasswordPolicy';
 import { e2e } from '../../../lib/e2ee/rocketchat.e2e';
 import { useResetE2EPasswordMutation } from '../../hooks/useResetE2EPasswordMutation';
+import { useE2EEState } from '../../room/hooks/useE2EEState';
+
+const PASSWORD_POLICY = Object.freeze({
+	enabled: true,
+	minLength: 30,
+	mustContainAtLeastOneLowercase: true,
+	mustContainAtLeastOneUppercase: true,
+	mustContainAtLeastOneNumber: true,
+	mustContainAtLeastOneSpecialCharacter: true,
+	forbidRepeatingCharacters: false,
+});
 
 const EndToEnd = (props: ComponentProps<typeof Box>): ReactElement => {
 	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
-	const publicKey = Accounts.storageLocation.getItem('public_key');
-	const privateKey = Accounts.storageLocation.getItem('private_key');
+	const e2eeState = useE2EEState();
 
 	const resetE2EPassword = useResetE2EPasswordMutation();
+	const verify = usePasswordPolicy(PASSWORD_POLICY);
 
 	const {
 		handleSubmit,
@@ -36,13 +46,9 @@ const EndToEnd = (props: ComponentProps<typeof Box>): ReactElement => {
 
 	const { password } = watch();
 
-	/**
-	 * TODO: We need to figure out a way to make this reactive,
-	 * so the form will allow change password as soon the user enter the current E2EE password
-	 */
-	const keysExist = Boolean(publicKey && privateKey);
+	const keysExist = e2eeState === 'READY' || e2eeState === 'SAVE_PASSWORD';
 
-	const passwordIsValid = useValidatePassphrase(password);
+	const { valid, validations } = verify(password);
 
 	const saveNewPassword = async (data: { password: string; passwordConfirm: string }) => {
 		try {
@@ -97,7 +103,7 @@ const EndToEnd = (props: ComponentProps<typeof Box>): ReactElement => {
 								)}
 							/>
 						</FieldRow>
-						{keysExist && <PassphraseVerifier passphrase={password} id={passphraseVerifierId} />}
+						{keysExist && <PasswordVerifierList id={passphraseVerifierId} validations={validations} />}
 						{!keysExist && (
 							<FieldHint id={`${passwordId}-hint`}>
 								<Trans i18nKey='Enter_current_E2EE_password_to_set_new'>
@@ -121,7 +127,7 @@ const EndToEnd = (props: ComponentProps<typeof Box>): ReactElement => {
 							</FieldError>
 						)}
 					</Field>
-					{passwordIsValid && (
+					{valid && (
 						<Field>
 							<FieldLabel htmlFor={passwordConfirmId}>{t('Confirm_new_E2EE_password')}</FieldLabel>
 							<FieldRow>
@@ -153,7 +159,7 @@ const EndToEnd = (props: ComponentProps<typeof Box>): ReactElement => {
 				</FieldGroup>
 				<Button
 					primary
-					disabled={!(keysExist && isValid && passwordIsValid)}
+					disabled={!(keysExist && isValid && valid)}
 					onClick={handleSubmit(saveNewPassword)}
 					mbs={12}
 					data-qa-type='e2e-encryption-save-password-button'
diff --git a/apps/meteor/client/views/account/security/usePasswordPolicy.ts b/apps/meteor/client/views/account/security/usePasswordPolicy.ts
new file mode 100644
index 0000000000000..f8f007849f213
--- /dev/null
+++ b/apps/meteor/client/views/account/security/usePasswordPolicy.ts
@@ -0,0 +1,24 @@
+import { PasswordPolicy, type PasswordPolicyOptions, type PasswordPolicyValidation } from '@rocket.chat/password-policies';
+import { useMemo, useCallback } from 'react';
+
+type UsePasswordPolicyReturn = (password: string) => {
+	validations: PasswordPolicyValidation[];
+	valid: boolean;
+};
+
+type UsePasswordPolicy = (options: PasswordPolicyOptions) => UsePasswordPolicyReturn;
+
+export const usePasswordPolicy: UsePasswordPolicy = (options) => {
+	const policy = useMemo(() => new PasswordPolicy(options), [options]);
+
+	return useCallback(
+		(password: string) => {
+			const validations = policy.sendValidationMessage(password);
+			return {
+				validations,
+				valid: validations.every(({ isValid }) => isValid),
+			};
+		},
+		[policy],
+	);
+};
diff --git a/apps/meteor/client/views/account/security/useVerifyPassphrase.ts b/apps/meteor/client/views/account/security/useVerifyPassphrase.ts
deleted file mode 100644
index 30f8040f84c03..0000000000000
--- a/apps/meteor/client/views/account/security/useVerifyPassphrase.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { PasswordPolicy } from '@rocket.chat/password-policies';
-import { useMemo } from 'react';
-
-const validator = new PasswordPolicy({
-	enabled: true,
-	minLength: 30,
-	mustContainAtLeastOneLowercase: true,
-	mustContainAtLeastOneUppercase: true,
-	mustContainAtLeastOneNumber: true,
-	mustContainAtLeastOneSpecialCharacter: true,
-	forbidRepeatingCharacters: false,
-});
-
-type PassphraseVerifications = { isValid: boolean; limit?: number; name: string }[];
-
-export const useVerifyPassphrase = (passphrase: string): PassphraseVerifications => {
-	return useMemo(() => validator.sendValidationMessage(passphrase || ''), [passphrase]);
-};
-
-export const useValidatePassphrase = (passphrase: string): boolean => {
-	const passphraseVerifications = useVerifyPassphrase(passphrase);
-
-	return useMemo(() => passphraseVerifications.every(({ isValid }) => isValid), [passphraseVerifications]);
-};
diff --git a/packages/password-policies/src/PasswordPolicy.ts b/packages/password-policies/src/PasswordPolicy.ts
index 8212df18002c2..55ea8e306531f 100644
--- a/packages/password-policies/src/PasswordPolicy.ts
+++ b/packages/password-policies/src/PasswordPolicy.ts
@@ -1,11 +1,24 @@
 import { PasswordPolicyError } from './PasswordPolicyError';
 
+export type PasswordPolicyOptions = {
+	enabled?: boolean | undefined;
+	minLength?: number | undefined;
+	maxLength?: number | undefined;
+	forbidRepeatingCharacters?: boolean | undefined;
+	forbidRepeatingCharactersCount?: number | undefined;
+	mustContainAtLeastOneLowercase?: boolean | undefined;
+	mustContainAtLeastOneUppercase?: boolean | undefined;
+	mustContainAtLeastOneNumber?: boolean | undefined;
+	mustContainAtLeastOneSpecialCharacter?: boolean | undefined;
+	throwError?: boolean | undefined;
+};
+
 type PasswordPolicyType = {
 	enabled: boolean;
 	policy: [name: string, options?: Record<string, unknown>][];
 };
 
-type ValidationMessageType = {
+export type PasswordPolicyValidation = {
 	name: string;
 	isValid: boolean;
 	limit?: number;
@@ -51,7 +64,7 @@ export class PasswordPolicy {
 		mustContainAtLeastOneNumber = false,
 		mustContainAtLeastOneSpecialCharacter = false,
 		throwError = true,
-	}) {
+	}: PasswordPolicyOptions) {
 		this.enabled = enabled;
 		this.minLength = minLength;
 		this.maxLength = maxLength;
@@ -87,12 +100,8 @@ export class PasswordPolicy {
 		return false;
 	}
 
-	sendValidationMessage(password: string): {
-		name: string;
-		isValid: boolean;
-		limit?: number;
-	}[] {
-		const validationReturn: ValidationMessageType[] = [];
+	sendValidationMessage(password: string): PasswordPolicyValidation[] {
+		const validationReturn: PasswordPolicyValidation[] = [];
 
 		if (!this.enabled) {
 			return [];
diff --git a/packages/password-policies/src/index.ts b/packages/password-policies/src/index.ts
index fe91af266a939..8b629aad61333 100644
--- a/packages/password-policies/src/index.ts
+++ b/packages/password-policies/src/index.ts
@@ -1 +1 @@
-export { PasswordPolicy } from './PasswordPolicy';
+export { PasswordPolicy, type PasswordPolicyOptions, type PasswordPolicyValidation } from './PasswordPolicy';
diff --git a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifier.tsx b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifier.tsx
index 829d6a8b61b78..ecf96df9a9fca 100644
--- a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifier.tsx
+++ b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifier.tsx
@@ -1,9 +1,6 @@
-import { Box } from '@rocket.chat/fuselage';
 import { useVerifyPassword } from '@rocket.chat/ui-contexts';
-import { useId } from 'react';
-import { useTranslation } from 'react-i18next';
 
-import { PasswordVerifierItem } from './PasswordVerifierItem';
+import { PasswordVerifierList } from './PasswordVerifierList';
 
 type PasswordVerifierProps = {
 	password: string | undefined;
@@ -11,43 +8,8 @@ type PasswordVerifierProps = {
 	vertical?: boolean;
 };
 
-type PasswordVerificationProps = {
-	name: string;
-	isValid: boolean;
-	limit?: number;
-}[];
-
 export const PasswordVerifier = ({ password, id, vertical }: PasswordVerifierProps) => {
-	const { t } = useTranslation();
-	const uniqueId = useId();
-
-	const passwordVerifications: PasswordVerificationProps = useVerifyPassword(password || '');
-
-	if (!passwordVerifications?.length) {
-		return <span id={id} hidden></span>;
-	}
+	const validations = useVerifyPassword(password || '');
 
-	return (
-		<>
-			<span id={id} hidden>
-				{t('Password_Policy_Aria_Description')}
-			</span>
-			<Box display='flex' flexDirection='column' mbs={8}>
-				<Box mbe={8} fontScale='c2' id={uniqueId} aria-hidden>
-					{t('Password_must_have')}
-				</Box>
-				<Box display='flex' flexWrap='wrap' role='list' aria-labelledby={uniqueId}>
-					{passwordVerifications.map(({ isValid, limit, name }) => (
-						<PasswordVerifierItem
-							key={name}
-							text={t(`${name}-label`, { limit })}
-							isValid={isValid}
-							aria-invalid={!isValid}
-							vertical={!!vertical}
-						/>
-					))}
-				</Box>
-			</Box>
-		</>
-	);
+	return <PasswordVerifierList id={id} validations={validations} vertical={vertical} />;
 };
diff --git a/apps/meteor/client/views/account/security/PassphraseVerifier.tsx b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierList.tsx
similarity index 64%
rename from apps/meteor/client/views/account/security/PassphraseVerifier.tsx
rename to packages/ui-client/src/components/PasswordVerifier/PasswordVerifierList.tsx
index 82563ac74c87e..a1bb75db4c957 100644
--- a/apps/meteor/client/views/account/security/PassphraseVerifier.tsx
+++ b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierList.tsx
@@ -1,23 +1,26 @@
 import { Box } from '@rocket.chat/fuselage';
-import { PasswordVerifierItem } from '@rocket.chat/ui-client';
 import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useVerifyPassphrase } from './useVerifyPassphrase';
+import { PasswordVerifierItem } from './PasswordVerifierItem';
 
-type PassphraseVerifierProps = {
-	passphrase: string | undefined;
+type PasswordVerificationProps = {
+	name: string;
+	isValid: boolean;
+	limit?: number;
+}[];
+
+type PasswordVerifierListProps = {
 	id?: string;
+	validations: PasswordVerificationProps;
 	vertical?: boolean;
 };
 
-export const PassphraseVerifier = ({ passphrase, id, vertical }: PassphraseVerifierProps) => {
+export const PasswordVerifierList = ({ id, validations, vertical }: PasswordVerifierListProps) => {
 	const { t } = useTranslation();
 	const uniqueId = useId();
 
-	const passphraseVerifications = useVerifyPassphrase(passphrase || '');
-
-	if (!passphraseVerifications?.length) {
+	if (!validations?.length) {
 		return <span id={id} hidden></span>;
 	}
 
@@ -31,7 +34,7 @@ export const PassphraseVerifier = ({ passphrase, id, vertical }: PassphraseVerif
 					{t('Password_must_have')}
 				</Box>
 				<Box display='flex' flexWrap='wrap' role='list' aria-labelledby={uniqueId}>
-					{passphraseVerifications.map(({ isValid, limit, name }) => (
+					{validations.map(({ isValid, limit, name }) => (
 						<PasswordVerifierItem
 							key={name}
 							text={t(`${name}-label`, { limit })}
diff --git a/packages/ui-client/src/components/index.ts b/packages/ui-client/src/components/index.ts
index 132afd1d7f310..bc236af89a7c1 100644
--- a/packages/ui-client/src/components/index.ts
+++ b/packages/ui-client/src/components/index.ts
@@ -3,7 +3,7 @@ export * from './EmojiPicker';
 export * from './ExternalLink';
 export * from './DotLeader';
 export * from './CustomFieldsForm';
-export { PasswordVerifierItem } from './PasswordVerifier/PasswordVerifierItem';
+export { PasswordVerifierList } from './PasswordVerifier/PasswordVerifierList';
 export * from './PasswordVerifier/PasswordVerifier';
 export { default as TextSeparator } from './TextSeparator';
 export * from './TooltipComponent';

From eee5b95e8dea98b0c0fb077a83e09b5e19152835 Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Thu, 30 Oct 2025 16:02:58 -0300
Subject: [PATCH 05/19] refactor(e2ee): split change and reset components

---
 .../account/security/ChangePassphrase.tsx     | 166 ++++++++++++++++
 .../views/account/security/EndToEnd.tsx       | 183 +-----------------
 .../account/security/ResetPassphrase.tsx      |  22 +++
 3 files changed, 195 insertions(+), 176 deletions(-)
 create mode 100644 apps/meteor/client/views/account/security/ChangePassphrase.tsx
 create mode 100644 apps/meteor/client/views/account/security/ResetPassphrase.tsx

diff --git a/apps/meteor/client/views/account/security/ChangePassphrase.tsx b/apps/meteor/client/views/account/security/ChangePassphrase.tsx
new file mode 100644
index 0000000000000..7a8ff96ea46b6
--- /dev/null
+++ b/apps/meteor/client/views/account/security/ChangePassphrase.tsx
@@ -0,0 +1,166 @@
+import { Box, PasswordInput, Field, FieldGroup, FieldLabel, FieldRow, FieldError, FieldHint, Button } from '@rocket.chat/fuselage';
+import { PasswordVerifierList } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import DOMPurify from 'dompurify';
+import { useId, useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { usePasswordPolicy } from './usePasswordPolicy';
+import { e2e } from '../../../lib/e2ee/rocketchat.e2e';
+import { useE2EEState } from '../../room/hooks/useE2EEState';
+
+const PASSWORD_POLICY = Object.freeze({
+	enabled: true,
+	minLength: 30,
+	mustContainAtLeastOneLowercase: true,
+	mustContainAtLeastOneUppercase: true,
+	mustContainAtLeastOneNumber: true,
+	mustContainAtLeastOneSpecialCharacter: true,
+	forbidRepeatingCharacters: false,
+});
+
+export const ChangePassphrase = (): JSX.Element => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const verify = usePasswordPolicy(PASSWORD_POLICY);
+
+	const {
+		handleSubmit,
+		watch,
+		resetField,
+		formState: { errors, isValid },
+		control,
+	} = useForm({
+		defaultValues: {
+			password: '',
+			passwordConfirm: '',
+		},
+	});
+
+	const { password } = watch();
+
+	useEffect(() => {
+		resetField('passwordConfirm');
+	}, [password, resetField]);
+
+	const e2eeState = useE2EEState();
+	const keysExist = e2eeState === 'READY' || e2eeState === 'SAVE_PASSWORD';
+	const hasTypedPassword = password.trim().length > 0;
+
+	const saveNewPassword = async (data: { password: string; passwordConfirm: string }) => {
+		try {
+			await e2e.changePassword(data.password);
+			resetField('password');
+			dispatchToastMessage({ type: 'success', message: t('Encryption_key_saved_successfully') });
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	};
+
+	const e2ePasswordExplanationId = useId();
+	const passwordId = useId();
+	const passwordConfirmId = useId();
+	const passphraseVerifierId = useId();
+
+	const { valid, validations } = verify(password);
+
+	return (
+		<>
+			<Box
+				is='p'
+				fontScale='p1'
+				id={e2ePasswordExplanationId}
+				dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(t('E2E_Encryption_Password_Explanation')) }}
+			/>
+			<Box mbs={36} w='full'>
+				<Box is='h4' fontScale='h4' mbe={12}>
+					{t('Change_E2EE_password')}
+				</Box>
+				<FieldGroup w='full'>
+					<Field>
+						<FieldLabel htmlFor={passwordId}>{t('New_E2EE_password')}</FieldLabel>
+						<FieldRow>
+							<Controller
+								control={control}
+								name='password'
+								rules={{ required: t('Required_field', { field: t('New_E2EE_password') }) }}
+								render={({ field }) => (
+									<PasswordInput
+										{...field}
+										id={passwordId}
+										error={errors.password?.message}
+										disabled={!keysExist}
+										aria-describedby={`${e2ePasswordExplanationId} ${passwordId}-hint ${passwordId}-error`}
+										aria-invalid={errors.password ? 'true' : 'false'}
+									/>
+								)}
+							/>
+						</FieldRow>
+						{keysExist && <PasswordVerifierList id={passphraseVerifierId} validations={validations} />}
+						{!keysExist && (
+							<FieldHint id={`${passwordId}-hint`}>
+								<Trans i18nKey='Enter_current_E2EE_password_to_set_new'>
+									To set a new password, first
+									<Box
+										is='a'
+										href='#'
+										onClick={async (e) => {
+											e.preventDefault();
+											await e2e.decodePrivateKeyFlow();
+										}}
+									>
+										enter your current E2EE password.
+									</Box>
+								</Trans>
+							</FieldHint>
+						)}
+						{errors?.password && (
+							<FieldError role='alert' id={`${passwordId}-error`}>
+								{errors.password.message}
+							</FieldError>
+						)}
+					</Field>
+					{hasTypedPassword && (
+						<Field>
+							<FieldLabel htmlFor={passwordConfirmId}>{t('Confirm_new_E2EE_password')}</FieldLabel>
+							<FieldRow>
+								<Controller
+									control={control}
+									name='passwordConfirm'
+									rules={{
+										required: t('Required_field', { field: t('Confirm_new_E2EE_password') }),
+										validate: (value: string) => (password !== value ? t('Passwords_do_not_match') : true),
+									}}
+									render={({ field }) => (
+										<PasswordInput
+											{...field}
+											id={passwordConfirmId}
+											error={errors.passwordConfirm?.message}
+											aria-describedby={`${passwordConfirmId}-error`}
+											aria-invalid={errors.passwordConfirm ? 'true' : 'false'}
+										/>
+									)}
+								/>
+							</FieldRow>
+							{errors.passwordConfirm && (
+								<FieldError role='alert' id={`${passwordConfirmId}-error`}>
+									{errors.passwordConfirm.message}
+								</FieldError>
+							)}
+						</Field>
+					)}
+				</FieldGroup>
+				<Button
+					primary
+					disabled={!(keysExist && isValid && valid)}
+					onClick={handleSubmit(saveNewPassword)}
+					mbs={12}
+					data-qa-type='e2e-encryption-save-password-button'
+				>
+					{t('Save_changes')}
+				</Button>
+			</Box>
+		</>
+	);
+};
diff --git a/apps/meteor/client/views/account/security/EndToEnd.tsx b/apps/meteor/client/views/account/security/EndToEnd.tsx
index 340921ef40aa7..d406d6e774304 100644
--- a/apps/meteor/client/views/account/security/EndToEnd.tsx
+++ b/apps/meteor/client/views/account/security/EndToEnd.tsx
@@ -1,184 +1,15 @@
-import { Box, PasswordInput, Field, FieldGroup, FieldLabel, FieldRow, FieldError, FieldHint, Button, Divider } from '@rocket.chat/fuselage';
-import { PasswordVerifierList } from '@rocket.chat/ui-client';
-import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
-import DOMPurify from 'dompurify';
-import type { ComponentProps, ReactElement } from 'react';
-import { useId, useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Trans, useTranslation } from 'react-i18next';
+import { Box, Divider } from '@rocket.chat/fuselage';
+import type { ComponentPropsWithoutRef } from 'react';
 
-import { usePasswordPolicy } from './usePasswordPolicy';
-import { e2e } from '../../../lib/e2ee/rocketchat.e2e';
-import { useResetE2EPasswordMutation } from '../../hooks/useResetE2EPasswordMutation';
-import { useE2EEState } from '../../room/hooks/useE2EEState';
-
-const PASSWORD_POLICY = Object.freeze({
-	enabled: true,
-	minLength: 30,
-	mustContainAtLeastOneLowercase: true,
-	mustContainAtLeastOneUppercase: true,
-	mustContainAtLeastOneNumber: true,
-	mustContainAtLeastOneSpecialCharacter: true,
-	forbidRepeatingCharacters: false,
-});
-
-const EndToEnd = (props: ComponentProps<typeof Box>): ReactElement => {
-	const { t } = useTranslation();
-	const dispatchToastMessage = useToastMessageDispatch();
-
-	const e2eeState = useE2EEState();
-
-	const resetE2EPassword = useResetE2EPasswordMutation();
-	const verify = usePasswordPolicy(PASSWORD_POLICY);
-
-	const {
-		handleSubmit,
-		watch,
-		resetField,
-		formState: { errors, isValid },
-		control,
-	} = useForm({
-		defaultValues: {
-			password: '',
-			passwordConfirm: '',
-		},
-	});
-
-	const { password } = watch();
-
-	const keysExist = e2eeState === 'READY' || e2eeState === 'SAVE_PASSWORD';
-
-	const { valid, validations } = verify(password);
-
-	const saveNewPassword = async (data: { password: string; passwordConfirm: string }) => {
-		try {
-			await e2e.changePassword(data.password);
-			resetField('password');
-			dispatchToastMessage({ type: 'success', message: t('Encryption_key_saved_successfully') });
-		} catch (error) {
-			dispatchToastMessage({ type: 'error', message: error });
-		}
-	};
-
-	useEffect(() => {
-		if (password?.trim() === '') {
-			resetField('passwordConfirm');
-		}
-	}, [password, resetField]);
-
-	const passwordId = useId();
-	const e2ePasswordExplanationId = useId();
-	const passwordConfirmId = useId();
-	const passphraseVerifierId = useId();
+import { ChangePassphrase } from './ChangePassphrase';
+import { ResetPassphrase } from './ResetPassphrase';
 
+const EndToEnd = (props: ComponentPropsWithoutRef<typeof Box>): JSX.Element => {
 	return (
 		<Box display='flex' flexDirection='column' alignItems='flex-start' {...props}>
-			<Box
-				is='p'
-				fontScale='p1'
-				id={e2ePasswordExplanationId}
-				dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(t('E2E_Encryption_Password_Explanation')) }}
-			/>
-			<Box mbs={36} w='full'>
-				<Box is='h4' fontScale='h4' mbe={12}>
-					{t('Change_E2EE_password')}
-				</Box>
-				<FieldGroup w='full'>
-					<Field>
-						<FieldLabel htmlFor={passwordId}>{t('New_E2EE_password')}</FieldLabel>
-						<FieldRow>
-							<Controller
-								control={control}
-								name='password'
-								rules={{ required: t('Required_field', { field: t('New_E2EE_password') }) }}
-								render={({ field }) => (
-									<PasswordInput
-										{...field}
-										id={passwordId}
-										error={errors.password?.message}
-										disabled={!keysExist}
-										aria-describedby={`${e2ePasswordExplanationId} ${passwordId}-hint ${passwordId}-error`}
-										aria-invalid={errors.password ? 'true' : 'false'}
-									/>
-								)}
-							/>
-						</FieldRow>
-						{keysExist && <PasswordVerifierList id={passphraseVerifierId} validations={validations} />}
-						{!keysExist && (
-							<FieldHint id={`${passwordId}-hint`}>
-								<Trans i18nKey='Enter_current_E2EE_password_to_set_new'>
-									To set a new password, first
-									<Box
-										is='a'
-										href='#'
-										onClick={async (e) => {
-											e.preventDefault();
-											await e2e.decodePrivateKeyFlow();
-										}}
-									>
-										enter your current E2EE password.
-									</Box>
-								</Trans>
-							</FieldHint>
-						)}
-						{errors?.password && (
-							<FieldError role='alert' id={`${passwordId}-error`}>
-								{errors.password.message}
-							</FieldError>
-						)}
-					</Field>
-					{valid && (
-						<Field>
-							<FieldLabel htmlFor={passwordConfirmId}>{t('Confirm_new_E2EE_password')}</FieldLabel>
-							<FieldRow>
-								<Controller
-									control={control}
-									name='passwordConfirm'
-									rules={{
-										required: t('Required_field', { field: t('Confirm_new_E2EE_password') }),
-										validate: (value: string) => (password !== value ? t('Passwords_do_not_match') : true),
-									}}
-									render={({ field }) => (
-										<PasswordInput
-											{...field}
-											id={passwordConfirmId}
-											error={errors.passwordConfirm?.message}
-											aria-describedby={`${passwordConfirmId}-error`}
-											aria-invalid={errors.passwordConfirm ? 'true' : 'false'}
-										/>
-									)}
-								/>
-							</FieldRow>
-							{errors.passwordConfirm && (
-								<FieldError role='alert' id={`${passwordConfirmId}-error`}>
-									{errors.passwordConfirm.message}
-								</FieldError>
-							)}
-						</Field>
-					)}
-				</FieldGroup>
-				<Button
-					primary
-					disabled={!(keysExist && isValid && valid)}
-					onClick={handleSubmit(saveNewPassword)}
-					mbs={12}
-					data-qa-type='e2e-encryption-save-password-button'
-				>
-					{t('Save_changes')}
-				</Button>
-			</Box>
+			<ChangePassphrase />
 			<Divider mb={36} width='full' />
-			<Box>
-				<Box is='h4' fontScale='h4' mbe={12}>
-					{t('Reset_E2EE_password')}
-				</Box>
-				<Box is='p' fontScale='p1' mbe={12}>
-					{t('Reset_E2EE_password_description')}
-				</Box>
-				<Button onClick={() => resetE2EPassword.mutate()} data-qa-type='e2e-encryption-reset-key-button'>
-					{t('Reset_E2EE_password')}
-				</Button>
-			</Box>
+			<ResetPassphrase />
 		</Box>
 	);
 };
diff --git a/apps/meteor/client/views/account/security/ResetPassphrase.tsx b/apps/meteor/client/views/account/security/ResetPassphrase.tsx
new file mode 100644
index 0000000000000..990f66ab91cee
--- /dev/null
+++ b/apps/meteor/client/views/account/security/ResetPassphrase.tsx
@@ -0,0 +1,22 @@
+import { Box, Button } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+import { useResetE2EPasswordMutation } from '../../hooks/useResetE2EPasswordMutation';
+
+export const ResetPassphrase = (): JSX.Element => {
+	const { t } = useTranslation();
+	const resetE2EPassword = useResetE2EPasswordMutation();
+	return (
+		<Box>
+			<Box is='h4' fontScale='h4' mbe={12}>
+				{t('Reset_E2EE_password')}
+			</Box>
+			<Box is='p' fontScale='p1' mbe={12}>
+				{t('Reset_E2EE_password_description')}
+			</Box>
+			<Button onClick={() => resetE2EPassword.mutate()} data-qa-type='e2e-encryption-reset-key-button'>
+				{t('Reset_E2EE_password')}
+			</Button>
+		</Box>
+	);
+};

From bb14a395e84ad881e705220302643eea7bb4d112 Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Thu, 30 Oct 2025 17:43:45 -0300
Subject: [PATCH 06/19] refactor(e2ee): change password hook

---
 .../account/security/ChangePassphrase.tsx     | 28 +++++++++----------
 .../hooks/useChangeE2EPasswordMutation.ts     | 24 ++++++++++++++++
 2 files changed, 37 insertions(+), 15 deletions(-)
 create mode 100644 apps/meteor/client/views/hooks/useChangeE2EPasswordMutation.ts

diff --git a/apps/meteor/client/views/account/security/ChangePassphrase.tsx b/apps/meteor/client/views/account/security/ChangePassphrase.tsx
index 7a8ff96ea46b6..be29223ecdc37 100644
--- a/apps/meteor/client/views/account/security/ChangePassphrase.tsx
+++ b/apps/meteor/client/views/account/security/ChangePassphrase.tsx
@@ -1,6 +1,5 @@
 import { Box, PasswordInput, Field, FieldGroup, FieldLabel, FieldRow, FieldError, FieldHint, Button } from '@rocket.chat/fuselage';
 import { PasswordVerifierList } from '@rocket.chat/ui-client';
-import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import DOMPurify from 'dompurify';
 import { useId, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
@@ -8,6 +7,7 @@ import { Trans, useTranslation } from 'react-i18next';
 
 import { usePasswordPolicy } from './usePasswordPolicy';
 import { e2e } from '../../../lib/e2ee/rocketchat.e2e';
+import { useChangeE2EPasswordMutation } from '../../hooks/useChangeE2EPasswordMutation';
 import { useE2EEState } from '../../room/hooks/useE2EEState';
 
 const PASSWORD_POLICY = Object.freeze({
@@ -22,8 +22,8 @@ const PASSWORD_POLICY = Object.freeze({
 
 export const ChangePassphrase = (): JSX.Element => {
 	const { t } = useTranslation();
-	const dispatchToastMessage = useToastMessageDispatch();
 	const verify = usePasswordPolicy(PASSWORD_POLICY);
+	const changeE2EEPasswordMutation = useChangeE2EPasswordMutation();
 
 	const {
 		handleSubmit,
@@ -48,16 +48,6 @@ export const ChangePassphrase = (): JSX.Element => {
 	const keysExist = e2eeState === 'READY' || e2eeState === 'SAVE_PASSWORD';
 	const hasTypedPassword = password.trim().length > 0;
 
-	const saveNewPassword = async (data: { password: string; passwordConfirm: string }) => {
-		try {
-			await e2e.changePassword(data.password);
-			resetField('password');
-			dispatchToastMessage({ type: 'success', message: t('Encryption_key_saved_successfully') });
-		} catch (error) {
-			dispatchToastMessage({ type: 'error', message: error });
-		}
-	};
-
 	const e2ePasswordExplanationId = useId();
 	const passwordId = useId();
 	const passwordConfirmId = useId();
@@ -84,7 +74,13 @@ export const ChangePassphrase = (): JSX.Element => {
 							<Controller
 								control={control}
 								name='password'
-								rules={{ required: t('Required_field', { field: t('New_E2EE_password') }) }}
+								rules={{
+									required: t('Required_field', { field: t('New_E2EE_password') }),
+									validate: (value: string) => {
+										const { valid } = verify(value);
+										return valid || t('Password_does_not_meet_requirements');
+									},
+								}}
 								render={({ field }) => (
 									<PasswordInput
 										{...field}
@@ -121,7 +117,7 @@ export const ChangePassphrase = (): JSX.Element => {
 							</FieldError>
 						)}
 					</Field>
-					{hasTypedPassword && (
+					{hasTypedPassword && valid && (
 						<Field>
 							<FieldLabel htmlFor={passwordConfirmId}>{t('Confirm_new_E2EE_password')}</FieldLabel>
 							<FieldRow>
@@ -154,7 +150,9 @@ export const ChangePassphrase = (): JSX.Element => {
 				<Button
 					primary
 					disabled={!(keysExist && isValid && valid)}
-					onClick={handleSubmit(saveNewPassword)}
+					onClick={handleSubmit(({ password }) => {
+						changeE2EEPasswordMutation.mutate(password, { onSuccess: () => resetField('password') });
+					})}
 					mbs={12}
 					data-qa-type='e2e-encryption-save-password-button'
 				>
diff --git a/apps/meteor/client/views/hooks/useChangeE2EPasswordMutation.ts b/apps/meteor/client/views/hooks/useChangeE2EPasswordMutation.ts
new file mode 100644
index 0000000000000..2ade27dd7a570
--- /dev/null
+++ b/apps/meteor/client/views/hooks/useChangeE2EPasswordMutation.ts
@@ -0,0 +1,24 @@
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import type { MutationOptions } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import { e2e } from '../../lib/e2ee/rocketchat.e2e';
+
+export const useChangeE2EPasswordMutation = ({ options }: { options?: MutationOptions<void, string, string> } = {}) => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	return useMutation({
+		mutationFn: async (newPassword: string) => {
+			await e2e.changePassword(newPassword);
+		},
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Encryption_key_saved_successfully') });
+		},
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+		...options,
+	});
+};

From a595fcae2696eef453669a5b84e560859eb56520 Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Fri, 31 Oct 2025 11:25:13 -0300
Subject: [PATCH 07/19] refactor: remove unneeded param

---
 .../meteor/client/views/hooks/useChangeE2EPasswordMutation.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/meteor/client/views/hooks/useChangeE2EPasswordMutation.ts b/apps/meteor/client/views/hooks/useChangeE2EPasswordMutation.ts
index 2ade27dd7a570..f0d1729a40681 100644
--- a/apps/meteor/client/views/hooks/useChangeE2EPasswordMutation.ts
+++ b/apps/meteor/client/views/hooks/useChangeE2EPasswordMutation.ts
@@ -1,11 +1,10 @@
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
-import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 
 import { e2e } from '../../lib/e2ee/rocketchat.e2e';
 
-export const useChangeE2EPasswordMutation = ({ options }: { options?: MutationOptions<void, string, string> } = {}) => {
+export const useChangeE2EPasswordMutation = () => {
 	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
@@ -19,6 +18,5 @@ export const useChangeE2EPasswordMutation = ({ options }: { options?: MutationOp
 		onError: (error) => {
 			dispatchToastMessage({ type: 'error', message: error });
 		},
-		...options,
 	});
 };

From cb5572ab0462af2cfe715c8dc6a9d0f3cfff4f4f Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Fri, 31 Oct 2025 23:35:16 -0300
Subject: [PATCH 08/19] fix: change passphrase form reactivity

---
 .../account/security/ChangePassphrase.tsx     | 141 ++++++++++--------
 .../hooks/useChangeE2EPasswordMutation.ts     |  22 ---
 .../src/hooks}/usePasswordPolicy.ts           |   4 +-
 .../src/hooks/useVerifyPassword.ts            |  47 ++----
 packages/ui-contexts/src/index.ts             |   1 +
 5 files changed, 101 insertions(+), 114 deletions(-)
 delete mode 100644 apps/meteor/client/views/hooks/useChangeE2EPasswordMutation.ts
 rename {apps/meteor/client/views/account/security => packages/ui-contexts/src/hooks}/usePasswordPolicy.ts (79%)

diff --git a/apps/meteor/client/views/account/security/ChangePassphrase.tsx b/apps/meteor/client/views/account/security/ChangePassphrase.tsx
index be29223ecdc37..344e8da5a58b1 100644
--- a/apps/meteor/client/views/account/security/ChangePassphrase.tsx
+++ b/apps/meteor/client/views/account/security/ChangePassphrase.tsx
@@ -1,16 +1,16 @@
-import { Box, PasswordInput, Field, FieldGroup, FieldLabel, FieldRow, FieldError, FieldHint, Button } from '@rocket.chat/fuselage';
+import { Box, Field, FieldError, FieldGroup, FieldHint, FieldLabel, FieldRow, PasswordInput, Button } from '@rocket.chat/fuselage';
 import { PasswordVerifierList } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch, usePasswordPolicy } from '@rocket.chat/ui-contexts';
+import { useMutation } from '@tanstack/react-query';
 import DOMPurify from 'dompurify';
-import { useId, useEffect } from 'react';
+import { useEffect, useId } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { usePasswordPolicy } from './usePasswordPolicy';
 import { e2e } from '../../../lib/e2ee/rocketchat.e2e';
-import { useChangeE2EPasswordMutation } from '../../hooks/useChangeE2EPasswordMutation';
 import { useE2EEState } from '../../room/hooks/useE2EEState';
 
-const PASSWORD_POLICY = Object.freeze({
+const PASSPHRASE_POLICY = Object.freeze({
 	enabled: true,
 	minLength: 30,
 	mustContainAtLeastOneLowercase: true,
@@ -20,40 +20,70 @@ const PASSWORD_POLICY = Object.freeze({
 	forbidRepeatingCharacters: false,
 });
 
+const useKeysExist = () => {
+	const state = useE2EEState();
+	return state === 'READY' || state === 'ENTER_PASSWORD';
+};
+
+const useValidatePassphrase = (passphrase: string) => {
+	const validate = usePasswordPolicy(PASSPHRASE_POLICY);
+	return validate(passphrase);
+};
+
+const useChangeE2EPasswordMutation = () => {
+	return useMutation({
+		mutationFn: async (newPassword: string) => {
+			await e2e.changePassword(newPassword);
+		},
+	});
+};
+
+const defaultValues = {
+	passphrase: '',
+	confirmationPassphrase: '',
+};
+
 export const ChangePassphrase = (): JSX.Element => {
 	const { t } = useTranslation();
-	const verify = usePasswordPolicy(PASSWORD_POLICY);
-	const changeE2EEPasswordMutation = useChangeE2EPasswordMutation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const passphraseId = useId();
+	const confirmPassphraseId = useId();
+	const passphraseVerifierId = useId();
+	const e2ePasswordExplanationId = useId();
 
 	const {
-		handleSubmit,
 		watch,
-		resetField,
 		formState: { errors, isValid },
+		handleSubmit,
+		reset,
+		resetField,
 		control,
 	} = useForm({
-		defaultValues: {
-			password: '',
-			passwordConfirm: '',
-		},
+		defaultValues,
+		mode: 'all',
 	});
 
-	const { password } = watch();
-
+	const { passphrase } = watch();
+	const { validations, valid } = useValidatePassphrase(passphrase);
 	useEffect(() => {
-		resetField('passwordConfirm');
-	}, [password, resetField]);
+		if (!valid) {
+			resetField('confirmationPassphrase');
+		}
+	}, [valid, resetField]);
+	const keysExist = useKeysExist();
 
-	const e2eeState = useE2EEState();
-	const keysExist = e2eeState === 'READY' || e2eeState === 'SAVE_PASSWORD';
-	const hasTypedPassword = password.trim().length > 0;
+	const updatePassword = useChangeE2EPasswordMutation();
 
-	const e2ePasswordExplanationId = useId();
-	const passwordId = useId();
-	const passwordConfirmId = useId();
-	const passphraseVerifierId = useId();
-
-	const { valid, validations } = verify(password);
+	const handleSave = async ({ passphrase }: { passphrase: string }) => {
+		try {
+			await updatePassword.mutateAsync(passphrase);
+			dispatchToastMessage({ type: 'success', message: t('Encryption_key_saved_successfully') });
+			reset();
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	};
 
 	return (
 		<>
@@ -69,33 +99,29 @@ export const ChangePassphrase = (): JSX.Element => {
 				</Box>
 				<FieldGroup w='full'>
 					<Field>
-						<FieldLabel htmlFor={passwordId}>{t('New_E2EE_password')}</FieldLabel>
+						<FieldLabel htmlFor={passphraseId}>{t('New_E2EE_password')}</FieldLabel>
 						<FieldRow>
 							<Controller
 								control={control}
-								name='password'
+								name='passphrase'
 								rules={{
 									required: t('Required_field', { field: t('New_E2EE_password') }),
-									validate: (value: string) => {
-										const { valid } = verify(value);
-										return valid || t('Password_does_not_meet_requirements');
-									},
+									validate: () => (valid ? true : t('Password_does_not_meet_requirements')),
 								}}
 								render={({ field }) => (
 									<PasswordInput
 										{...field}
-										id={passwordId}
-										error={errors.password?.message}
+										id={passphraseId}
+										error={errors.passphrase?.message}
 										disabled={!keysExist}
-										aria-describedby={`${e2ePasswordExplanationId} ${passwordId}-hint ${passwordId}-error`}
-										aria-invalid={errors.password ? 'true' : 'false'}
+										aria-describedby={`${e2ePasswordExplanationId} ${passphraseId}-hint ${passphraseId}-error`}
+										aria-invalid={errors.passphrase ? 'true' : 'false'}
 									/>
 								)}
 							/>
 						</FieldRow>
-						{keysExist && <PasswordVerifierList id={passphraseVerifierId} validations={validations} />}
 						{!keysExist && (
-							<FieldHint id={`${passwordId}-hint`}>
+							<FieldHint id={`${passphraseId}-hint`}>
 								<Trans i18nKey='Enter_current_E2EE_password_to_set_new'>
 									To set a new password, first
 									<Box
@@ -111,37 +137,36 @@ export const ChangePassphrase = (): JSX.Element => {
 								</Trans>
 							</FieldHint>
 						)}
-						{errors?.password && (
-							<FieldError role='alert' id={`${passwordId}-error`}>
-								{errors.password.message}
-							</FieldError>
-						)}
+						{keysExist && <PasswordVerifierList id={passphraseVerifierId} validations={validations} />}
 					</Field>
-					{hasTypedPassword && valid && (
+					{valid && (
 						<Field>
-							<FieldLabel htmlFor={passwordConfirmId}>{t('Confirm_new_E2EE_password')}</FieldLabel>
+							<FieldLabel htmlFor={confirmPassphraseId}>{t('Confirm_new_E2EE_password')}</FieldLabel>
 							<FieldRow>
 								<Controller
 									control={control}
-									name='passwordConfirm'
+									name='confirmationPassphrase'
 									rules={{
-										required: t('Required_field', { field: t('Confirm_new_E2EE_password') }),
-										validate: (value: string) => (password !== value ? t('Passwords_do_not_match') : true),
+										required: t('Required_field', { field: t('Confirm_password') }),
+										validate: (value) => (passphrase !== value ? t('Passwords_do_not_match') : true),
 									}}
 									render={({ field }) => (
 										<PasswordInput
 											{...field}
-											id={passwordConfirmId}
-											error={errors.passwordConfirm?.message}
-											aria-describedby={`${passwordConfirmId}-error`}
-											aria-invalid={errors.passwordConfirm ? 'true' : 'false'}
+											id={confirmPassphraseId}
+											error={errors.confirmationPassphrase?.message}
+											flexGrow={1}
+											disabled={!keysExist || !valid}
+											aria-required={passphrase !== '' ? 'true' : 'false'}
+											aria-invalid={errors.confirmationPassphrase ? 'true' : 'false'}
+											aria-describedby={errors.confirmationPassphrase ? `${confirmPassphraseId}-error` : undefined}
 										/>
 									)}
 								/>
 							</FieldRow>
-							{errors.passwordConfirm && (
-								<FieldError role='alert' id={`${passwordConfirmId}-error`}>
-									{errors.passwordConfirm.message}
+							{errors.confirmationPassphrase && (
+								<FieldError aria-live='assertive' id={`${confirmPassphraseId}-error`}>
+									{errors.confirmationPassphrase.message}
 								</FieldError>
 							)}
 						</Field>
@@ -149,10 +174,8 @@ export const ChangePassphrase = (): JSX.Element => {
 				</FieldGroup>
 				<Button
 					primary
-					disabled={!(keysExist && isValid && valid)}
-					onClick={handleSubmit(({ password }) => {
-						changeE2EEPasswordMutation.mutate(password, { onSuccess: () => resetField('password') });
-					})}
+					disabled={!(keysExist && valid && isValid)}
+					onClick={handleSubmit(handleSave)}
 					mbs={12}
 					data-qa-type='e2e-encryption-save-password-button'
 				>
diff --git a/apps/meteor/client/views/hooks/useChangeE2EPasswordMutation.ts b/apps/meteor/client/views/hooks/useChangeE2EPasswordMutation.ts
deleted file mode 100644
index f0d1729a40681..0000000000000
--- a/apps/meteor/client/views/hooks/useChangeE2EPasswordMutation.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
-import { useMutation } from '@tanstack/react-query';
-import { useTranslation } from 'react-i18next';
-
-import { e2e } from '../../lib/e2ee/rocketchat.e2e';
-
-export const useChangeE2EPasswordMutation = () => {
-	const { t } = useTranslation();
-	const dispatchToastMessage = useToastMessageDispatch();
-
-	return useMutation({
-		mutationFn: async (newPassword: string) => {
-			await e2e.changePassword(newPassword);
-		},
-		onSuccess: () => {
-			dispatchToastMessage({ type: 'success', message: t('Encryption_key_saved_successfully') });
-		},
-		onError: (error) => {
-			dispatchToastMessage({ type: 'error', message: error });
-		},
-	});
-};
diff --git a/apps/meteor/client/views/account/security/usePasswordPolicy.ts b/packages/ui-contexts/src/hooks/usePasswordPolicy.ts
similarity index 79%
rename from apps/meteor/client/views/account/security/usePasswordPolicy.ts
rename to packages/ui-contexts/src/hooks/usePasswordPolicy.ts
index f8f007849f213..6681f981ef09a 100644
--- a/apps/meteor/client/views/account/security/usePasswordPolicy.ts
+++ b/packages/ui-contexts/src/hooks/usePasswordPolicy.ts
@@ -1,12 +1,12 @@
 import { PasswordPolicy, type PasswordPolicyOptions, type PasswordPolicyValidation } from '@rocket.chat/password-policies';
 import { useMemo, useCallback } from 'react';
 
-type UsePasswordPolicyReturn = (password: string) => {
+export type UsePasswordPolicyReturn = (password: string) => {
 	validations: PasswordPolicyValidation[];
 	valid: boolean;
 };
 
-type UsePasswordPolicy = (options: PasswordPolicyOptions) => UsePasswordPolicyReturn;
+export type UsePasswordPolicy = (options: PasswordPolicyOptions) => UsePasswordPolicyReturn;
 
 export const usePasswordPolicy: UsePasswordPolicy = (options) => {
 	const policy = useMemo(() => new PasswordPolicy(options), [options]);
diff --git a/packages/ui-contexts/src/hooks/useVerifyPassword.ts b/packages/ui-contexts/src/hooks/useVerifyPassword.ts
index e010c1f678869..bfd3ec3f4e10f 100644
--- a/packages/ui-contexts/src/hooks/useVerifyPassword.ts
+++ b/packages/ui-contexts/src/hooks/useVerifyPassword.ts
@@ -1,11 +1,10 @@
-import { PasswordPolicy } from '@rocket.chat/password-policies';
+import type { PasswordPolicyValidation } from '@rocket.chat/password-policies';
 import { useMemo } from 'react';
 
+import { usePasswordPolicy } from './usePasswordPolicy';
 import { useSetting } from './useSetting';
 
-type PasswordVerifications = { isValid: boolean; limit?: number; name: string }[];
-
-export const useVerifyPassword = (password: string): PasswordVerifications => {
+export const useVerifyPassword = (password: string): PasswordPolicyValidation[] => {
 	const enabled = useSetting('Accounts_Password_Policy_Enabled', false);
 	const minLength = useSetting('Accounts_Password_Policy_MinLength', 7);
 	const maxLength = useSetting('Accounts_Password_Policy_MaxLength', -1);
@@ -16,32 +15,18 @@ export const useVerifyPassword = (password: string): PasswordVerifications => {
 	const mustContainAtLeastOneNumber = useSetting('Accounts_Password_Policy_AtLeastOneNumber', true);
 	const mustContainAtLeastOneSpecialCharacter = useSetting('Accounts_Password_Policy_AtLeastOneSpecialCharacter', true);
 
-	const validator = useMemo(
-		() =>
-			new PasswordPolicy({
-				enabled,
-				minLength,
-				maxLength,
-				forbidRepeatingCharacters,
-				forbidRepeatingCharactersCount,
-				mustContainAtLeastOneLowercase,
-				mustContainAtLeastOneUppercase,
-				mustContainAtLeastOneNumber,
-				mustContainAtLeastOneSpecialCharacter,
-				throwError: true,
-			}),
-		[
-			enabled,
-			minLength,
-			maxLength,
-			forbidRepeatingCharacters,
-			forbidRepeatingCharactersCount,
-			mustContainAtLeastOneLowercase,
-			mustContainAtLeastOneUppercase,
-			mustContainAtLeastOneNumber,
-			mustContainAtLeastOneSpecialCharacter,
-		],
-	);
+	const validate = usePasswordPolicy({
+		enabled,
+		minLength,
+		maxLength,
+		forbidRepeatingCharacters,
+		forbidRepeatingCharactersCount,
+		mustContainAtLeastOneLowercase,
+		mustContainAtLeastOneUppercase,
+		mustContainAtLeastOneNumber,
+		mustContainAtLeastOneSpecialCharacter,
+		throwError: false,
+	});
 
-	return useMemo(() => validator.sendValidationMessage(password || ''), [password, validator]);
+	return useMemo(() => validate(password || '').validations, [password, validate]);
 };
diff --git a/packages/ui-contexts/src/index.ts b/packages/ui-contexts/src/index.ts
index b30813e345a41..a8357ddd1231b 100644
--- a/packages/ui-contexts/src/index.ts
+++ b/packages/ui-contexts/src/index.ts
@@ -85,6 +85,7 @@ export { useUserRoom } from './hooks/useUserRoom';
 export { useUserSubscription } from './hooks/useUserSubscription';
 export { useUserSubscriptionByName } from './hooks/useUserSubscriptionByName';
 export { useUserSubscriptions } from './hooks/useUserSubscriptions';
+export { usePasswordPolicy } from './hooks/usePasswordPolicy';
 export { useVerifyPassword } from './hooks/useVerifyPassword';
 export { useSelectedDevices } from './hooks/useSelectedDevices';
 export { useDeviceConstraints } from './hooks/useDeviceConstraints';

From 213ee9d0c987c7a2a8a7a8fd019c7827ec4a0475 Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Mon, 3 Nov 2025 10:33:52 -0300
Subject: [PATCH 09/19] chore: remove unneeded comments

---
 .../e2e/e2e-encryption/e2ee-passphrase-management.spec.ts    | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/apps/meteor/tests/e2e/e2e-encryption/e2ee-passphrase-management.spec.ts b/apps/meteor/tests/e2e/e2e-encryption/e2ee-passphrase-management.spec.ts
index 21e788a1e633b..ae2d2870086e7 100644
--- a/apps/meteor/tests/e2e/e2e-encryption/e2ee-passphrase-management.spec.ts
+++ b/apps/meteor/tests/e2e/e2e-encryption/e2ee-passphrase-management.spec.ts
@@ -122,16 +122,11 @@ test.describe('E2EE Passphrase Management - Initial Setup', () => {
 			const sidenav = new HomeSidenav(page);
 
 			const newPassword = faker.internet.password({
-				// At least 30 characters
 				length: 30,
 				prefix:
-					// At least one lowercase,
 					faker.string.alpha({ casing: 'lower' }) +
-					// At least one uppercase,
 					faker.string.alpha({ casing: 'upper' }) +
-					// At least one number,
 					faker.string.numeric() +
-					// At least one symbol
 					faker.string.symbol(),
 			});
 

From f4822021af04c0ac5c0dc3745f08311adceaf326 Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Mon, 3 Nov 2025 13:47:33 -0300
Subject: [PATCH 10/19] chore: reuse PasswordValidation type

---
 .../password-policies/src/PasswordPolicy.ts   | 44 ++++++++++++-------
 .../PasswordVerifier/PasswordVerifier.tsx     |  3 +-
 .../PasswordVerifier/PasswordVerifierItem.tsx | 40 ++++++++---------
 .../PasswordVerifier/PasswordVerifierList.tsx | 19 ++------
 .../src/hooks/useValidatePassword.ts          | 10 +----
 .../src/hooks/usePasswordPolicy.ts            |  6 ++-
 .../src/hooks/useVerifyPassword.ts            |  7 ++-
 packages/ui-contexts/src/index.ts             |  2 +-
 8 files changed, 62 insertions(+), 69 deletions(-)

diff --git a/packages/password-policies/src/PasswordPolicy.ts b/packages/password-policies/src/PasswordPolicy.ts
index 55ea8e306531f..d59d1c29e13b8 100644
--- a/packages/password-policies/src/PasswordPolicy.ts
+++ b/packages/password-policies/src/PasswordPolicy.ts
@@ -1,28 +1,40 @@
 import { PasswordPolicyError } from './PasswordPolicyError';
 
-export type PasswordPolicyOptions = {
-	enabled?: boolean | undefined;
-	minLength?: number | undefined;
-	maxLength?: number | undefined;
-	forbidRepeatingCharacters?: boolean | undefined;
-	forbidRepeatingCharactersCount?: number | undefined;
-	mustContainAtLeastOneLowercase?: boolean | undefined;
-	mustContainAtLeastOneUppercase?: boolean | undefined;
-	mustContainAtLeastOneNumber?: boolean | undefined;
-	mustContainAtLeastOneSpecialCharacter?: boolean | undefined;
-	throwError?: boolean | undefined;
+type PasswordPolicyMap = {
+	minLength: number;
+	maxLength: number;
+	forbidRepeatingCharacters: boolean;
+	forbidRepeatingCharactersCount: number;
+	mustContainAtLeastOneLowercase: boolean;
+	mustContainAtLeastOneUppercase: boolean;
+	mustContainAtLeastOneNumber: boolean;
+	mustContainAtLeastOneSpecialCharacter: boolean;
 };
 
+type PasswordPolicyKey = keyof PasswordPolicyMap;
+type PasswordPolicyName<K extends PasswordPolicyKey> = `get-password-policy-${K}`;
+
+type PasswordPolicyParametersEntry = {
+	[K in PasswordPolicyKey]: PasswordPolicyMap[K] extends number
+		? [PasswordPolicyName<K>, Record<K, PasswordPolicyMap[K]>]
+		: [PasswordPolicyName<K>];
+}[PasswordPolicyKey];
+
 type PasswordPolicyType = {
 	enabled: boolean;
-	policy: [name: string, options?: Record<string, unknown>][];
+	policy: PasswordPolicyParametersEntry[];
 };
 
+export type PasswordPolicyOptions = Partial<PasswordPolicyMap & {
+	enabled: boolean;
+	throwError: boolean;
+}>;
+
 export type PasswordPolicyValidation = {
-	name: string;
-	isValid: boolean;
-	limit?: number;
-};
+	[K in PasswordPolicyKey]: PasswordPolicyMap[K] extends number
+		? { name: PasswordPolicyName<K>; limit: number }
+		: { name: PasswordPolicyName<K> };
+}[PasswordPolicyKey] & { isValid: boolean };
 
 export class PasswordPolicy {
 	private regex: {
diff --git a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifier.tsx b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifier.tsx
index ecf96df9a9fca..bd80131baf483 100644
--- a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifier.tsx
+++ b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifier.tsx
@@ -9,7 +9,6 @@ type PasswordVerifierProps = {
 };
 
 export const PasswordVerifier = ({ password, id, vertical }: PasswordVerifierProps) => {
-	const validations = useVerifyPassword(password || '');
-
+	const { validations } = useVerifyPassword(password || '');
 	return <PasswordVerifierList id={id} validations={validations} vertical={vertical} />;
 };
diff --git a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx
index c622fc74e6c86..ea682fd53af8c 100644
--- a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx
+++ b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx
@@ -1,43 +1,39 @@
-import { Box, Icon } from '@rocket.chat/fuselage';
-import { AllHTMLAttributes, ComponentProps } from 'react';
+import { Box, Icon, type IconProps } from '@rocket.chat/fuselage';
+import type { PasswordPolicyValidation } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
 
-const variants: {
-	[key: string]: {
-		icon: ComponentProps<typeof Icon>['name'];
-		color: string;
-	};
-} = {
+const variants = {
 	success: {
-		icon: 'success-circle',
+		name: 'success-circle',
 		color: 'status-font-on-success',
 	},
 	error: {
-		icon: 'error-circle',
+		name: 'error-circle',
 		color: 'status-font-on-danger',
 	},
+} satisfies Record<string, IconProps>;
+
+type PasswordVerifierItemProps = PasswordPolicyValidation & {
+	vertical: boolean;
 };
 
-export const PasswordVerifierItem = ({
-	text,
-	isValid,
-	vertical,
-	...props
-}: { text: string; isValid: boolean; vertical: boolean } & Omit<AllHTMLAttributes<HTMLElement>, 'is'>) => {
-	const { icon, color } = variants[isValid ? 'success' : 'error'];
+export const PasswordVerifierItem = (props: PasswordVerifierItemProps) => {
+	const { t } = useTranslation();
+	const { name, color } = variants[props.isValid ? 'success' : 'error'];
+	const label = t(`${props.name}-label`, 'limit' in props ? { limit: props.limit } : undefined);
 	return (
 		<Box
 			display='flex'
-			flexBasis={vertical ? '100%' : '50%'}
+			flexBasis={props.vertical ? '100%' : '50%'}
 			alignItems='center'
 			mbe={8}
 			fontScale='c1'
 			color={color}
 			role='listitem'
-			aria-label={text}
-			{...props}
+			aria-label={label}
 		>
-			<Icon name={icon} color={color} size='x16' mie={4} />
-			<span aria-hidden>{text}</span>
+			<Icon name={name} color={color} size='x16' mie={4} />
+			<span aria-hidden>{label}</span>
 		</Box>
 	);
 };
diff --git a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierList.tsx b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierList.tsx
index a1bb75db4c957..85b7f921fdd14 100644
--- a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierList.tsx
+++ b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierList.tsx
@@ -1,18 +1,13 @@
 import { Box } from '@rocket.chat/fuselage';
+import type { PasswordPolicyValidation } from '@rocket.chat/ui-contexts';
 import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { PasswordVerifierItem } from './PasswordVerifierItem';
 
-type PasswordVerificationProps = {
-	name: string;
-	isValid: boolean;
-	limit?: number;
-}[];
-
 type PasswordVerifierListProps = {
 	id?: string;
-	validations: PasswordVerificationProps;
+	validations: PasswordPolicyValidation[];
 	vertical?: boolean;
 };
 
@@ -34,14 +29,8 @@ export const PasswordVerifierList = ({ id, validations, vertical }: PasswordVeri
 					{t('Password_must_have')}
 				</Box>
 				<Box display='flex' flexWrap='wrap' role='list' aria-labelledby={uniqueId}>
-					{validations.map(({ isValid, limit, name }) => (
-						<PasswordVerifierItem
-							key={name}
-							text={t(`${name}-label`, { limit })}
-							isValid={isValid}
-							aria-invalid={!isValid}
-							vertical={!!vertical}
-						/>
+					{validations.map((validation) => (
+						<PasswordVerifierItem key={validation.name} vertical={!!vertical} {...validation} />
 					))}
 				</Box>
 			</Box>
diff --git a/packages/ui-client/src/hooks/useValidatePassword.ts b/packages/ui-client/src/hooks/useValidatePassword.ts
index 9098d13009e1e..ccc84e405e443 100644
--- a/packages/ui-client/src/hooks/useValidatePassword.ts
+++ b/packages/ui-client/src/hooks/useValidatePassword.ts
@@ -1,14 +1,8 @@
 import { useVerifyPassword } from '@rocket.chat/ui-contexts';
 import { useMemo } from 'react';
 
-type passwordVerificationsType = {
-	name: string;
-	isValid: boolean;
-	limit?: number;
-}[];
-
 export const useValidatePassword = (password: string): boolean => {
-	const passwordVerifications: passwordVerificationsType = useVerifyPassword(password);
+	const passwordVerifications = useVerifyPassword(password);
 
-	return useMemo(() => passwordVerifications.every(({ isValid }) => isValid), [passwordVerifications]);
+	return useMemo(() => passwordVerifications.valid, [passwordVerifications]);
 };
diff --git a/packages/ui-contexts/src/hooks/usePasswordPolicy.ts b/packages/ui-contexts/src/hooks/usePasswordPolicy.ts
index 6681f981ef09a..a6c24ef02a25d 100644
--- a/packages/ui-contexts/src/hooks/usePasswordPolicy.ts
+++ b/packages/ui-contexts/src/hooks/usePasswordPolicy.ts
@@ -1,11 +1,15 @@
 import { PasswordPolicy, type PasswordPolicyOptions, type PasswordPolicyValidation } from '@rocket.chat/password-policies';
 import { useMemo, useCallback } from 'react';
 
-export type UsePasswordPolicyReturn = (password: string) => {
+export type { PasswordPolicyValidation };
+
+export type UsePasswordPolicyResult = {
 	validations: PasswordPolicyValidation[];
 	valid: boolean;
 };
 
+export type UsePasswordPolicyReturn = (password: string) => UsePasswordPolicyResult;
+
 export type UsePasswordPolicy = (options: PasswordPolicyOptions) => UsePasswordPolicyReturn;
 
 export const usePasswordPolicy: UsePasswordPolicy = (options) => {
diff --git a/packages/ui-contexts/src/hooks/useVerifyPassword.ts b/packages/ui-contexts/src/hooks/useVerifyPassword.ts
index bfd3ec3f4e10f..f854f227e7dac 100644
--- a/packages/ui-contexts/src/hooks/useVerifyPassword.ts
+++ b/packages/ui-contexts/src/hooks/useVerifyPassword.ts
@@ -1,10 +1,9 @@
-import type { PasswordPolicyValidation } from '@rocket.chat/password-policies';
 import { useMemo } from 'react';
 
-import { usePasswordPolicy } from './usePasswordPolicy';
+import { usePasswordPolicy, type UsePasswordPolicyReturn } from './usePasswordPolicy';
 import { useSetting } from './useSetting';
 
-export const useVerifyPassword = (password: string): PasswordPolicyValidation[] => {
+export const useVerifyPassword: UsePasswordPolicyReturn = (password) => {
 	const enabled = useSetting('Accounts_Password_Policy_Enabled', false);
 	const minLength = useSetting('Accounts_Password_Policy_MinLength', 7);
 	const maxLength = useSetting('Accounts_Password_Policy_MaxLength', -1);
@@ -28,5 +27,5 @@ export const useVerifyPassword = (password: string): PasswordPolicyValidation[]
 		throwError: false,
 	});
 
-	return useMemo(() => validate(password || '').validations, [password, validate]);
+	return useMemo(() => validate(password || ''), [password, validate]);
 };
diff --git a/packages/ui-contexts/src/index.ts b/packages/ui-contexts/src/index.ts
index a8357ddd1231b..0c8071bdad788 100644
--- a/packages/ui-contexts/src/index.ts
+++ b/packages/ui-contexts/src/index.ts
@@ -85,7 +85,7 @@ export { useUserRoom } from './hooks/useUserRoom';
 export { useUserSubscription } from './hooks/useUserSubscription';
 export { useUserSubscriptionByName } from './hooks/useUserSubscriptionByName';
 export { useUserSubscriptions } from './hooks/useUserSubscriptions';
-export { usePasswordPolicy } from './hooks/usePasswordPolicy';
+export { usePasswordPolicy, type PasswordPolicyValidation } from './hooks/usePasswordPolicy';
 export { useVerifyPassword } from './hooks/useVerifyPassword';
 export { useSelectedDevices } from './hooks/useSelectedDevices';
 export { useDeviceConstraints } from './hooks/useDeviceConstraints';

From 2297bea7e14d6d44963601597f2b706bbdb8ab9d Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Mon, 3 Nov 2025 16:31:17 -0300
Subject: [PATCH 11/19] fix: password verifier accessibility

---
 .../account/security/ChangePassphrase.tsx     | 12 +++++++++--
 .../password-policies/src/PasswordPolicy.ts   | 10 ++++++----
 .../PasswordVerifier/PasswordVerifier.tsx     |  8 +++-----
 .../PasswordVerifier/PasswordVerifierItem.tsx | 20 ++++++++++++-------
 .../PasswordVerifier/PasswordVerifierList.tsx |  8 ++++----
 .../PasswordVerifiers.spec.tsx                | 13 +++++++++---
 6 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/apps/meteor/client/views/account/security/ChangePassphrase.tsx b/apps/meteor/client/views/account/security/ChangePassphrase.tsx
index 344e8da5a58b1..3bb5a26c31aa3 100644
--- a/apps/meteor/client/views/account/security/ChangePassphrase.tsx
+++ b/apps/meteor/client/views/account/security/ChangePassphrase.tsx
@@ -59,18 +59,26 @@ export const ChangePassphrase = (): JSX.Element => {
 		reset,
 		resetField,
 		control,
+		trigger,
 	} = useForm({
 		defaultValues,
 		mode: 'all',
 	});
 
-	const { passphrase } = watch();
+	const { passphrase, confirmationPassphrase } = watch();
 	const { validations, valid } = useValidatePassphrase(passphrase);
 	useEffect(() => {
 		if (!valid) {
 			resetField('confirmationPassphrase');
+			return;
 		}
-	}, [valid, resetField]);
+		if (confirmationPassphrase) {
+			const validateConfirmation = async () => {
+				await trigger('confirmationPassphrase');
+			};
+			void validateConfirmation();
+		}
+	}, [valid, confirmationPassphrase, resetField, trigger]);
 	const keysExist = useKeysExist();
 
 	const updatePassword = useChangeE2EPasswordMutation();
diff --git a/packages/password-policies/src/PasswordPolicy.ts b/packages/password-policies/src/PasswordPolicy.ts
index d59d1c29e13b8..788ee876d5699 100644
--- a/packages/password-policies/src/PasswordPolicy.ts
+++ b/packages/password-policies/src/PasswordPolicy.ts
@@ -25,10 +25,12 @@ type PasswordPolicyType = {
 	policy: PasswordPolicyParametersEntry[];
 };
 
-export type PasswordPolicyOptions = Partial<PasswordPolicyMap & {
-	enabled: boolean;
-	throwError: boolean;
-}>;
+export type PasswordPolicyOptions = Partial<
+	PasswordPolicyMap & {
+		enabled: boolean;
+		throwError: boolean;
+	}
+>;
 
 export type PasswordPolicyValidation = {
 	[K in PasswordPolicyKey]: PasswordPolicyMap[K] extends number
diff --git a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifier.tsx b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifier.tsx
index bd80131baf483..844629f21a439 100644
--- a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifier.tsx
+++ b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifier.tsx
@@ -1,11 +1,9 @@
 import { useVerifyPassword } from '@rocket.chat/ui-contexts';
 
-import { PasswordVerifierList } from './PasswordVerifierList';
+import { PasswordVerifierList, type PasswordVerifierListProps } from './PasswordVerifierList';
 
-type PasswordVerifierProps = {
-	password: string | undefined;
-	id?: string;
-	vertical?: boolean;
+export type PasswordVerifierProps = Pick<PasswordVerifierListProps, 'id' | 'vertical'> & {
+	password: string;
 };
 
 export const PasswordVerifier = ({ password, id, vertical }: PasswordVerifierProps) => {
diff --git a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx
index ea682fd53af8c..b6a874cf32869 100644
--- a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx
+++ b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx
@@ -1,17 +1,20 @@
 import { Box, Icon, type IconProps } from '@rocket.chat/fuselage';
 import type { PasswordPolicyValidation } from '@rocket.chat/ui-contexts';
+import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const variants = {
 	success: {
 		name: 'success-circle',
+		label: 'Success',
 		color: 'status-font-on-success',
 	},
 	error: {
 		name: 'error-circle',
+		label: 'Error',
 		color: 'status-font-on-danger',
 	},
-} satisfies Record<string, IconProps>;
+} as const satisfies Record<string, IconProps>;
 
 type PasswordVerifierItemProps = PasswordPolicyValidation & {
 	vertical: boolean;
@@ -19,8 +22,10 @@ type PasswordVerifierItemProps = PasswordPolicyValidation & {
 
 export const PasswordVerifierItem = (props: PasswordVerifierItemProps) => {
 	const { t } = useTranslation();
-	const { name, color } = variants[props.isValid ? 'success' : 'error'];
-	const label = t(`${props.name}-label`, 'limit' in props ? { limit: props.limit } : undefined);
+	const id = useId();
+	const icon = variants[props.isValid ? 'success' : 'error'];
+	const name = `${props.name}-label` as const;
+	const requirementText = t(name, 'limit' in props ? { limit: props.limit } : undefined);
 	return (
 		<Box
 			display='flex'
@@ -28,12 +33,13 @@ export const PasswordVerifierItem = (props: PasswordVerifierItemProps) => {
 			alignItems='center'
 			mbe={8}
 			fontScale='c1'
-			color={color}
+			color={icon.color}
 			role='listitem'
-			aria-label={label}
+			aria-hidden='false'
+			aria-labelledby={`${id}-icon ${id}-text`}
 		>
-			<Icon name={name} color={color} size='x16' mie={4} />
-			<span aria-hidden>{label}</span>
+			<Icon id={`${id}-icon`} aria-label={t(icon.label)} aria-hidden='false' name={icon.name} color={icon.color} size='x16' mie={4} />
+			<span id={`${id}-text`}>{requirementText}</span>
 		</Box>
 	);
 };
diff --git a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierList.tsx b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierList.tsx
index 85b7f921fdd14..d77430dded56d 100644
--- a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierList.tsx
+++ b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierList.tsx
@@ -5,13 +5,13 @@ import { useTranslation } from 'react-i18next';
 
 import { PasswordVerifierItem } from './PasswordVerifierItem';
 
-type PasswordVerifierListProps = {
+export type PasswordVerifierListProps = {
 	id?: string;
 	validations: PasswordPolicyValidation[];
 	vertical?: boolean;
 };
 
-export const PasswordVerifierList = ({ id, validations, vertical }: PasswordVerifierListProps) => {
+export const PasswordVerifierList = ({ id, validations, vertical = true }: PasswordVerifierListProps) => {
 	const { t } = useTranslation();
 	const uniqueId = useId();
 
@@ -28,9 +28,9 @@ export const PasswordVerifierList = ({ id, validations, vertical }: PasswordVeri
 				<Box mbe={8} fontScale='c2' id={uniqueId} aria-hidden>
 					{t('Password_must_have')}
 				</Box>
-				<Box display='flex' flexWrap='wrap' role='list' aria-labelledby={uniqueId}>
+				<Box display='flex' flexWrap='wrap' role='list' aria-labelledby={uniqueId} aria-live='polite'>
 					{validations.map((validation) => (
-						<PasswordVerifierItem key={validation.name} vertical={!!vertical} {...validation} />
+						<PasswordVerifierItem key={validation.name} vertical={vertical} {...validation} />
 					))}
 				</Box>
 			</Box>
diff --git a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifiers.spec.tsx b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifiers.spec.tsx
index dcc3fb040d9d0..ba91f360efbf5 100644
--- a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifiers.spec.tsx
+++ b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifiers.spec.tsx
@@ -40,7 +40,7 @@ it('should render policy list if its enabled and not empty', async () => {
 	});
 
 	expect(screen.queryByRole('list')).toBeVisible();
-	expect(screen.queryByRole('listitem', { name: 'get-password-policy-minLength-label' })).toBeVisible();
+	expect(screen.queryByRole('listitem', { name: 'Success get-password-policy-minLength-label' })).toBeVisible();
 });
 
 it('should render all the policies when all policies are enabled', async () => {
@@ -77,7 +77,10 @@ it("should render policy as invalid if password doesn't match the requirements",
 		expect(screen.queryByTestId('password-verifier-skeleton')).toBeNull();
 	});
 
-	expect(screen.getByRole('listitem', { name: 'get-password-policy-minLength-label' })).toHaveAttribute('aria-invalid', 'true');
+	const item = screen.getByRole('listitem', { name: 'Error get-password-policy-minLength-label' });
+
+	expect(item.children[0]).toHaveAccessibleName('Error');
+	expect(item.children[1]).toHaveTextContent('get-password-policy-minLength-label');
 });
 
 it('should render policy as valid if password matches the requirements', async () => {
@@ -91,5 +94,9 @@ it('should render policy as valid if password matches the requirements', async (
 	await waitFor(() => {
 		expect(screen.queryByTestId('password-verifier-skeleton')).toBeNull();
 	});
-	expect(screen.getByRole('listitem', { name: 'get-password-policy-minLength-label' })).toHaveAttribute('aria-invalid', 'false');
+
+	const item = screen.getByRole('listitem', { name: 'Success get-password-policy-minLength-label' });
+
+	expect(item.children[0]).toHaveAccessibleName('Success');
+	expect(item.children[1]).toHaveTextContent('get-password-policy-minLength-label');
 });

From 71bce6213b58471c1e610574751a8c2e815abc67 Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Mon, 3 Nov 2025 17:25:35 -0300
Subject: [PATCH 12/19] fix: relax password policy type

---
 packages/password-policies/src/PasswordPolicy.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/password-policies/src/PasswordPolicy.ts b/packages/password-policies/src/PasswordPolicy.ts
index 788ee876d5699..d46c3740ebd34 100644
--- a/packages/password-policies/src/PasswordPolicy.ts
+++ b/packages/password-policies/src/PasswordPolicy.ts
@@ -20,9 +20,9 @@ type PasswordPolicyParametersEntry = {
 		: [PasswordPolicyName<K>];
 }[PasswordPolicyKey];
 
-type PasswordPolicyType = {
+type PasswordPolicyType<Entry = PasswordPolicyParametersEntry> = {
 	enabled: boolean;
-	policy: PasswordPolicyParametersEntry[];
+	policy: Entry[];
 };
 
 export type PasswordPolicyOptions = Partial<
@@ -246,7 +246,7 @@ export class PasswordPolicy {
 		return true;
 	}
 
-	getPasswordPolicy(): PasswordPolicyType {
+	getPasswordPolicy(): PasswordPolicyType<[name: string, params?: Record<string, number | boolean>]> {
 		const data: PasswordPolicyType = {
 			enabled: false,
 			policy: [],

From 06492302bb140969d7f9a8d3e9c64ba417c0a41e Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Mon, 3 Nov 2025 17:28:38 -0300
Subject: [PATCH 13/19] chore: remove unneeded type constraint

---
 .../src/components/PasswordVerifier/PasswordVerifierItem.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx
index b6a874cf32869..8f551cd2d3442 100644
--- a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx
+++ b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx
@@ -1,4 +1,4 @@
-import { Box, Icon, type IconProps } from '@rocket.chat/fuselage';
+import { Box, Icon } from '@rocket.chat/fuselage';
 import type { PasswordPolicyValidation } from '@rocket.chat/ui-contexts';
 import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -14,7 +14,7 @@ const variants = {
 		label: 'Error',
 		color: 'status-font-on-danger',
 	},
-} as const satisfies Record<string, IconProps>;
+} as const;
 
 type PasswordVerifierItemProps = PasswordPolicyValidation & {
 	vertical: boolean;

From 323039c1c4b550987b2d96214c96865577f169cf Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Mon, 3 Nov 2025 17:41:12 -0300
Subject: [PATCH 14/19] fix: inneffective memoization

---
 packages/ui-client/src/hooks/useValidatePassword.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/ui-client/src/hooks/useValidatePassword.ts b/packages/ui-client/src/hooks/useValidatePassword.ts
index ccc84e405e443..f56b9859879fb 100644
--- a/packages/ui-client/src/hooks/useValidatePassword.ts
+++ b/packages/ui-client/src/hooks/useValidatePassword.ts
@@ -1,8 +1,6 @@
 import { useVerifyPassword } from '@rocket.chat/ui-contexts';
-import { useMemo } from 'react';
 
 export const useValidatePassword = (password: string): boolean => {
 	const passwordVerifications = useVerifyPassword(password);
-
-	return useMemo(() => passwordVerifications.valid, [passwordVerifications]);
+	return passwordVerifications.valid;
 };

From afca1591f80a5ed07043cec1ec39d47a6f63d9fa Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Tue, 4 Nov 2025 09:10:38 -0300
Subject: [PATCH 15/19] fix: useKeysExist

---
 apps/meteor/client/views/account/security/ChangePassphrase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/meteor/client/views/account/security/ChangePassphrase.tsx b/apps/meteor/client/views/account/security/ChangePassphrase.tsx
index 3bb5a26c31aa3..54295cf4fc882 100644
--- a/apps/meteor/client/views/account/security/ChangePassphrase.tsx
+++ b/apps/meteor/client/views/account/security/ChangePassphrase.tsx
@@ -22,7 +22,7 @@ const PASSPHRASE_POLICY = Object.freeze({
 
 const useKeysExist = () => {
 	const state = useE2EEState();
-	return state === 'READY' || state === 'ENTER_PASSWORD';
+	return state === 'READY' || state === 'SAVE_PASSWORD';
 };
 
 const useValidatePassphrase = (passphrase: string) => {

From 82a4ab1d2d140eba00849bdc0851ed75fd5af945 Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Tue, 4 Nov 2025 13:05:40 -0300
Subject: [PATCH 16/19] fix: accessibility

---
 .../account/security/ChangePassphrase.tsx     | 46 +++++++++++++------
 .../views/account/security/EndToEnd.tsx       |  5 +-
 .../account/security/ResetPassphrase.tsx      |  4 +-
 3 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/apps/meteor/client/views/account/security/ChangePassphrase.tsx b/apps/meteor/client/views/account/security/ChangePassphrase.tsx
index 54295cf4fc882..14eab55154ec3 100644
--- a/apps/meteor/client/views/account/security/ChangePassphrase.tsx
+++ b/apps/meteor/client/views/account/security/ChangePassphrase.tsx
@@ -47,10 +47,14 @@ export const ChangePassphrase = (): JSX.Element => {
 	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
-	const passphraseId = useId();
-	const confirmPassphraseId = useId();
-	const passphraseVerifierId = useId();
-	const e2ePasswordExplanationId = useId();
+	const uniqueId = useId();
+	const passphraseId = `passphrase-${uniqueId}`;
+	const passphraseHintId = `${passphraseId}-hint`;
+	const passphraseErrorId = `${passphraseId}-error`;
+	const confirmPassphraseId = `confirm-passphrase-${uniqueId}`;
+	const confirmPassphraseErrorId = `${confirmPassphraseId}-error`;
+	const passphraseVerifierId = `verifier-${uniqueId}`;
+	const e2ePasswordExplanationId = `explanation-${uniqueId}`;
 
 	const {
 		watch,
@@ -102,7 +106,7 @@ export const ChangePassphrase = (): JSX.Element => {
 				dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(t('E2E_Encryption_Password_Explanation')) }}
 			/>
 			<Box mbs={36} w='full'>
-				<Box is='h4' fontScale='h4' mbe={12}>
+				<Box is='h3' fontScale='h4' mbe={12}>
 					{t('Change_E2EE_password')}
 				</Box>
 				<FieldGroup w='full'>
@@ -114,7 +118,7 @@ export const ChangePassphrase = (): JSX.Element => {
 								name='passphrase'
 								rules={{
 									required: t('Required_field', { field: t('New_E2EE_password') }),
-									validate: () => (valid ? true : t('Password_does_not_meet_requirements')),
+									validate: () => (valid ? true : t('Password_must_meet_the_complexity_requirements')),
 								}}
 								render={({ field }) => (
 									<PasswordInput
@@ -122,14 +126,27 @@ export const ChangePassphrase = (): JSX.Element => {
 										id={passphraseId}
 										error={errors.passphrase?.message}
 										disabled={!keysExist}
-										aria-describedby={`${e2ePasswordExplanationId} ${passphraseId}-hint ${passphraseId}-error`}
-										aria-invalid={errors.passphrase ? 'true' : 'false'}
+										aria-describedby={[
+											e2ePasswordExplanationId,
+											keysExist ? passphraseVerifierId : passphraseHintId,
+											errors.passphrase && passphraseErrorId,
+										]
+											.filter(Boolean)
+											.join(' ')}
+										aria-invalid={!!errors.passphrase}
 									/>
 								)}
 							/>
 						</FieldRow>
-						{!keysExist && (
-							<FieldHint id={`${passphraseId}-hint`}>
+						{errors.passphrase && (
+							<FieldError role='alert' id={passphraseErrorId} hidden aria-hidden={!errors.passphrase}>
+								{errors.passphrase.message}
+							</FieldError>
+						)}
+						{keysExist ? (
+							<PasswordVerifierList id={passphraseVerifierId} validations={validations} />
+						) : (
+							<FieldHint id={passphraseHintId}>
 								<Trans i18nKey='Enter_current_E2EE_password_to_set_new'>
 									To set a new password, first
 									<Box
@@ -145,7 +162,6 @@ export const ChangePassphrase = (): JSX.Element => {
 								</Trans>
 							</FieldHint>
 						)}
-						{keysExist && <PasswordVerifierList id={passphraseVerifierId} validations={validations} />}
 					</Field>
 					{valid && (
 						<Field>
@@ -165,15 +181,15 @@ export const ChangePassphrase = (): JSX.Element => {
 											error={errors.confirmationPassphrase?.message}
 											flexGrow={1}
 											disabled={!keysExist || !valid}
-											aria-required={passphrase !== '' ? 'true' : 'false'}
-											aria-invalid={errors.confirmationPassphrase ? 'true' : 'false'}
-											aria-describedby={errors.confirmationPassphrase ? `${confirmPassphraseId}-error` : undefined}
+											aria-required={!passphrase}
+											aria-invalid={!!errors.confirmationPassphrase}
+											aria-describedby={errors.confirmationPassphrase ? confirmPassphraseErrorId : undefined}
 										/>
 									)}
 								/>
 							</FieldRow>
 							{errors.confirmationPassphrase && (
-								<FieldError aria-live='assertive' id={`${confirmPassphraseId}-error`}>
+								<FieldError aria-live='assertive' id={confirmPassphraseErrorId} role='alert'>
 									{errors.confirmationPassphrase.message}
 								</FieldError>
 							)}
diff --git a/apps/meteor/client/views/account/security/EndToEnd.tsx b/apps/meteor/client/views/account/security/EndToEnd.tsx
index d406d6e774304..217430b3cf80d 100644
--- a/apps/meteor/client/views/account/security/EndToEnd.tsx
+++ b/apps/meteor/client/views/account/security/EndToEnd.tsx
@@ -1,12 +1,11 @@
 import { Box, Divider } from '@rocket.chat/fuselage';
-import type { ComponentPropsWithoutRef } from 'react';
 
 import { ChangePassphrase } from './ChangePassphrase';
 import { ResetPassphrase } from './ResetPassphrase';
 
-const EndToEnd = (props: ComponentPropsWithoutRef<typeof Box>): JSX.Element => {
+const EndToEnd = (): JSX.Element => {
 	return (
-		<Box display='flex' flexDirection='column' alignItems='flex-start' {...props}>
+		<Box display='flex' flexDirection='column' alignItems='flex-start'>
 			<ChangePassphrase />
 			<Divider mb={36} width='full' />
 			<ResetPassphrase />
diff --git a/apps/meteor/client/views/account/security/ResetPassphrase.tsx b/apps/meteor/client/views/account/security/ResetPassphrase.tsx
index 990f66ab91cee..83077292c8732 100644
--- a/apps/meteor/client/views/account/security/ResetPassphrase.tsx
+++ b/apps/meteor/client/views/account/security/ResetPassphrase.tsx
@@ -7,7 +7,7 @@ export const ResetPassphrase = (): JSX.Element => {
 	const { t } = useTranslation();
 	const resetE2EPassword = useResetE2EPasswordMutation();
 	return (
-		<Box>
+		<>
 			<Box is='h4' fontScale='h4' mbe={12}>
 				{t('Reset_E2EE_password')}
 			</Box>
@@ -17,6 +17,6 @@ export const ResetPassphrase = (): JSX.Element => {
 			<Button onClick={() => resetE2EPassword.mutate()} data-qa-type='e2e-encryption-reset-key-button'>
 				{t('Reset_E2EE_password')}
 			</Button>
-		</Box>
+		</>
 	);
 };

From cb536c880ea4ae11e78cbdd7d632ff020862c4aa Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Tue, 4 Nov 2025 14:56:56 -0300
Subject: [PATCH 17/19] fix: aria-required and aria-invalid

---
 .../client/views/account/security/ChangePassphrase.tsx      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/client/views/account/security/ChangePassphrase.tsx b/apps/meteor/client/views/account/security/ChangePassphrase.tsx
index 14eab55154ec3..c265a58a9b715 100644
--- a/apps/meteor/client/views/account/security/ChangePassphrase.tsx
+++ b/apps/meteor/client/views/account/security/ChangePassphrase.tsx
@@ -133,7 +133,7 @@ export const ChangePassphrase = (): JSX.Element => {
 										]
 											.filter(Boolean)
 											.join(' ')}
-										aria-invalid={!!errors.passphrase}
+										aria-invalid={errors.passphrase ? 'true' : 'false'}
 									/>
 								)}
 							/>
@@ -181,8 +181,8 @@ export const ChangePassphrase = (): JSX.Element => {
 											error={errors.confirmationPassphrase?.message}
 											flexGrow={1}
 											disabled={!keysExist || !valid}
-											aria-required={!passphrase}
-											aria-invalid={!!errors.confirmationPassphrase}
+											aria-required={passphrase ? 'true' : 'false'}
+											aria-invalid={errors.confirmationPassphrase ? 'true' : 'false'}
 											aria-describedby={errors.confirmationPassphrase ? confirmPassphraseErrorId : undefined}
 										/>
 									)}

From 578a6726c3da132f2515871e2ad68826f60cae02 Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Tue, 4 Nov 2025 15:23:40 -0300
Subject: [PATCH 18/19] chore: apply review suggestions

---
 .../account/security/ChangePassphrase.tsx     |  2 +-
 .../PasswordVerifier/PasswordVerifierItem.tsx | 48 ++++++++++---------
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/apps/meteor/client/views/account/security/ChangePassphrase.tsx b/apps/meteor/client/views/account/security/ChangePassphrase.tsx
index c265a58a9b715..752d34ee6f47e 100644
--- a/apps/meteor/client/views/account/security/ChangePassphrase.tsx
+++ b/apps/meteor/client/views/account/security/ChangePassphrase.tsx
@@ -139,7 +139,7 @@ export const ChangePassphrase = (): JSX.Element => {
 							/>
 						</FieldRow>
 						{errors.passphrase && (
-							<FieldError role='alert' id={passphraseErrorId} hidden aria-hidden={!errors.passphrase}>
+							<FieldError aria-live='assertive' id={passphraseErrorId}>
 								{errors.passphrase.message}
 							</FieldError>
 						)}
diff --git a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx
index 8f551cd2d3442..8798fd436a49c 100644
--- a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx
+++ b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx
@@ -1,31 +1,35 @@
-import { Box, Icon } from '@rocket.chat/fuselage';
+import { Box, Icon, type IconProps } from '@rocket.chat/fuselage';
 import type { PasswordPolicyValidation } from '@rocket.chat/ui-contexts';
 import { useId } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const variants = {
-	success: {
-		name: 'success-circle',
-		label: 'Success',
-		color: 'status-font-on-success',
-	},
-	error: {
-		name: 'error-circle',
-		label: 'Error',
-		color: 'status-font-on-danger',
-	},
-} as const;
+import { useTranslation, type UseTranslationResponse } from 'react-i18next';
 
 type PasswordVerifierItemProps = PasswordPolicyValidation & {
 	vertical: boolean;
 };
 
-export const PasswordVerifierItem = (props: PasswordVerifierItemProps) => {
+const getIconProps = (
+	isValid: boolean,
+	t: UseTranslationResponse<'translation', undefined>['t'],
+): Pick<Required<IconProps>, 'name' | 'aria-label' | 'color'> =>
+	isValid
+		? {
+				'name': 'success-circle',
+				'aria-label': t('Success'),
+				'color': 'status-font-on-success',
+			}
+		: {
+				'name': 'error-circle',
+				'aria-label': t('Error'),
+				'color': 'status-font-on-danger',
+			};
+
+export const PasswordVerifierItem = ({ isValid, ...props }: PasswordVerifierItemProps) => {
 	const { t } = useTranslation();
+	const icon = getIconProps(isValid, t);
 	const id = useId();
-	const icon = variants[props.isValid ? 'success' : 'error'];
-	const name = `${props.name}-label` as const;
-	const requirementText = t(name, 'limit' in props ? { limit: props.limit } : undefined);
+	const iconId = `${id}-icon`;
+	const textId = `${id}-text`;
+	const requirementText = t(`${props.name}-label` as const, 'limit' in props ? { limit: props.limit } : undefined);
 	return (
 		<Box
 			display='flex'
@@ -36,10 +40,10 @@ export const PasswordVerifierItem = (props: PasswordVerifierItemProps) => {
 			color={icon.color}
 			role='listitem'
 			aria-hidden='false'
-			aria-labelledby={`${id}-icon ${id}-text`}
+			aria-labelledby={`${iconId} ${textId}`}
 		>
-			<Icon id={`${id}-icon`} aria-label={t(icon.label)} aria-hidden='false' name={icon.name} color={icon.color} size='x16' mie={4} />
-			<span id={`${id}-text`}>{requirementText}</span>
+			<Icon id={iconId} aria-hidden='false' size='x16' mie={4} {...icon} />
+			<span id={textId}>{requirementText}</span>
 		</Box>
 	);
 };

From 612a1a48670ab72b0ced273ac2f3828c4f458ff4 Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Tue, 4 Nov 2025 15:28:17 -0300
Subject: [PATCH 19/19] chore: add changeset

Adds complexity requirements to end-to-end encryption passphrase
---
 .changeset/beige-experts-applaud.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .changeset/beige-experts-applaud.md

diff --git a/.changeset/beige-experts-applaud.md b/.changeset/beige-experts-applaud.md
new file mode 100644
index 0000000000000..12c2ce5ba1862
--- /dev/null
+++ b/.changeset/beige-experts-applaud.md
@@ -0,0 +1,8 @@
+---
+"@rocket.chat/meteor": minor
+"@rocket.chat/password-policies": minor
+"@rocket.chat/ui-client": minor
+"@rocket.chat/ui-contexts": minor
+---
+
+Adds complexity requirements to end-to-end encryption passphrase