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

✨ refont MyAccount

Browse Source
This commit is contained in:
Max S 2024-09-11 15:44:37 +02:00
parent 8358dbab9c
commit c6ed4e5398
5 changed files with 127 additions and 160 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 });
}
};
}

24
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, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import Loader from "@Front/Components/DesignSystem/Loader";
import UserStore from "@Front/Stores/UserStore";
import JwtService from "@Front/Services/JwtService/JwtService";
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() {
const router = useRouter();

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

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

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

@ -1,142 +1,96 @@
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, {
q: {
office_membership: {
include: {
address: true,
Users.getInstance()
.getByUid(jwtDecoded.userId, {
q: {
office_membership: {
include: {
address: true,
},
},
contact: true,
},
contact: true,
},
});
if (!user) return;
this.setState({
user,
});
}
private onFormSubmit(
e: React.FormEvent<HTMLFormElement> | null,
values: {
[key: string]: string;
},
) {}
})
.then((user) => {
if (!user) return;
setUser(user);
});
}, []);
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" 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>
);
}