From f4e843cdfb65274664be6b52561cd6e4ae10c1f4 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Fri, 1 Dec 2023 09:49:26 +0100
Subject: [PATCH] :sparkles: Totpcode resend by uid

---
 src/front/Api/Auth/Customer/Auth.ts           | 15 +++++-
 .../Layouts/LoginCustomer/StepTotp/index.tsx  | 14 ++---
 .../Layouts/LoginCustomer/index.tsx           | 53 +++++++++----------
 3 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/src/front/Api/Auth/Customer/Auth.ts b/src/front/Api/Auth/Customer/Auth.ts
index 906d939d..edb9a53d 100644
--- a/src/front/Api/Auth/Customer/Auth.ts
+++ b/src/front/Api/Auth/Customer/Auth.ts
@@ -8,6 +8,7 @@ export type IMailVerifyParams = {
 
 export type IMailVerifyReturn = {
 	partialPhoneNumber: string;
+	totpCodeUid: string;
 };
 
 export type IVerifyTotpCodeParams = {
@@ -36,6 +37,16 @@ export type IAskNewPasswordParams = {
 	email: string;
 };
 
+export type IAskAnotherCodeParams = {
+	email: string;
+	totpCodeUid: string;
+};
+
+export type IAskAnotherCodeReturn = {
+	partialPhoneNumber: string;
+	totpCodeUid: string;
+};
+
 export default class Auth extends BaseApiService {
 	private static instance: Auth;
 	protected readonly namespaceUrl = this.getBaseUrl().concat("/customer");
@@ -95,10 +106,10 @@ export default class Auth extends BaseApiService {
 		}
 	}
 
-	public async sendAnotherCode(body: IMailVerifyParams): Promise<IMailVerifyReturn> {
+	public async sendAnotherCode(body: IAskAnotherCodeParams): Promise<IAskAnotherCodeReturn> {
 		const url = new URL(this.baseURl.concat("/send-another-code"));
 		try {
-			return this.postRequest<IMailVerifyReturn>(url, body);
+			return this.postRequest<IAskAnotherCodeReturn>(url, body);
 		} catch (err) {
 			this.onError(err);
 			return Promise.reject(err);
diff --git a/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx b/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx
index 635a52de..73c4d312 100644
--- a/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx
+++ b/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx
@@ -19,7 +19,7 @@ export default function StepTotp(props: IProps) {
 
 	useEffect(() => {
 		const interval = setInterval(() => {
-			if (secondsBeforeNewCode > 0) {
+			if (secondsBeforeNewCode > 1) {
 				setSecondsBeforeNewCode(secondsBeforeNewCode - 1);
 			} else {
 				setDisableNewCodeButton(false);
@@ -61,12 +61,14 @@ export default function StepTotp(props: IProps) {
 					className={classes["new-code-button"]}>
 					Envoyer un nouveau code
 				</Button>
-				<Typography typo={ITypo.P_SB_16} className={classes["new-code-timer"]}>
-					Redemandez un code dans
-					<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
-						00:{secondsBeforeNewCode < 10 ? `0${secondsBeforeNewCode}` : secondsBeforeNewCode}
+				{secondsBeforeNewCode !== 0 && (
+					<Typography typo={ITypo.P_SB_16} className={classes["new-code-timer"]}>
+						Redemandez un code dans
+						<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
+							00:{secondsBeforeNewCode < 10 ? `0${secondsBeforeNewCode}` : secondsBeforeNewCode}
+						</Typography>
 					</Typography>
-				</Typography>
+				)}
 			</div>
 		</div>
 	);
diff --git a/src/front/Components/Layouts/LoginCustomer/index.tsx b/src/front/Components/Layouts/LoginCustomer/index.tsx
index c4f1e117..06626062 100644
--- a/src/front/Components/Layouts/LoginCustomer/index.tsx
+++ b/src/front/Components/Layouts/LoginCustomer/index.tsx
@@ -31,6 +31,7 @@ export default function Login() {
 	const [isErrorModalOpen, setIsErrorModalOpen] = useState(false);
 
 	const [step, setStep] = useState<LoginStep>(LoginStep.EMAIL);
+	const [totpCodeUid, setTotpCodeUid] = useState<string>("");
 	const [totpCode, setTotpCode] = useState<string>("");
 	const [email, setEmail] = useState<string>("");
 	const [partialPhoneNumber, setPartialPhoneNumber] = useState<string>("");
@@ -48,33 +49,26 @@ 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;
-				setEmail(values["email"]);
-				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;
-				}
-				setValidationErrors([
-					{
-						property: "email",
-						constraints: {
-							[error.http_status]: error.message,
-						},
+	const onEmailFormSubmit = useCallback(async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
+		try {
+			if (!values["email"]) return;
+			setEmail(values["email"]);
+			const res = await Auth.getInstance().mailVerifySms({ email: values["email"] });
+			setPartialPhoneNumber(res.partialPhoneNumber);
+			setTotpCodeUid(res.totpCodeUid);
+			setStep(LoginStep.TOTP);
+		} catch (error: any) {
+			setValidationErrors([
+				{
+					property: "email",
+					constraints: {
+						[error.http_status]: error.message,
 					},
-				]);
-				return;
-			}
-		},
-		[setEmail, setPartialPhoneNumber, setStep],
-	);
+				},
+			]);
+			return;
+		}
+	}, []);
 
 	const onSmsCodeSubmit = useCallback(
 		async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
@@ -179,7 +173,10 @@ export default function Login() {
 
 	const onSendAnotherCode = useCallback(async () => {
 		try {
-			await Auth.getInstance().sendAnotherCode({ email });
+			const res = await Auth.getInstance().sendAnotherCode({ email, totpCodeUid });
+
+			setPartialPhoneNumber(res.partialPhoneNumber);
+			setTotpCodeUid(res.totpCodeUid);
 		} catch (error: any) {
 			setValidationErrors([
 				{
@@ -191,7 +188,7 @@ export default function Login() {
 			]);
 			return;
 		}
-	}, [email]);
+	}, [email, totpCodeUid]);
 
 	return (
 		<DefaultDoubleSidePage title={"Login"} image={LandingImage}>