131 lines
4.4 KiB
TypeScript
131 lines
4.4 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);
|
||
}, []);
|
||
|
||
const closeNoEmailModal = useCallback(() => {
|
||
setIsErrorModalOpen(0);
|
||
router.push("https://connexion.idnot.fr/");
|
||
}, [router]);
|
||
|
||
const closeContactAdminModal = useCallback(() => {
|
||
setIsErrorModalOpen(0);
|
||
router.push("mailto:gtexier@notaires.fr");
|
||
}, [router]);
|
||
|
||
useEffect(() => {
|
||
openErrorModal(parseInt(error as string));
|
||
}, [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>
|
||
<Confirm
|
||
isOpen={isErrorModalOpen === 3}
|
||
onClose={closeErrorModal}
|
||
onAccept={closeNoEmailModal}
|
||
closeBtn
|
||
header={"Echec de connexion"}
|
||
confirmText={"Accéder à mon compte ID.not"}
|
||
cancelText={"OK"}>
|
||
<div className={classes["modal-content"]}>
|
||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||
Votre compte ID.not doit être associé à une adresse email @notaires.fr (onglet Mettre à jour mes données
|
||
professionnelles)
|
||
</Typography>
|
||
</div>
|
||
</Confirm>
|
||
<Confirm
|
||
isOpen={isErrorModalOpen === 4}
|
||
onClose={closeErrorModal}
|
||
onAccept={closeContactAdminModal}
|
||
closeBtn
|
||
header={"Vous n’êtes pas bêta-testeur"}
|
||
confirmText={"Contacter l'administrateur"}
|
||
cancelText={"OK"}>
|
||
<div className={classes["modal-content"]}>
|
||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||
L'accès à la version bêta de lecoffre.io est limité à un groupe restreint d'utilisateurs autorisés. Si vous êtes
|
||
intéressé par la participation à notre programme de bêta-test, veuillez nous contacter par email.
|
||
</Typography>
|
||
</div>
|
||
</Confirm>
|
||
</DefaultDoubleSidePage>
|
||
);
|
||
}
|