fix: Confirm password flow fixed and refactored (#28453)

RocketChat · Apr 6, 2023 · 8332fa6 · 8332fa6
1 parent 4f511d0
commit 8332fa6
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/apps/meteor/client/views/account/profile/AccountProfileForm.tsx b/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
@@ -98,10 +98,21 @@ const AccountProfileForm = ({ values, handlers, user, settings, onSaveStateChang
 		}
 	}, [dispatchToastMessage, email, previousEmail, sendConfirmationEmail, t]);
 
-	const passwordError = useMemo(
-		() => (!password || !confirmationPassword || password === confirmationPassword ? undefined : t('Passwords_do_not_match')),
-		[t, password, confirmationPassword],
+	// this is will decide whether form can be saved
+	const passwordError = useMemo(() => {
+		// if changing password in not initiated, no password error
+		const passwordUpdateNotStarted = !password && !confirmationPassword;
+		const passwordMatches = password && confirmationPassword && password === confirmationPassword;
+
+		return passwordUpdateNotStarted || passwordMatches ? undefined : t('Passwords_do_not_match');
+	}, [t, password, confirmationPassword]);
+
+	// this will decide when to password mismatch on UI
+	const showPasswordError = useMemo(
+		() => (!password || !confirmationPassword ? false : !!passwordError),
+		[passwordError, password, confirmationPassword],
 	);
+
 	const emailError = useMemo(() => (validateEmail(email) ? undefined : 'error-invalid-email-address'), [email]);
 	const checkUsername = useDebouncedCallback(
 		async (username: string) => {
@@ -166,7 +177,7 @@ const AccountProfileForm = ({ values, handlers, user, settings, onSaveStateChang
 
 	const verified = user?.emails?.[0]?.verified ?? false;
 
-	const canSave = !![!!passwordError, !!emailError, !!usernameError, !!nameError, !!statusTextError, !!bioError].filter(Boolean);
+	const canSave = !(!!passwordError || !!emailError || !!usernameError || !!nameError || !!statusTextError || !!bioError);
 
 	useEffect(() => {
 		onSaveStateChange(canSave);
@@ -333,7 +344,7 @@ const AccountProfileForm = ({ values, handlers, user, settings, onSaveStateChang
 											<PasswordInput
 												autoComplete='off'
 												disabled={!allowPasswordChange}
-												error={passwordError}
+												error={showPasswordError ? passwordError : undefined}
 												flexGrow={1}
 												value={password}
 												onChange={handlePassword}
@@ -343,7 +354,7 @@ const AccountProfileForm = ({ values, handlers, user, settings, onSaveStateChang
 										{!allowPasswordChange && <Field.Hint>{t('Password_Change_Disabled')}</Field.Hint>}
 									</Field>
 								),
-								[t, password, handlePassword, passwordError, allowPasswordChange],
+								[t, password, handlePassword, passwordError, allowPasswordChange, showPasswordError],
 							)}
 							{useMemo(
 								() => (
@@ -353,18 +364,18 @@ const AccountProfileForm = ({ values, handlers, user, settings, onSaveStateChang
 											<Field.Row>
 												<PasswordInput
 													autoComplete='off'
-													error={passwordError}
+													error={showPasswordError ? passwordError : undefined}
 													flexGrow={1}
 													value={confirmationPassword}
 													onChange={handleConfirmationPassword}
 													addon={<Icon name='key' size='x20' />}
 												/>
 											</Field.Row>
-											{passwordError && <Field.Error>{passwordError}</Field.Error>}
+											{passwordError && <Field.Error>{showPasswordError ? passwordError : undefined}</Field.Error>}
 										</AnimatedVisibility>
 									</Field>
 								),
-								[t, confirmationPassword, handleConfirmationPassword, password, passwordError],
+								[t, confirmationPassword, handleConfirmationPassword, password, passwordError, showPasswordError],
 							)}
 						</FieldGroup>
 					</Grid.Item>

diff --git a/apps/meteor/client/views/account/profile/AccountProfilePage.tsx b/apps/meteor/client/views/account/profile/AccountProfilePage.tsx
@@ -125,6 +125,9 @@ const AccountProfilePage = (): ReactElement => {
 	const onSave = useCallback(async () => {
 		const save = async (typedPassword?: string): Promise<void> => {
 			try {
+				if (!(values.password === values.confirmationPassword)) {
+					throw new Error(t('Invalid_confirm_pass'));
+				}
 				await saveFn(
 					{
 						...(allowRealNameChange ? { realname } : {}),