100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
import CoffreIcon from "@Assets/Icons/coffre.svg";
|
|
import idNoteLogo from "@Assets/Icons/id-note-logo.svg";
|
|
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
|
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, 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(0);
|
|
|
|
const redirectUserOnConnection = useCallback(() => {
|
|
const variables = FrontendVariables.getInstance();
|
|
router.push(
|
|
`${variables.IDNOT_BASE_URL + variables.IDNOT_AUTHORIZE_ENDPOINT}?client_id=${variables.IDNOT_CLIENT_ID}&redirect_uri=${
|
|
variables.FRONT_APP_HOST
|
|
}/authorized-client&scope=openid,profile&response_type=code`,
|
|
);
|
|
}, [router]);
|
|
|
|
const openErrorModal = useCallback((index: number) => {
|
|
setIsErrorModalOpen(index);
|
|
}, []);
|
|
|
|
const closeErrorModal = useCallback(() => {
|
|
setIsErrorModalOpen(0);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
switch (error) {
|
|
case "1":
|
|
openErrorModal(1);
|
|
break;
|
|
case "2":
|
|
openErrorModal(2);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}, [error, openErrorModal]);
|
|
|
|
return (
|
|
<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
|
|
<div className={classes["root"]}>
|
|
<Image alt="coffre" src={CoffreIcon} />
|
|
<Typography typo={ITypo.H1}>
|
|
<div className={classes["title"]}>Connexion espace professionnel</div>
|
|
</Typography>
|
|
<Button onClick={redirectUserOnConnection} icon={idNoteLogo} iconposition={"left"}>
|
|
S'identifier avec ID.not
|
|
</Button>
|
|
<Typography typo={ITypo.P_18}>
|
|
<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
|
|
</Typography>
|
|
<Link href="mailto:g.texier@notaires.fr">
|
|
<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button>
|
|
</Link>
|
|
</div>
|
|
<Confirm
|
|
isOpen={isErrorModalOpen === 1}
|
|
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>
|
|
<Confirm
|
|
isOpen={isErrorModalOpen === 2}
|
|
onClose={closeErrorModal}
|
|
showCancelButton={false}
|
|
onAccept={closeErrorModal}
|
|
closeBtn
|
|
header={"Session expirée"}
|
|
confirmText={"OK"}>
|
|
<div className={classes["modal-content"]}>
|
|
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
|
Veuillez vous reconnecter.
|
|
</Typography>
|
|
</div>
|
|
</Confirm>
|
|
</DefaultDoubleSidePage>
|
|
);
|
|
}
|