Merge Dev in Staging

2023-10-10 15:22:10 +02:00 · 2023-10-10 15:22:10 +02:00 · a7b2792f80
commit a7b2792f80
parent 67b87cae18 0c47a0d7a1
15 changed files with 391 additions and 209 deletions
--- a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
@ -32,10 +32,12 @@
 	}

 	.notification-subheader {
-		width: 100%;
-		display: inline-flex;
-		justify-content: space-between;
+		display: flex;
+		align-items: center;
+		gap: 8px;
 		text-decoration: underline;
+		text-underline-offset: 2px;
+		color: var(--pink-flash);
 		cursor: pointer;
 	}

--- a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
+++ b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
@ -5,6 +5,7 @@ import CloseIcon from "@Assets/Icons/cross.svg";
 import Image from "next/image";
 import ToastHandler from "@Front/Components/DesignSystem/Toasts/ToastsHandler";
 import Toasts, { IToast } from "@Front/Stores/Toasts";
+import Check from "@Front/Components/Elements/Icons/Check";

 type IProps = {
 	isOpen: boolean;
@ -23,6 +24,7 @@ export default class NotificationModal extends React.Component<IProps, IState> {
 			toastList: Toasts.getInstance().toasts,
 		};
 		this.handleToastChange = this.handleToastChange.bind(this);
+		this.readAllNotifications = this.readAllNotifications.bind(this);
 	}

 	public override render(): JSX.Element | null {
@ -38,7 +40,10 @@ export default class NotificationModal extends React.Component<IProps, IState> {
 						</div>
 					</div>
 					<div className={classes["notification-subheader"]} onClick={this.readAllNotifications}>
-						<Typography typo={ITypo.CAPTION_14}>Tout marquer comme lu</Typography>
+						<Typography typo={ITypo.CAPTION_14} color={ITypoColor.PINK_FLASH}>
+							Tout marquer comme lu
+						</Typography>
+						<Check color={ITypoColor.PINK_FLASH} />
 					</div>
 					<div className={classes["notification-body"]}>
 						<>
@ -68,6 +73,7 @@ export default class NotificationModal extends React.Component<IProps, IState> {

 	private readAllNotifications() {
 		Toasts.getInstance().closeAll();
+		this.props.closeModal();
 	}

 	private handleToastChange(toastList: IToast[] | null) {
--- a/src/front/Components/DesignSystem/UserFolder/classes.module.scss
+++ b/src/front/Components/DesignSystem/UserFolder/classes.module.scss
@ -54,7 +54,8 @@
 		.content {
 			display: grid;
 			grid-template-columns: 1fr 1fr;
-			gap: 64px;
+			column-gap: 64px;
+			row-gap: 16px;
 			margin-top: 32px;

 			@media (max-width: $screen-s) {
@ -63,7 +64,7 @@
 				flex-direction: column;
 			}

-			.documents-asked{
+			.documents-asked {
 				order: -1;
 			}

@ -73,7 +74,7 @@
 				gap: 32px;
 				margin-top: 16px;

-				@media(max-width: $screen-s){
+				@media (max-width: $screen-s) {
 					order: -1;
 				}
 			}
--- a/src/front/Components/DesignSystem/UserFolder/index.tsx
+++ b/src/front/Components/DesignSystem/UserFolder/index.tsx
@ -26,6 +26,7 @@ type IProps = {
 	isOpened: boolean;
 	onChange: (id: string) => void;
 	anchorStatus: AnchorStatus;
+	getFolderCallback: () => Promise<void>;
 };
 type IState = {
 	isOpenDeletionModal: boolean;
@ -95,6 +96,9 @@ export default class UserFolder extends React.Component<IProps, IState> {
 								<DocumentList
 									documents={documentsAsked}
 									title="Documents demandés"
+									subtitle={
+										documentsAsked && documentsAsked?.length === 0 ? "Vous n'avez pas encore demandé de documents" : ""
+									}
 									openDeletionModal={this.openDeletionModal}
 									folderUid={this.props.folder.uid!}
 									className={classes["documents-asked"]}
@ -142,7 +146,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
 	private async deleteAskedDocument() {
 		try {
 			await Documents.getInstance().delete(this.state.selectedDocumentToDelete);
-			window.location.reload();
+			await this.props.getFolderCallback();
 		} catch (e) {
 			console.error(e);
 		}
--- a/src/front/Components/Elements/Icons/Check/index.tsx
+++ b/src/front/Components/Elements/Icons/Check/index.tsx
@ -0,0 +1,19 @@
+import { ITypoColor } from "@Front/Components/DesignSystem/Typography";
+
+type IProps = {
+	color?: ITypoColor;
+};
+
+export default function Check(props: IProps) {
+	return (
+		<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M15 4.5L6.75 12.75L3 9"
+				stroke={`var(--${props.color ?? "white"})`}
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+}
--- a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
+++ b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
@ -10,13 +10,14 @@ import BackArrow from "@Front/Components/Elements/BackArrow";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Module from "@Front/Config/Module";
 import { ECivility } from "le-coffre-resources/dist/Customer/Contact";
-import { Customer, OfficeFolder } from "le-coffre-resources/dist/Notary";
+import { Contact, Customer, OfficeFolder } from "le-coffre-resources/dist/Notary";
 import Link from "next/link";
 import { NextRouter, useRouter } from "next/router";

 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
+import { ValidationError } from "class-validator";

 enum ESelectedOption {
 	EXISTING_CUSTOMER = "existing_customer",
@ -29,6 +30,7 @@ type IState = {
 	selectedCustomers: readonly IOption[];
 	existingCustomers: IOption[];
 	isLoaded: boolean;
+	validationError: ValidationError[];
 };

 type IPropsClass = IProps & {
@ -44,6 +46,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 			selectedCustomers: [],
 			existingCustomers: [],
 			isLoaded: false,
+			validationError: [],
 		};
 		this.onExistingClientSelected = this.onExistingClientSelected.bind(this);
 		this.onNewClientSelected = this.onNewClientSelected.bind(this);
@ -105,10 +108,28 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {

 								{this.state.selectedOption === "new_customer" && (
 									<div className={classes["new-client"]}>
-										<TextField name="last_name" placeholder="Nom" />
-										<TextField name="first_name" placeholder="Prénom" />
-										<TextField name="email" placeholder="E-mail" />
-										<TextField name="cell_phone_number" placeholder="Numéro de téléphone" />
+										<TextField
+											name="last_name"
+											placeholder="Nom"
+											validationError={this.state.validationError.find((error) => error.property === "last_name")}
+										/>
+										<TextField
+											name="first_name"
+											placeholder="Prénom"
+											validationError={this.state.validationError.find((error) => error.property === "first_name")}
+										/>
+										<TextField
+											name="email"
+											placeholder="E-mail"
+											validationError={this.state.validationError.find((error) => error.property === "email")}
+										/>
+										<TextField
+											name="cell_phone_number"
+											placeholder="Numéro de téléphone"
+											validationError={this.state.validationError.find(
+												(error) => error.property === "cell_phone_number",
+											)}
+										/>
 										<div className={classes["button-container"]}>
 											<Link href={backwardPath} className={classes["cancel-button"]}>
 												<Button variant={EButtonVariant.GHOST}>Annuler</Button>
@ -207,11 +228,29 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 		}) as Partial<Customer>[];

 		if (this.state.selectedOption === "new_customer") {
-			const customer: Customer = await Customers.getInstance().post({
-				contact: values,
-			});
-			if (!customer.uid) return;
-			customersToLink?.push({ uid: customer.uid  } as Partial<Customer>);
+			try {
+				const contactToCreate = Contact.hydrate<Customer>(values);
+				await contactToCreate.validateOrReject?.({ groups: ["createCustomer"], forbidUnknownValues: false });
+			} catch (validationErrors) {
+				console.log(validationErrors);
+				this.setState({
+					validationError: validationErrors as ValidationError[],
+				});
+				return;
+			}
+
+			try {
+				const customer: Customer = await Customers.getInstance().post({
+					contact: values,
+				});
+				if (!customer.uid) return;
+				customersToLink?.push({ uid: customer.uid } as Partial<Customer>);
+			} catch (backError) {
+				if (!Array.isArray(backError)) return;
+				this.setState({
+					validationError: backError as ValidationError[],
+				});
+			}
 		}

 		if (customersToLink) {
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
@ -13,6 +13,7 @@ import { AnchorStatus } from "..";
 type IProps = {
 	folder: OfficeFolder;
 	anchorStatus: AnchorStatus;
+	getFolderCallback: () => Promise<void>;
 };
 type IState = {
 	openedCustomer: string;
@ -76,6 +77,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 					isOpened={this.state.openedCustomer === customer.uid}
 					onChange={this.changeUserFolder}
 					anchorStatus={this.props.anchorStatus}
+					getFolderCallback={this.props.getFolderCallback}
 				/>
 			);
 		});
--- a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
@ -37,6 +37,7 @@ type IPropsClass = IProps & {
 	isLoading: boolean;
 	selectedFolder: OfficeFolder | null;
 	getAnchoringStatus: () => Promise<void>;
+	getFolderCallback: () => Promise<void>;
 };

 type IState = {
@ -115,12 +116,20 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 										/>
 									</div>
 									{this.doesFolderHaveCustomer() && (
-										<ClientSection folder={this.props.selectedFolder} anchorStatus={this.props.isAnchored} />
+										<ClientSection
+											folder={this.props.selectedFolder}
+											anchorStatus={this.props.isAnchored}
+											getFolderCallback={this.props.getFolderCallback}
+										/>
 									)}
 								</div>

 								{!this.doesFolderHaveCustomer() && (
-									<ClientSection folder={this.props.selectedFolder} anchorStatus={this.props.isAnchored} />
+									<ClientSection
+										folder={this.props.selectedFolder}
+										anchorStatus={this.props.isAnchored}
+										getFolderCallback={this.props.getFolderCallback}
+									/>
 								)}

 								<div className={classes["button-container"]}>
@ -209,7 +218,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 					onAccept={this.closePreventArchiveModal}
 					onClose={this.closePreventArchiveModal}
 					closeBtn
-					header={"Vous devez valider et certifier un dossier avant de pouvoir l'archiver"}
+					header={"Vous devez valider et ancrer un dossier avant de pouvoir l'archiver"}
 					cancelText={"Annuler"}
 					confirmText={"J'ai compris"}>
 					<div className={classes["modal-title"]}>
@ -374,7 +383,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 	}

 	private openArchivedModal(): void {
-		if (this.everyDocumentValidated() && this.props.isAnchored) {
+		if (this.everyDocumentValidated() && this.props.isAnchored === AnchorStatus.VERIFIED_ON_CHAIN) {
 			this.setState({ isArchivedModalOpen: true });
 		} else {
 			this.setState({ isPreventArchiveModalOpen: true });
@ -471,6 +480,7 @@ export default function FolderInformation(props: IProps) {
 			isLoading={isLoading}
 			selectedFolder={selectedFolder}
 			getAnchoringStatus={getAnchoringStatus}
+			getFolderCallback={getFolder}
 		/>
 	);
 }
--- a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx
+++ b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx
@ -5,7 +5,7 @@ import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
-import DefaultNotaryDashboard  from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Module from "@Front/Config/Module";
 import { Contact, Customer, OfficeFolder } from "le-coffre-resources/dist/Notary";
 import Link from "next/link";
@ -14,6 +14,8 @@ import { ChangeEvent } from "react";

 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
+import { Address } from "le-coffre-resources/dist/Customer";
+import { ValidationError } from "class-validator";

 type IProps = {};

@ -34,6 +36,7 @@ type IState = {
 	inputAddress: string;
 	folder: OfficeFolder | null;
 	customer: Customer | null;
+	validationError: ValidationError[];
 };
 class UpdateClientClass extends BasePage<IPropsClass, IState> {
 	constructor(props: IPropsClass) {
@ -50,6 +53,7 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 			inputAddress: "",
 			folder: null,
 			customer: null,
+			validationError: [],
 		};
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
 		this.onChangeNameInput = this.onChangeNameInput.bind(this);
@ -83,24 +87,28 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 								placeholder="Nom"
 								onChange={this.onChangeNameInput}
 								defaultValue={this.state.customer?.contact?.first_name}
+								validationError={this.state.validationError.find((error) => error.property === "first_name")}
 							/>
 							<TextField
 								name="last_name"
 								placeholder="Prénom"
 								onChange={this.onChangeFirstNameInput}
 								defaultValue={this.state.customer?.contact?.last_name}
+								validationError={this.state.validationError.find((error) => error.property === "last_name")}
 							/>
 							<TextField
 								name="email"
 								placeholder="E-mail"
 								onChange={this.onChangeEmailInput}
 								defaultValue={this.state.customer?.contact?.email}
+								validationError={this.state.validationError.find((error) => error.property === "email")}
 							/>
 							<TextField
 								name="cell_phone_number"
 								placeholder="Numéro de téléphone"
 								onChange={this.onChangePhoneNumberInput}
 								defaultValue={this.state.customer?.contact?.cell_phone_number ?? ""}
+								validationError={this.state.validationError.find((error) => error.property === "cell_phone_number")}
 							/>
 							<TextField
 								name="birthdate"
@ -108,6 +116,7 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 								required={false}
 								onChange={this.onChangeBirthDateInput}
 								defaultValue={this.state.customer?.contact?.birthdate?.toString() ?? ""}
+								validationError={this.state.validationError.find((error) => error.property === "birthdate")}
 							/>
 							<TextField
 								name="address"
@ -167,25 +176,33 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 			[key: string]: string;
 		},
 	) {
-		const contact = {
+		const contact = Contact.hydrate<Contact>({
 			first_name: values["first_name"],
 			last_name: values["last_name"],
 			email: values["email"],
 			cell_phone_number: values["cell_phone_number"],
-			birthdate: values["birthdate"] === "" ? null : values["birthdate"],
-			address:
-				values["address"] === ""
-					? null
-					: {
-							address: values["address"],
-					  },
-		} as Contact;
+			birthdate: values["birthdate"] === "" ? null : new Date(values["birthdate"]!),
+			address: values["address"] ? Address.hydrate<Address>({ address: values["address"] }) : undefined,
+		});
+
+		try {
+			await contact.validateOrReject?.({ groups: ["createCustomer"], forbidUnknownValues: false });
+		} catch (validationErrors) {
+			console.log(validationErrors);
+			this.setState({
+				validationError: validationErrors as ValidationError[],
+			});
+			return;
+		}

 		try {
 			await Customers.getInstance().put(this.props.customerUid, { contact });
 			this.props.router.push(this.backwardPath);
-		} catch (e) {
-			console.error(e);
+		} catch (backError) {
+			if (!Array.isArray(backError)) return;
+			this.setState({
+				validationError: backError as ValidationError[],
+			});
 		}
 	}

--- a/src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx
+++ b/src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx
@ -8,6 +8,7 @@ import { AnchorStatus } from "@Front/Components/Layouts/Folder/FolderInformation
 type IProps = {
 	folder: OfficeFolder;
 	anchorStatus: AnchorStatus;
+	getFolderCallback: () => Promise<void>;
 };
 type IState = {
 	openedCustomer: string;
@ -53,6 +54,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 					onChange={this.changeUserFolder}
 					anchorStatus={this.props.anchorStatus}
 					isArchived
+					getFolderCallback={this.props.getFolderCallback}
 				/>
 			);
 		});
--- a/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
+++ b/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
@ -26,6 +26,7 @@ type IPropsClass = IProps & {
 	isLoading: boolean;
 	selectedFolder: OfficeFolder | null;
 	isAnchored: AnchorStatus;
+	getFolderCallback: () => Promise<void>;
 };

 type IState = {
@ -54,68 +55,80 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 		return (
 			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} isArchived={true}>
 				{!this.props.isLoading && (
-				<div className={classes["root"]}>
-					{this.state.selectedFolder ? (
-						<div className={classes["folder-informations"]}>
-							<div className={classes["folder-header"]}>
-								<div className={classes["header"]}>
-									<div className={classes["title"]}>
-										<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+					<div className={classes["root"]}>
+						{this.state.selectedFolder ? (
+							<div className={classes["folder-informations"]}>
+								<div className={classes["folder-header"]}>
+									<div className={classes["header"]}>
+										<div className={classes["title"]}>
+											<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+										</div>
+										<Link href={redirectPathEditCollaborators}>
+											<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
+												Modifier les collaborateurs
+											</Button>
+										</Link>
 									</div>
-									<Link href={redirectPathEditCollaborators}>
-										<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
-											Modifier les collaborateurs
-										</Button>
-									</Link>
-								</div>
-								<FolderBoxInformation
-									anchorStatus={this.props.isAnchored}
-									folder={this.state.selectedFolder}
-									isArchived
-									type={EFolderBoxInformationType.INFORMATIONS}
-								/>
-								<div className={classes["second-box"]}>
 									<FolderBoxInformation
 										anchorStatus={this.props.isAnchored}
 										folder={this.state.selectedFolder}
 										isArchived
-										type={EFolderBoxInformationType.DESCRIPTION}
+										type={EFolderBoxInformationType.INFORMATIONS}
 									/>
+									<div className={classes["second-box"]}>
+										<FolderBoxInformation
+											anchorStatus={this.props.isAnchored}
+											folder={this.state.selectedFolder}
+											isArchived
+											type={EFolderBoxInformationType.DESCRIPTION}
+										/>
+									</div>
+									<div className={classes["second-box"]}>
+										<FolderBoxInformation
+											anchorStatus={this.props.isAnchored}
+											folder={this.state.selectedFolder}
+											isArchived
+											type={EFolderBoxInformationType.ARCHIVED_DESCRIPTION}
+										/>
+									</div>
+
+									<div className={classes["progress-bar"]}>
+										<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
+									</div>
+									{this.doesFolderHaveCustomer() && (
+										<ClientSection
+											folder={this.state.selectedFolder}
+											anchorStatus={this.props.isAnchored}
+											getFolderCallback={this.props.getFolderCallback}
+										/>
+									)}
 								</div>
-								<div className={classes["second-box"]}>
-									<FolderBoxInformation
-										anchorStatus={this.props.isAnchored}
+
+								{!this.doesFolderHaveCustomer() && (
+									<ClientSection
 										folder={this.state.selectedFolder}
-										isArchived
-										type={EFolderBoxInformationType.ARCHIVED_DESCRIPTION}
+										anchorStatus={this.props.isAnchored}
+										getFolderCallback={this.props.getFolderCallback}
 									/>
+								)}
+
+								<div className={classes["button-container"]}>
+									<Button variant={EButtonVariant.GHOST} onClick={this.restoreFolder}>
+										Restaurer le dossier
+									</Button>
 								</div>
-
-								<div className={classes["progress-bar"]}>
-									<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
+							</div>
+						) : (
+							<div className={classes["no-folder-selected"]}>
+								<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+								<div className={classes["choose-a-folder"]}>
+									<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+										Aucun dossier sélectionné
+									</Typography>
 								</div>
-								{this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} anchorStatus={this.props.isAnchored} />}
 							</div>
-
-							{!this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} anchorStatus={this.props.isAnchored} />}
-
-							<div className={classes["button-container"]}>
-								<Button variant={EButtonVariant.GHOST} onClick={this.restoreFolder}>
-									Restaurer le dossier
-								</Button>
-							</div>
-						</div>
-					) : (
-						<div className={classes["no-folder-selected"]}>
-							<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
-							<div className={classes["choose-a-folder"]}>
-								<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
-									Aucun dossier sélectionné
-								</Typography>
-							</div>
-						</div>
-					)}
-				</div>
+						)}
+					</div>
 				)}
 				{this.props.isLoading && (
 					<div className={classes["loader-container"]}>
@ -181,7 +194,7 @@ export default function FolderInformation(props: IProps) {
 	folderUid = folderUid as string;

 	const getAnchoringStatus = useCallback(async () => {
-		if(!folderUid) return;
+		if (!folderUid) return;
 		setIsLoading(true);
 		try {
 			const anchorStatus = await OfficeFolderAnchors.getInstance().getByUid(folderUid as string);
@ -237,5 +250,15 @@ export default function FolderInformation(props: IProps) {
 		getFolder();
 	}, [getFolder]);

-	return <FolderInformationClass {...props} selectedFolderUid={folderUid} selectedFolder={selectedFolder} router={router} isLoading={isLoading} isAnchored={isAnchored} />;
+	return (
+		<FolderInformationClass
+			{...props}
+			selectedFolderUid={folderUid}
+			selectedFolder={selectedFolder}
+			router={router}
+			isLoading={isLoading}
+			isAnchored={isAnchored}
+			getFolderCallback={getFolder}
+		/>
+	);
 }
--- a/src/front/Components/Layouts/Login/index.tsx
+++ b/src/front/Components/Layouts/Login/index.tsx
@ -5,15 +5,19 @@ import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import Image from "next/image";
 import { useRouter } from "next/router";
-import { useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";

 import classes from "./classes.module.scss";
 import LandingImage from "./landing-connect.jpeg";
 import { FrontendVariables } from "@Front/Config/VariablesFront";
 import Link from "next/link";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";

 export default function Login() {
 	const router = useRouter();
+	const error = router.query["error"];
+
+	const [isErrorModalOpen, setIsErrorModalOpen] = useState(false);

 	const redirectUserOnConnection = useCallback(() => {
 		const variables = FrontendVariables.getInstance();
@ -24,6 +28,18 @@ export default function Login() {
 		);
 	}, [router]);

+	const openErrorModal = useCallback(() => {
+		setIsErrorModalOpen(true);
+	}, []);
+
+	const closeErrorModal = useCallback(() => {
+		setIsErrorModalOpen(false);
+	}, []);
+
+	useEffect(() => {
+		if (error === "1") openErrorModal();
+	}, [error, openErrorModal]);
+
 	return (
 		<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
 			<div className={classes["root"]}>
@ -41,6 +57,20 @@ export default function Login() {
 					<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button>
 				</Link>
 			</div>
+			<Confirm
+				isOpen={isErrorModalOpen}
+				onClose={closeErrorModal}
+				showCancelButton={false}
+				onAccept={closeErrorModal}
+				closeBtn
+				header={"Erreur"}
+				confirmText={"OK"}>
+				<div className={classes["modal-content"]}>
+					<Typography typo={ITypo.P_16} className={classes["text"]}>
+						Une erreur est survenue lors de la connexion. Veuillez réessayer.
+					</Typography>
+				</div>
+			</Confirm>
 		</DefaultDoubleSidePage>
 	);
 }
--- a/src/front/Components/Layouts/LoginCallback/index.tsx
+++ b/src/front/Components/Layouts/LoginCallback/index.tsx
@ -26,7 +26,7 @@ export default function LoginCallBack() {
 				await UserStore.instance.connect(token.accessToken, token.refreshToken);
 				return router.push(Module.getInstance().get().modules.pages.Folder.props.path);
 			} catch (e) {
-				console.error(e);
+				router.push(Module.getInstance().get().modules.pages.Login.props.path + "?error=1");
 				return;
 			}
 		}
--- a/src/front/Components/Layouts/Users/UserInformations/classes.module.scss
+++ b/src/front/Components/Layouts/Users/UserInformations/classes.module.scss
@ -83,3 +83,15 @@
 .remove-my-vote {
 	margin-top: 16px;
 }
+
+.loader-container {
+	display: flex;
+	flex: 1;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	.loader {
+		width: 40px;
+		height: 40px;
+	}
+}
--- a/src/front/Components/Layouts/Users/UserInformations/index.tsx
+++ b/src/front/Components/Layouts/Users/UserInformations/index.tsx
@ -18,6 +18,7 @@ import { useCallback, useEffect, useState } from "react";

 import classes from "./classes.module.scss";
 import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
+import Loader from "@Front/Components/DesignSystem/Loader";

 type IProps = {};
 export default function UserInformations(props: IProps) {
@ -36,10 +37,12 @@ export default function UserInformations(props: IProps) {

 	const [currentAppointment, setCurrentAppointment] = useState<Appointment | null>(null);

+	const [isLoading, setIsLoading] = useState<boolean>(true);
 	/** When page change, get the user of the page */

 	const getUser = useCallback(async () => {
 		if (!userUid) return;
+		setIsLoading(true);
 		const user = await Users.getInstance().getByUid(userUid as string, {
 			q: {
 				contact: true,
@ -66,6 +69,7 @@ export default function UserInformations(props: IProps) {
 			},
 		});
 		if (!roles) return;
+		setIsLoading(false);
 		setUserSelected(user);
 	}, [userUid]);

@ -201,135 +205,146 @@ export default function UserInformations(props: IProps) {

 	return (
 		<DefaultUserDashboard mobileBackText={"Liste des utilisateurs"}>
-			<div className={classes["root"]}>
-				<div className={classes["header"]}>
-					<Typography typo={ITypo.H1Bis}>{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}</Typography>
-					<Typography typo={ITypo.H3} color={ITypoColor.GREY}>
-						Office {userSelected?.office_membership?.name.toLocaleUpperCase()}
-					</Typography>
-				</div>
-				<div className={classes["user-infos"]}>
-					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
-							Nom
+			{!isLoading && (
+				<div className={classes["root"]}>
+					<div className={classes["header"]}>
+						<Typography typo={ITypo.H1Bis}>
+							{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}
 						</Typography>
-						<Typography typo={ITypo.P_18}>{userSelected?.contact?.first_name}</Typography>
-					</div>
-					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
-							Prénom
+						<Typography typo={ITypo.H3} color={ITypoColor.GREY}>
+							Office {userSelected?.office_membership?.name.toLocaleUpperCase()}
 						</Typography>
-						<Typography typo={ITypo.P_18}>{userSelected?.contact?.last_name}</Typography>
 					</div>
-					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
-							Numéro de téléphone
-						</Typography>
-						<Typography typo={ITypo.P_18}>{userSelected?.contact?.phone_number}</Typography>
-					</div>
-					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
-							Email
-						</Typography>
-						<Typography typo={ITypo.P_18}>{userSelected?.contact?.email}</Typography>
-					</div>
-				</div>
-
-				<div className={classes["role-container"]}>
-					<div className={classes["part"]}>
-						<div className={classes["first-line"]}>
-							<Typography typo={ITypo.P_SB_18}>Rôle au sein de son office</Typography>
+					<div className={classes["user-infos"]}>
+						<div className={classes["user-infos-row"]}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+								Nom
+							</Typography>
+							<Typography typo={ITypo.P_18}>{userSelected?.contact?.first_name}</Typography>
 						</div>
-						<div className={classes["second-line"]}>
-							<Typography typo={ITypo.P_18}>
-								{userSelected?.office_role ? userSelected?.office_role?.name : "Utilisateur restreint"}
+						<div className={classes["user-infos-row"]}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+								Prénom
+							</Typography>
+							<Typography typo={ITypo.P_18}>{userSelected?.contact?.last_name}</Typography>
+						</div>
+						<div className={classes["user-infos-row"]}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+								Numéro de téléphone
+							</Typography>
+							<Typography typo={ITypo.P_18}>{userSelected?.contact?.phone_number}</Typography>
+						</div>
+						<div className={classes["user-infos-row"]}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+								Email
+							</Typography>
+							<Typography typo={ITypo.P_18}>{userSelected?.contact?.email}</Typography>
+						</div>
+					</div>
+
+					<div className={classes["role-container"]}>
+						<div className={classes["part"]}>
+							<div className={classes["first-line"]}>
+								<Typography typo={ITypo.P_SB_18}>Rôle au sein de son office</Typography>
+							</div>
+							<div className={classes["second-line"]}>
+								<Typography typo={ITypo.P_18}>
+									{userSelected?.office_role ? userSelected?.office_role?.name : "Utilisateur restreint"}
+								</Typography>
+							</div>
+						</div>
+						<div className={classes["part"]}>
+							<div className={classes["first-line"]}>
+								<Typography typo={ITypo.P_SB_18}>Attribuer un titre</Typography>
+							</div>
+							<div className={classes["second-line"]}>
+								{!isSuperAdminChecked && !currentAppointment && (
+									<Switch label="Admin de son office" checked={isAdminChecked} onChange={handleAdminChanged} />
+								)}
+
+								<Switch
+									label="Super-admin LeCoffre.io"
+									checked={isSuperAdminChecked}
+									disabled={userHasVoted()}
+									onChange={handleSuperAdminChanged}
+								/>
+								{currentAppointment && (
+									<div className={classes["votes-block"]}>
+										<div className={classes["left"]}>
+											<Image src={WarningIcon} alt="warning" width={28} height={28} />
+										</div>
+										<div className={classes["right"]}>
+											<div>
+												<Typography typo={ITypo.P_SB_18}>{currentAppointment.votes?.length}/3</Typography>
+											</div>
+											<div>
+												<Typography typo={ITypo.CAPTION_14}>
+													{currentAppointment.choice === EVote.NOMINATE
+														? `Un ou des collaborateurs souhaitent attribuer le titre de Super Admin à ce collaborateur. Il manque ${
+																3 - currentAppointment.votes?.length!
+														  } vote(s) pour que le collaborateur se voit attribuer le titre.`
+														: `Un ou des collaborateurs souhaitent retirer le titre de Super Admin à ce collaborateur. Il manque ${
+																3 - currentAppointment.votes?.length!
+														  } vote(s) pour que le collaborateur se voit retirer le titre.`}
+												</Typography>
+											</div>
+											{userHasVoted() && (
+												<div className={classes["remove-my-vote"]}>
+													<Button variant={EButtonVariant.SECONDARY} onClick={deleteMyVote}>
+														Retirer mon vote
+													</Button>
+												</div>
+											)}
+										</div>
+									</div>
+								)}
+							</div>
+						</div>
+					</div>
+					<Confirm
+						isOpen={isSuperAdminModalOpened}
+						onClose={closeSuperAdminModal}
+						onAccept={handleSuperAdminModalAccepted}
+						closeBtn
+						header={`Souhaitez-vous attribuer un vote à ${
+							userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
+						} pour ${superAdminModalType === "add" ? "devenir" : "retirer son rôle de"} Super Administrateur ?`}
+						confirmText={"Attribuer un vote"}
+						cancelText={"Annuler"}>
+						<div className={classes["modal-content"]}>
+							<Typography typo={ITypo.P_16} className={classes["text"]}>
+								{superAdminModalType === "add" ? "Nommer" : "Retirer"} une personne Super Administrateur nécessite 3 votes
+								de super administrateurs existants. Souhaitez-vous attribuer un vote ?
 							</Typography>
 						</div>
-					</div>
-					<div className={classes["part"]}>
-						<div className={classes["first-line"]}>
-							<Typography typo={ITypo.P_SB_18}>Attribuer un titre</Typography>
-						</div>
-						<div className={classes["second-line"]}>
-							{!isSuperAdminChecked && !currentAppointment && (
-								<Switch label="Admin de son office" checked={isAdminChecked} onChange={handleAdminChanged} />
-							)}
-
-							<Switch
-								label="Super-admin LeCoffre.io"
-								checked={isSuperAdminChecked}
-								disabled={userHasVoted()}
-								onChange={handleSuperAdminChanged}
-							/>
-							{currentAppointment && (
-								<div className={classes["votes-block"]}>
-									<div className={classes["left"]}>
-										<Image src={WarningIcon} alt="warning" width={28} height={28} />
-									</div>
-									<div className={classes["right"]}>
-										<div>
-											<Typography typo={ITypo.P_SB_18}>{currentAppointment.votes?.length}/3</Typography>
-										</div>
-										<div>
-											<Typography typo={ITypo.CAPTION_14}>
-												{currentAppointment.choice === EVote.NOMINATE
-													? `Un ou des collaborateurs souhaitent attribuer le titre de Super Admin à ce collaborateur. Il manque ${
-															3 - currentAppointment.votes?.length!
-													  } vote(s) pour que le collaborateur se voit attribuer le titre.`
-													: `Un ou des collaborateurs souhaitent retirer le titre de Super Admin à ce collaborateur. Il manque ${
-															3 - currentAppointment.votes?.length!
-													  } vote(s) pour que le collaborateur se voit retirer le titre.`}
-											</Typography>
-										</div>
-										{userHasVoted() && (
-											<div className={classes["remove-my-vote"]}>
-												<Button variant={EButtonVariant.SECONDARY} onClick={deleteMyVote}>
-													Retirer mon vote
-												</Button>
-											</div>
-										)}
-									</div>
-								</div>
-							)}
-						</div>
+					</Confirm>
+					<Confirm
+						isOpen={isAdminModalOpened}
+						onClose={closeAdminModal}
+						onAccept={handleAdminModalAccepted}
+						closeBtn
+						header={
+							adminModalType === "add"
+								? `Souhaitez-vous nommer ${
+										userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
+								  } administrateur de son office ?`
+								: `Souhaitez-vous retirer le rôle administrateur de son office à ${
+										userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
+								  } ?`
+						}
+						confirmText={adminModalType === "add" ? "Ajouter" : "Retirer"}
+						cancelText={"Annuler"}>
+						<div className={classes["modal-content"]}></div>
+					</Confirm>
+				</div>
+			)}
+			{isLoading && (
+				<div className={classes["loader-container"]}>
+					<div className={classes["loader"]}>
+						<Loader />
 					</div>
 				</div>
-				<Confirm
-					isOpen={isSuperAdminModalOpened}
-					onClose={closeSuperAdminModal}
-					onAccept={handleSuperAdminModalAccepted}
-					closeBtn
-					header={`Souhaitez-vous attribuer un vote à ${
-						userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
-					} pour ${superAdminModalType === "add" ? "devenir" : "retirer son rôle de"} Super Administrateur ?`}
-					confirmText={"Attribuer un vote"}
-					cancelText={"Annuler"}>
-					<div className={classes["modal-content"]}>
-						<Typography typo={ITypo.P_16} className={classes["text"]}>
-							{superAdminModalType === "add" ? "Nommer" : "Retirer"} une personne Super Administrateur nécessite 3 votes de
-							super administrateurs existants. Souhaitez-vous attribuer un vote ?
-						</Typography>
-					</div>
-				</Confirm>
-				<Confirm
-					isOpen={isAdminModalOpened}
-					onClose={closeAdminModal}
-					onAccept={handleAdminModalAccepted}
-					closeBtn
-					header={
-						adminModalType === "add"
-							? `Souhaitez-vous nommer ${
-									userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
-							  } administrateur de son office ?`
-							: `Souhaitez-vous retirer le rôle administrateur de son office à ${
-									userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
-							  } ?`
-					}
-					confirmText={adminModalType === "add" ? "Ajouter" : "Retirer"}
-					cancelText={"Annuler"}>
-					<div className={classes["modal-content"]}></div>
-				</Confirm>
-			</div>
+			)}
 		</DefaultUserDashboard>
 	);
 }