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

wip connexion with idnote

Browse Source
This commit is contained in:
Hugo Lextrait 2023-04-12 18:40:39 +02:00
parent 48cc9e23b5
commit e84701867a
12 changed files with 160 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
next.config.js
View File

@ -9,6 +9,8 @@ const nextConfig = {
BACK_API_PORT: process.env.BACK_API_PORT,
BACK_API_ROOT_URL: process.env.BACK_API_ROOT_URL,
BACK_API_VERSION: process.env.BACK_API_VERSION,
FRONT_APP_HOST: process.env.FRONT_APP_HOST,
FRONT_APP_PORT: process.env.FRONT_APP_PORT,
},
};

39
src/front/Api/Auth/IdNot/index.ts Normal file
View File

@ -0,0 +1,39 @@
import { Service } from "typedi";
import BaseApiService from "@Front/Api/BaseApiService";
@Service()
export default class Auth extends BaseApiService {
private static instance: Auth;
private constructor() {
super();
}
public static getInstance(): Auth {
return (this.instance = this.instance ?? new Auth());
}
public async userSignin() {
const url = new URL(
"https://qual-connexion.idnot.fr/IdPOAuth2/authorize/idnot_idp_v1?client_id=4501646203F3EF67&redirect_uri=http://0.0.0.0:3000/authorized-client&scope=openid,profile,offline_access&response_type=code"
);
try {
return await this.getRequest<any>(url);
} catch (err) {
this.onError(err);
return Promise.reject(err);
}
}
public async getIdnotJwt(autorizationCode: string | string[]) {
const url = new URL(
`http://127.0.0.1:3001/api/v1/idnot-user/${autorizationCode}`
);
try {
await this.postRequest<any>(url);
} catch (err) {
this.onError(err);
//return Promise.reject(err);
}
}
}

5
src/front/Api/BaseApiService.ts
View File

@ -12,8 +12,9 @@ export default abstract class BaseApiService {
BaseApiService.baseUrl ??=
FrontendVariables.getInstance().BACK_API_PROTOCOL +
FrontendVariables.getInstance().BACK_API_HOST +
":" +
FrontendVariables.getInstance().BACK_API_PORT ?? "" +
(FrontendVariables.getInstance().BACK_API_PORT
? ":" + FrontendVariables.getInstance().BACK_API_PORT
: "") +
FrontendVariables.getInstance().BACK_API_ROOT_URL +
FrontendVariables.getInstance().BACK_API_VERSION;
}

27
src/front/Assets/Icons/loader.svg Normal file
View File

@ -0,0 +1,27 @@
<svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
<circle fill="#000000" stroke="none" cx="6" cy="50" r="6">
<animate
attributeName="opacity"
dur="1s"
values="0;1;0"
repeatCount="indefinite"
begin="0.1"/>
</circle>
<circle fill="#000000" stroke="none" cx="26" cy="50" r="6">
<animate
attributeName="opacity"
dur="1s"
values="0;1;0"
repeatCount="indefinite"
begin="0.2"/>
</circle>
<circle fill="#000000" stroke="none" cx="46" cy="50" r="6">
<animate
attributeName="opacity"
dur="1s"
values="0;1;0"
repeatCount="indefinite"
begin="0.3"/>
</circle>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 834 B

2
src/front/Components/DesignSystem/Loader/classes.module.scss
View File

@ -1,4 +1,4 @@
@import "Themes/constants.scss";
@import "@Themes/constants.scss";
.loader {
animation: spin 2s linear infinite;

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

@ -1,5 +1,5 @@
import React from "react";
import LoaderIcon from "assets/images/Icons/loader.svg";
import LoaderIcon from "@Assets/Icons/loader.svg";
import classes from "./classes.module.scss";
import Image from "next/image";

29
src/front/Components/Layouts/Login/index.tsx
View File

@ -6,13 +6,9 @@ import CoffreIcon from "@Assets/Icons/coffre.svg";
import LandingImage from "./landing-connect.png"
import Image from "next/image";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import { FrontendVariables } from "@Front/Config/VariablesFront";
export default class Login extends BasePage {
//constructor
public constructor(props: any) {
super(props);
// this.getAuthorizationCode = this.getAuthorizationCode.bind(this);
}
export default class LoginClass extends BasePage {
public override render(): JSX.Element {
return (
<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
@ -20,11 +16,6 @@ export default class Login extends BasePage {
<Image alt="coffre" src={CoffreIcon} />
<Typography typo={ITypo.H1}><div className={classes["title"]}>Connexion espace professionnel</div></Typography>
<Button onClick={this.redirectUserOnConnection}>S’identifier avec ID.not</Button>
<a href="https://qual-connexion.idnot.fr/IdPOAuth2/authorize/idnot_idp_v1?
client_id=4501646203F3EF67
&redirect_uri=https://app.stg.lecoffre.smart-chain.fr/
&scope=openid,profile,offline_access
&response_type=code"> <Typography typo={ITypo.P_18}>CONNECT</Typography></a>
<Typography typo={ITypo.P_18}><div className={classes["forget-password"]}>Vous n’arrivez pas à vous connecter ?</div></Typography>
<Button variant={EButtonVariant.LINE} >Contacter l’administrateur</Button>
</div>
@ -33,15 +24,13 @@ export default class Login extends BasePage {
}
private redirectUserOnConnection() {
const url = `https://qual-connexion.idnot.fr/IdPOAuth2/authorize/idnot_idp_v1?
client_id=4501646203F3EF67
&redirect_uri=https://app.stg.lecoffre.smart-chain.fr/
&scope=openid,profile,offline_access
&response_type=code`;
// check variable
const baseFronturl = FrontendVariables.getInstance().BACK_API_PROTOCOL +
FrontendVariables.getInstance().FRONT_APP_HOST +
(FrontendVariables.getInstance().FRONT_APP_PORT ? ":" + FrontendVariables.getInstance().FRONT_APP_PORT : "");
const url = `https://qual-connexion.idnot.fr/IdPOAuth2/authorize/idnot_idp_v1?client_id=4501646203F3EF67&redirect_uri=${baseFronturl}/authorized-client&scope=openid,profile,offline_access&response_type=code`
window.location.assign(url)
}
// private getAuthorizationCode() {
// Users.getInstance().getAuthorizationCode()
// }
}

16
src/front/Components/Layouts/LoginCallback/classes.module.scss Normal file
View File

@ -0,0 +1,16 @@
.root {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.title {
margin: 32px 0;
text-align: center;
}
.forget-password {
margin-top: 32px;
margin-bottom: 8px;
}
}

45
src/front/Components/Layouts/LoginCallback/index.tsx Normal file
View File

@ -0,0 +1,45 @@
import classes from "./classes.module.scss";
import LandingImage from "../Login/landing-connect.png";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import Router, { useRouter } from "next/router";
import React from "react";
import Loader from "@Front/Components/DesignSystem/Loader";
import Auth from "@Front/Api/Auth/IdNot";
type IPropsClass = {};
type IStateClass = {};
class LoginCallBackClass extends React.Component<IPropsClass, IStateClass> {
public override render(): JSX.Element {
return (
<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
<div className={classes["root"]}>
<Loader />
</div>
</DefaultDoubleSidePage>
);
}
}
// TODO: Refacto with functionnal component container of classcomponent
export default function LoginCallBack(props: IPropsClass) {
const router = useRouter();
const { code } = router.query;
if (code) {
const getIdNotJwt = async () => {
try {
const authService = Auth.getInstance();
const user = await authService.getIdnotJwt(code);
console.log(user);
Router.push('/dossier');
} catch (error) {
console.error(error);
Router.push('/login');
}
};
getIdNotJwt();
}
return <LoginCallBackClass {...props} />;
}

4
src/front/Config/VariablesFront.ts
View File

@ -11,6 +11,10 @@ export class FrontendVariables {
public BACK_API_VERSION!: string;
public FRONT_APP_HOST!: string;
public FRONT_APP_PORT!: string;
private constructor() {}
public static getInstance(): FrontendVariables {

8
src/pages/_app.tsx
View File

@ -17,9 +17,11 @@ type AppPropsWithLayout = AppProps & {
backApiPort: string,
backApiRootUrl: string,
backApiVersion: string,
frontAppHost: string,
frontAppPort: string,
};
const MyApp = (({ Component, pageProps, backApiProtocol, backApiHost, backApiPort, backApiRootUrl, backApiVersion }: AppPropsWithLayout) => {
const MyApp = (({ Component, pageProps, backApiProtocol, backApiHost, backApiPort, backApiRootUrl, backApiVersion, frontAppHost, frontAppPort }: AppPropsWithLayout) => {
const getLayout = Component.getLayout ?? ((page) => <DefaultLayout children={page}></DefaultLayout>);
FrontendVariables.getInstance().BACK_API_PROTOCOL = backApiProtocol;
@ -27,6 +29,8 @@ const MyApp = (({ Component, pageProps, backApiProtocol, backApiHost, backApiPor
FrontendVariables.getInstance().BACK_API_PORT = backApiPort;
FrontendVariables.getInstance().BACK_API_ROOT_URL = backApiRootUrl;
FrontendVariables.getInstance().BACK_API_VERSION = backApiVersion;
FrontendVariables.getInstance().FRONT_APP_HOST = frontAppHost;
FrontendVariables.getInstance().FRONT_APP_PORT = frontAppPort;
return getLayout(<Component {...pageProps} />);
}) as AppType;
@ -38,6 +42,8 @@ MyApp.getInitialProps = async () => {
backApiPort: process.env["BACK_API_PORT"],
backApiRootUrl: process.env["BACK_API_ROOT_URL"],
backApiVersion: process.env["BACK_API_VERSION"],
frontAppHost: process.env["FRONT_APP_HOST"],
frontAppPort: process.env["FRONT_APP_PORT"],
};
}

5
src/pages/authorized-client.tsx Normal file
View File

@ -0,0 +1,5 @@
import LoginCallBack from "@Front/Components/Layouts/LoginCallback";
export default function Route() {
return <LoginCallBack />;
}