🎨 Feat: improved the otp error display (#70)

- Added an error display when an error occurs while sending the OTP - Added an error display when an error occurs while checking the OTP
linagora · Mar 6, 2024 · e4c36d9 · e4c36d9
2 parents 8459d96 + 15f796c
commit e4c36d9
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 7 deletions.
diff --git a/registration/src/lib/components/forms/steps/CheckOTPStep.svelte b/registration/src/lib/components/forms/steps/CheckOTPStep.svelte
@@ -75,6 +75,13 @@
 						{$t('entered-code-is-incorrect-try-again')}
 					</div>
 				{/if}
+				{#if $form?.check_failed}
+					<div
+						class="text-xs font-medium leading-4 tracking-tight text-center text-error px-5 pt-1"
+					>
+						{$t('otp-check-failed')}
+					</div>
+				{/if}
 				{#if timeout}
 					<div
 						class="text-xs font-medium leading-4 tracking-tight text-center text-error px-5 pt-1"

diff --git a/registration/src/lib/components/forms/steps/CheckPhoneStep.svelte b/registration/src/lib/components/forms/steps/CheckPhoneStep.svelte
@@ -71,6 +71,10 @@
 		<div class="text-xs font-medium leading-4 pt-1 tracking-wide text-left text-error px-5">
 			{$t('invalid phone number')}
 		</div>
+	{:else if $form?.send_failed}
+		<div class="text-xs font-medium leading-4 pt-1 tracking-wide text-left text-error px-5">
+			{$t('failed-to-send-otp')}
+		</div>
 	{:else if phoneTaken}
 		<div class="relative w-full">
 			<UsedPhone checked={phoneChecked} />

diff --git a/registration/src/lib/i18n/ar.json b/registration/src/lib/i18n/ar.json
@@ -83,5 +83,7 @@
   "set-a-strong-password-with-letters-numbers-and-symbols": "قم بتعيين كلمة مرور قوية مكونة من أحرف وأرقام ورموز",
   "Faster-and-more-convenient": "أسرع وأكثر ملاءمة",
   "download-app": "قم بتنزيل تطبيق {name} الجديد",
-  "Download": "تحميل"
+  "Download": "تحميل",
+  "failed-to-send-otp": "فشل إرسال كلمة المرور، يرجى المحاولة مرة أخرى لاحقًا",
+  "otp-check-failed": "فشل التحقق من كلمة المرور، يرجى محاولة إرسال رمز جديد"
 }
diff --git a/registration/src/lib/i18n/en.json b/registration/src/lib/i18n/en.json
@@ -82,5 +82,7 @@
   "set-a-strong-password-with-letters-numbers-and-symbols": "Set a strong password with letters, numbers, and symbols",
   "download-app": "Download the new {name} app",
   "Faster-and-more-convenient": "Faster and more convenient",
-  "Download": "Download"
+  "Download": "Download",
+  "failed-to-send-otp": "Failed to send OTP, please try again later",
+  "otp-check-failed": "Failed to check OTP, please try a sending a new code"
 }
diff --git a/registration/src/lib/i18n/fr.json b/registration/src/lib/i18n/fr.json
@@ -83,5 +83,7 @@
   "set-a-strong-password-with-letters-numbers-and-symbols": "Définissez un mot de passe fort avec des lettres, des chiffres et des symboles",
   "Faster-and-more-convenient": "Plus rapide et plus pratique",
   "download-app": "Téléchargez la nouvelle application {name}",
-  "Download": "Télécharger"
+  "Download": "Télécharger",
+  "failed-to-send-otp": "Échec de l'envoi d'OTP, veuillez réessayer plus tard",
+  "otp-check-failed": "Échec de la vérification d'OTP, veuillez essayer d'envoyer un nouveau code"
 }
diff --git a/registration/src/lib/i18n/ru.json b/registration/src/lib/i18n/ru.json
@@ -83,5 +83,7 @@
   "set-a-strong-password-with-letters-numbers-and-symbols": "Установите надежный пароль с буквами, цифрами и символами.",
   "Faster-and-more-convenient": "Быстрее и удобнее",
   "download-app": "Загрузите новое приложение {name}",
-  "Download": "Скачать"
+  "Download": "Скачать",
+  "failed-to-send-otp": "Не удалось отправить OTP. Повторите попытку позже.",
+  "otp-check-failed": "Не удалось проверить OTP. Попробуйте отправить новый код."
 }
diff --git a/registration/src/lib/i18n/vi.json b/registration/src/lib/i18n/vi.json
@@ -83,5 +83,7 @@
   "set-a-strong-password-with-letters-numbers-and-symbols": "Đặt mật khẩu mạnh bằng chữ cái, số và ký hiệu",
   "Faster-and-more-convenient": "Nhanh hơn và thuận tiện hơn",
   "download-app": "Tải xuống ứng dụng {name} mới",
-  "Download": "Tải xuống"
+  "Download": "Tải xuống",
+  "failed-to-send-otp": "Không gửi được OTP, vui lòng thử lại sau",
+  "otp-check-failed": "Không kiểm tra được OTP, vui lòng thử gửi mã mới"
 }
diff --git a/registration/src/lib/services/otp/index.ts b/registration/src/lib/services/otp/index.ts
@@ -102,6 +102,10 @@ export const verify = async (
 			return 'wrong';
 		}
 
+		if (json.code === 198) {
+			throw Error('OTP Request not found');
+		}
+
 		return 'timeout';
 	} catch (error) {
 		logger.error(`Failed to verify OTP for ${phone}`, error);

diff --git a/registration/src/routes/+page.server.ts b/registration/src/routes/+page.server.ts
@@ -167,7 +167,7 @@ export const actions: Actions = {
 		} catch (error) {
 			logger.error(`error sending OTP to ${data.phone}`, error);
 
-			return fail(400, { message: 'Failed to send OTP' });
+			return fail(400, { message: 'Failed to send OTP', send_failed: true });
 		}
 	},
 
@@ -247,7 +247,7 @@ export const actions: Actions = {
 		} catch (error) {
 			logger.error(`error checking OTP for ${session.data.phone}`, error);
 
-			return fail(400, { message: 'Failed to check OTP' });
+			return fail(400, { message: 'Failed to check OTP', check_failed: true });
 		}
 	},