@everymatrix/user-login 1.46.1 → 1.47.0

package/dist/collection/components/user-login/user-login.js

@@ -1,13 +1,20 @@
 import { h } from "@stencil/core";
 import { getTranslations, translate } from "../../utils/locale.utils";
+import "@vaadin/combo-box";
 export class UserLogin {
     constructor() {
         this.errorCode = '';
+        /**
+         * Apply inline client styling
+         */
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
             sheet.innerHTML = this.clientStyling;
             this.stylingContainer.appendChild(sheet);
         };
+        /**
+         * Fetch and apply CSS from a provided URL
+         */
         this.setClientStylingURL = () => {
             let url = new URL(this.clientStylingUrl);
             let cssFile = document.createElement('style');
@@ -18,28 +25,128 @@ export class UserLogin {
                 setTimeout(() => { this.stylingContainer.appendChild(cssFile); }, 1);
             });
         };
+        /**
+         * Fetch phone prefixes from the API
+         */
+        this.getPhonePrefixes = () => {
+            const url = new URL('v1/player/validPhoneCodes', this.endpoint);
+            return new Promise((resolve) => {
+                fetch(url.href)
+                    .then((res) => res.json())
+                    .then((res) => {
+                    this.userPrefixOptions = res.phoneCodes.map(code => {
+                        return { label: code.Prefix, value: code.Prefix };
+                    });
+                    resolve();
+                });
+            });
+        };
+        /**
+         * Handle autofilling of credentials from a dispatched event
+         */
         this.autofillCredentialsHandler = (e) => {
             this.userNameEmail = e.detail.userNameEmail;
             this.userPassword = e.detail.userPassword;
             this.handleLogin();
         };
-        this.userLogin = async ({ username, password }) => {
+        /**
+         * Login API call for Gm 1.7
+         */
+        this.userLoginGm17 = async () => {
             let headers = {
                 'Content-Type': 'application/json'
             };
-            let bodyData = {
-                username,
-                password
+            const bodyData = {
+                contact: this.userNameEmail,
+                password: this.userPassword
+            };
+            const options = {
+                method: 'POST',
+                headers,
+                body: JSON.stringify(bodyData),
+            };
+            try {
+                const res = await fetch(`${this.endpoint}/api/v1/players/password-management/auth/password/verify`, options);
+                const data = await res.json();
+                const { token } = data;
+                if (token) {
+                    // Perform the second API call
+                    await this.sendLegislationLogin(token);
+                }
+                else {
+                    throw new Error('Token not received from the API call.');
+                }
+            }
+            catch (err) {
+                // Handle unexpected errors
+                console.error(err);
+                this.hasError = true;
+                this.errorMessage = translate('genericError', this.lang);
+                this.sendErrorNotification(this.errorMessage);
+            }
+        };
+        /**
+         * Function to send legislation login request
+         */
+        this.sendLegislationLogin = async (token) => {
+            const headers = {
+                'Content-Type': 'application/json'
+            };
+            const bodyData = {
+                token,
+                method: 'login'
             };
-            let options = {
+            const options = {
                 method: 'POST',
                 headers,
                 body: JSON.stringify(bodyData),
             };
-            fetch(`${this.endpoint}/v1/player/legislation/login`, options)
-                .then((res) => {
-                return res.json();
-            }).then((data) => {
+            try {
+                const res = await fetch(`${this.endpoint}/api/v2/gm/legislation/login`, options);
+                const responseBody = await res.json();
+                if (res.ok) {
+                    const { sessionId, playerId } = responseBody;
+                    if (sessionId) {
+                        window.postMessage({ type: 'UserSessionID', session: sessionId, userid: playerId }, window.location.href);
+                        window.postMessage({ type: 'WidgetNotification', data: {
+                                type: 'success',
+                                message: translate('successMessage', this.lang)
+                            } }, window.location.href);
+                        this.hasError = false;
+                    }
+                }
+                else {
+                    const { message, errors } = responseBody;
+                    console.error(`Legislation login failed: ${message}`, errors);
+                    throw new Error('Legislation login request failed.');
+                }
+            }
+            catch (err) {
+                console.error(err);
+                this.hasError = true;
+                this.errorMessage = translate('genericError', this.lang);
+                this.sendErrorNotification(this.errorMessage);
+            }
+        };
+        /**
+         * Login API call
+         */
+        this.userLogin = async () => {
+            const url = new URL('/v1/player/legislation/login', this.endpoint);
+            const headers = new Headers();
+            headers.append('Content-Type', 'application/json');
+            const body = JSON.stringify({
+                username: this.loginByPhoneNumber === 'true' ? `${this.userPrefix} ${this.userPhone}` : this.userNameEmail,
+                password: this.userPassword
+            });
+            const params = {
+                method: 'POST',
+                headers: headers,
+                body: body
+            };
+            fetch(url.href, params)
+                .then((res) => res.json())
+                .then((data) => {
                 var _a, _b, _c;
                 if ((_a = data.sessionBlockers) === null || _a === void 0 ? void 0 : _a.includes('has-to-set-consents')) {
                     window.postMessage({ type: 'PlayerActions', gmversion: 'gm16' }, window.location.href);
@@ -73,37 +180,80 @@ export class UserLogin {
                 this.sendErrorNotification(this.errorMessage);
             });
         };
-        this.debouncedUserLogin = this.debounce(this.userLogin, 850);
+        /**
+         * Trigger login process
+         */
         this.handleLogin = () => {
-            this.debouncedUserLogin({
-                username: this.userNameEmail,
-                password: this.userPassword
-            });
+            const DEBOUNCE_DELAY = 850;
+            const loginActions = {
+                gm16: this.userLogin,
+                gm17: this.userLoginGm17,
+            };
+            const loginAction = loginActions[this.version] || this.userLogin;
+            // Apply debounce with the selected function
+            const debouncedLogin = this.debounce(loginAction, DEBOUNCE_DELAY);
+            debouncedLogin();
             this.dispatchUpdateLoginCredentialsEvent();
         };
+        /**
+         * Handle input changes for username/email and password
+         *
+         * @param event - input event
+         * @param location - 'user' | 'phone' | 'password'
+         */
         this.handleInputChange = (event, location) => {
             this.hasError = false;
             const inputValue = event.target.value;
-            if (location === 'user') {
-                this.userNameEmail = inputValue;
-                this.isValidUserEmail = this.userEmailValidation(this.userNameEmail);
+            switch (location) {
+                case 'user':
+                    this.userNameEmail = inputValue;
+                    this.isValidUserEmail = this.validate('user', this.userNameEmail);
+                    break;
+                case 'phone':
+                    this.userPhone = inputValue;
+                    this.isValidUserPhone = this.validate('phone', this.userPhone);
+                    break;
+                case 'prefix':
+                    this.userPrefix = inputValue;
+                    this.isValidUserPhone = this.validate('phone', this.userPhone);
+                    break;
+                case 'password':
+                    this.userPassword = inputValue;
+                    this.isValidPassword = this.validate('password', inputValue);
+                    break;
             }
-            else {
-                this.userPassword = inputValue;
-                this.isValidPassword = this.passwordValidation(inputValue);
-            }
-        };
-        this.userEmailValidation = (input) => {
-            const regex = new RegExp(this.userEmailRegex, this.userEmailRegexOptions);
-            return regex.test(input);
         };
-        this.passwordValidation = (input) => {
-            const regex = new RegExp(this.passwordRegex, this.passwordRegexOptions);
-            return regex.test(input);
+        // 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);
+        /**
+         * Validate input based on the specific regex
+         *
+         * @param useRuleFor - 'user' | 'phone' | 'password'
+         * @param input - input value to validate
+         */
+        this.validate = (useRuleFor, input) => {
+            let regex;
+            switch (useRuleFor) {
+                case 'user':
+                    regex = new RegExp(this.userEmailRegex, this.userEmailRegexOptions);
+                    return regex.test(input);
+                case 'phone':
+                    regex = new RegExp(this.userPhoneRegex, this.userPhoneRegexOptions);
+                    return regex.test(input) && !!this.userPrefix;
+                case 'password':
+                    regex = new RegExp(this.passwordRegex, this.passwordRegexOptions);
+                    return regex.test(input);
+            }
         };
+        /**
+         * Toggle password
+         */
         this.togglePassword = () => {
             this.isPasswordVisible = !this.isPasswordVisible;
         };
+        /**
+         * Reset password
+         */
         this.resetPassword = () => {
             window.postMessage({ type: "NavForgotPassword" }, window.location.href);
         };
@@ -115,31 +265,73 @@ export class UserLogin {
         this.passwordReset = 'false';
         this.userEmailRegex = undefined;
         this.userEmailRegexOptions = 'i';
+        this.userPhoneRegex = undefined;
+        this.userPhoneRegexOptions = '';
         this.passwordRegex = undefined;
         this.passwordRegexOptions = '';
+        this.version = 'gm16';
+        this.loginByPhoneNumber = 'false';
         this.userNameEmail = '';
         this.userPassword = '';
         this.isValidUserEmail = true;
+        this.userPhone = '';
+        this.userPrefix = '';
         this.isValidPassword = true;
+        this.isValidUserPhone = true;
         this.isPasswordVisible = false;
         this.limitStylingAppends = false;
         this.errorMessage = '';
         this.hasError = false;
+        this.userPrefixOptions = undefined;
     }
+    /**
+     * Watch for changes in the translation URL and fetch new translations
+     */
     handleNewTranslations() {
         getTranslations(this.translationUrl);
     }
+    /**
+     * Watch for changes in the client styling and apply the new styling
+     *
+     * @param newValue - new client styling
+     * @param oldValue - previous client styling
+     */
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
+    }
+    /**
+     * Watch for changes in the client styling URL and fetch the new CSS
+     *
+     * @param newValue - new client styling URL
+     * @param oldValue - previous client styling URL
+     */
+    handleStylingUrlChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStylingURL();
+    }
+    /**
+     * Lifecycle method: Fetch translations on component load
+     */
     async componentWillLoad() {
+        if (this.loginByPhoneNumber === 'true') {
+            await this.getPhonePrefixes();
+        }
         if (this.translationUrl.length > 2) {
             await getTranslations(this.translationUrl);
         }
     }
+    /**
+     * Lifecycle method: Set up event listeners after the component is rendered
+     */
     componentDidLoad() {
         window.addEventListener('LoginCredentials', this.autofillCredentialsHandler);
         window.postMessage({ type: 'UserLoginDidLoad' });
     }
+    /**
+     * Lifecycle method: Apply client styling after the component renders
+     */
     componentDidRender() {
-        // start custom styling area
         if (!this.limitStylingAppends && this.stylingContainer) {
             if (this.clientStyling)
                 this.setClientStyling();
@@ -147,11 +339,16 @@ export class UserLogin {
                 this.setClientStylingURL();
             this.limitStylingAppends = true;
         }
-        // end custom styling area
     }
+    /**
+     * Lifecycle method: Clean up event listeners when the component is removed
+     */
     disconnectedCallback() {
         window.removeEventListener('LoginCredentials', this.autofillCredentialsHandler);
     }
+    /**
+     * Send error notification as a post message
+     */
     sendErrorNotification(errorMessage) {
         window.postMessage({ type: "HasError", error: errorMessage }, window.location.href);
         window.postMessage({ type: 'WidgetNotification', data: {
@@ -159,6 +356,9 @@ export class UserLogin {
                 message: errorMessage
             } }, window.location.href);
     }
+    /**
+     * Debounce function to limit API calls
+     */
     debounce(func, delay) {
         let timer;
         return function (...args) {
@@ -168,6 +368,9 @@ export class UserLogin {
             }, delay);
         };
     }
+    /**
+     * Dispatch event to notify about login credential updates
+     */
     dispatchUpdateLoginCredentialsEvent() {
         if (!this.hasError) {
             this.updateLoginCredentialsEvent = new CustomEvent("UpdateLoginCredentials", {
@@ -181,16 +384,24 @@ export class UserLogin {
         }
     }
     ;
+    /**
+     * Render function
+     */
     render() {
-        let visibilityIcon = h("span", { key: '4ccb9d4b1c8209e22320c3667101b9e435d1b604', class: "InputIcon" }, this.isPasswordVisible &&
-            h("svg", { key: 'fd168b4ec7ed18213aef15d5c7bcb89183b5626d', 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("g", { key: '3ab8953db8743082bb19d4f97ae6191724145a0e', transform: "translate(-110.856 -23.242)" }, h("circle", { key: '716eb0de02150f4d5791cb7cf1cf7e904de4e8b9', class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), h("g", { key: '4ca623e6f31b09dbf6495fe657e9f6b67bfddbd8', transform: "translate(117.499 27.37)" }, h("path", { key: '0377c51b5536b07d0cefb77ed82d714fc82b5d9e', class: "PasswordVisibilityIcon", d: "M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z", transform: "translate(-142.164 -39.123)" }), h("path", { key: '3ee2f6849511a3ce18ccfcaea0b503f1b9e57329', class: "PasswordVisibilityIcon", d: "M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z", transform: "translate(-136.413 -42.068)" })), h("g", { key: '24fab8dc6f6ef08ef1a36227156b768925a2a7ba', transform: "translate(110.856 24.899)" }, h("path", { key: 'b41b45065b8f55772bbdfbced34ef4d7736c133a', 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("path", { key: '39f77d5f4028baf654fdc07a2f03525b994d508f', 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("rect", { key: '74bdc0477190de8bd67e30e0799ed1d4c255fff0', class: "PasswordVisibilityIcon", width: "0.972", height: "15.861", rx: "0.486", transform: "translate(114.827 23.858) rotate(-39.315)" }))), !this.isPasswordVisible &&
-            h("svg", { key: '89e71e7d5fc2af237c7a0af69838a60f997dc0ee', 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("g", { key: '97447b59b0e079f3b2a154681aef2cef572e445b', transform: "translate(-14.185 -27.832)" }, h("path", { key: 'c35b80be71460f5fc0c469ee807e3f83f5ab1cb9', 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("circle", { key: '3a6bfc9d02b7c66ecd0e07481e1963a6bcab3fb0', class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" }))));
-        let userIdentification = h("div", { key: '5b43adf706d46ce330b81e0bc5e8bbd1bfc2b883', class: "FormBox" }, h("div", { key: '0c53a0428fbcb10876e16d0505cf895c5bffa3bd', class: "FormValue" }, h("div", { key: '8aeda926da67db1e58595287f15d815e7887dc45', class: (!this.isValidUserEmail || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, h("input", { key: 'bf82f8b419fe217143d3928262b9b256e43a9f79', type: "text", placeholder: '', value: this.userNameEmail, onFocus: (event) => this.handleInputChange(event, 'user'), onInput: (event) => this.handleInputChange(event, 'user'), autocapitalize: "none", required: true }), h("label", { key: '7a0f71f2c013c8d00d0d7c66452e09badfd17bb3', class: (this.userNameEmail ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserEmail || this.hasError ? 'FieldInvalid' : '') }, translate('userEmail', this.lang)), !this.isValidUserEmail &&
-            h("p", { key: 'ed3453e628b9d60f8df2c3c1e04024706c532bfd', class: "InvalidField" }, translate('invalidField', this.lang))), h("div", { key: 'c778082662a1f29bdb6b19799c702ce3b4773a0a', class: (!this.isValidPassword || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, h("input", { key: '7cbdd79f39f986efc4cfadf0577782c86af8eec9', type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onFocus: (event) => this.handleInputChange(event, 'password'), onInput: (event) => this.handleInputChange(event, 'password'), autocapitalize: "none", required: true }), h("label", { key: '94d576059031cb459757f417245a241a768137fe', class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || this.hasError ? 'FieldInvalid' : '') }, translate('password', this.lang)), !this.isValidPassword &&
-            h("p", { key: '9c961763ac1a5c3af53d63b4b4423f22d341f2a4', class: "InvalidField" }, translate('invalidField', this.lang))), this.passwordReset == 'true' &&
-            h("div", { key: '9f0730d9d3000def2d5b0edb2fcef7c2b77633cf', class: "ForgotPassword" }, h("button", { key: '3bd5379cf60cba95c1338968c451366264bec081', onClick: () => this.resetPassword() }, translate('forgotPassword', this.lang))), h("button", { key: '7a5ac0291a075d7c4f1a1f235dc6be2ccfa2239e', disabled: (!this.isValidUserEmail || !this.isValidPassword || !this.userNameEmail || !this.userPassword), class: "SubmitCredentials", onClick: () => this.handleLogin() }, translate('login', this.lang)), this.hasError &&
-            h("p", { key: 'f40b7b875d615bb6af19dac753910763638409a8', class: "CredentialsError" }, this.errorMessage)));
-        return h("section", { key: '6c0b3e43c5fdd9993a02f11b9bfa817b2a5069f2', ref: el => this.stylingContainer = el }, userIdentification);
+        let visibilityIcon = h("span", { key: '7e2a13b86952a81d92e46aadc7ce5029a481bcc0', class: "InputIcon" }, this.isPasswordVisible &&
+            h("svg", { key: 'f745357aebd4ba59b18a268e1159545ab9227b6d', 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("g", { key: '6a34839a4c1a9bcc227ce71ac1f55809b05e5b46', transform: "translate(-110.856 -23.242)" }, h("circle", { key: '77448e74d7ebc1f89c11793f1de0cafd1c26e0b3', class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), h("g", { key: 'e627dcd5784c782862ac444a570369b9f718934d', transform: "translate(117.499 27.37)" }, h("path", { key: 'f2238aee9409d92971971850266ac84587bd7d13', class: "PasswordVisibilityIcon", d: "M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z", transform: "translate(-142.164 -39.123)" }), h("path", { key: '26c81b19ba3275bd40eb4395507f0e9f8d5f9d40', class: "PasswordVisibilityIcon", d: "M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z", transform: "translate(-136.413 -42.068)" })), h("g", { key: '35f83887aa01cc7c6412b462a581bf6954046dc5', transform: "translate(110.856 24.899)" }, h("path", { key: 'da30b190df442cbf7a89c9dd0790a65cf8bae574', 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("path", { key: 'febf8ee47512ae58e178eeeb4d4024c74d04fb96', 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("rect", { key: '053ec6df6b3a49e17df73ce8a32c393d8630140a', class: "PasswordVisibilityIcon", width: "0.972", height: "15.861", rx: "0.486", transform: "translate(114.827 23.858) rotate(-39.315)" }))), !this.isPasswordVisible &&
+            h("svg", { key: 'ac96ad3c2e6cd9653e8bd8d17ea4b0cc43896319', 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("g", { key: 'f0431fab2dea65be11afa02d4c50af4940cf76bd', transform: "translate(-14.185 -27.832)" }, h("path", { key: 'fdc015794619daca5d45f90f931708775ecd8db3', 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("circle", { key: '24dbfed823b18d05f65b448b322c415fd9f61d2e', class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" }))));
+        let userIdentification = h("div", { key: 'ee9856d867a413208cb3d75945106804178afd08', class: "FormBox" }, h("div", { key: 'a2749547b6b7eac8183ef4dd79d3e24549d0cdde', class: "FormValue" }, this.loginByPhoneNumber === 'true'
+            ? h("div", { class: (!this.isValidUserPhone || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox ' }, h("div", { class: "PhoneInputBox" }, h("div", { class: "PrefixBox" }, h("vaadin-combo-box", { items: this.userPrefixOptions, value: this.userPrefix, onChange: this.handleInputChangePartial('prefix') }), h("label", { class: (this.userPrefix ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone || this.hasError ? 'FieldInvalid' : '') }, translate('userPrefix', this.lang))), h("div", { class: "PhoneBox" }, h("input", { type: "text", placeholder: '', value: this.userPhone, onFocus: this.handleInputChangePartial('phone'), onInput: this.handleInputChangePartial('phone'), autocapitalize: "none", required: true }), h("label", { class: (this.userPhone ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserPhone || this.hasError ? 'FieldInvalid' : '') }, translate('userPhone', this.lang)))), !this.isValidUserPhone &&
+                h("p", { class: "InvalidField" }, translate('invalidField', this.lang)))
+            : h("div", { class: (!this.isValidUserEmail || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, h("input", { type: "text", placeholder: '', value: this.userNameEmail, onFocus: this.handleInputChangePartial('user'), onInput: this.handleInputChangePartial('user'), autocapitalize: "none", required: true }), h("label", { class: (this.userNameEmail ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserEmail || this.hasError ? 'FieldInvalid' : '') }, translate('userEmail', this.lang)), !this.isValidUserEmail &&
+                h("p", { class: "InvalidField" }, translate('invalidField', this.lang))), h("div", { key: '9e5a38927b2355764882b86ec41b3c905ba28a74', class: (!this.isValidPassword || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, h("input", { key: '171eaa238653e8875898397e4c5c5875e2a4e8b9', type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onFocus: this.handleInputChangePartial('password'), onInput: this.handleInputChangePartial('password'), autocapitalize: "none", required: true }), h("label", { key: '691a65151e6011c7acf94ff489d3f931b7b6f2b9', class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || this.hasError ? 'FieldInvalid' : '') }, translate('password', this.lang)), !this.isValidPassword &&
+            h("p", { key: '880a618f35b645250420ddff462a07d4c6a15e21', class: "InvalidField" }, translate('invalidField', this.lang))), this.passwordReset == 'true' &&
+            h("div", { key: '67d0dda3a8c3b7dc16add392d28111760e3c8941', class: "ForgotPassword" }, h("button", { key: '2f15ce7031f0536252c38ba71eab46a99035bb10', onClick: this.resetPassword }, translate('forgotPassword', this.lang))), h("button", { key: 'f719e61f203d5ad26927c03852fe0813f90c9382', disabled: ((this.loginByPhoneNumber !== 'true' && (!this.isValidUserEmail || !this.userNameEmail)) ||
+                (this.loginByPhoneNumber === 'true' && (!this.isValidUserPhone || !this.userPhone || !this.userPrefix)) ||
+                !this.userPassword || !this.isValidPassword), class: "SubmitCredentials", onClick: this.handleLogin }, translate('login', this.lang)), this.hasError &&
+            h("p", { key: 'd7ef26b85544e6491a52a0bad48faa505c85e848', class: "CredentialsError" }, this.errorMessage)));
+        return h("section", { key: 'b5d37deebd2f1911594b7845c7eb0d65cbda6e75', ref: el => this.stylingContainer = el }, userIdentification);
     }
     static get is() { return "user-login"; }
     static get encapsulation() { return "shadow"; }
@@ -218,7 +429,7 @@ export class UserLogin {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Endpoint"
+                    "text": "API endpoint URL for login requests"
                 },
                 "attribute": "endpoint",
                 "reflect": true,
@@ -236,7 +447,7 @@ export class UserLogin {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Language"
+                    "text": "Language code for translations (default is 'en')"
                 },
                 "attribute": "lang",
                 "reflect": true,
@@ -254,7 +465,7 @@ export class UserLogin {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Client styling"
+                    "text": "Inline CSS styling provided by the client"
                 },
                 "attribute": "client-styling",
                 "reflect": true,
@@ -272,7 +483,7 @@ export class UserLogin {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Client styling by url"
+                    "text": "URL to load additional CSS styling"
                 },
                 "attribute": "client-styling-url",
                 "reflect": true,
@@ -290,7 +501,7 @@ export class UserLogin {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Translation url"
+                    "text": "URL for fetching translations"
                 },
                 "attribute": "translation-url",
                 "reflect": true,
@@ -308,7 +519,7 @@ export class UserLogin {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Password reset"
+                    "text": "Flag indicating whether the password reset feature is enabled"
                 },
                 "attribute": "password-reset",
                 "reflect": true,
@@ -326,7 +537,7 @@ export class UserLogin {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "User email regex"
+                    "text": "Regular expression for validating the user email"
                 },
                 "attribute": "user-email-regex",
                 "reflect": true
@@ -343,12 +554,47 @@ export class UserLogin {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "User email regex options"
+                    "text": "Regex options for user email validation"
                 },
                 "attribute": "user-email-regex-options",
                 "reflect": true,
                 "defaultValue": "'i'"
             },
+            "userPhoneRegex": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User phone regex"
+                },
+                "attribute": "user-phone-regex",
+                "reflect": true
+            },
+            "userPhoneRegexOptions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User phone regex options"
+                },
+                "attribute": "user-phone-regex-options",
+                "reflect": true,
+                "defaultValue": "''"
+            },
             "passwordRegex": {
                 "type": "string",
                 "mutable": false,
@@ -361,7 +607,7 @@ export class UserLogin {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Password regex"
+                    "text": "Regular expression for validating the password"
                 },
                 "attribute": "password-regex",
                 "reflect": true
@@ -378,11 +624,47 @@ export class UserLogin {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Password regex options"
+                    "text": "Regex options for password validation"
                 },
                 "attribute": "password-regex-options",
                 "reflect": true,
                 "defaultValue": "''"
+            },
+            "version": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flag to determine if the component uses version 2 of the API"
+                },
+                "attribute": "version",
+                "reflect": true,
+                "defaultValue": "'gm16'"
+            },
+            "loginByPhoneNumber": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If set to true, login will be done by phone number, else by username/email"
+                },
+                "attribute": "login-by-phone-number",
+                "reflect": true,
+                "defaultValue": "'false'"
             }
         };
     }
@@ -391,17 +673,27 @@ export class UserLogin {
             "userNameEmail": {},
             "userPassword": {},
             "isValidUserEmail": {},
+            "userPhone": {},
+            "userPrefix": {},
             "isValidPassword": {},
+            "isValidUserPhone": {},
             "isPasswordVisible": {},
             "limitStylingAppends": {},
             "errorMessage": {},
-            "hasError": {}
+            "hasError": {},
+            "userPrefixOptions": {}
         };
     }
     static get watchers() {
         return [{
                 "propName": "translationUrl",
                 "methodName": "handleNewTranslations"
+            }, {
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleStylingUrlChange"
             }];
     }
 }