🐛 Redirecting on error login

src/front/Components/Layouts/Login/index.tsx

@@ -5,15 +5,19 @@ import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import Image from "next/image";
 import { useRouter } from "next/router";
-import { useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import classes from "./classes.module.scss";
 import LandingImage from "./landing-connect.jpeg";
 import { FrontendVariables } from "@Front/Config/VariablesFront";
 import Link from "next/link";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 
 export default function Login() {
 	const router = useRouter();
+	const error = router.query["error"];
+
+	const [isErrorModalOpen, setIsErrorModalOpen] = useState(false);
 
 	const redirectUserOnConnection = useCallback(() => {
 		const variables = FrontendVariables.getInstance();
@@ -24,6 +28,18 @@ export default function Login() {
 		);
 	}, [router]);
 
+	const openErrorModal = useCallback(() => {
+		setIsErrorModalOpen(true);
+	}, []);
+
+	const closeErrorModal = useCallback(() => {
+		setIsErrorModalOpen(false);
+	}, []);
+
+	useEffect(() => {
+		if (error === "1") openErrorModal();
+	}, [error, openErrorModal]);
+
 	return (
 		<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
 			<div className={classes["root"]}>
@@ -41,6 +57,20 @@ export default function Login() {
 					<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button>
 				</Link>
 			</div>
+			<Confirm
+				isOpen={isErrorModalOpen}
+				onClose={closeErrorModal}
+				showCancelButton={false}
+				onAccept={closeErrorModal}
+				closeBtn
+				header={"Erreur"}
+				confirmText={"OK"}>
+				<div className={classes["modal-content"]}>
+					<Typography typo={ITypo.P_16} className={classes["text"]}>
+						Une erreur est survenue lors de la connexion. Veuillez réessayer.
+					</Typography>
+				</div>
+			</Confirm>
 		</DefaultDoubleSidePage>
 	);
 }

src/front/Components/Layouts/LoginCallback/index.tsx

@@ -26,7 +26,7 @@ export default function LoginCallBack() {
 				await UserStore.instance.connect(token.accessToken, token.refreshToken);
 				return router.push(Module.getInstance().get().modules.pages.Folder.props.path);
 			} catch (e) {
-				console.error(e);
+				router.push(Module.getInstance().get().modules.pages.Login.props.path + "?error=1");
 				return;
 			}
 		}