@everymatrix/user-login 1.61.1 → 1.62.0

package/dist/esm/user-login.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, h as h$2 } from './index-996f8854.js';
+import { r as registerInstance, h as h$2 } from './index-16e95691.js';
 
 const DEFAULT_LANGUAGE = 'en';
 const TRANSLATIONS = {
     "en": {
-        "invalidField": "This field is invalid",
+        "invalidField": "Sorry, that username/email address and/or password has not been recognized.",
         "forgotPassword": "Forgot Password",
         "userEmail": "Username or Email",
         "userPhone": "Phone number",
@@ -16,10 +16,11 @@ const TRANSLATIONS = {
         "GmErr_USER_ACCOUNT_BLOCKED": "You’re currently unable to login to your account - please contact Customer Services for more information.",
         "setUpPassowrd": "You need to reset your password",
         "Unauthorized": "The player account number, e-mail address or password is incorrect",
-        "CountryRestricted": "Registration is not possible from a restricted jurisdiction. If you encounter further issues, please contact support."
+        "CountryRestricted": "Registration is not possible from a restricted jurisdiction. If you encounter further issues, please contact support.",
+        "configError": "An unexpected error has occured when fetchig the configuration"
     },
     "tr": {
-        "invalidField": "Bu alan geçersiz",
+        "invalidField": "Üzgünüz, bu kullanıcı adı/e-posta adresi ve/veya şifre tanınmadı.",
         "forgotPassword": "Şifremi Unuttum",
         "userEmail": "Kullanıcı Adı veya E-posta",
         "userPhone": "Telefon numarası",
@@ -32,10 +33,11 @@ const TRANSLATIONS = {
         "GmErr_USER_ACCOUNT_BLOCKED": "Şu anda hesabınıza giriş yapamıyorsunuz - daha fazla bilgi için Müşteri Hizmetleri ile iletişime geçin.",
         "setUpPassowrd": "Şifrenizi sıfırlamanız gerekiyor",
         "Unauthorized": "Oyuncu hesap numarası, e-posta adresi veya şifre hatalı",
-        "CountryRestricted": "Kısıtlı bir yargı bölgesinden kayıt yapılamaz. Daha fazla sorunla karşılaşırsanız, lütfen destek ile iletişime geçin."
+        "CountryRestricted": "Kısıtlı bir yargı bölgesinden kayıt yapılamaz. Daha fazla sorunla karşılaşırsanız, lütfen destek ile iletişime geçin.",
+        "configError": "Yapılandırma alınırken beklenmeyen bir hata oluştu"
     },
     "en-us": {
-        "invalidField": "This field is invalid",
+        "invalidField": "Sorry, that username/email address and/or password has not been recognized.",
         "forgotPassword": "Forgot Password",
         "userEmail": "Username or Email",
         "userPhone": "Phone number",
@@ -48,10 +50,11 @@ const TRANSLATIONS = {
         "GmErr_USER_ACCOUNT_BLOCKED": "You’re currently unable to login to your account - please contact Customer Services for more information.",
         "setUpPassowrd": "You need to reset your password",
         "Unauthorized": "The player account number, e-mail address or password is incorrect",
-        "CountryRestricted": "Registration is not possible from a restricted jurisdiction. If you encounter further issues, please contact support."
+        "CountryRestricted": "Registration is not possible from a restricted jurisdiction. If you encounter further issues, please contact support.",
+        "configError": "An unexpected error has occured when fetchig the configuration"
     },
     "ro": {
-        "invalidField": "Acest câmp este invalid",
+        "invalidField": "Ne pare rău, acest nume de utilizator/adresă de e-mail și/sau parolă nu a fost recunoscut.",
         "forgotPassword": "Ați uitat parola",
         "userEmail": "Nume utilizator sau email",
         "userPhone": "Număr de telefon",
@@ -64,10 +67,11 @@ const TRANSLATIONS = {
         "GmErr_USER_ACCOUNT_BLOCKED": "În prezent, nu vă puteți conecta la contul dvs. - vă rugăm să contactați Serviciul Clienți pentru mai multe informații.",
         "setUpPassowrd": "Trebuie să vă resetați parola",
         "Unauthorized": "Numărul contului de jucător, adresa de e-mail sau parola sunt incorecte",
-        "CountryRestricted": "Înregistrarea nu este posibilă dintr-o jurisdicție restricționată. Dacă întâmpinați alte probleme, vă rugăm să contactați asistența."
+        "CountryRestricted": "Înregistrarea nu este posibilă dintr-o jurisdicție restricționată. Dacă întâmpinați alte probleme, vă rugăm să contactați asistența.",
+        "configError": "A apărut o eroare neașteptată la preluarea configurației"
     },
     "hr": {
-        "invalidField": "Ovo polje je nevažeće",
+        "invalidField": "Žao nam je, to korisničko ime/adresa e-pošte i/ili lozinka nisu prepoznati.",
         "forgotPassword": "Zaboravljena lozinka",
         "userEmail": "Korisničko ime ili email",
         "userPhone": "Broj telefona",
@@ -80,10 +84,11 @@ const TRANSLATIONS = {
         "Forbidden_UserAccount_Blocked": "Vaš račun je blokiran",
         "GmErr_USER_ACCOUNT_BLOCKED": "Trenutno se ne možete prijaviti na svoj račun - molimo kontaktirajte Službu za korisnike za više informacija.",
         "Unauthorized": "Lozinka, e-mail adresa ili korisničko ime su pogrešno uneseni",
-        "CountryRestricted": "Prijava nije moguća iz zemlje ograničene jurisdikcije. U slučaju daljnjih poteškoća, molimo kontaktirajte podršku."
+        "CountryRestricted": "Prijava nije moguća iz zemlje ograničene jurisdikcije. U slučaju daljnjih poteškoća, molimo kontaktirajte podršku.",
+        "configError": "Došlo je do neočekivane pogreške prilikom dohvaćanja konfiguracije"
     },
     "fr": {
-        "invalidField": "Ce champ est invalide",
+        "invalidField": "Désolé, ce nom d'utilisateur/adresse e-mail et/ou mot de passe n'a pas été reconnu.",
         "forgotPassword": "Mot de passe oublié",
         "userEmail": "Nom d'utilisateur ou email",
         "userPhone": "Numéro de téléphone",
@@ -96,10 +101,11 @@ const TRANSLATIONS = {
         "GmErr_USER_ACCOUNT_BLOCKED": "Vous ne pouvez actuellement pas vous connecter à votre compte - veuillez contacter le service client pour plus d'informations.",
         "setUpPassowrd": "Vous devez réinitialiser votre mot de passe",
         "Unauthorized": "Le numéro de compte joueur, l'adresse e-mail ou le mot de passe est incorrect",
-        "CountryRestricted": "L'inscription n'est pas possible depuis une juridiction restreinte. Si vous rencontrez d'autres problèmes, veuillez contacter le support."
+        "CountryRestricted": "L'inscription n'est pas possible depuis une juridiction restreinte. Si vous rencontrez d'autres problèmes, veuillez contacter le support.",
+        "configError": "Une erreur inattendue s'est produite lors de la récupération de la configuration"
     },
     "cs": {
-        "invalidField": "Ovo polje je nevažeće.",
+        "invalidField": "Omlouváme se, toto uživatelské jméno/e-mailová adresa a/nebo heslo nebyly rozpoznány.",
         "forgotPassword": "Zaboravio sam lozinku ",
         "userEmail": "Korisničko ime ili email",
         "userPhone": "Telefonní číslo",
@@ -112,10 +118,11 @@ const TRANSLATIONS = {
         "GmErr_USER_ACCOUNT_BLOCKED": "Momentálně se nemůžete přihlásit ke svému účtu - pro více informací kontaktujte zákaznický servis.",
         "setUpPassowrd": "Musíte resetovat své heslo",
         "Unauthorized": "Číslo účtu hráče, e-mailová adresa nebo heslo je nesprávné",
-        "CountryRestricted": "Registrace není možná z omezené jurisdikce. Pokud narazíte na další potíže, kontaktujte prosím podporu."
+        "CountryRestricted": "Registrace není možná z omezené jurisdikce. Pokud narazíte na další potíže, kontaktujte prosím podporu.",
+        "configError": "Při načítání konfigurace došlo k neočekávané chybě"
     },
     "de": {
-        "invalidField": "Dieses Feld ist ungültig",
+        "invalidField": "Entschuldigung, dieser Benutzername/diese E-Mail-Adresse und/oder dieses Passwort wurde nicht erkannt.",
         "forgotPassword": "Passwort vergessen",
         "userEmail": "Benutzername oder E-Mail",
         "userPhone": "Telefonnummer",
@@ -128,10 +135,11 @@ const TRANSLATIONS = {
         "GmErr_USER_ACCOUNT_BLOCKED": "Sie können sich derzeit nicht in Ihr Konto einloggen - bitte kontaktieren Sie den Kundenservice für weitere Informationen.",
         "setUpPassowrd": "Sie müssen Ihr Passwort zurücksetzen",
         "Unauthorized": "Die Spieler-Kontonummer, E-Mail-Adresse oder das Passwort ist falsch",
-        "CountryRestricted": "Eine Registrierung ist aus einer eingeschränkten Gerichtsbarkeit nicht möglich. Wenn Sie weitere Probleme haben, wenden Sie sich bitte an den Support."
+        "CountryRestricted": "Eine Registrierung ist aus einer eingeschränkten Gerichtsbarkeit nicht möglich. Wenn Sie weitere Probleme haben, wenden Sie sich bitte an den Support.",
+        "configError": "Beim Abrufen der Konfiguration ist ein unerwarteter Fehler aufgetreten"
     },
     "pt-br": {
-        "invalidField": "Este campo é inválido",
+        "invalidField": "Desculpe, esse nome de usuário/endereço de e-mail e/ou senha não foram reconhecidos.",
         "forgotPassword": "Esqueceu a senha",
         "userEmail": "Nome de usuário ou e-mail",
         "userPhone": "Número de telefone",
@@ -144,10 +152,11 @@ const TRANSLATIONS = {
         "GmErr_USER_ACCOUNT_BLOCKED": "Você não pode fazer login na sua conta no momento - entre em contato com o Atendimento ao Cliente para mais informações.",
         "setUpPassowrd": "Você precisa redefinir sua senha",
         "Unauthorized": "O número da conta de jogador, o endereço de e-mail ou a senha estão incorretos",
-        "CountryRestricted": "O registro não é possível a partir de uma jurisdição restrita. Caso encontre outros problemas, entre em contato com o suporte."
+        "CountryRestricted": "O registro não é possível a partir de uma jurisdição restrita. Caso encontre outros problemas, entre em contato com o suporte.",
+        "configError": "Ocorreu um erro inesperado ao buscar a configuração"
     },
     "es-mx": {
-        "invalidField": "Este campo es inválido",
+        "invalidField": "Lo siento, ese nombre de usuario/dirección de correo electrónico y/o contraseña no ha sido reconocido.",
         "forgotPassword": "Olvidé la contraseña",
         "userEmail": "Nombre de usuario o correo electrónico",
         "userPhone": "Número de teléfono",
@@ -160,10 +169,11 @@ const TRANSLATIONS = {
         "GmErr_USER_ACCOUNT_BLOCKED": "Actualmente no puede iniciar sesión en su cuenta - comuníquese con el Servicio al Cliente para obtener más información.",
         "setUpPassowrd": "Necesitas restablecer tu contraseña",
         "Unauthorized": "El número de cuenta de jugador, la dirección de correo electrónico o la contraseña son incorrectos",
-        "CountryRestricted": "El registro no es posible desde una jurisdicción restringida. Si encuentra más problemas, por favor contacte al soporte."
+        "CountryRestricted": "El registro no es posible desde una jurisdicción restringida. Si encuentra más problemas, por favor contacte al soporte.",
+        "configError": "Se ha producido un error inesperado al obtener la configuración"
     },
     "es": {
-        "invalidField": "Este campo no es válido",
+        "invalidField": "Lo siento, ese nombre de usuario/dirección de correo electrónico y/o contraseña no ha sido reconocido.",
         "forgotPassword": "Olvidé mi contraseña",
         "userEmail": "Nombre de usuario o correo electrónico",
         "userPhone": "Número de teléfono",
@@ -176,10 +186,11 @@ const TRANSLATIONS = {
         "GmErr_USER_ACCOUNT_BLOCKED": "Actualmente no puede iniciar sesión en su cuenta - comuníquese con el Servicio al Cliente para obtener más información.",
         "setUpPassowrd": "Necesitas restablecer tu contraseña",
         "Unauthorized": "El número de cuenta, correo electrónico o contraseña es incorrecto",
-        "CountryRestricted": "No es posible registrarse desde una jurisdicción restringida. Si encuentra más problemas, comuníquese con el soporte."
+        "CountryRestricted": "No es posible registrarse desde una jurisdicción restringida. Si encuentra más problemas, comuníquese con el soporte.",
+        "configError": "Se ha producido un error inesperado al obtener la configuración"
     },
     "pt": {
-        "invalidField": "Este campo é inválido",
+        "invalidField": "Desculpe, esse nome de usuário/endereço de e-mail e/ou senha não foram reconhecidos.",
         "forgotPassword": "Esqueceu a senha",
         "userEmail": "Nome de usuário ou email",
         "userPhone": "Número de telefone",
@@ -192,7 +203,8 @@ const TRANSLATIONS = {
         "GmErr_USER_ACCOUNT_BLOCKED": "Você não pode fazer login na sua conta no momento - entre em contato com o Atendimento ao Cliente para mais informações.",
         "setUpPassowrd": "Você precisa redefinir a sua senha",
         "Unauthorized": "O número da conta, e-mail ou senha está incorreto",
-        "CountryRestricted": "Não é possível se registrar de uma jurisdição restrita. Se encontrar mais problemas, entre em contato com o suporte."
+        "CountryRestricted": "Não é possível se registrar de uma jurisdição restrita. Se encontrar mais problemas, entre em contato com o suporte.",
+        "configError": "Ocorreu um erro inesperado ao procurar a configuração"
     }
 };
 const getTranslations = (url) => {
@@ -306,7 +318,7 @@ const dispatchCustomEvent = (type, data = {}) => {
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-function defineCustomElement(CustomElement, version = '24.5.12') {
+function defineCustomElement(CustomElement, version = '24.5.10') {
   Object.defineProperty(CustomElement, 'version', {
     get() {
       return version;
@@ -21901,6 +21913,9 @@ const UserLogin = class {
                 contact: this.userNameEmail,
                 password: this.userPassword
             };
+            if (this.captchaData.isEnabled) {
+                headers['X-Captcha-Response'] = this.captchaData.token;
+            }
             const options = {
                 method: 'POST',
                 headers,
@@ -21952,10 +21967,12 @@ const UserLogin = class {
                     if (sessionId) {
                         this.isLoginLoading = false;
                         window.postMessage({ type: 'UserSessionID', session: sessionId, userid: playerId }, window.location.href);
-                        window.postMessage({ type: 'WidgetNotification', data: {
+                        window.postMessage({
+                            type: 'WidgetNotification', data: {
                                 type: 'success',
                                 message: translate$1('successMessage', this.lang)
-                            } }, window.location.href);
+                            }
+                        }, window.location.href);
                         this.hasError = false;
                     }
                 }
@@ -22006,10 +22023,12 @@ const UserLogin = class {
                 }
                 if (data.sessionId) {
                     window.postMessage({ type: 'UserSessionID', session: data.sessionId, userid: data.userId }, window.location.href);
-                    window.postMessage({ type: 'WidgetNotification', data: {
+                    window.postMessage({
+                        type: 'WidgetNotification', data: {
                             type: 'success',
                             message: translate$1('successMessage', this.lang)
-                        } }, window.location.href);
+                        }
+                    }, window.location.href);
                     this.hasError = false;
                     dispatchCustomEvent('logged_in', { userId: data.userId });
                 }
@@ -22078,6 +22097,10 @@ const UserLogin = class {
                     this.isValidPassword = this.validate('password', inputValue);
                     break;
             }
+            if (!this.isValidUserEmail || !this.isValidUserPhone || !this.isValidPassword) {
+                this.hasError = true;
+                this.errorMessage = translate$1('invalidField', this.lang);
+            }
         };
         // this partially applies the location to avoid constructing an anonymous function in jsx, i.e. (e)=>handleInputChange(e,location), which would be needed for 2 args
         this.handleInputChangePartial = (location) => (e) => this.handleInputChange(e, location);
@@ -22139,6 +22162,12 @@ const UserLogin = class {
         this.hasError = false;
         this.userPrefixOptions = undefined;
         this.isLoginLoading = false;
+        this.captchaData = {
+            isEnabled: true,
+            token: '',
+            provider: '',
+            siteKey: ''
+        };
         this.mbSource = undefined;
     }
     /**
@@ -22180,6 +22209,14 @@ const UserLogin = class {
         if (this.translationUrl.length > 2) {
             await getTranslations(this.translationUrl);
         }
+        this.getLoginConfig().then(() => {
+            this.appendCaptchaScript();
+        }).catch((error) => {
+            console.error(error);
+            this.hasError = true;
+            this.errorMessage = translate$1('configError', this.lang);
+            this.sendErrorNotification(this.errorMessage);
+        });
     }
     /**
      * Lifecycle method: Set up event listeners after the component is rendered
@@ -22199,6 +22236,92 @@ const UserLogin = class {
         window.addEventListener('LoginCredentials', this.autofillCredentialsHandler);
         window.postMessage({ type: 'UserLoginDidLoad' });
     }
+    /**
+     * Fetches the login configuration from the backend API.
+     *
+     * @returns A Promise that resolves once the configuration is fetched and set.
+     */
+    getLoginConfig() {
+        const url = new URL('/api/v1/players/password-management/auth/password/config', this.endpoint);
+        return new Promise((resolve, reject) => {
+            fetch(url.href)
+                .then((res) => {
+                if (!res.ok) {
+                    throw new Error(`HTTP error! Status: ${res.status}`);
+                }
+                return res.json();
+            })
+                .then((res) => {
+                const { captcha } = res;
+                if (captcha && typeof captcha.provider === 'string') {
+                    captcha.provider = captcha.provider.toLowerCase();
+                }
+                this.captchaData = Object.assign({}, captcha);
+                resolve();
+            })
+                .catch((error) => {
+                console.error('Error fetching login configuration:', error);
+                reject(error);
+            });
+        });
+    }
+    /**
+     * Handles the integration of CAPTCHA based on the login configuration.
+     * Dynamically injects the necessary CAPTCHA script if enabled.
+     */
+    handleCaptcha() {
+        const { isEnabled, provider, siteKey } = this.captchaData;
+        if (!isEnabled) {
+            return;
+        }
+        if (!['cloudflare', 'google'].includes(provider)) {
+            return;
+        }
+        if (provider === 'cloudflare') {
+            window.turnstile.render('#turnstileContainer', {
+                sitekey: siteKey,
+                theme: 'light',
+                callback: this.captchaCallback.bind(this),
+            });
+        }
+        else if (provider === 'google') {
+            window.grecaptcha.ready(() => {
+                window.grecaptcha.render('googleContainer', {
+                    sitekey: siteKey,
+                    callback: this.captchaCallback.bind(this),
+                    theme: 'light'
+                });
+            });
+        }
+    }
+    /**
+     * Common callback function for CAPTCHA response handling.
+     * @param token CAPTCHA response token.
+     */
+    captchaCallback(token) {
+        this.captchaData.token = token;
+        this.captchaData = Object.assign({}, this.captchaData); // Needed to tell Stencil something was changed
+    }
+    /**
+     * Dynamically loads the Turnstile script and renders CAPTCHA when ready.
+     * @param src - The URL of the CAPTCHA script to load.
+     * @param captcha - The CAPTCHA configuration.
+     */
+    appendCaptchaScript() {
+        const { isEnabled, provider } = this.captchaData;
+        if (!isEnabled) {
+            return;
+        }
+        const script = document.createElement('script');
+        if (provider === 'cloudflare') {
+            script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
+        }
+        else if (provider === 'google') {
+            script.src = 'https://www.google.com/recaptcha/api.js';
+        }
+        script.onload = this.handleCaptcha.bind(this);
+        document.head.appendChild(script);
+    }
     /**
      * Lifecycle method: Clean up event listeners when the component is removed
      */
@@ -22211,10 +22334,12 @@ const UserLogin = class {
      */
     sendErrorNotification(errorMessage) {
         window.postMessage({ type: "HasError", error: errorMessage }, window.location.href);
-        window.postMessage({ type: 'WidgetNotification', data: {
+        window.postMessage({
+            type: 'WidgetNotification', data: {
                 type: 'error',
                 message: errorMessage
-            } }, window.location.href);
+            }
+        }, window.location.href);
     }
     /**
      * Debounce function to limit API calls
@@ -22248,20 +22373,19 @@ const UserLogin = class {
      * Render function
      */
     render() {
-        let visibilityIcon = h$2("span", { key: '5247ba1aa9f8208dcf3bd594bdadbafc872203e7', class: "InputIcon" }, this.isPasswordVisible &&
-            h$2("svg", { key: 'bba821c08ba3bf7def52d82534b3f3d35ce82043', onClick: () => this.togglePassword(), class: "TogglePasswordVisibility", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.844", height: "12.887", viewBox: "0 0 18.844 12.887" }, h$2("g", { key: '85a74668809bd002bdc50c317d2cba4957e6d86b', transform: "translate(-110.856 -23.242)" }, h$2("circle", { key: 'd74bd44ed1a2da0f34a0c0dad38a8f5b47ca66ca', class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), h$2("g", { key: '99a13eae7b1dbbb4ff1c529eb61f478f9707121b', transform: "translate(117.499 27.37)" }, h$2("path", { key: 'cb210c909fb66a52d4e61d2e94cb7a41420b08b1', class: "PasswordVisibilityIcon", d: "M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z", transform: "translate(-142.164 -39.123)" }), h$2("path", { key: '992a1e8fe902029233261a388956c304a702c24a', class: "PasswordVisibilityIcon", d: "M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z", transform: "translate(-136.413 -42.068)" })), h$2("g", { key: '55c770518f9c9bd6edc0a7aa6d61f2ebfecf7fb3', transform: "translate(110.856 24.899)" }, h$2("path", { key: '632faef68fb66274f1562703c72fb3b7e33ed2d4', class: "PasswordVisibilityIcon", d: "M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z", transform: "translate(-110.856 -33.157)" }), h$2("path", { key: '06b43037bd6e527436b0bdebef02e8021072ee3b', class: "PasswordVisibilityIcon", d: "M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z", transform: "translate(-130.743 -29.617)" })), h$2("rect", { key: '3cb2410ff11f0218df6f62b53f71ab91473b230e', class: "PasswordVisibilityIcon", width: "0.972", height: "15.861", rx: "0.486", transform: "translate(114.827 23.858) rotate(-39.315)" }))), !this.isPasswordVisible &&
-            h$2("svg", { key: '8f302630f4f4f5bafe986600bafa42b7b2136cd4', onClick: () => this.togglePassword(), class: "TogglePasswordVisibility PasswordVisible", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.843", height: "10.5", viewBox: "0 0 18.843 10.5" }, h$2("g", { key: '5163e48b86eda60be27eb9b0485253886af967e3', transform: "translate(-14.185 -27.832)" }, h$2("path", { key: '1cf091c89a8da407adfb410f019602b780b01d0b', class: "PasswordVisibilityIcon", d: "M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z", transform: "translate(0)" }), h$2("circle", { key: 'cff32985dd5e49e93e7b101a0a5205494708b87b', class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" }))));
-        let userIdentification = h$2("div", { key: 'd11df3b91d2b5176ce2742130851bcecf53ca340', class: "FormBox" }, h$2("div", { key: 'fcba164be90c9bcb6e809e65cec8182a0848e7b7', class: "FormValue" }, this.loginByPhoneNumber === 'true'
-            ? h$2("div", { class: (!this.isValidUserPhone || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox ' }, h$2("div", { class: "PhoneInputBox" }, h$2("div", { class: "PrefixBox" }, h$2("vaadin-combo-box", { items: this.userPrefixOptions, value: this.userPrefix, onChange: this.handleInputChangePartial('prefix') }), h$2("label", { class: (this.userPrefix ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone || this.hasError ? 'FieldInvalid' : '') }, translate$1('userPrefix', this.lang))), h$2("div", { class: "PhoneBox" }, h$2("input", { type: "text", placeholder: '', value: this.userPhone, onFocus: this.handleInputChangePartial('phone'), onInput: this.handleInputChangePartial('phone'), autocapitalize: "none", required: true }), h$2("label", { class: (this.userPhone ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone || this.hasError ? 'FieldInvalid' : '') }, translate$1('userPhone', this.lang)))), !this.isValidUserPhone &&
-                h$2("p", { class: "InvalidField" }, translate$1('invalidField', this.lang)))
-            : h$2("div", { class: (!this.isValidUserEmail || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, h$2("input", { type: "text", placeholder: '', value: this.userNameEmail, onFocus: this.handleInputChangePartial('user'), onInput: this.handleInputChangePartial('user'), autocapitalize: "none", required: true }), h$2("label", { class: (this.userNameEmail ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserEmail || this.hasError ? 'FieldInvalid' : '') }, translate$1('userEmail', this.lang)), !this.isValidUserEmail &&
-                h$2("p", { class: "InvalidField" }, translate$1('invalidField', this.lang))), h$2("div", { key: '4d5ed09db6a553c694cea9d2487301156a5f602d', class: (!this.isValidPassword || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, h$2("input", { key: 'c298e5d19bdd55f180397d0d943a171cb3b84d6a', type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onFocus: this.handleInputChangePartial('password'), onInput: this.handleInputChangePartial('password'), autocapitalize: "none", required: true }), h$2("label", { key: '6de9548545e57214f937129c34b6c8fc3cb56e67', class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || this.hasError ? 'FieldInvalid' : '') }, translate$1('password', this.lang)), !this.isValidPassword &&
-            h$2("p", { key: 'd140446490ce18962d67e068b3c6f021453ec0f3', class: "InvalidField" }, translate$1('invalidField', this.lang))), this.passwordReset == 'true' &&
-            h$2("div", { key: '894ff57a5c2eb6561ecd4b5e1b507c605001ca92', class: "ForgotPassword" }, h$2("button", { key: '77e12a76aa3a9ce581f06405bd2b07e80787ac09', onClick: this.resetPassword }, translate$1('forgotPassword', this.lang))), h$2("button", { key: 'a0b0f632c1950f6544230842d71605ac594f7cea', disabled: ((this.loginByPhoneNumber !== 'true' && (!this.isValidUserEmail || !this.userNameEmail)) ||
+        let visibilityIcon = h$2("span", { key: '1192a2390f0b5ea646c8e96a7a3f17e18b16a306', class: "InputIcon" }, this.isPasswordVisible &&
+            h$2("svg", { key: '13fcccd4457633040b0bf29fed962961df64176c', onClick: () => this.togglePassword(), class: "TogglePasswordVisibility", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.844", height: "12.887", viewBox: "0 0 18.844 12.887" }, h$2("g", { key: '19762a0b0287c8e2a51a3b3bba7cecb353a4f379', transform: "translate(-110.856 -23.242)" }, h$2("circle", { key: '4f46b166744078ea7f8b0f13e26b359ebb8f03da', class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), h$2("g", { key: '7a82fe4e4f4ed670f8d83c8b774bda62673c548a', transform: "translate(117.499 27.37)" }, h$2("path", { key: '0454916b36c2a2994fa6e7ccf2feac38861d283d', class: "PasswordVisibilityIcon", d: "M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z", transform: "translate(-142.164 -39.123)" }), h$2("path", { key: '3d166e1f5b399ea5f9013fdaa24bf64b68f531b5', class: "PasswordVisibilityIcon", d: "M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z", transform: "translate(-136.413 -42.068)" })), h$2("g", { key: '8c5e38f057b58a3afcb8a5cc6a44bb852cfa7204', transform: "translate(110.856 24.899)" }, h$2("path", { key: '72910c3a6ba83dac758dfa7aa36721364ebf8a6d', class: "PasswordVisibilityIcon", d: "M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z", transform: "translate(-110.856 -33.157)" }), h$2("path", { key: 'd795428138b8ed6cf47ff846dcc69f3940892776', class: "PasswordVisibilityIcon", d: "M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z", transform: "translate(-130.743 -29.617)" })), h$2("rect", { key: 'ca376eb5a1a7300b5893936ad987808576933081', class: "PasswordVisibilityIcon", width: "0.972", height: "15.861", rx: "0.486", transform: "translate(114.827 23.858) rotate(-39.315)" }))), !this.isPasswordVisible &&
+            h$2("svg", { key: 'd69b7a469e213542bc6deb56156cfa86febbe8ac', onClick: () => this.togglePassword(), class: "TogglePasswordVisibility PasswordVisible", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.843", height: "10.5", viewBox: "0 0 18.843 10.5" }, h$2("g", { key: 'd45723a6916ece014694c1ea1fa171ebc905d21f', transform: "translate(-14.185 -27.832)" }, h$2("path", { key: 'd19d2b273a2c9366d6039ad87b1a1df203a49d2e', class: "PasswordVisibilityIcon", d: "M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z", transform: "translate(0)" }), h$2("circle", { key: '3127ecec570ef7f567ecb5f3362d65986669de0e', class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" }))));
+        let userIdentification = h$2("div", { key: '69731dda5bf4fd23c0f143de9a662bd12388cc73', class: "FormBox" }, h$2("div", { key: '5b0ca2d058095a6abfdcf3c5feeb9b2e0a7e894c', class: "FormValue" }, this.loginByPhoneNumber === 'true'
+            ? h$2("div", { class: (!this.isValidUserPhone || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox ' }, h$2("div", { class: "PhoneInputBox" }, h$2("div", { class: "PrefixBox" }, h$2("vaadin-combo-box", { items: this.userPrefixOptions, value: this.userPrefix, onChange: this.handleInputChangePartial('prefix') }), h$2("label", { class: (this.userPrefix ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone || this.hasError ? 'FieldInvalid' : '') }, translate$1('userPrefix', this.lang))), h$2("div", { class: "PhoneBox" }, h$2("input", { type: "text", placeholder: '', value: this.userPhone, onFocus: this.handleInputChangePartial('phone'), onInput: this.handleInputChangePartial('phone'), autocapitalize: "none", required: true }), h$2("label", { class: (this.userPhone ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone || this.hasError ? 'FieldInvalid' : '') }, translate$1('userPhone', this.lang)))))
+            : h$2("div", { class: (!this.isValidUserEmail || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, h$2("input", { type: "text", placeholder: '', value: this.userNameEmail, onInput: this.handleInputChangePartial('user'), autocapitalize: "none", required: true }), h$2("label", { class: (this.userNameEmail ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserEmail || this.hasError ? 'FieldInvalid' : '') }, translate$1('userEmail', this.lang))), h$2("div", { key: '20c86c0ca9a72f7d50453b297d976c84149011fa', class: (!this.isValidPassword || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, h$2("input", { key: '825f782812500632eab0082b2e6309442372d3b8', type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onInput: this.handleInputChangePartial('password'), autocapitalize: "none", required: true }), h$2("label", { key: 'f3f1e9a14433a5002d51444f3f5de4c680633950', class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || this.hasError ? 'FieldInvalid' : '') }, translate$1('password', this.lang))), this.passwordReset == 'true' &&
+            h$2("div", { key: 'e59b1fc8dde8d6ef5758404fd544ef914b9b0807', class: "ForgotPassword" }, h$2("button", { key: 'b147c546b39422d3eb8461229696333e9283ee03', onClick: this.resetPassword }, translate$1('forgotPassword', this.lang))), this.captchaData.isEnabled && this.captchaData.provider === 'cloudflare' &&
+            h$2("slot", { key: '30bb77473faed7c143719196599782ab4625314c', name: "turnstile" }), this.captchaData.isEnabled && this.captchaData.provider === 'google' &&
+            h$2("slot", { key: '3c67a39492482cf483dbc7306e9f93c74c847e73', name: "google" }), h$2("button", { key: '27b2016e65c4d910d297b0ebd014553258046a93', disabled: ((this.loginByPhoneNumber !== 'true' && (!this.isValidUserEmail || !this.userNameEmail)) ||
                 (this.loginByPhoneNumber === 'true' && (!this.isValidUserPhone || !this.userPhone || !this.userPrefix)) ||
-                !this.userPassword || !this.isValidPassword) || this.isLoginLoading, class: "SubmitCredentials", onClick: this.handleLogin }, translate$1('login', this.lang)), this.hasError &&
-            h$2("p", { key: '00e5641d2db355dab4b7b544249482dd4bbdd31a', class: "CredentialsError" }, this.errorMessage)));
-        return h$2("section", { key: '12256f6bbbaf7ddbfe19483463dc85a521c25e9f', ref: el => this.stylingContainer = el }, userIdentification);
+                !this.userPassword || !this.isValidPassword) || this.isLoginLoading || (this.captchaData.isEnabled && !this.captchaData.token), class: "SubmitCredentials", onClick: this.handleLogin }, translate$1('login', this.lang)), this.hasError &&
+            h$2("p", { key: '33d142c5a20d8c3003b51c4ecad256215314c2b3', class: "CredentialsError" }, this.errorMessage)));
+        return h$2("section", { key: '02a36db14f738bd0f84dc0267aea6bff4fd331d8', ref: el => this.stylingContainer = el }, userIdentification);
     }
     static get watchers() { return {
         "translationUrl": ["handleNewTranslations"],

package/dist/esm/user-login.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-996f8854.js';
-export { s as setNonce } from './index-996f8854.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-16e95691.js';
+export { s as setNonce } from './index-16e95691.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["user-login",[[1,"user-login",{"endpoint":[513],"lang":[1537],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"passwordReset":[513,"password-reset"],"userEmailRegex":[513,"user-email-regex"],"userEmailRegexOptions":[513,"user-email-regex-options"],"userPhoneRegex":[513,"user-phone-regex"],"userPhoneRegexOptions":[513,"user-phone-regex-options"],"passwordRegex":[513,"password-regex"],"passwordRegexOptions":[513,"password-regex-options"],"version":[513],"loginByPhoneNumber":[513,"login-by-phone-number"],"mbSource":[513,"mb-source"],"userNameEmail":[32],"userPassword":[32],"isValidUserEmail":[32],"userPhone":[32],"userPrefix":[32],"isValidPassword":[32],"isValidUserPhone":[32],"isPasswordVisible":[32],"errorMessage":[32],"hasError":[32],"userPrefixOptions":[32],"isLoginLoading":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
+  return bootstrapLazy([["user-login",[[1,"user-login",{"endpoint":[513],"lang":[1537],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"passwordReset":[513,"password-reset"],"userEmailRegex":[513,"user-email-regex"],"userEmailRegexOptions":[513,"user-email-regex-options"],"userPhoneRegex":[513,"user-phone-regex"],"userPhoneRegexOptions":[513,"user-phone-regex-options"],"passwordRegex":[513,"password-regex"],"passwordRegexOptions":[513,"password-regex-options"],"version":[513],"loginByPhoneNumber":[513,"login-by-phone-number"],"mbSource":[513,"mb-source"],"userNameEmail":[32],"userPassword":[32],"isValidUserEmail":[32],"userPhone":[32],"userPrefix":[32],"isValidPassword":[32],"isValidUserPhone":[32],"isPasswordVisible":[32],"errorMessage":[32],"hasError":[32],"userPrefixOptions":[32],"isLoginLoading":[32],"captchaData":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
 });

package/dist/types/Users/maria.bumbar/Desktop/widgets-monorepo/packages/stencil/user-login/.stencil/packages/stencil/user-login/stencil.config.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;

package/dist/types/Users/maria.bumbar/Desktop/widgets-monorepo/packages/stencil/user-login/.stencil/packages/stencil/user-login/stencil.config.dev.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;

package/dist/types/components/user-login/user-login.d.ts

@@ -1,3 +1,4 @@
+import { CaptchaData } from '../../utils/types';
 import '@vaadin/combo-box';
 export declare class UserLogin {
     /**
@@ -104,6 +105,15 @@ export declare class UserLogin {
      * Boolean for preventing user for clicking multiple times the login button
      */
     private isLoginLoading;
+    /**
+     * Captcha configuration and state.
+     * Stores captcha-related data, including its status, token, provider, and site key.
+     */
+    captchaData: CaptchaData;
+    /**
+     * The source identifier for message bus styling.
+     * This is used to apply styles dynamically from a stream.
+     */
     mbSource: string;
     private errorCode;
     private stylingContainer;
@@ -135,6 +145,28 @@ export declare class UserLogin {
      * Lifecycle method: Set up event listeners after the component is rendered
      */
     componentDidLoad(): void;
+    /**
+     * Fetches the login configuration from the backend API.
+     *
+     * @returns A Promise that resolves once the configuration is fetched and set.
+     */
+    getLoginConfig(): Promise<void>;
+    /**
+     * Handles the integration of CAPTCHA based on the login configuration.
+     * Dynamically injects the necessary CAPTCHA script if enabled.
+     */
+    handleCaptcha(): void;
+    /**
+     * Common callback function for CAPTCHA response handling.
+     * @param token CAPTCHA response token.
+     */
+    private captchaCallback;
+    /**
+     * Dynamically loads the Turnstile script and renders CAPTCHA when ready.
+     * @param src - The URL of the CAPTCHA script to load.
+     * @param captcha - The CAPTCHA configuration.
+     */
+    appendCaptchaScript(): void;
     /**
      * Lifecycle method: Clean up event listeners when the component is removed
      */

package/dist/types/components.d.ts

@@ -27,6 +27,9 @@ export namespace Components {
           * If set to true, login will be done by phone number, else by username/email
          */
         "loginByPhoneNumber": string;
+        /**
+          * The source identifier for message bus styling. This is used to apply styles dynamically from a stream.
+         */
         "mbSource": string;
         /**
           * Regular expression for validating the password
@@ -99,6 +102,9 @@ declare namespace LocalJSX {
           * If set to true, login will be done by phone number, else by username/email
          */
         "loginByPhoneNumber"?: string;
+        /**
+          * The source identifier for message bus styling. This is used to apply styles dynamically from a stream.
+         */
         "mbSource"?: string;
         /**
           * Regular expression for validating the password

package/dist/types/utils/types.d.ts

@@ -0,0 +1,6 @@
+export type CaptchaData = {
+    isEnabled: boolean;
+    token: string;
+    provider: string;
+    siteKey: string;
+};