diff --git a/packages/ui/src/components/SocialLoginPasswordless.tsx b/packages/ui/src/components/SocialLoginPasswordless.tsx index a036047f2..fcd9fdadd 100644 --- 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) => { 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 (
@@ -81,7 +94,11 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr
-
+
{t("modal.popup.phone-header")}
{t("modal.popup.phone-body")}
@@ -104,7 +121,7 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr onChange={(e) => handleInputChange(e)} /> - {isValidInput === false &&
{t("modal.errors-invalid-number-email")}
} + {isValidInput === false &&
{t(invalidInputErrorMessage)}
}