diff --git a/src/front/Components/Layouts/Login/index.tsx b/src/front/Components/Layouts/Login/index.tsx index 5c621570..64702a90 100644 --- a/src/front/Components/Layouts/Login/index.tsx +++ b/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 (
@@ -47,9 +33,6 @@ export default function Login() { -
Vous n'arrivez pas à vous connecter ?
 diff --git a/src/front/Components/Layouts/LoginCustomer/classes.module.scss b/src/front/Components/Layouts/LoginCustomer/classes.module.scss index 7f83f95d..794913a1 100644 --- a/src/front/Components/Layouts/LoginCustomer/classes.module.scss +++ b/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; } } -} \ No newline at end of file + + .forget-password { + margin-top: 32px; + margin-bottom: 8px; + } +} diff --git a/src/front/Components/Layouts/LoginCustomer/france-connect.svg b/src/front/Components/Layouts/LoginCustomer/france-connect.svg deleted file mode 100644 index 98ae5ac4..00000000 --- a/src/front/Components/Layouts/LoginCustomer/france-connect.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/front/Components/Layouts/LoginCustomer/index.tsx b/src/front/Components/Layouts/LoginCustomer/index.tsx index 7acb9c36..bbeaa64e 100644 --- a/src/front/Components/Layouts/LoginCustomer/index.tsx +++ b/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 ( - -
- -
Identifiez-vous
- - -
- Pour accéder à votre espace de dépôt des documents, veuillez vous identifier avec FranceConnect. -
- - france connect -
-
Qu’est-ce que FranceConnect ?
- export -
-
- - ); - } +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 ( + +
+ coffre + +
Connexion espace client
+ + + +
Vous n'arrivez pas à vous connecter ?
+ + +
+ + ); } diff --git a/src/front/Components/Layouts/LoginCustomer/landing-connect.jpeg b/src/front/Components/Layouts/LoginCustomer/landing-connect.jpeg new file mode 100644 index 00000000..789e0ef3 Binary files /dev/null and b/src/front/Components/Layouts/LoginCustomer/landing-connect.jpeg differ diff --git a/src/pages/login-customer.tsx b/src/pages/login-customer.tsx new file mode 100644 index 00000000..785decd1 --- /dev/null +++ b/src/pages/login-customer.tsx @@ -0,0 +1,5 @@ +import LoginCustomer from "@Front/Components/Layouts/LoginCustomer"; + +export default function Route() { + return ; +}