4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ refont page callback

Browse Source
This commit is contained in:
Max S 2024-09-11 15:10:45 +02:00
parent 1561804075
commit 8358dbab9c
4 changed files with 34 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/front/Components/DesignSystem/Loader/index.tsx
View File

@ -5,9 +5,11 @@ import classes from "./classes.module.scss";
interface IProps { interface IProps {
className?: string; className?: string;
width?: string | number;
color?: string;
} }
export default class Loader extends React.Component<IProps> { export default class Loader extends React.Component<IProps> {
public override render(): JSX.Element { public override render(): JSX.Element {
return <ArrowPathIcon className={classes["root"]} />; return <ArrowPathIcon className={classes["root"]} color={this.props.color} width={this.props.width} />;
} }
} }

4
src/front/Components/Elements/HelpBox/index.tsx
View File

@ -26,12 +26,12 @@ export default function HelpBox(props: IProps) {
styletype={EButtonstyletype.TEXT} styletype={EButtonstyletype.TEXT}
size={EButtonSize.MD} size={EButtonSize.MD}
onClick={button.onClick}> onClick={button.onClick}>
Contactez le support {button.text}
</Button> </Button>
</Link> </Link>
) : ( ) : (
<Button variant={EButtonVariant.SECONDARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.MD} onClick={button.onClick}> <Button variant={EButtonVariant.SECONDARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.MD} onClick={button.onClick}>
Contactez le support {button.text}
</Button> </Button>
)} )}
</div> </div>

33
src/front/Components/Layouts/LoginCallback/classes.module.scss
View File

@ -1,29 +1,22 @@
@import "@Themes/constants.scss"; @import "@Themes/constants.scss";
.root { .root {
margin: 80px auto;
width: 474px;
display: flex; display: flex;
align-items: center;
justify-content: center;
flex-direction: column; flex-direction: column;
height: 100%; gap: var(--spacing-xl, 32px);
max-width: 530px;
margin: auto; .title-container {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.title {
margin: 32px 0;
text-align: center;
@media (max-width: $screen-s) { @media (max-width: $screen-s) {
font-family: 48px; width: 100%;
} margin: auto;
} padding: var(--spacing-md, 16px);
.loader {
width: 32px;
height: 32px;
}
.forget-password {
margin-top: 32px;
margin-bottom: 8px;
} }
} }

33
src/front/Components/Layouts/LoginCallback/index.tsx
View File

@ -7,13 +7,13 @@ import classes from "./classes.module.scss";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import Auth from "@Front/Api/Auth/IdNot"; import Auth from "@Front/Api/Auth/IdNot";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage"; import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Loader from "@Front/Components/DesignSystem/Loader"; import Loader from "@Front/Components/DesignSystem/Loader";
import UserStore from "@Front/Stores/UserStore"; import UserStore from "@Front/Stores/UserStore";
import Link from "next/link";
import JwtService from "@Front/Services/JwtService/JwtService"; import JwtService from "@Front/Services/JwtService/JwtService";
import CookieService from "@Front/Services/CookieService/CookieService"; import CookieService from "@Front/Services/CookieService/CookieService";
import backgroundImage from "@Assets/images/background_refonte.svg";
import HelpBox from "@Front/Components/Elements/HelpBox";
export default function LoginCallBack() { export default function LoginCallBack() {
const router = useRouter(); const router = useRouter();
@ -60,23 +60,22 @@ export default function LoginCallBack() {
[router]; [router];
return ( return (
<DefaultDoubleSidePage title={"Login"} image={LandingImage}> <DefaultDoubleSidePage title={"Login"} image={backgroundImage}>
<div className={classes["root"]}> <div className={classes["root"]}>
<Image alt="coffre" src={CoffreIcon} /> <div className={classes["title-container"]}>
<Typography typo={ETypo.DISPLAY_LARGE}> <Image alt="coffre" src={CoffreIcon} width={56} />
<div className={classes["title"]}>Connexion espace professionnel</div> <Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_ACCENT}>
Connexion à votre espace professionnel
</Typography> </Typography>
<div className={classes["loader"]}>
<Loader />
</div> </div>
<Typography typo={ETypo.TEXT_LG_REGULAR}>
<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div> <Loader color={"var(--secondary-default-base, #FF4617)"} width={29} />
</Typography> <div />
<Link href="mailto:support@lecoffre.io"> <HelpBox
<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT}> title="Vous n'arrivez pas à vous connecter ?"
Contacter l'administrateur description="Notre équipe de support est là pour vous aider."
</Button> button={{ text: "Contacter l'administrateur", link: "mailto:support@lecoffre.io" }}
</Link> />
</div> </div>
</DefaultDoubleSidePage> </DefaultDoubleSidePage>
); );