49 lines
2.1 KiB
TypeScript
49 lines
2.1 KiB
TypeScript
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
||
import BasePage from "../Base";
|
||
import classes from "./classes.module.scss";
|
||
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";
|
||
import { FrontendVariables } from "@Front/Config/VariablesFront";
|
||
import cryptoRandomString from "crypto-random-string";
|
||
|
||
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.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);
|
||
}
|
||
}
|