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

Merge branch 'dev' into staging

Browse Source
This commit is contained in:
Max S 2024-09-11 15:48:38 +02:00
commit f3339d9e6b
9 changed files with 160 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/front/Components/DesignSystem/Form/TextField/classes.module.scss
View File

@ -3,6 +3,7 @@
.root {
position: relative;
&[data-is-disabled="true"] {
opacity: var(--opacity-disabled, 0.3);
.input-container {
@ -27,6 +28,8 @@
}
.input-container {
height: 56px;
display: flex;
padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
align-items: center;

5
src/front/Components/DesignSystem/Form/TextField/index.tsx
View File

@ -5,6 +5,9 @@ import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
import classes from "./classes.module.scss";
import classnames from "classnames";
import { XMarkIcon, Square2StackIcon } from "@heroicons/react/24/outline";
import { ToasterService } from "@Front/Components/DesignSystem/Toaster";
export type IProps = IBaseFieldProps & {
canCopy?: boolean;
password?: boolean;
@ -36,6 +39,7 @@ export default class TextField extends BaseField<IProps> {
onBlur={this.onBlur}
name={this.props.name}
disabled={this.props.disabled}
readOnly={this.props.readonly}
type={this.props.password ? "password" : "text"}
/>
{this.props.canCopy && !this.hasError() && (
@ -58,6 +62,7 @@ export default class TextField extends BaseField<IProps> {
private onCopyClick = (): void => {
if (this.props.canCopy) {
navigator.clipboard.writeText(this.state.value ?? "");
ToasterService.getInstance().success({ title: "Copié avec succès !", description: this.state.value });
}
};
}

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

@ -5,9 +5,11 @@ import classes from "./classes.module.scss";
interface IProps {
className?: string;
width?: string | number;
color?: string;
}
export default class Loader extends React.Component<IProps> {
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}
size={EButtonSize.MD}
onClick={button.onClick}>
Contactez le support
{button.text}
</Button>
</Link>
) : (
<Button variant={EButtonVariant.SECONDARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.MD} onClick={button.onClick}>
Contactez le support
{button.text}
</Button>
)}
</div>

3
src/front/Components/Layouts/ClientDashboard/index.tsx
View File

@ -177,7 +177,8 @@ export default function ClientDashboard(props: IProps) {
.modules.pages.ClientDashboard.pages.ReceiveDocuments.props.path.replace(
"[folderUid]",
folderUid as string,
)}>
)}
style={{ width: "100%" }}>
<Button fullwidth variant={EButtonVariant.PRIMARY} size={EButtonSize.LG} styletype={EButtonstyletype.OUTLINED}>
Voir les documents reçus
</Button>

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

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

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

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

37
src/front/Components/Layouts/MyAccount/classes.module.scss
View File

@ -1,27 +1,32 @@
@import "@Themes/constants.scss";
.root {
.title {
margin-top: 24px;
}
.parts-container {
display: flex;
gap: 64px;
margin-top: 32px;
margin: 24px auto;
width: 566px;
@media (max-width: $screen-m) {
flex-direction: column;
width: 474px;
}
.part {
flex: 1;
.form-container {
@media (max-width: $screen-s) {
width: 100%;
padding: var(--spacing-md, 16px);
}
display: flex;
flex-direction: column;
gap: 24px;
margin-top: 32px;
}
}
gap: var(--spacing-xl, 32px);
.title-container {
display: flex;
flex-direction: column;
gap: var(--spacing-sm, 8px);
}
.form {
display: flex;
flex-direction: column;
gap: var(--spacing-md, 16px);
}
}

198
src/front/Components/Layouts/MyAccount/index.tsx
View File

@ -1,124 +1,23 @@
import backgroundImage from "@Assets/images/background_refonte.svg";
import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import Base from "@Front/Components/Layouts/Base";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import React from "react";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import JwtService from "@Front/Services/JwtService/JwtService";
import User from "le-coffre-resources/dist/Notary";
import React, { useEffect } from "react";
import classes from "./classes.module.scss";
import User from "le-coffre-resources/dist/Notary";
import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
import JwtService from "@Front/Services/JwtService/JwtService";
type IProps = {};
type IState = {
user: User | null;
};
export default function MyAccount() {
const [user, setUser] = React.useState<User | null>(null);
export default class MyAccount extends Base<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
user: null,
};
}
public override render(): JSX.Element {
return (
<DefaultTemplate title={"Mon compte"}>
<div className={classes["root"]}>
<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
Mon compte
</Typography>
<div className={classes["parts-container"]}>
<div className={classes["part"]}>
<Typography typo={ETypo.TITLE_H3} color={ETypoColor.COLOR_GENERIC_BLACK}>
Mes informations
</Typography>
<Form onSubmit={this.onFormSubmit}>
<div className={classes["form-container"]}>
<TextField
name="name"
placeholder="Nom"
defaultValue={this.state.user?.contact?.last_name}
disabled
canCopy
/>
<TextField
name="surname"
placeholder="Prénom"
defaultValue={this.state.user?.contact?.first_name}
disabled
canCopy
/>
<TextField
name="email"
placeholder="E-mail"
defaultValue={this.state.user?.contact?.email}
disabled
canCopy
/>
<TextField
name="phone"
placeholder="Numéro de téléphone"
defaultValue={this.state.user?.contact?.cell_phone_number as string}
disabled
canCopy
/>
</div>
</Form>
</div>
<div className={classes["part"]}>
<Typography typo={ETypo.TITLE_H3} color={ETypoColor.COLOR_GENERIC_BLACK}>
Mon office
</Typography>
<Form onSubmit={this.onFormSubmit}>
<div className={classes["form-container"]}>
<TextField
name="office_denomination"
placeholder="Dénomination de l'office"
defaultValue={this.state.user?.office_membership?.name}
disabled
canCopy
/>
<TextField
name="crpcen"
placeholder="CRPCEN"
defaultValue={this.state.user?.office_membership?.crpcen}
disabled
canCopy
/>
<TextField
name="cp_address"
placeholder="Adresse"
defaultValue={this.state.user?.office_membership?.address?.address}
disabled
canCopy
/>
<TextField
name="city"
placeholder="Ville"
defaultValue={
this.state.user?.office_membership?.address?.zip_code +
" - " +
this.state.user?.office_membership?.address?.city
}
disabled
canCopy
/>
</div>
</Form>
</div>
</div>
</div>
</DefaultTemplate>
);
}
public override async componentDidMount() {
useEffect(() => {
const jwtDecoded = JwtService.getInstance().decodeJwt();
if (!jwtDecoded) return;
const user = await Users.getInstance().getByUid(jwtDecoded.userId, {
Users.getInstance()
.getByUid(jwtDecoded.userId, {
q: {
office_membership: {
include: {
@ -127,16 +26,71 @@ export default class MyAccount extends Base<IProps, IState> {
},
contact: true,
},
});
})
.then((user) => {
if (!user) return;
this.setState({
user,
setUser(user);
});
}
private onFormSubmit(
e: React.FormEvent<HTMLFormElement> | null,
values: {
[key: string]: string;
},
) {}
}, []);
return (
<DefaultDoubleSidePage title={"Mon Compte"} image={backgroundImage}>
<div className={classes["root"]}>
<div className={classes["title-container"]}>
<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_PRIMARY}>
Mon compte
</Typography>
<Typography typo={ETypo.TITLE_H5} color={ETypoColor.TEXT_ACCENT}>
Mes informations
</Typography>
</div>
<Form className={classes["form"]}>
<TextField name="name" label="Nom" placeholder="Nom" defaultValue={user?.contact?.last_name} readonly canCopy />
<TextField name="surname" label="Prénom" placeholder="Prénom" defaultValue={user?.contact?.first_name} readonly canCopy />
<TextField name="email" label="E-mail" placeholder="E-mail" defaultValue={user?.contact?.email} readonly canCopy />
<TextField
name="phone"
label="Numéro de téléphone"
placeholder="Numéro de téléphone"
defaultValue={user?.contact?.cell_phone_number as string}
readonly
canCopy
/>
</Form>
<Typography typo={ETypo.TITLE_H5} color={ETypoColor.TEXT_ACCENT}>
Mon office
</Typography>
<Form className={classes["form"]}>
<TextField
name="office_denomination"
label="Dénomination de l'office"
placeholder="Dénomination de l'office"
defaultValue={user?.office_membership?.name}
readonly
canCopy
/>
<TextField name="crpcen" label="CRPCEN" placeholder="CRPCEN" defaultValue={user?.office_membership?.crpcen} readonly canCopy />
<TextField
name="cp_address"
label="Adresse"
placeholder="Adresse"
defaultValue={user?.office_membership?.address?.address as string}
readonly
canCopy
/>
<TextField
name="city"
label="Ville"
placeholder="Ville"
defaultValue={user?.office_membership?.address?.zip_code + " - " + user?.office_membership?.address?.city}
readonly
canCopy
/>
</Form>
</div>
</DefaultDoubleSidePage>
);
}