wip connexion with idnote

next.config.js

@@ -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,
 	},
 };
 

src/front/Api/Auth/IdNot/index.ts

@@ -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);
+    }
+  }
+}

src/front/Api/BaseApiService.ts

@@ -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;
   }

src/front/Assets/Icons/loader.svg

@@ -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>

src/front/Components/DesignSystem/Loader/classes.module.scss

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

src/front/Components/DesignSystem/Loader/index.tsx

@@ -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";
 

src/front/Components/Layouts/Login/index.tsx

@@ -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 {
+export default class LoginClass extends BasePage {
-	//constructor
-	public constructor(props: any) {
-		super(props);
-		// this.getAuthorizationCode = this.getAuthorizationCode.bind(this);
-	}
 	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?
+		// check variable
-      client_id=4501646203F3EF67
+		const baseFronturl = FrontendVariables.getInstance().BACK_API_PROTOCOL +
-      &redirect_uri=https://app.stg.lecoffre.smart-chain.fr/
+			FrontendVariables.getInstance().FRONT_APP_HOST +
-      &scope=openid,profile,offline_access
+			(FrontendVariables.getInstance().FRONT_APP_PORT ? ":" + FrontendVariables.getInstance().FRONT_APP_PORT : "");
-      &response_type=code`;
+			
+		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()
-	// }
-}

src/front/Components/Layouts/LoginCallback/classes.module.scss

@@ -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;
+    }
+}

src/front/Components/Layouts/LoginCallback/index.tsx

@@ -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} />;
+}

src/front/Config/VariablesFront.ts

@@ -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 {

src/pages/_app.tsx

@@ -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"],
 	};
 }
 

src/pages/authorized-client.tsx

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