@everymatrix/pam-login 0.0.1

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

@@ -0,0 +1,723 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { getTranslations, translate } from "../../utils/locale.utils";
+import "@vaadin/combo-box";
+import "../../../../../ui-skeleton/dist/types/index";
+export class PamLogin {
+    constructor() {
+        /**
+         * Fetch phone prefixes from the API
+         */
+        this.getPrefixOptions = () => {
+            const url = new URL('v1/player/validPhoneCodes', this.endpoint);
+            return new Promise((resolve) => {
+                fetch(url.href)
+                    .then((res) => res.json())
+                    .then((res) => {
+                    this.prefixOptions = res.phoneCodes.map(code => {
+                        return { label: code.Prefix, value: code.Prefix };
+                    });
+                    resolve();
+                });
+            });
+        };
+        /**
+         * Handle autofilling of credentials from a dispatched event
+         */
+        this.handleAutofillCredentials = (e) => {
+            this.contactValue = e.detail.userNameEmail;
+            this.passwordValue = e.detail.userPassword;
+            this.handleLogin();
+        };
+        /**
+         * Get login token from password-management service
+         */
+        this.getLoginToken = () => {
+            const url = new URL('api/v1/players/password-management/auth/password/verify', this.endpoint);
+            const headers = {
+                'Content-Type': 'application/json'
+            };
+            if (this.captchaData.isEnabled) {
+                headers['X-Captcha-Response'] = this.captchaData.token;
+            }
+            const body = {
+                contact: this.contactValue,
+                password: this.passwordValue
+            };
+            const options = {
+                method: 'POST',
+                headers,
+                body: JSON.stringify(body),
+            };
+            return new Promise((resolve, reject) => {
+                fetch(url.href, options)
+                    .then((res) => res.json())
+                    .then((res) => {
+                    if (res.token) {
+                        return resolve(res.token);
+                    }
+                    else {
+                        return reject('Token not received from the API call');
+                    }
+                });
+            });
+        };
+        /**
+         * Function to send legislation login request
+         */
+        this.loginPlayer = (token) => {
+            const url = new URL('api/v2/gm/legislation/login', this.endpoint);
+            const headers = {
+                'Content-Type': 'application/json'
+            };
+            const body = {
+                token,
+                method: 'login'
+            };
+            const options = {
+                method: 'POST',
+                headers,
+                body: JSON.stringify(body),
+            };
+            return new Promise((resolve, reject) => {
+                fetch(url.href, options)
+                    .then((res) => res.json(), (err) => reject(err))
+                    .then((res) => {
+                    if (res.sessionId && res.playerId) {
+                        return resolve(res);
+                    }
+                    else {
+                        const err = res;
+                        return reject(err);
+                    }
+                });
+            });
+        };
+        /**
+         * Handle login process
+         */
+        this.handleLogin = () => {
+            this.isLoading = true;
+            this.getLoginToken()
+                .then((token) => {
+                this.loginPlayer(token)
+                    .then((res) => {
+                    window.postMessage({ type: 'UserSessionID', session: res.sessionId, userid: res.playerId }, window.location.href);
+                    window.postMessage({ type: 'WidgetNotification', data: { type: 'success', message: translate('successMessage', this.lang) } }, window.location.href);
+                    this.apiErrorMessage = '';
+                })
+                    .catch((err) => {
+                    console.error(`Legislation login failed: ${err.message}`, err.errors);
+                    this.apiErrorMessage = translate('genericError', this.lang);
+                    this.sendErrorNotification(this.apiErrorMessage);
+                })
+                    .finally(() => this.isLoading = false);
+            })
+                .catch((err) => {
+                console.error(err);
+                this.apiErrorMessage = translate('genericError', this.lang);
+                this.sendErrorNotification(this.apiErrorMessage);
+                this.isLoading = false;
+            });
+            this.dispatchUpdateLoginCredentialsEvent();
+        };
+        /**
+         * Handle input changes for username/email and password
+         *
+         * @param event - input event
+         * @param location - 'user' | 'phone' | 'password'
+         */
+        this.handleInputChange = (event, location) => {
+            const inputValue = event.target.value;
+            switch (location) {
+                case 'user':
+                    this.contactValue = inputValue;
+                    this.isContactValid = this.validate('user', this.contactValue);
+                    break;
+                case 'phone':
+                    this.contactValue = inputValue;
+                    this.isContactValid = this.validate('phone', this.contactValue);
+                    break;
+                case 'prefix':
+                    this.prefixValue = inputValue;
+                    this.isContactValid = this.validate('phone', this.contactValue);
+                    break;
+                case 'password':
+                    this.passwordValue = inputValue;
+                    this.isPasswordValid = this.validate('password', inputValue);
+                    break;
+            }
+        };
+        // 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 input.length <= 3 || regex.test(input);
+                case 'phone':
+                    regex = new RegExp(this.userPhoneRegex, this.userPhoneRegexOptions);
+                    return input.length <= 3 || regex.test(input) && Boolean(this.prefixValue);
+                case 'password':
+                    regex = new RegExp(this.passwordRegex, this.passwordRegexOptions);
+                    return input.length <= 3 || regex.test(input);
+            }
+        };
+        this.isSubmitDisabled = () => {
+            return ((!this.isContactValid || !this.contactValue || (this.loginByPhoneNumber === 'true' && !this.prefixValue))
+                || !this.passwordValue
+                || !this.isPasswordValid) || this.isLoading
+                || (this.captchaData.isEnabled && !this.captchaData.token);
+        };
+        this.handleSubmit = (e) => {
+            if (e.key === 'Enter' && !this.isSubmitDisabled()) {
+                this.handleLogin();
+            }
+        };
+        /**
+         * Toggle password
+         */
+        this.togglePassword = () => {
+            this.isPasswordVisible = !this.isPasswordVisible;
+        };
+        /**
+         * Reset password
+         */
+        this.resetPassword = () => {
+            window.postMessage({ type: "NavForgotPassword" }, window.location.href);
+        };
+        this.endpoint = '';
+        this.lang = 'en';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.mbSource = undefined;
+        this.translationUrl = '';
+        this.passwordReset = 'false';
+        this.userEmailRegex = undefined;
+        this.userEmailRegexOptions = 'i';
+        this.userPhoneRegex = undefined;
+        this.userPhoneRegexOptions = '';
+        this.passwordRegex = undefined;
+        this.passwordRegexOptions = '';
+        this.loginByPhoneNumber = 'false';
+        this.isLoading = false;
+        this.contactValue = '';
+        this.passwordValue = '';
+        this.prefixValue = '';
+        this.prefixOptions = undefined;
+        this.isContactValid = true;
+        this.isPasswordValid = true;
+        this.isPasswordVisible = false;
+        this.apiErrorMessage = '';
+        this.captchaData = {
+            isEnabled: true,
+            token: '',
+            provider: '',
+            siteKey: ''
+        };
+    }
+    /**
+     * 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
+     */
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    /**
+     * 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
+     */
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    /**
+     * Lifecycle method: Fetch translations on component load
+     */
+    async componentWillLoad() {
+        if (this.loginByPhoneNumber === 'true') {
+            await this.getPrefixOptions();
+        }
+        if (this.translationUrl.length > 2) {
+            await getTranslations(this.translationUrl);
+        }
+        this.getLoginConfig()
+            .then(() => this.appendCaptchaScript(), (err) => {
+            console.error(err);
+            this.apiErrorMessage = translate('configError', this.lang);
+            this.sendErrorNotification(this.apiErrorMessage);
+        });
+    }
+    /**
+     * Lifecycle method: Set up event listeners after the component is rendered
+     */
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (window.emMessageBus != undefined) {
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            }
+            else {
+                if (this.clientStyling)
+                    setClientStyling(this.stylingContainer, this.clientStyling);
+                if (this.clientStylingUrl)
+                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+            }
+        }
+        window.addEventListener('LoginCredentials', this.handleAutofillCredentials);
+        window.postMessage({ type: 'UserLoginDidLoad' });
+    }
+    /**
+     * Lifecycle method: Clean up event listeners when the component is removed
+     */
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        window.removeEventListener('LoginCredentials', this.handleAutofillCredentials);
+    }
+    /**
+     * 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((err) => {
+                console.error('Error fetching login configuration:', err);
+                reject(err);
+            });
+        });
+    }
+    /**
+     * 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 || !['cloudflare', 'google'].includes(provider)) {
+            return;
+        }
+        switch (provider) {
+            case 'cloudflare':
+                window.turnstile.render('#turnstileContainer', {
+                    sitekey: siteKey,
+                    theme: 'light',
+                    callback: this.captchaCallback.bind(this),
+                });
+                return;
+            case 'google':
+                window.grecaptcha.ready(() => {
+                    window.grecaptcha.render('googleContainer', {
+                        sitekey: siteKey,
+                        callback: this.captchaCallback.bind(this),
+                        theme: 'light'
+                    });
+                });
+                return;
+        }
+    }
+    /**
+     * 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');
+        switch (provider) {
+            case 'cloudflare':
+                script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
+                break;
+            case 'google':
+                script.src = 'https://www.google.com/recaptcha/api.js';
+                break;
+        }
+        script.onload = this.handleCaptcha.bind(this);
+        document.head.appendChild(script);
+    }
+    /**
+     * Send error notification as a post message
+     */
+    sendErrorNotification(errorMessage) {
+        window.postMessage({ type: 'HasError', error: errorMessage }, window.location.href);
+        window.postMessage({
+            type: 'WidgetNotification', data: {
+                type: 'error',
+                message: errorMessage
+            }
+        }, window.location.href);
+    }
+    /**
+     * Dispatch event to notify about login credential updates
+     */
+    dispatchUpdateLoginCredentialsEvent() {
+        if (this.apiErrorMessage) {
+            return;
+        }
+        this.updateLoginCredentialsEvent = new CustomEvent("UpdateLoginCredentials", {
+            bubbles: true,
+            detail: {
+                userNameEmail: this.contactValue,
+                userPassword: this.passwordValue
+            }
+        });
+        window.dispatchEvent(this.updateLoginCredentialsEvent);
+    }
+    ;
+    /**
+     * Render function
+     */
+    render() {
+        const visibilityIcon = h("span", { key: 'bb874e46d790f8a76529b2f4ee0ccb2ea49ace3e', class: "InputIcon" }, this.isPasswordVisible
+            ? h("svg", { 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", { transform: "translate(-110.856 -23.242)" }, h("circle", { class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), h("g", { transform: "translate(117.499 27.37)" }, h("path", { 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", { 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", { transform: "translate(110.856 24.899)" }, h("path", { 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", { 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", { class: "PasswordVisibilityIcon", width: "0.972", height: "15.861", rx: "0.486", transform: "translate(114.827 23.858) rotate(-39.315)" })))
+            : h("svg", { 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", { transform: "translate(-14.185 -27.832)" }, h("path", { 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", { class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" }))));
+        const loginForm = (h("div", { key: '3822128fa2d495e22cfe6487b92a59074edc207b', class: "FormBox" }, h("div", { key: 'b492b35e0496d783bee08268de7da92de188e7b2', class: "FormValue", onKeyDown: this.handleSubmit }, this.loginByPhoneNumber === 'true'
+            ? h("div", { class: (this.isContactValid && !this.apiErrorMessage) ? 'InputBox' : 'InputBox InputInvalidBox' }, h("div", { class: "PhoneInputBox" }, h("div", { class: "PrefixBox" }, h("vaadin-combo-box", { items: this.prefixOptions, value: this.prefixValue, onChange: this.handleInputChangePartial('prefix') }), h("label", { class: (this.prefixValue ? 'FieldFilledIn' : '') + ' ' + (this.isContactValid ? '' : 'FieldInvalid') }, translate('userPrefix', this.lang))), h("div", { class: "PhoneBox" }, h("input", { type: "text", placeholder: '', value: this.contactValue, onFocus: this.handleInputChangePartial('phone'), onInput: this.handleInputChangePartial('phone'), autocapitalize: "none", required: true }), h("label", { class: (this.contactValue ? 'FieldFilledIn' : '') + ' ' + (this.isContactValid ? '' : 'FieldInvalid') }, translate('userPhone', this.lang)))), !this.isContactValid &&
+                h("p", { class: "CredentialsError" }, translate('userPhoneError', this.lang)))
+            : h("div", { class: this.isContactValid ? 'InputBox' : 'InputBox InputInvalidBox' }, h("input", { type: "text", placeholder: '', value: this.contactValue, onInput: this.handleInputChangePartial('user'), autocapitalize: "none", required: true }), h("label", { class: (this.contactValue ? 'FieldFilledIn' : '') + ' ' + (this.isContactValid ? '' : 'FieldInvalid') }, translate('userEmail', this.lang)), !this.isContactValid &&
+                h("p", { class: "CredentialsError" }, translate('userEmailError', this.lang))), h("div", { key: '941ccdbbdffadfa763255f6d035d11e25f95bca9', class: this.isPasswordValid ? 'InputBox' : 'InputBox InputInvalidBox' }, visibilityIcon, h("input", { key: '40e370bf348dc25c9c9b951cc8bef83ce2ee7c72', type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.passwordValue, onInput: this.handleInputChangePartial('password'), autocapitalize: "none", required: true }), h("label", { key: 'c6c86c450654d495d0022dd123d20ded3426fccf', class: (this.passwordValue ? 'FieldFilledIn' : '') + ' ' + (this.isPasswordValid ? '' : 'FieldInvalid') }, translate('password', this.lang)), this.isPasswordValid ||
+            h("p", { key: '98cd887991ab13215cdeba0d74deaef1f74bd61a', class: "CredentialsError" }, translate('userPasswordError', this.lang))), this.passwordReset == 'true' &&
+            h("div", { key: 'ccb6a014b9238dc1b43ee6d7fcbde0f6ad65a974', class: "ForgotPassword" }, h("button", { key: 'c07e6292964c9ffaf18f84b3fb639168bfe69711', onClick: this.resetPassword }, translate('forgotPassword', this.lang))), this.captchaData.isEnabled && this.captchaData.provider === 'cloudflare' &&
+            h("slot", { key: '873d1144706d713f38e87d7413dc65bea89eaf07', name: "turnstile" }), this.captchaData.isEnabled && this.captchaData.provider === 'google' &&
+            h("slot", { key: '2e88c7d908719ad03c32feb39c2782b6a53fa3e6', name: "google" }), h("button", { key: '16f1ce841ea0797a2a53fa88283e9504b149674b', disabled: this.isSubmitDisabled(), class: "SubmitCredentials", onClick: this.handleLogin }, translate('login', this.lang)), this.apiErrorMessage &&
+            h("p", { key: '6bfaca1c1894113134d8112bf0245c4fe8f539ff', class: "CredentialsError" }, this.apiErrorMessage))));
+        const skeleton = (h("div", { key: '6a5bdd7a73a48735fb7893846d18eab4cb5cd15d', class: "LoadingSkeleton" }, h("form", { key: '56909c222a4a5c01e00033183c49bac967fdd704', class: "Form" }, h("section", { key: 'aa5fb3aeccaa92b2dbaded30bc91f27d5fc88995', class: "FieldsSection" }, h("div", { key: '2232d21237018605d4dc5be187a2f5ef6dcbfdff', class: "FieldContainer" }, h("div", { key: 'b6ba71f89fae3edf9c8fbfc74a77b75287c12fcc', class: "FieldTitle" }, h("ui-skeleton", { key: '9237a050a5eec7ecb28d20e8e9af148ea5991474', structure: "title", width: "auto", height: "20px" })), h("ui-skeleton", { key: '7f1bcda4723e9f6f24dad602bff1480e122624da', structure: "rectangle", width: "auto", height: "35px" })), h("div", { key: 'ff6c82b4e37d9b796fecd9ca4c919a70ab1ed4ab', class: "FieldContainer" }, h("div", { key: 'a85bf5caf0db9b8ad12a475014f71d975a5114ed', class: "FieldTitle" }, h("ui-skeleton", { key: 'fe0600c8fa0564724b10203bf72c929566fcba54', structure: "title", width: "auto", height: "20px" })), h("ui-skeleton", { key: 'f59b2ccdbb812f8941e22bfae8f788f2bc821898', structure: "rectangle", width: "auto", height: "35px" }))), h("section", { key: '8b337059fb6bb2566c173ba5a2a6139b7a5a0d29', class: "ButtonsSection" }, h("div", { key: 'a5d537f7724c07b069cdf74b223237d140f51193', class: "Button" }, h("ui-skeleton", { key: 'ea24ff03ffb93d4d41a8617c6e2d16b6c94dc060', structure: "rectangle", width: "auto", height: "50px" }))))));
+        return (h("section", { key: '91eba8645bb65ce5871683189547dd9afcfb8e4a', ref: el => this.stylingContainer = el }, !this.isLoading ? skeleton : loginForm));
+    }
+    static get is() { return "pam-login"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pam-login.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pam-login.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "API endpoint URL for login requests"
+                },
+                "attribute": "endpoint",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "lang": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language code for translations (default is 'en')"
+                },
+                "attribute": "lang",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Inline CSS styling provided by the client"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL to load additional CSS styling"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The source identifier for message bus styling.\nThis is used to apply styles dynamically from a stream."
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL for fetching translations"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "passwordReset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flag indicating whether the password reset feature is enabled"
+                },
+                "attribute": "password-reset",
+                "reflect": true,
+                "defaultValue": "'false'"
+            },
+            "userEmailRegex": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Regular expression for validating the user email"
+                },
+                "attribute": "user-email-regex",
+                "reflect": true
+            },
+            "userEmailRegexOptions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "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,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Regular expression for validating the password"
+                },
+                "attribute": "password-regex",
+                "reflect": true
+            },
+            "passwordRegexOptions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Regex options for password validation"
+                },
+                "attribute": "password-regex-options",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "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'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {},
+            "contactValue": {},
+            "passwordValue": {},
+            "prefixValue": {},
+            "prefixOptions": {},
+            "isContactValid": {},
+            "isPasswordValid": {},
+            "isPasswordVisible": {},
+            "apiErrorMessage": {},
+            "captchaData": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "translationUrl",
+                "methodName": "handleNewTranslations"
+            }, {
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }];
+    }
+}