fix: Login email verification flow (#31583)

Co-authored-by: Hugo Costa <[email protected]>

.changeset/flat-windows-juggle.md

@@ -0,0 +1,6 @@
+---
+"@rocket.chat/meteor": patch
+"@rocket.chat/web-ui-registration": patch
+---
+
+Fixed login email verification flow when a user tries to join with username

apps/meteor/tests/e2e/page-objects/auth.ts

@@ -15,7 +15,6 @@ export class Registration {
 		return this.page.locator('role=button[name="Reset"]');
 	}
 
-
 	get btnLogin(): Locator {
 		return this.page.locator('role=button[name="Login"]');
 	}

packages/web-ui-registration/src/EmailConfirmationForm.tsx

@@ -9,6 +9,9 @@ import { useLoginSendEmailConfirmation } from './hooks/useLoginSendEmailConfirma
 export const EmailConfirmationForm = ({ email, onBackToLogin }: { email?: string; onBackToLogin: () => void }): ReactElement => {
 	const { t } = useTranslation();
 
+	const basicEmailRegex = /^[^@]+@[^@]+$/;
+	const isEmail = basicEmailRegex.test(email || '');
+
 	const {
 		register,
 		handleSubmit,
@@ -17,7 +20,7 @@ export const EmailConfirmationForm = ({ email, onBackToLogin }: { email?: string
 		email: string;
 	}>({
 		defaultValues: {
-			email,
+			email: isEmail ? email : '',
 		},
 	});
 
@@ -45,7 +48,6 @@ export const EmailConfirmationForm = ({ email, onBackToLogin }: { email?: string
 								{...register('email', {
 									required: true,
 								})}
-								disabled={Boolean(email)}
 								error={errors.email && t('registration.component.form.requiredField')}
 								aria-invalid={errors?.email?.type === 'required'}
 								placeholder={t('registration.component.form.emailPlaceholder')}

packages/web-ui-registration/src/LoginForm.tsx

@@ -66,7 +66,7 @@ export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRoute
 		clearErrors,
 		getValues,
 		formState: { errors },
-	} = useForm<{ username: string; password: string }>({
+	} = useForm<{ usernameOrEmail: string; password: string }>({
 		mode: 'onBlur',
 	});
 
@@ -83,12 +83,12 @@ export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRoute
 	useDocumentTitle(t('registration.component.login'), false);
 
 	const loginMutation = useMutation({
-		mutationFn: (formData: { username: string; password: string }) => {
-			return login(formData.username, formData.password);
+		mutationFn: (formData: { usernameOrEmail: string; password: string }) => {
+			return login(formData.usernameOrEmail, formData.password);
 		},
 		onError: (error: any) => {
 			if ([error.error, error.errorType].includes('error-invalid-email')) {
-				setError('username', { type: 'invalid-email', message: t('registration.page.login.errors.invalidEmail') });
+				setError('usernameOrEmail', { type: 'invalid-email', message: t('registration.page.login.errors.invalidEmail') });
 			}
 
 			if ('error' in error && error.error !== 403) {
@@ -119,8 +119,8 @@ export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRoute
 		);
 	};
 
-	if (errors.username?.type === 'invalid-email') {
-		return <EmailConfirmationForm onBackToLogin={() => clearErrors('username')} email={getValues('username')} />;
+	if (errors.usernameOrEmail?.type === 'invalid-email') {
+		return <EmailConfirmationForm onBackToLogin={() => clearErrors('usernameOrEmail')} email={getValues('usernameOrEmail')} />;
 	}
 
 	return (
@@ -144,19 +144,19 @@ export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRoute
 								</FieldLabel>
 								<FieldRow>
 									<TextInput
-										{...register('username', {
+										{...register('usernameOrEmail', {
 											required: t('registration.component.form.requiredField'),
 										})}
 										placeholder={usernameOrEmailPlaceholder || t('registration.component.form.emailPlaceholder')}
-										error={errors.username?.message}
-										aria-invalid={errors.username || errorOnSubmit ? 'true' : 'false'}
+										error={errors.usernameOrEmail?.message}
+										aria-invalid={errors.usernameOrEmail || errorOnSubmit ? 'true' : 'false'}
 										aria-describedby={`${usernameId}-error`}
 										id={usernameId}
 									/>
 								</FieldRow>
-								{errors.username && (
+								{errors.usernameOrEmail && (
 									<FieldError aria-live='assertive' id={`${usernameId}-error`}>
-										{errors.username.message}
+										{errors.usernameOrEmail.message}
 									</FieldError>
 								)}
 							</Field>