293 lines
13 KiB
TypeScript
293 lines
13 KiB
TypeScript
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 UserStore from "@Front/Stores/UserStore";
|
|
import Image from "next/image";
|
|
import { useRouter } from "next/router";
|
|
import React, { useEffect, useState } from "react";
|
|
import classes from "./classes.module.scss";
|
|
|
|
// Importer les composants de UI pour les barres de progression
|
|
import { LinearProgress, Box, Typography as MuiTypography } from "@mui/material";
|
|
|
|
import AuthModal from "src/sdk/AuthModal";
|
|
|
|
import MessageBus from "src/sdk/MessageBus";
|
|
import Iframe from "src/sdk/Iframe";
|
|
|
|
import LoaderService from "src/common/Api/LeCoffreApi/sdk/Loader/LoaderService";
|
|
import ImportData, { ProgressInfo } from "src/common/Api/LeCoffreApi/sdk/ImportData";
|
|
import RoleService from "src/common/Api/LeCoffreApi/sdk/RoleService";
|
|
import OfficeService from "src/common/Api/LeCoffreApi/sdk/OfficeService";
|
|
import OfficeRoleService from "src/common/Api/LeCoffreApi/sdk/OfficeRoleService";
|
|
import CollaboratorService from "src/common/Api/LeCoffreApi/sdk/CollaboratorService";
|
|
|
|
export default function LoginCallBack() {
|
|
const router = useRouter();
|
|
const [idNotUser, setIdNotUser] = useState<any>(null);
|
|
const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
|
|
const [isConnected, setIsConnected] = useState(false);
|
|
|
|
// États pour les barres de progression
|
|
const [showProgress, setShowProgress] = useState(false);
|
|
const [progressInfo, setProgressInfo] = useState<ProgressInfo>({
|
|
globalProgress: 0,
|
|
currentStep: '',
|
|
stepProgress: 0,
|
|
description: ''
|
|
});
|
|
|
|
const getOffice = async (idNotUser: any) => {
|
|
return await new Promise<any>((resolve: (office: any) => void) => {
|
|
OfficeService.getOffices().then((processes: any[]) => {
|
|
const officeFound: any = processes.length > 0 ? processes.map((process: any) => process.processData).find((office: any) => office.idNot === idNotUser.office.idNot) : null;
|
|
if (officeFound) {
|
|
resolve(officeFound);
|
|
} else {
|
|
const officeData: any = {
|
|
idNot: idNotUser.office.idNot,
|
|
name: idNotUser.office.name,
|
|
crpcen: idNotUser.office.crpcen,
|
|
address: {
|
|
create: {
|
|
address: idNotUser.office.address.address,
|
|
zip_code: idNotUser.office.address.zip_code,
|
|
city: idNotUser.office.address.city
|
|
}
|
|
},
|
|
office_status: 'ACTIVATED'
|
|
};
|
|
const validatorId: string = '884cb36a346a79af8697559f16940141f068bdf1656f88fa0df0e9ecd7311fb8:0';
|
|
OfficeService.createOffice(officeData, validatorId).then((process: any) => {
|
|
if (process) {
|
|
const office: any = process.processData;
|
|
resolve(office);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
const getCollaborator = async (collaboratorData: any) => {
|
|
return await new Promise<any>(async (resolve: (role: any) => void) => {
|
|
const processFound: any | null = await CollaboratorService.getCollaboratorBy({ idNot: idNotUser.idNot });
|
|
if (processFound) {
|
|
resolve(processFound.processData);
|
|
} else {
|
|
const validatorId: string = '884cb36a346a79af8697559f16940141f068bdf1656f88fa0df0e9ecd7311fb8:0';
|
|
CollaboratorService.createCollaborator(collaboratorData, validatorId).then((process: any) => {
|
|
if (process) {
|
|
const collaborator: any = process.processData;
|
|
resolve(collaborator);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
async function getUser() {
|
|
UserStore.instance.disconnect();
|
|
|
|
// TODO: review
|
|
// HACK: If start with http://local.lecoffreio.4nkweb:3000/authorized-client
|
|
// Replace with http://localhost:3000/authorized-client
|
|
if (window.location.href.startsWith('http://local.lecoffreio.4nkweb:3000/authorized-client')) {
|
|
window.location.href = window.location.href.replace('http://local.lecoffreio.4nkweb:3000/authorized-client', 'http://localhost:3000/authorized-client');
|
|
return;
|
|
}
|
|
|
|
const code = router.query["code"];
|
|
if (code) {
|
|
try {
|
|
// Nettoyer l'URL pour ne garder que la racine
|
|
const rootUrl = window.location.origin;
|
|
if (window.location.href !== rootUrl) {
|
|
window.history.replaceState({}, document.title, rootUrl);
|
|
}
|
|
|
|
const user: any = await Auth.getInstance().getIdNotUser(code as string);
|
|
setIdNotUser(user.idNotUser);
|
|
setIsAuthModalOpen(true);
|
|
/*
|
|
const token: any = null;
|
|
if (!token) return router.push(Module.getInstance().get().modules.pages.Login.props.path);
|
|
await UserStore.instance.connect(token.accessToken, token.refreshToken);
|
|
const jwt = JwtService.getInstance().decodeJwt();
|
|
if (!jwt) return router.push(Module.getInstance().get().modules.pages.Login.props.path + "?error=1");
|
|
if (jwt.rules && !jwt.rules.includes("GET folders")) {
|
|
return router.push(Module.getInstance().get().modules.pages.Subscription.pages.New.props.path);
|
|
}
|
|
setIsAuthModalOpen(true);
|
|
//return router.push(Module.getInstance().get().modules.pages.Folder.props.path);
|
|
*/
|
|
return;
|
|
} catch (e: any) {
|
|
if (e.http_status === 401 && e.message === "Email not found") {
|
|
return router.push(Module.getInstance().get().modules.pages.Login.props.path + "?error=3");
|
|
}
|
|
if (e.http_status === 409) {
|
|
return router.push(Module.getInstance().get().modules.pages.Login.props.path + "?error=4");
|
|
}
|
|
return router.push(Module.getInstance().get().modules.pages.Login.props.path + "?error=1");
|
|
}
|
|
}
|
|
/*
|
|
const refreshToken = CookieService.getInstance().getCookie("leCoffreRefreshToken");
|
|
if (!refreshToken) return router.push(Module.getInstance().get().modules.pages.Login.props.path + "?error=1");
|
|
const isTokenRefreshed = await JwtService.getInstance().refreshToken(refreshToken);
|
|
const jwt = JwtService.getInstance().decodeJwt();
|
|
if (!jwt) return router.push(Module.getInstance().get().modules.pages.Login.props.path + "?error=1");
|
|
if (!jwt.rules.includes("GET folders")) {
|
|
return router.push(Module.getInstance().get().modules.pages.Subscription.pages.New.props.path);
|
|
}
|
|
if (isTokenRefreshed) {
|
|
//setIsAuthModalOpen(true);
|
|
//return router.push(Module.getInstance().get().modules.pages.Folder.props.path);
|
|
return;
|
|
}
|
|
*/
|
|
return router.push(Module.getInstance().get().modules.pages.Login.props.path + "?error=2");
|
|
}
|
|
getUser();
|
|
}, [router]);
|
|
|
|
return (
|
|
<DefaultDoubleSidePage title={"Login"} image={backgroundImage}>
|
|
<div className={classes["root"]} style={showProgress ? { width: 'calc(75vw - 70px)', maxWidth: '1130px', margin: '80px 0 80px 70px' } : undefined}>
|
|
<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>
|
|
|
|
{!showProgress ? (
|
|
<Loader color={"var(--secondary-default-base, #FF4617)"} width={29} />
|
|
) : (
|
|
<Box sx={{ width: '100%', mb: 4, p: 4, px: 6, borderRadius: 2, boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)' }}>
|
|
<MuiTypography variant="h6" align="center" sx={{ mb: 2, fontWeight: 600, color: 'var(--primary-default-base, #006BE0)' }}>
|
|
Importation des données
|
|
</MuiTypography>
|
|
{/* Progression globale */}
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
|
|
<MuiTypography variant="body2" sx={{ fontWeight: 500, color: 'text.primary' }}>
|
|
Progression globale: <span style={{ color: 'var(--secondary-default-base, #FF4617)', fontWeight: 600 }}>{Math.round(progressInfo.globalProgress)}%</span>
|
|
</MuiTypography>
|
|
<MuiTypography variant="body2" sx={{ fontWeight: 500, color: 'text.secondary' }}>
|
|
<span style={{ fontStyle: 'italic' }}>{progressInfo.currentStep}</span>
|
|
</MuiTypography>
|
|
</Box>
|
|
<LinearProgress
|
|
variant="determinate"
|
|
value={progressInfo.globalProgress}
|
|
sx={{
|
|
height: 12,
|
|
borderRadius: 6,
|
|
backgroundColor: 'rgba(255, 70, 23, 0.15)',
|
|
'& .MuiLinearProgress-bar': {
|
|
backgroundColor: 'var(--secondary-default-base, #FF4617)',
|
|
transition: 'transform 0.5s ease'
|
|
}
|
|
}}
|
|
/>
|
|
|
|
{/* Progression par étape */}
|
|
<Box sx={{ mt: 2, mb: 1 }}>
|
|
<MuiTypography variant="body2" sx={{ display: 'flex', justifyContent: 'space-between', fontWeight: 500, color: 'text.primary' }}>
|
|
<span>Progression de l'étape: <span style={{ color: 'var(--primary-default-base, #006BE0)', fontWeight: 600 }}>{Math.round(progressInfo.stepProgress)}%</span></span>
|
|
<span style={{ maxWidth: '60%', textAlign: 'right', color: 'text.secondary' }}>{progressInfo.description || ''}</span>
|
|
</MuiTypography>
|
|
</Box>
|
|
<LinearProgress
|
|
variant="determinate"
|
|
value={progressInfo.stepProgress}
|
|
sx={{
|
|
height: 8,
|
|
borderRadius: 4,
|
|
backgroundColor: 'rgba(0, 107, 224, 0.15)',
|
|
'& .MuiLinearProgress-bar': {
|
|
backgroundColor: 'var(--primary-default-base, #006BE0)',
|
|
transition: 'transform 0.3s ease'
|
|
}
|
|
}}
|
|
/>
|
|
</Box>
|
|
)}
|
|
<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" }}
|
|
/>
|
|
{isAuthModalOpen && <AuthModal
|
|
isOpen={isAuthModalOpen}
|
|
onClose={() => {
|
|
setIsAuthModalOpen(false);
|
|
setIsConnected(true);
|
|
setTimeout(() => {
|
|
LoaderService.getInstance().show();
|
|
MessageBus.getInstance().initMessageListener();
|
|
MessageBus.getInstance().isReady().then(async () => {
|
|
const office: any = await getOffice(idNotUser);
|
|
LoaderService.getInstance().hide();
|
|
|
|
setShowProgress(true);
|
|
await ImportData.import(office, (info: ProgressInfo) => {
|
|
setProgressInfo(info);
|
|
});
|
|
setShowProgress(false);
|
|
|
|
LoaderService.getInstance().show();
|
|
|
|
const role: any = (await RoleService.getRoles())
|
|
.map((process: any) => process.processData)
|
|
.find((role: any) => role.name === idNotUser.role.name);
|
|
|
|
const officeRole: any = (await OfficeRoleService.getOfficeRoles())
|
|
.map((process: any) => process.processData)
|
|
.filter((officeRole: any) => officeRole.office.uid === office.uid)
|
|
.find((officeRole: any) => officeRole.name === idNotUser.office_role.name);
|
|
|
|
const collaboratorData: any = {
|
|
idNot: idNotUser.idNot,
|
|
contact: idNotUser.contact,
|
|
office: {
|
|
uid: office.uid
|
|
},
|
|
role: {
|
|
uid: role.uid
|
|
},
|
|
office_role: {
|
|
uid: officeRole.uid
|
|
}
|
|
};
|
|
const collaborator: any = await getCollaborator(collaboratorData);
|
|
UserStore.instance.connect(collaborator);
|
|
|
|
MessageBus.getInstance().destroyMessageListener();
|
|
LoaderService.getInstance().hide();
|
|
|
|
/*
|
|
if (jwt.rules && !jwt.rules.includes("GET folders")) {
|
|
router.push(Module.getInstance().get().modules.pages.Subscription.pages.New.props.path);
|
|
}
|
|
*/
|
|
|
|
window.location.href = Module.getInstance().get().modules.pages.Folder.props.path;
|
|
});
|
|
}, 100);
|
|
}}
|
|
/>}
|
|
{isConnected && <Iframe />}
|
|
</div>
|
|
</DefaultDoubleSidePage>
|
|
);
|
|
}
|