✨ Add check OTP step ( #6 )

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('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"
+					>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>

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

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": "إعادة الإرسال في"
 }

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"
 }

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"
 }

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": "Отправить повторно"
 }

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"
 }