240 lines
9.0 KiB
TypeScript
240 lines
9.0 KiB
TypeScript
import React, { useCallback, useEffect, useState } from "react";
|
||
import classes from "./classes.module.scss";
|
||
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
||
//import Image from "next/image";
|
||
import Form from "@Front/Components/DesignSystem/Form";
|
||
import TextField from "@Front/Components/DesignSystem/Form/TextField";
|
||
import Button from "@Front/Components/DesignSystem/Button";
|
||
//import franceConnectLogo from "../france-connect.svg";
|
||
// import { useRouter } from "next/router";
|
||
// import Customers from "@Front/Api/Auth/Id360/Customers/Customers";
|
||
import { ValidationError } from "class-validator";
|
||
import Image from "next/image";
|
||
import LogoSmallBlue from "@Assets/logo_small_blue.svg";
|
||
|
||
import idNoteLogo from "@Assets/Icons/id-note-logo.svg";
|
||
import { useRouter } from "next/router";
|
||
import { FrontendVariables } from "@Front/Config/VariablesFront";
|
||
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
|
||
|
||
type IProps = {
|
||
onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
|
||
validationErrors: ValidationError[];
|
||
};
|
||
|
||
export default function StepEmail(props: IProps) {
|
||
const { onSubmit, validationErrors } = props;
|
||
const [isErrorModalOpen, setIsErrorModalOpen] = useState(0);
|
||
|
||
// Forcer HTTPS dès le début pour éviter le contexte de sécurité mixte
|
||
useEffect(() => {
|
||
if (typeof window !== "undefined" && window.location.protocol === "http:") {
|
||
const target = `https://dev4.4nkweb.com/lecoffre${window.location.pathname}${window.location.search}`;
|
||
window.location.replace(target);
|
||
}
|
||
}, []);
|
||
|
||
/* const router = useRouter();
|
||
const redirectCustomerOnConnection = useCallback(() => {
|
||
async function getCustomer() {
|
||
try {
|
||
const loginRes = await Customers.getInstance().login();
|
||
router.push(loginRes.enrollment.franceConnectUrl);
|
||
} catch (e) {
|
||
console.error(e);
|
||
}
|
||
}
|
||
getCustomer();
|
||
}, [router]); */
|
||
|
||
const router = useRouter();
|
||
const error = router.query["error"];
|
||
const redirectUserOnConnection = useCallback(() => {
|
||
const variables = FrontendVariables.getInstance();
|
||
let redirectUri = variables.IDNOT_REDIRECT_URI || "";
|
||
if (!redirectUri) {
|
||
console.warn("[IDNOT] NEXT_PUBLIC_IDNOT_REDIRECT_URI vide; fallback sur FRONT_APP_HOST/authorized-client");
|
||
redirectUri = `${variables.FRONT_APP_HOST}/authorized-client`;
|
||
}
|
||
const authorizeBase = `${variables.IDNOT_BASE_URL}${variables.IDNOT_AUTHORIZE_ENDPOINT}`;
|
||
router.push(
|
||
`${authorizeBase}?client_id=${variables.IDNOT_CLIENT_ID}&redirect_uri=${encodeURIComponent(redirectUri)}&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 = () => {
|
||
// setIsErrorModalOpen(0);
|
||
// window.open("https://www.lecoffre.io/contact", "_blank");
|
||
// };
|
||
|
||
useEffect(() => {
|
||
openErrorModal(parseInt(error as string));
|
||
}, [error, openErrorModal]);
|
||
|
||
return (
|
||
<div className={classes["root"]}>
|
||
<div className={classes["header"]}>
|
||
<Image src={LogoSmallBlue} alt="Logo small blue" height="56" width="56" />
|
||
<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_ACCENT}>
|
||
Bienvenue !
|
||
</Typography>
|
||
<Typography typo={ETypo.TITLE_H5}>Connectez-vous pour accéder à votre espace sécurisé.</Typography>
|
||
</div>
|
||
<div className={classes["content"]}>
|
||
<div className={classes["section"]}>
|
||
<Typography typo={ETypo.TITLE_H6} color={ETypoColor.TEXT_ACCENT} className={classes["section-title"]}>
|
||
Pour les notaires et les collaborateurs :
|
||
</Typography>
|
||
<Button onClick={redirectUserOnConnection} rightIcon={<Image alt="id-not-logo" src={idNoteLogo} />}>
|
||
S'identifier avec ID.not
|
||
</Button>
|
||
</div>
|
||
<div className={classes["section"]}>
|
||
<Typography typo={ETypo.TITLE_H6} color={ETypoColor.TEXT_ACCENT} className={classes["section-title"]}>
|
||
Pour les clients :
|
||
</Typography>
|
||
<Form className={classes["form"]} onSubmit={onSubmit}>
|
||
{
|
||
<TextField
|
||
placeholder="Renseigner votre email"
|
||
label="E-mail"
|
||
name="email"
|
||
validationError={validationErrors.find((err) => err.property === "email")}
|
||
/>
|
||
}
|
||
<Button type="submit">Se connecter</Button>
|
||
</Form>
|
||
</div>
|
||
</div>
|
||
<Confirm
|
||
isOpen={isErrorModalOpen === 1}
|
||
onClose={closeErrorModal}
|
||
showCancelButton={false}
|
||
onAccept={closeErrorModal}
|
||
closeBtn
|
||
header={"Problème de connexion"}
|
||
confirmText={"Fermer"}>
|
||
<div className={classes["modal-content"]}>
|
||
<Typography typo={ETypo.TEXT_MD_LIGHT} className={classes["text"]}>
|
||
Une erreur est survenue lors de la connexion. Veuillez réessayer ou contacter le support si le problème persiste.
|
||
</Typography>
|
||
<a className={classes["modal-button"]} href="mailto:support@lecoffre.io" target="_blank">
|
||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_SECONDARY_500} className={classes["button-text"]}>
|
||
Contactez le support
|
||
</Typography>
|
||
</a>
|
||
</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={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
|
||
Veuillez vous reconnecter.
|
||
</Typography>
|
||
</div>
|
||
</Confirm>
|
||
<Confirm
|
||
isOpen={isErrorModalOpen === 3}
|
||
onClose={closeErrorModal}
|
||
onAccept={closeNoEmailModal}
|
||
closeBtn
|
||
header={"E-mail Professionnel Manquant"}
|
||
confirmText={"Accéder à mon compte ID.not"}
|
||
cancelText={"Fermer"}>
|
||
<div className={classes["modal-content"]}>
|
||
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
|
||
Votre e-mail professionnel n'est pas renseigné sur votre compte ID.Not. Merci de l'ajouter pour accéder à ce
|
||
service. Pour toute question, contactez-nous à support@lecoffre.io.
|
||
</Typography>
|
||
<a className={classes["modal-button"]} href="mailto:support@lecoffre.io" target="_blank">
|
||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_SECONDARY_500} className={classes["button-text"]}>
|
||
Contactez le support
|
||
</Typography>
|
||
</a>
|
||
</div>
|
||
</Confirm>
|
||
<Confirm
|
||
isOpen={isErrorModalOpen === 4}
|
||
onClose={closeErrorModal}
|
||
showCancelButton={false}
|
||
onAccept={closeErrorModal}
|
||
closeBtn
|
||
header={"Connexion à ID.Not impossible"}
|
||
confirmText={"Fermer"}>
|
||
<div className={classes["modal-content"]}>
|
||
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
|
||
Notre partenaire ID.Not rencontre actuellement un problème technique. Nous vous tiendrons informé de l'évolution.
|
||
Pour toute question, contactez-nous à support@lecoffre.io.
|
||
</Typography>
|
||
<a className={classes["modal-button"]} href="mailto:support@lecoffre.io" target="_blank">
|
||
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_SECONDARY_500} className={classes["button-text"]}>
|
||
Contactez le support
|
||
</Typography>
|
||
</a>
|
||
</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={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
|
||
L'accès à la version bêta de lecoffre.io est limité à un groupe restreint d'utilisateurs autorisés.
|
||
</Typography>
|
||
<ul>
|
||
<li>
|
||
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
|
||
Si vous êtes intéressé par la participation à notre programme de bêta-test, veuillez nous compléter le
|
||
formulaire :{" "}
|
||
<a
|
||
href="https://www.lecoffre.io/contact"
|
||
target="_blank"
|
||
style={{ color: "blue", textDecoration: "underline" }}>
|
||
https://www.lecoffre.io/contact
|
||
</a>
|
||
</Typography>
|
||
</li>
|
||
<div style={{ marginBottom: "10px" }}></div>
|
||
<li>
|
||
<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
|
||
Si vous avez déjà un compte bêta-testeur, veuillez vous connecter sur{" "}
|
||
<a
|
||
href="https://compte.idnot.fr/home"
|
||
target="_blank"
|
||
style={{ color: "blue", textDecoration: "underline" }}>
|
||
https://compte.idnot.fr/home
|
||
</a>{" "}
|
||
et vérifier que l'adresse mail renseignée sur votre espace est identique à celle que vous nous avez
|
||
communiquée.
|
||
</Typography>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</Confirm> */}
|
||
</div>
|
||
);
|
||
}
|