From 75a9fa4f3e07ca34c9a0658d21c12ed95c6096eb Mon Sep 17 00:00:00 2001
From: Khaled FERJANI <kferjani@linagora.com>
Date: Wed, 7 Feb 2024 17:13:25 +0100
Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8=20Add=20check=20OTP=20step?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../forms/steps/CheckOTPStep.svelte           | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 registration/src/lib/components/forms/steps/CheckOTPStep.svelte

diff --git a/registration/src/lib/components/forms/steps/CheckOTPStep.svelte b/registration/src/lib/components/forms/steps/CheckOTPStep.svelte
new file mode 100644
index 0000000..49a2556
--- /dev/null
+++ b/registration/src/lib/components/forms/steps/CheckOTPStep.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import PrimaryButton from '$lib/components/button/PrimaryButton.svelte';
+	import OtpField from '$lib/components/input/OtpField.svelte';
+	import { maskPhone } from '$lib/utils/phone';
+	import { t } from 'svelte-i18n';
+
+	export let handler: () => void = () => {};
+	export let phone: string = '+21652128155';
+
+	let value = '';
+	let resendCounter = 60;
+	let sendOtpForm: HTMLFormElement;
+
+	setInterval(() => {
+		if (resendCounter > 0) resendCounter--;
+	}, 1000);
+
+	const handleSendOtp = () => {
+		if (!phone || !value) return;
+
+		if (resendCounter > 0) return;
+
+		sendOtpForm.requestSubmit();
+
+		resendCounter = 60;
+	};
+
+	$: disabled = value.length < 6;
+</script>
+
+<form use:enhance action="?/sendOtp" method="POST" class="hidden" bind:this={sendOtpForm}>
+	<input type="text" name="phone" bind:value={phone} required />
+</form>
+
+<div class="flex flex-col px-4 lg:px-0 lg:h-fit h-screen">
+	<div class="w-[386px] h-20" />
+	<div class="h-28 py-4 flex-col justify-start items-center gap-1 flex">
+		<div class="self-stretch text-center text-zinc-900 text-[22px] font-semibold leading-7">
+			{$t('Confirm-your-code')}
+		</div>
+		<div class="text-center flex flex-col">
+			<span class="text-gray-400 text-base font-normal leading-normal">{$t('6-digit')}</span><span
+				class="text-zinc-900 text-base font-semibold leading-normal tracking-tight"
+				>{maskPhone(phone)}</span
+			>
+		</div>
+	</div>
+	<div class="py-4 flex p-[16px] flex-col items-center gap-[12px] self-stretch">
+		<OtpField bind:value />
+	</div>
+	<div class="w-[386px] h-[236px]" />
+	<div class="mt-auto py-4">
+		<PrimaryButton ariaLabel="next" {disabled} {handler}>{$t('Next')}</PrimaryButton>
+		<div class="w-full h-12 px-6 py-3.5 justify-center items-center inline-flex">
+			<div class="text-center flex space-x-1">
+				<span class="text-gray-400 text-sm font-medium leading-tight tracking-tight"
+					>Didn't get the code?</span
+				>
+				<button type="button" disabled={resendCounter > 0} on:click={handleSendOtp}>
+					{#if resendCounter === 0}
+						<div class="text-primary text-sm font-medium leading-tight tracking-tight">
+							{$t('Resend')}
+						</div>
+					{:else}
+						<div class="text-gray-400 text-sm font-medium leading-tight tracking-tight">
+							{$t('Resend-in')}: 0:{resendCounter}
+						</div>
+					{/if}
+				</button>
+			</div>
+		</div>
+	</div>
+</div>

From 08d100be00a337f10e3d4297a74ff7fc904cb548 Mon Sep 17 00:00:00 2001
From: Khaled FERJANI <kferjani@linagora.com>
Date: Wed, 7 Feb 2024 17:13:52 +0100
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=8C=90=20Added=20translation=20for=20?=
 =?UTF-8?q?check=20otp=20strings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 registration/src/lib/i18n/ar.json | 5 ++++-
 registration/src/lib/i18n/en.json | 7 +++++--
 registration/src/lib/i18n/fr.json | 5 ++++-
 registration/src/lib/i18n/ru.json | 5 ++++-
 registration/src/lib/i18n/vi.json | 5 ++++-
 5 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/registration/src/lib/i18n/ar.json b/registration/src/lib/i18n/ar.json
index bcf0ce2..74c3fee 100644
--- a/registration/src/lib/i18n/ar.json
+++ b/registration/src/lib/i18n/ar.json
@@ -71,5 +71,8 @@
   "Your-phone-number": "رقم الهاتف",
   "Please confirm your country code and enter your phone number": "يرجى تأكيد رمز البلد الخاص بك وإدخال رقم هاتفك.",
   "please-confirm": "يرجى تأكيد رمز البلد الخاص بك وإدخال رقم هاتفك.",
-  "Next": "التالي"
+  "Next": "التالي",
+  "Confirm-your-code": "قم بتأكيد الرمز الخاص بك",
+  "Resend": "إعادة إرسال",
+  "Resend-in": "إعادة الإرسال في"
 }
diff --git a/registration/src/lib/i18n/en.json b/registration/src/lib/i18n/en.json
index 41cac41..22f49e6 100644
--- a/registration/src/lib/i18n/en.json
+++ b/registration/src/lib/i18n/en.json
@@ -31,7 +31,7 @@
   "Number is already registered": "Number is already registered.",
   "instead": "instead",
   "Phone number confirmation": "Phone number confirmation",
-  "Enter 6 digit code we sent to": "Enter 6 digit code we sent to",
+  "6-digit": "Enter 6 digit code we've sent to",
   "Code": "Code",
   "Send code": "Send code again",
   "Confirm": "Confirm",
@@ -70,5 +70,8 @@
   "Search": "Search",
   "Your-phone-number": "Your phone number",
   "please-confirm": "Please confirm your country code and enter your phone number.",
-  "Next": "Next"
+  "Next": "Next",
+  "Confirm-your-code": "Confirm your code",
+  "Resend": "Resend",
+  "Resend-in": "Resend in"
 }
diff --git a/registration/src/lib/i18n/fr.json b/registration/src/lib/i18n/fr.json
index a72c0f2..275b603 100644
--- a/registration/src/lib/i18n/fr.json
+++ b/registration/src/lib/i18n/fr.json
@@ -71,5 +71,8 @@
   "Your-phone-number": "Votre numéro de téléphone",
   "Please confirm your country code and enter your phone number": "Veuillez confirmer votre code pays et saisir votre numéro de téléphone.",
   "please-confirm": "Veuillez confirmer votre code pays et saisir votre numéro de téléphone.",
-  "Next": "Suivant"
+  "Next": "Suivant",
+  "Confirm-your-code": "Confirmez votre code",
+  "Resend": "Renvoyer",
+  "Resend-in": "Renvoyer dans"
 }
diff --git a/registration/src/lib/i18n/ru.json b/registration/src/lib/i18n/ru.json
index e724af7..7cb59d3 100644
--- a/registration/src/lib/i18n/ru.json
+++ b/registration/src/lib/i18n/ru.json
@@ -71,5 +71,8 @@
   "Your-phone-number": "Ваш номер телефона",
   "Please confirm your country code and enter your phone number": "Пожалуйста, подтвердите код страны и введите свой номер телефона.",
   "please-confirm": "Пожалуйста, подтвердите код страны и введите свой номер телефона.",
-  "Next": "Следующий"
+  "Next": "Следующий",
+  "Confirm-your-code": "Подтвердите свой код",
+  "Resend": "Отправить",
+  "Resend-in": "Отправить повторно"
 }
diff --git a/registration/src/lib/i18n/vi.json b/registration/src/lib/i18n/vi.json
index b2a3d79..cc1b37a 100644
--- a/registration/src/lib/i18n/vi.json
+++ b/registration/src/lib/i18n/vi.json
@@ -71,5 +71,8 @@
   "Your-phone-number": "Số điện thoại của bạn",
   "Please confirm your country code and enter your phone number": "Vui lòng xác nhận mã quốc gia và nhập số điện thoại của bạn.",
   "please-confirm": "Vui lòng xác nhận mã quốc gia và nhập số điện thoại của bạn.",
-  "Next": "Kế tiếp"
+  "Next": "Kế tiếp",
+  "Confirm-your-code": "Xác nhận mã của bạn",
+  "Resend": "Gửi lại",
+  "Resend-in": "Gửi lại"
 }

From 06127243478b9f94af818699f6139730a6e1ae2f Mon Sep 17 00:00:00 2001
From: Khaled FERJANI <kferjani@linagora.com>
Date: Wed, 7 Feb 2024 17:14:29 +0100
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20otp=20field=20wrappe?=
 =?UTF-8?q?r=20to=20better=20position=20elements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 registration/src/lib/components/input/OtpField.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/registration/src/lib/components/input/OtpField.svelte b/registration/src/lib/components/input/OtpField.svelte
index a1e02b0..575b4b6 100644
--- a/registration/src/lib/components/input/OtpField.svelte
+++ b/registration/src/lib/components/input/OtpField.svelte
@@ -6,7 +6,7 @@
 <SvelteOtp
 	numberOnly
 	inputClass="ring-2 ring-[#C9C5CA] focus:outline-none focus:ring-primary flex p-[10px] justify-center items-center rounded-[4px] w-[32.5px] text-center text-[17px] font-medium tracking-[0px] focus:ring-primary"
-	wrapperClass="flex items-start gap-[8px] self-stretch [&>*:nth-child(even)]:mr-4 font-[Inter]"
+	wrapperClass="flex items-center justify-center gap-[8px] self-stretch [&>*:nth-child(even)]:mr-4 font-[Inter]"
 	numOfInputs={6}
 	onlyShowMiddleSeparator
 	disableDefaultStyle

From 7d6d5693ba1421acd377d275dcb19674488d57f8 Mon Sep 17 00:00:00 2001
From: Khaled FERJANI <kferjani@linagora.com>
Date: Wed, 7 Feb 2024 17:17:31 +0100
Subject: [PATCH 4/4] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20Fixed=20typo=20in=20st?=
 =?UTF-8?q?ep=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 registration/src/lib/components/forms/steps/CheckOTPStep.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/registration/src/lib/components/forms/steps/CheckOTPStep.svelte b/registration/src/lib/components/forms/steps/CheckOTPStep.svelte
index 49a2556..c7d31b6 100644
--- a/registration/src/lib/components/forms/steps/CheckOTPStep.svelte
+++ b/registration/src/lib/components/forms/steps/CheckOTPStep.svelte
@@ -51,7 +51,7 @@
 	</div>
 	<div class="w-[386px] h-[236px]" />
 	<div class="mt-auto py-4">
-		<PrimaryButton ariaLabel="next" {disabled} {handler}>{$t('Next')}</PrimaryButton>
+		<PrimaryButton ariaLabel="next" {disabled} {handler}>{$t('Confirm')}</PrimaryButton>
 		<div class="w-full h-12 px-6 py-3.5 justify-center items-center inline-flex">
 			<div class="text-center flex space-x-1">
 				<span class="text-gray-400 text-sm font-medium leading-tight tracking-tight"