✨ Separate login pages

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

@@ -3,7 +3,6 @@ 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 Module from "@Front/Config/Module";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { useCallback } from "react";
@@ -11,7 +10,6 @@ import { useCallback } from "react";
 import classes from "./classes.module.scss";
 import LandingImage from "./landing-connect.jpeg";
 import { FrontendVariables } from "@Front/Config/VariablesFront";
-import Customers from "@Front/Api/LeCoffreApi/Id360/Customers/Customers";
 
 export default function Login() {
 	const router = useRouter();
@@ -25,18 +23,6 @@ export default function Login() {
 		);
 	}, [router]);
 
-	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]);
-
 	return (
 		<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
 			<div className={classes["root"]}>
@@ -47,9 +33,6 @@ export default function Login() {
 				<Button onClick={redirectUserOnConnection} icon={idNoteLogo} iconposition={"left"}>
 					S'identifier avec ID.not
 				</Button>
-				<Button onClick={redirectCustomerOnConnection} icon={idNoteLogo} iconposition={"left"}>
-					S'identifier en tant que customer
-				</Button>
 				<Typography typo={ITypo.P_18}>
 					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 				</Typography>

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

@@ -1,35 +1,25 @@
+@import "@Themes/constants.scss";
+
 .root {
 	display: flex;
+	align-items: center;
 	justify-content: center;
 	flex-direction: column;
 	height: 100%;
+	max-width: 530px;
 	margin: auto;
-	max-width: 80%;
 
-	.text {
+	.title {
 		margin: 32px 0;
+		text-align: center;
 
-	}
-
-	.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;
+		@media (max-width: $screen-s) {
+			font-family: 48px;
 		}
 	}
+
+	.forget-password {
+		margin-top: 32px;
+		margin-bottom: 8px;
+	}
 }

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

@@ -1,50 +1,45 @@
+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 BasePage from "../Base";
-import classes from "./classes.module.scss";
-import LandingImage from "../Login/landing-connect.jpeg";
-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";
-import { FrontendVariables } from "@Front/Config/VariablesFront";
-import cryptoRandomString from "crypto-random-string";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { useCallback } from "react";
+import Customers from "@Front/Api/LeCoffreApi/Id360/Customers/Customers";
+import classes from "./classes.module.scss";
+import LandingImage from "./landing-connect.jpeg";
 
-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>
-		);
-	}
+export default function Login() {
+	const router = useRouter();
 
-	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.FC_AUTHORIZE_ENDPOINT;
-		const clientId = variables.FC_CLIENT_ID;
-		const url = `${authorizeEndPoint}?client_id=${clientId}&redirect_uri=http://localhost:8080/login-callback&scope=openid&response_type=code&state=${cryptoRandomString(
-			{ length: 64 },
-		)}&nonce=${cryptoRandomString({ length: 64 })}&acr_values=eidas1`;
-		window.location.assign(url);
-	}
+	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]);
+
+	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 client</div>
+				</Typography>
+				<Button onClick={redirectCustomerOnConnection} icon={idNoteLogo} iconposition={"left"}>
+					S'identifier en tant que customer
+				</Button>
+				<Typography typo={ITypo.P_18}>
+					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
+				</Typography>
+				<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button>
+			</div>
+		</DefaultDoubleSidePage>
+	);
 }

src/pages/login-customer.tsx

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