✨ Totpcode resend by uid

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);

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"]}>
+				{secondsBeforeNewCode !== 0 && (
-					Redemandez un code dans
+					<Typography typo={ITypo.P_SB_16} className={classes["new-code-timer"]}>
-					<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
+						Redemandez un code dans
-						00:{secondsBeforeNewCode < 10 ? `0${secondsBeforeNewCode}` : secondsBeforeNewCode}
+						<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
+							00:{secondsBeforeNewCode < 10 ? `0${secondsBeforeNewCode}` : secondsBeforeNewCode}
+						</Typography>
 					</Typography>
-				</Typography>
+				)}
 			</div>
 		</div>
 	);

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(
+	const onEmailFormSubmit = useCallback(async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
-		async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
+		try {
-			try {
+			if (!values["email"]) return;
-				if (!values["email"]) return;
+			setEmail(values["email"]);
-				setEmail(values["email"]);
+			const res = await Auth.getInstance().mailVerifySms({ email: values["email"] });
-				const res = await Auth.getInstance().mailVerifySms({ email: values["email"] });
+			setPartialPhoneNumber(res.partialPhoneNumber);
-				setPartialPhoneNumber(res.partialPhoneNumber);
+			setTotpCodeUid(res.totpCodeUid);
-				setStep(LoginStep.TOTP);
+			setStep(LoginStep.TOTP);
-			} catch (error: any) {
+		} catch (error: any) {
-				// If token already exists and is still valid redirect to the connect/register page
+			setValidationErrors([
-				if (error.http_status === 425) {
+				{
-					setStep(LoginStep.TOTP);
+					property: "email",
-					return;
+					constraints: {
-				}
+						[error.http_status]: error.message,
-				setValidationErrors([
-					{
-						property: "email",
-						constraints: {
-							[error.http_status]: error.message,
-						},
 					},
-				]);
+				},
-				return;
+			]);
-			}
+			return;
-		},
+		}
-		[setEmail, setPartialPhoneNumber, setStep],
+	}, []);
-	);
 
 	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}>