login page customer

src/front/Assets/Icons/export.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66667 4V5.33333H3.33333V12.6667H10.6667V9.33333H12V13.3333C12 13.7015 11.7015 14 11.3333 14H2.66667C2.29848 14 2 13.7015 2 13.3333V4.66667C2 4.29848 2.29848 4 2.66667 4H6.66667ZM14 2V7.33333H12.6667V4.27533L7.47133 9.47133L6.52867 8.52867L11.7233 3.33333H8.66667V2H14Z" fill="#000091"/>
+</svg>

src/front/Components/Layouts/LoginCustomer/classes.module.scss

@@ -0,0 +1,35 @@
+.root {
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+	height: 100%;
+	margin: auto;
+	max-width: 80%;
+
+	.text {
+		margin: 32px 0;
+
+	}
+
+	.france-connect-button {
+		cursor: pointer;
+	}
+
+	.what-is-france-connect {
+		font-family: "Inter", sans-serif;
+		margin-top: 12px;
+		font-style: normal;
+		font-weight: 400;
+		font-size: 14px;
+		line-height: 24px;
+		border-bottom: 0.88px solid black;
+		width: fit-content;
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+
+		div {
+			margin-right: 8px;
+		}
+	}
+}

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

@@ -0,0 +1,47 @@
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import BasePage from "../Base";
+import classes from "./classes.module.scss";
+import CoffreIcon from "@Assets/Icons/coffre.svg";
+import LandingImage from "./landing-connect.png";
+import Image from "next/image";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
+import FranceConnectIcon from "./france-connect.svg";
+import ExportIcon from "@Assets/Icons/export.svg";
+
+export default class LoginCustomer extends BasePage {
+	public override render(): JSX.Element {
+		return (
+			<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
+				<div className={classes["root"]}>
+					<Typography typo={ITypo.H1}>
+						<div className={classes["title"]}>Identifiez-vous</div>
+					</Typography>
+					<Typography typo={ITypo.P_16}>
+						<div className={classes["text"]}>
+							Pour accéder à votre espace de dépôt des documents, veuillez vous identifier avec FranceConnect.
+						</div>
+					</Typography>
+					<Image
+						alt="france connect"
+						src={FranceConnectIcon}
+						onClick={this.redirectUserOnConnection}
+						className={classes["france-connect-button"]}></Image>
+					<div className={classes["what-is-france-connect"]}>
+						<div>Qu’est-ce que FranceConnect ?</div>
+						<Image alt="export" src={ExportIcon}></Image>
+					</div>
+				</div>
+			</DefaultDoubleSidePage>
+		);
+	}
+
+	private redirectUserOnConnection() {
+		// const variables = FrontendVariables.getInstance();
+		// const baseFronturl =
+		// 	variables.BACK_API_PROTOCOL + variables.FRONT_APP_HOST + (variables.FRONT_APP_PORT ? ":" + variables.FRONT_APP_PORT : "");
+		// const authorizeEndPoint = variables.IDNOT_AUTHORIZE_ENDPOINT;
+		// const clientId = variables.IDNOT_CLIENT_ID;
+		// const url = `${authorizeEndPoint}?client_id=${clientId}&redirect_uri=${baseFronturl}/authorized-client&scope=openid,profile,offline_access&response_type=code`;
+		// window.location.assign(url);
+	}
+}

src/pages/customers/login.tsx

@@ -0,0 +1,5 @@
+import LoginCustomer from "@Front/Components/Layouts/LoginCustomer";
+
+export default function Route() {
+	return <LoginCustomer />;
+}