Fix: added toast warning when user enter incorrect data during login (#…

…31)
moiskillnadne · Dec 25, 2024 · ed51089 · ed51089
1 parent b7f931a
commit ed51089
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 16 deletions.
diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json
@@ -84,6 +84,13 @@
     "done": "Done",
     "showMore": "Show more",
     "hide": "Hide",
-    "deviceForFastLoginAdded": "The device has been added"
+    "deviceForFastLoginAdded": "The device has been added",
+    "code": {
+      "shouldContainSixDigits": "The code must contain exactly 6 digits."
+    },
+    "email": {
+      "emailCannotBeEmpty": "Please enter your email address.",
+      "invalidEmail": "Please enter a valid email address."
+    }
   }
 }
diff --git a/src/i18n/ru/translation.json b/src/i18n/ru/translation.json
@@ -84,6 +84,13 @@
     "done": "Готово",
     "showMore": "Показать больше",
     "hide": "Скрыть",
-    "deviceForFastLoginAdded": "Устройство добавлено"
+    "deviceForFastLoginAdded": "Устройство добавлено",
+    "code": {
+      "shouldContainSixDigits": "Код должен содержать ровно 6 цифр"
+    },
+    "email": {
+      "emailCannotBeEmpty": "Пожалуйста, введите адрес электронной почты.",
+      "invalidEmail": "Пожалуйста, введите корректный адрес электронной почты."
+    }
   }
 }
diff --git a/src/widget/Login/ui/index.tsx b/src/widget/Login/ui/index.tsx
@@ -20,11 +20,14 @@ import { Routes } from '~/shared/constants'
 import { useToast } from '~/shared/hooks'
 import { Typography } from '~/shared/ui'
 
-const emailSchema = z.string().email()
+const emailSchema = z
+  .string()
+  .min(1, 'email.emailCannotBeEmpty')
+  .email('email.invalidEmail')
 
 const codeSchema = z
   .string()
-  .regex(/^\d{6}$/, { message: 'Код должен содержать ровно 6 цифр' })
+  .regex(/^\d{6}$/, { message: 'code.shouldContainSixDigits' })
 
 export const LoginWidget = () => {
   const { t } = useCustomTranslation()
@@ -33,8 +36,13 @@ export const LoginWidget = () => {
 
   const hintRef = useRef(null)
 
-  const { showPromiseToast, dismissAllToasts, showErrorToast, showInfoToast } =
-    useToast()
+  const {
+    showPromiseToast,
+    dismissAllToasts,
+    showErrorToast,
+    showInfoToast,
+    showWarningToast,
+  } = useToast()
 
   const codeInputHeight = new Map([
     [true, '40px'],
@@ -95,16 +103,17 @@ export const LoginWidget = () => {
     const safeParse = emailSchema.safeParse(email)
 
     if (safeParse.error) {
-      throw new Error(JSON.stringify(safeParse.error))
+      showWarningToast(t(safeParse.error.errors[0].message))
+      throw new Error(safeParse.error.errors[0].message)
     }
 
     return safeParse.data
-  }, [email])
+  }, [email, showWarningToast])
 
   const loginOTP = useCallback(async () => {
-    const emailValue = processEmailValue()
+    const safeEmail = processEmailValue()
 
-    showPromiseToast(tryLoginPromise(emailValue), {
+    return showPromiseToast(tryLoginPromise(safeEmail), {
       pending: t('sendingEmail'),
       success: t('emailSent'),
       error: t('failedToSendEmail'),
@@ -121,20 +130,24 @@ export const LoginWidget = () => {
     const codeSafeParse = codeSchema.safeParse(code)
 
     if (codeSafeParse.error) {
-      throw new Error(JSON.stringify(codeSafeParse.error))
+      return showWarningToast(t(codeSafeParse.error.errors[0].message))
     }
 
-    showPromiseToast(confirmLoginPromise(emailValue, codeSafeParse.data), {
-      pending: t('sendingCode'),
-      success: t('codeSent'),
-      error: t('failedToSendCode'),
-    })
+    return showPromiseToast(
+      confirmLoginPromise(emailValue, codeSafeParse.data),
+      {
+        pending: t('sendingCode'),
+        success: t('codeSent'),
+        error: t('failedToSendCode'),
+      },
+    )
   }, [
     code,
     confirmLoginPromise,
     isEmailSent,
     processEmailValue,
     showPromiseToast,
+    showWarningToast,
     t,
   ])