From 386ba6c32eacab53663f0a0eafe95df1cfa5d896 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Mon, 27 Nov 2023 10:02:43 +0100
Subject: [PATCH] :sparkles: Two first steps working

---
 src/front/Api/Auth/Customer/Auth.ts           | 19 ++++++
 .../Layouts/LoginCustomer/StepEmail/index.tsx | 42 ++-----------
 .../Layouts/LoginCustomer/StepTotp/index.tsx  | 47 +++-----------
 .../Layouts/LoginCustomer/index.tsx           | 63 ++++++++++++++++++-
 4 files changed, 92 insertions(+), 79 deletions(-)

diff --git a/src/front/Api/Auth/Customer/Auth.ts b/src/front/Api/Auth/Customer/Auth.ts
index 7d0481f2..d629f0eb 100644
--- a/src/front/Api/Auth/Customer/Auth.ts
+++ b/src/front/Api/Auth/Customer/Auth.ts
@@ -8,6 +8,15 @@ export type IMailVerifyReturn = {
 	partialPhoneNumber: string;
 };
 
+export type IVerifyTotpCodeParams = {
+	totpCode: string;
+	email: string;
+};
+
+export type IVerifyTotpCodeReturn = {
+	validCode: boolean;
+};
+
 export default class Auth extends BaseApiService {
 	private static instance: Auth;
 	protected readonly namespaceUrl = this.getBaseUrl().concat("/customer");
@@ -26,4 +35,14 @@ export default class Auth extends BaseApiService {
 			return Promise.reject(err);
 		}
 	}
+
+	public async verifyTotpCode(body: IVerifyTotpCodeParams): Promise<IVerifyTotpCodeReturn> {
+		const url = new URL(this.baseURl.concat("/verify-totp-code"));
+		try {
+			return this.postRequest<IVerifyTotpCodeReturn>(url, body);
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
 }
diff --git a/src/front/Components/Layouts/LoginCustomer/StepEmail/index.tsx b/src/front/Components/Layouts/LoginCustomer/StepEmail/index.tsx
index 63607abe..5a2595f6 100644
--- a/src/front/Components/Layouts/LoginCustomer/StepEmail/index.tsx
+++ b/src/front/Components/Layouts/LoginCustomer/StepEmail/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import classes from "./classes.module.scss";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import Image from "next/image";
@@ -9,16 +9,13 @@ import franceConnectLogo from "../france-connect.svg";
 import { useRouter } from "next/router";
 import Customers from "@Front/Api/Auth/Id360/Customers/Customers";
 import { ValidationError } from "class-validator";
-import { LoginStep } from "..";
-import Auth from "@Front/Api/Auth/Customer/Auth";
 type IProps = {
-	setPartialPhoneNumber: (phoneNumber: string) => void;
-	setStep: (step: LoginStep) => void;
+	onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
+	validationErrors: ValidationError[];
 };
 
 export default function StepEmail(props: IProps) {
-	const { setPartialPhoneNumber, setStep } = props;
-	const [validationError, setValidationError] = useState<ValidationError[]>([]);
+	const { onSubmit, validationErrors } = props;
 	const router = useRouter();
 	const redirectCustomerOnConnection = useCallback(() => {
 		async function getCustomer() {
@@ -32,33 +29,6 @@ export default function StepEmail(props: IProps) {
 		getCustomer();
 	}, [router]);
 
-	const onSubmitHandler = useCallback(
-		async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
-			try {
-				if (!values["email"]) return;
-				const res = await Auth.getInstance().mailVerifySms({ email: values["email"] });
-				setPartialPhoneNumber(res.partialPhoneNumber);
-				setStep(LoginStep.TOTP);
-			} catch (error: any) {
-				// If token already exists and is still valid redirect to the connect/register page
-				if (error.http_status === 425) {
-					setStep(LoginStep.TOTP);
-					return;
-				}
-				setValidationError([
-					{
-						property: "email",
-						constraints: {
-							[error.http_status]: error.message,
-						},
-					},
-				]);
-				return;
-			}
-		},
-		[setPartialPhoneNumber, setStep],
-	);
-
 	return (
 		<div className={classes["root"]}>
 			<Typography typo={ITypo.H1}>
@@ -70,11 +40,11 @@ export default function StepEmail(props: IProps) {
 			<Typography className={classes["or"]} typo={ITypo.P_16}>
 				Ou
 			</Typography>
-			<Form className={classes["form"]} onSubmit={onSubmitHandler}>
+			<Form className={classes["form"]} onSubmit={onSubmit}>
 				<TextField
 					placeholder="E-mail"
 					name="email"
-					validationError={validationError.find((error) => error.property === "email")}
+					validationError={validationErrors.find((error) => error.property === "email")}
 				/>
 				<Button type="submit" variant={EButtonVariant.PRIMARY} className={classes["submit_button"]}>
 					Suivant
diff --git a/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx b/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx
index 421ea78f..c71044ee 100644
--- a/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx
+++ b/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx
@@ -1,62 +1,29 @@
-import React, { useCallback, useState } from "react";
+import React from "react";
 import classes from "./classes.module.scss";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
-import Image from "next/image";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
-import franceConnectLogo from "./france-connect.svg";
-import { useRouter } from "next/router";
-import Customers from "@Front/Api/Auth/Id360/Customers/Customers";
 import { ValidationError } from "class-validator";
-import { LoginStep } from "..";
-import Auth from "@Front/Api/Auth/Customer/Auth";
 type IProps = {
-	setStep: (step: LoginStep) => void;
-	setTotpCode: (code: string) => void;
+	onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
+	validationErrors: ValidationError[];
 	partialPhoneNumber: string;
 };
 
 export default function StepTotp(props: IProps) {
-	const { setStep, setTotpCode, partialPhoneNumber } = props;
-	const [validationError, setValidationError] = useState<ValidationError[]>([]);
-	const router = useRouter();
-	const onSubmitHandler = useCallback(
-		async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
-			try {
-				if (!values["email"]) return;
-				const res = await Auth.getInstance().mailVerifySms({ email: values["email"] });
-				setStep(LoginStep.TOTP);
-			} catch (error: any) {
-				// If token already exists and is still valid redirect to the connect/register page
-				if (error.http_status === 425) {
-					setStep(LoginStep.TOTP);
-					return;
-				}
-				setValidationError([
-					{
-						property: "code",
-						constraints: {
-							[error.http_status]: error.message,
-						},
-					},
-				]);
-				return;
-			}
-		},
-		[setStep],
-	);
+	const { onSubmit, validationErrors, partialPhoneNumber } = props;
 
 	return (
 		<div className={classes["root"]}>
 			<Typography typo={ITypo.H1}>
 				<div className={classes["title"]}>Votre code a été envoyé par SMS au ** ** ** {partialPhoneNumber}</div>
 			</Typography>
-			<Form className={classes["form"]} onSubmit={onSubmitHandler}>
+			<Form className={classes["form"]} onSubmit={onSubmit}>
 				<TextField
 					placeholder="Code à usage unique"
-					name="email"
-					validationError={validationError.find((error) => error.property === "code")}
+					name="totpCode"
+					validationError={validationErrors.find((error) => error.property === "totpCode")}
 				/>
 				<Button type="submit" variant={EButtonVariant.PRIMARY} className={classes["submit_button"]}>
 					Suivant
diff --git a/src/front/Components/Layouts/LoginCustomer/index.tsx b/src/front/Components/Layouts/LoginCustomer/index.tsx
index 16901f60..7a4267c1 100644
--- a/src/front/Components/Layouts/LoginCustomer/index.tsx
+++ b/src/front/Components/Layouts/LoginCustomer/index.tsx
@@ -8,6 +8,8 @@ import LandingImage from "./landing-connect.jpeg";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import StepEmail from "./StepEmail";
 import StepTotp from "./StepTotp";
+import Auth from "@Front/Api/Auth/Customer/Auth";
+import { ValidationError } from "class-validator";
 
 export enum LoginStep {
 	EMAIL,
@@ -22,8 +24,9 @@ export default function Login() {
 
 	const [step, setStep] = useState<LoginStep>(LoginStep.EMAIL);
 	const [totpCode, setTotpCode] = useState<string>("");
+	const [email, setEmail] = useState<string>("");
 	const [partialPhoneNumber, setPartialPhoneNumber] = useState<string>("");
-
+	const [validationErrors, setValidationErrors] = useState<ValidationError[]>([]);
 	const openErrorModal = useCallback(() => {
 		setIsErrorModalOpen(true);
 	}, []);
@@ -36,12 +39,66 @@ export default function Login() {
 		if (error === "1") openErrorModal();
 	}, [error, openErrorModal]);
 
+	const onEmailFormSubmit = useCallback(
+		async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
+			try {
+				if (!values["email"]) return;
+				const res = await Auth.getInstance().mailVerifySms({ email: values["email"] });
+				setPartialPhoneNumber(res.partialPhoneNumber);
+				setEmail(values["email"]);
+				setStep(LoginStep.TOTP);
+			} catch (error: any) {
+				// If token already exists and is still valid redirect to the connect/register page
+				if (error.http_status === 425) {
+					setStep(LoginStep.TOTP);
+					return;
+				}
+				setValidationErrors([
+					{
+						property: "email",
+						constraints: {
+							[error.http_status]: error.message,
+						},
+					},
+				]);
+				return;
+			}
+		},
+		[setEmail, setPartialPhoneNumber, setStep],
+	);
+
+	const onSmsCodeSubmit = useCallback(
+		async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
+			try {
+				if (!values["totpCode"]) return;
+				const res = await Auth.getInstance().verifyTotpCode({ totpCode: values["totpCode"], email });
+				if (res.validCode) {
+					setTotpCode(values["totpCode"]);
+					setStep(LoginStep.NEW_PASSWORD);
+				}
+			} catch (error: any) {
+				setValidationErrors([
+					{
+						property: "totpCode",
+						constraints: {
+							[error.http_status]: error.message,
+						},
+					},
+				]);
+				return;
+			}
+		},
+		[email, setStep],
+	);
 	return (
 		<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
 			<div className={classes["root"]}>
-				{step === LoginStep.EMAIL && <StepEmail setPartialPhoneNumber={setPartialPhoneNumber} setStep={setStep} />}
+				{step === LoginStep.EMAIL && <StepEmail onSubmit={onEmailFormSubmit} validationErrors={validationErrors} />}
 				{step === LoginStep.TOTP && (
-					<StepTotp setStep={setStep} setTotpCode={setTotpCode} partialPhoneNumber={partialPhoneNumber} />
+					<StepTotp onSubmit={onSmsCodeSubmit} validationErrors={validationErrors} partialPhoneNumber={partialPhoneNumber} />
+				)}
+				{step === LoginStep.NEW_PASSWORD && (
+					<StepTotp onSubmit={onSmsCodeSubmit} validationErrors={validationErrors} partialPhoneNumber={partialPhoneNumber} />
 				)}
 			</div>
 			<Confirm