fix: Handle login services errors (#28795)

.changeset/beige-windows-film.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/web-ui-registration': minor
+---
+
+fix: Handle login services errors

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

@@ -13,7 +13,7 @@ import EmailConfirmationForm from './EmailConfirmationForm';
 import type { DispatchLoginRouter } from './hooks/useLoginRouter';
 import LoginServices from './LoginServices';
 
-type LoginErrors =
+export type LoginErrors =
 	| 'error-user-is-not-activated'
 	| 'error-invalid-email'
 	| 'error-login-blocked-for-ip'
@@ -199,7 +199,7 @@ export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRoute
 					</Form.Footer>
 				</>
 			)}
-			<LoginServices disabled={loginMutation.isLoading} />
+			<LoginServices disabled={loginMutation.isLoading} setError={setErrorOnSubmit} />
 		</Form>
 	);
 };

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

@@ -1,11 +1,18 @@
 import { ButtonGroup, Divider } from '@rocket.chat/fuselage';
 import { useLoginServices, useSetting } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import type { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import type { LoginErrors } from './LoginForm';
 import LoginServicesButton from './LoginServicesButton';
 
-const Services = ({ disabled }: { disabled?: boolean }): ReactElement | null => {
+const LoginServices = ({
+	disabled,
+	setError,
+}: {
+	disabled?: boolean;
+	setError: Dispatch<SetStateAction<LoginErrors | undefined>>;
+}): ReactElement | null => {
 	const { t } = useTranslation();
 	const services = useLoginServices();
 	const showFormLogin = useSetting('Accounts_ShowFormLogin');
@@ -19,10 +26,10 @@ const Services = ({ disabled }: { disabled?: boolean }): ReactElement | null =>
 			{showFormLogin && <Divider mb={24} p={0} children={t('registration.component.form.divider')} />}
 			<ButtonGroup vertical stretch small>
 				{services.map((service) => (
-					<LoginServicesButton disabled={disabled} key={service.service} {...service} />
+					<LoginServicesButton disabled={disabled} key={service.service} {...service} setError={setError} />
 				))}
 			</ButtonGroup>
 		</>
 	);
 };
-export default Services;
+export default LoginServices;

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

@@ -1,7 +1,10 @@
 import { Button, Icon } from '@rocket.chat/fuselage';
 import type { LoginService } from '@rocket.chat/ui-contexts';
 import { useLoginWithService, useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement, ComponentProps } from 'react';
+import type { ReactElement, ComponentProps, SetStateAction, Dispatch } from 'react';
+import { useCallback } from 'react';
+
+import type { LoginErrors } from './LoginForm';
 
 const LoginServicesButton = <T extends LoginService>({
 	buttonLabelText,
@@ -11,18 +14,29 @@ const LoginServicesButton = <T extends LoginService>({
 	service,
 	className,
 	disabled,
+	setError,
 	...props
 }: T & {
 	className?: string;
 	disabled?: boolean;
+	setError?: Dispatch<SetStateAction<LoginErrors | undefined>>;
 }): ReactElement => {
 	const t = useTranslation();
 	const handler = useLoginWithService({ service, buttonLabelText, title, clientConfig, ...props });
 
+	const handleOnClick = useCallback(() => {
+		handler().catch((e: { error?: LoginErrors }) => {
+			if (!e.error || typeof e.error !== 'string') {
+				return;
+			}
+			setError?.(e.error);
+		});
+	}, [handler, setError]);
+
 	return (
 		<Button
 			className={className}
-			onClick={handler}
+			onClick={handleOnClick}
 			title={buttonLabelText && buttonLabelText !== title ? title : undefined}
 			disabled={disabled}
 			alignItems='center'