Merge pull request #1909 from Web3Auth/fix/passwordless-input-errors

Fix/passwordless input errors
Web3Auth · Aug 30, 2024 · 9252077 · 9252077
2 parents cc7c60f + 6c09a7f
commit 9252077
Show file tree

Hide file tree

Showing 11 changed files with 49 additions and 12 deletions.
diff --git a/packages/ui/src/components/SocialLoginPasswordless.tsx b/packages/ui/src/components/SocialLoginPasswordless.tsx
@@ -28,17 +28,24 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr
   const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const value = fieldValue;
-    const isEmailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
-    if (isEmailValid) {
-      return handleSocialLoginClick({ adapter, loginParams: { loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS, login_hint: value, name: "Email" } });
+    if (isEmailVisible) {
+      const isEmailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
+      if (isEmailValid) {
+        return handleSocialLoginClick({
+          adapter,
+          loginParams: { loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS, login_hint: value, name: "Email" },
+        });
+      }
     }
-    const number = value.startsWith("+") ? value : `${countryCode}${value}`;
-    const result = await validatePhoneNumber(number);
-    if (result) {
-      return handleSocialLoginClick({
-        adapter,
-        loginParams: { loginProvider: LOGIN_PROVIDER.SMS_PASSWORDLESS, login_hint: typeof result === "string" ? result : number, name: "Mobile" },
-      });
+    if (isSmsVisible) {
+      const number = value.startsWith("+") ? value : `${countryCode}${value}`;
+      const result = await validatePhoneNumber(number);
+      if (result) {
+        return handleSocialLoginClick({
+          adapter,
+          loginParams: { loginProvider: LOGIN_PROVIDER.SMS_PASSWORDLESS, login_hint: typeof result === "string" ? result : number, name: "Mobile" },
+        });
+      }
     }
 
     setIsValidInput(false);
@@ -72,6 +79,12 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr
     return "+(00)123456";
   }, [isEmailVisible, isSmsVisible]);
 
+  const invalidInputErrorMessage = useMemo(() => {
+    if (isEmailVisible && isSmsVisible) return "modal.errors-invalid-number-email";
+    if (isEmailVisible) return "modal.errors-invalid-email";
+    return "modal.errors-invalid-number";
+  }, [isEmailVisible, isSmsVisible]);
+
   return (
     <div className="w3ajs-passwordless w3a-group w3a-group--passwordless">
       <div className="w3a-group__title">
@@ -81,7 +94,11 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr
             <Icon iconName={`information-circle${isDark ? "-light" : ""}`} />
             <div className="absolute z-20 flex-col items-center hidden mb-5 top-4 group-hover:flex">
               <div className="w-3 h-3 ml-[3px] -mb-2 rotate-45 bg-app-gray-50 dark:bg-app-gray-600" />
-              <div className="relative p-4 w-[300px] text-xs leading-none text-app-white rounded-md bg-app-gray-50 dark:bg-app-gray-600 shadow-lg">
+              <div
+                className={`relative p-4 w-[300px] text-xs leading-none text-app-white rounded-md bg-app-gray-50 dark:bg-app-gray-600 shadow-lg ${
+                  isSmsVisible && !isEmailVisible ? "left-20" : "left-8"
+                }`}
+              >
                 <div className="mb-1 text-xs font-medium text-app-gray-900 dark:text-app-white">{t("modal.popup.phone-header")}</div>
                 <div className="text-xs text-app-gray-400">{t("modal.popup.phone-body")}</div>
               </div>
@@ -104,7 +121,7 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr
           onChange={(e) => handleInputChange(e)}
         />
 
-        {isValidInput === false && <div className="w3a-sms-field--error">{t("modal.errors-invalid-number-email")}</div>}
+        {isValidInput === false && <div className="w3a-sms-field--error">{t(invalidInputErrorMessage)}</div>}
 
         <Button variant={isPrimaryBtn ? "primary" : "tertiary"} disabled={fieldValue === ""} className="w-full" type="submit">
           {t("modal.social.passwordless-cta")}

diff --git a/packages/ui/src/i18n/dutch.json b/packages/ui/src/i18n/dutch.json
@@ -4,6 +4,8 @@
     "adapter-loader.message1": "Verifieer uw {{adapter}}",
     "adapter-loader.message2": "account om door te gaan",
     "errors-invalid-number-email": "Ongeldig e-mailadres of telefoonnummer",
+    "errors-invalid-number": "Ongeldig telefoonnummer",
+    "errors-invalid-email": "Ongeldig e-mailadres",
     "errors-required": "Vereist",
     "external.back": "Terug",
     "external.connect": "Verbinden met portemonnee",

diff --git a/packages/ui/src/i18n/english.json b/packages/ui/src/i18n/english.json
@@ -4,6 +4,8 @@
     "adapter-loader.message1": "Verify your {{adapter}}",
     "adapter-loader.message2": "account to continue",
     "errors-invalid-number-email": "Invalid Email or Phone Number",
+    "errors-invalid-number": "Invalid Phone Number",
+    "errors-invalid-email": "Invalid Email",
     "errors-required": "Required",
     "external.back": "Back",
     "external.connect": "Connect with Wallet",

diff --git a/packages/ui/src/i18n/french.json b/packages/ui/src/i18n/french.json
@@ -4,6 +4,8 @@
     "adapter-loader.message1": "Vérifiez votre {{adapter}}",
     "adapter-loader.message2": "compte pour continuer",
     "errors-invalid-number-email": "Adresse e-mail ou numéro de téléphone invalide",
+    "errors-invalid-number": "Numéro de téléphone invalide",
+    "errors-invalid-email": "E-mail invalide",
     "errors-required": "Champ obligatoire",
     "external.back": "Retour",
     "external.connect": "Se connecter avec un portefeuille",

diff --git a/packages/ui/src/i18n/german.json b/packages/ui/src/i18n/german.json
@@ -4,6 +4,8 @@
     "adapter-loader.message1": "Bestätigen Sie Ihr {{adapter}}",
     "adapter-loader.message2": "Konto fortzusetzen",
     "errors-invalid-number-email": "Ungültige E-Mail-Adresse oder Telefonnummer",
+    "errors-invalid-number": "Ungültige Telefonnummer",
+    "errors-invalid-email": "Ungültige E-Mail",
     "errors-required": "Erforderlich",
     "external.back": "Zurück",
     "external.connect": "Mit Wallet verbinden",

diff --git a/packages/ui/src/i18n/japanese.json b/packages/ui/src/i18n/japanese.json
@@ -4,6 +4,8 @@
     "adapter-loader.message1": "{{adapter}} を確認する",
     "adapter-loader.message2": "続行するアカウント",
     "errors-invalid-number-email": "無効なメールアドレスまたは電話番号",
+    "errors-invalid-number": "無効な電話番号",
+    "errors-invalid-email": "無効な電子メール",
     "errors-required": "必須",
     "external.back": "戻る",
     "external.connect": "ウォレットと接続",

diff --git a/packages/ui/src/i18n/korean.json b/packages/ui/src/i18n/korean.json
@@ -4,6 +4,8 @@
     "adapter-loader.message1": "{{adapter}} 확인",
     "adapter-loader.message2": "계속할 계정",
     "errors-invalid-number-email": "잘못된 이메일 또는 전화번호",
+    "errors-invalid-number": "잘못된 전화번호",
+    "errors-invalid-email": "잘못된 이메일",
     "errors-required": "필수",
     "external.back": "뒤로",
     "external.connect": "지갑에 연결",

diff --git a/packages/ui/src/i18n/mandarin.json b/packages/ui/src/i18n/mandarin.json
@@ -4,6 +4,8 @@
     "adapter-loader.message1": "在您的{{adapter}}上验证",
     "adapter-loader.message2": "帐号继续",
     "errors-invalid-number-email": "无效的电子邮件或电话号码",
+    "errors-invalid-number": "电话号码无效",
+    "errors-invalid-email": "无效的电子邮件",
     "errors-required": "必填",
     "external.back": "返回",
     "external.connect": "使用钱包连接",

diff --git a/packages/ui/src/i18n/portuguese.json b/packages/ui/src/i18n/portuguese.json
@@ -4,6 +4,8 @@
     "adapter-loader.message1": "Verifique o(a) seu/sua {{adapter}}",
     "adapter-loader.message2": "conta para continuar",
     "errors-invalid-number-email": "Email ou número de telefone inválido",
+    "errors-invalid-number": "Número de telefone inválido",
+    "errors-invalid-email": "E-mail inválido",
     "errors-required": "Obrigatório",
     "external.back": "Voltar",
     "external.connect": "Conectar com carteira",

diff --git a/packages/ui/src/i18n/spanish.json b/packages/ui/src/i18n/spanish.json
@@ -4,6 +4,8 @@
     "adapter-loader.message1": "Verifique su {{adapter}}",
     "adapter-loader.message2": "cuenta para continuar",
     "errors-invalid-number-email": "Correo electrónico o número de teléfono inválido",
+    "errors-invalid-number": "Número de teléfono no válido",
+    "errors-invalid-email": "Correo electrónico no válido",
     "errors-required": "Campo obligatorio",
     "external.back": "Atrás",
     "external.connect": "Conectar con la billetera",

diff --git a/packages/ui/src/i18n/turkish.json b/packages/ui/src/i18n/turkish.json
@@ -4,6 +4,8 @@
     "adapter-loader.message1": "{{adapter}} doğrula",
     "adapter-loader.message2": "devam edecek hesap",
     "errors-invalid-number-email": "Geçersiz E-posta veya Telefon Numarası",
+    "errors-invalid-number": "Geçersiz Telefon Numarası",
+    "errors-invalid-email": "Geçersiz E-posta",
     "errors-required": "Zorunlu",
     "external.back": "Geri",
     "external.connect": "Cüzdan ile Bağlan",