@everymatrix/user-login 1.44.0 → 1.45.2

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

@@ -1,453 +1,407 @@
-import { Component, Prop, State, Watch, h } from '@stencil/core';
-import { getTranslations, translate } from '../../utils/locale.utils';
+import { h } from "@stencil/core";
+import { getTranslations, translate } from "../../utils/locale.utils";
 export class UserLogin {
-  constructor() {
-    /**
-     * Endpoint
-     */
-    this.endpoint = '';
-    /**
-    * Language
-    */
-    this.lang = 'en';
-    /**
-    * Client styling
-    */
-    this.clientStyling = '';
-    /**
-    * Client styling by url
-    */
-    this.clientStylingUrl = '';
-    /**
-    * Translation url
-    */
-    this.translationUrl = '';
-    /**
-     * Password reset
-     */
-    this.passwordReset = 'false';
-    /**
-     * User email regex options
-     */
-    this.userEmailRegexOptions = 'i';
-    /**
-     * Password regex options
-     */
-    this.passwordRegexOptions = '';
-    /**
-     * Username
-     */
-    this.userNameEmail = '';
-    /**
-     * Password
-     */
-    this.userPassword = '';
-    this.isValidUserEmail = true;
-    this.isValidPassword = true;
-    this.isPasswordVisible = false;
-    this.limitStylingAppends = false;
-    this.errorMessage = '';
-    this.hasError = false;
-    this.errorCode = '';
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.appendChild(sheet);
-    };
-    this.setClientStylingURL = () => {
-      let url = new URL(this.clientStylingUrl);
-      let cssFile = document.createElement('style');
-      fetch(url.href)
-        .then((res) => res.text())
-        .then((data) => {
-        cssFile.innerHTML = data;
-        setTimeout(() => { this.stylingContainer.appendChild(cssFile); }, 1);
-      });
-    };
-    this.autofillCredentialsHandler = (e) => {
-      this.userNameEmail = e.detail.userNameEmail;
-      this.userPassword = e.detail.userPassword;
-      this.handleLogin();
-    };
-    this.userLogin = async ({ username, password }) => {
-      let headers = {
-        'Content-Type': 'application/json'
-      };
-      let bodyData = {
-        username,
-        password
-      };
-      let options = {
-        method: 'POST',
-        headers,
-        body: JSON.stringify(bodyData),
-      };
-      fetch(`${this.endpoint}/v1/player/legislation/login`, options)
-        .then((res) => {
-        return 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);
+    constructor() {
+        this.errorCode = '';
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.appendChild(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let url = new URL(this.clientStylingUrl);
+            let cssFile = document.createElement('style');
+            fetch(url.href)
+                .then((res) => res.text())
+                .then((data) => {
+                cssFile.innerHTML = data;
+                setTimeout(() => { this.stylingContainer.appendChild(cssFile); }, 1);
+            });
+        };
+        this.autofillCredentialsHandler = (e) => {
+            this.userNameEmail = e.detail.userNameEmail;
+            this.userPassword = e.detail.userPassword;
+            this.handleLogin();
+        };
+        this.userLogin = async ({ username, password }) => {
+            let headers = {
+                'Content-Type': 'application/json'
+            };
+            let bodyData = {
+                username,
+                password
+            };
+            let options = {
+                method: 'POST',
+                headers,
+                body: JSON.stringify(bodyData),
+            };
+            fetch(`${this.endpoint}/v1/player/legislation/login`, options)
+                .then((res) => {
+                return 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);
+                }
+                if ((data === null || data === void 0 ? void 0 : data.hasToSetPass) === true) {
+                    window.postMessage({ type: 'HasToSetPass' }, window.location.href);
+                }
+                if (data.sessionId) {
+                    window.postMessage({ type: 'UserSessionID', session: data.sessionId, userid: data.userId }, window.location.href);
+                    window.postMessage({ type: 'WidgetNotification', data: {
+                            type: 'success',
+                            message: translate('successMessage', this.lang)
+                        } }, window.location.href);
+                    this.hasError = false;
+                }
+                else {
+                    // handles errors thrown by api
+                    this.hasError = true;
+                    this.errorCode = (_b = data === null || data === void 0 ? void 0 : data.thirdPartyResponse) === null || _b === void 0 ? void 0 : _b.errorCode;
+                    this.errorMessage = translate(`${this.errorCode}`, this.lang) || ((_c = data === null || data === void 0 ? void 0 : data.thirdPartyResponse) === null || _c === void 0 ? void 0 : _c.message) || translate('genericError', this.lang);
+                    if (this.errorMessage) {
+                        console.error(this.errorMessage);
+                        this.sendErrorNotification(this.errorMessage);
+                    }
+                }
+            }).catch((err) => {
+                // handles unexpected errors
+                console.error(err);
+                this.hasError = true;
+                this.errorMessage = translate('genericError', this.lang);
+                this.sendErrorNotification(this.errorMessage);
+            });
+        };
+        this.debouncedUserLogin = this.debounce(this.userLogin, 850);
+        this.handleLogin = () => {
+            this.debouncedUserLogin({
+                username: this.userNameEmail,
+                password: this.userPassword
+            });
+            this.dispatchUpdateLoginCredentialsEvent();
+        };
+        this.handleInputChange = (event, location) => {
+            this.hasError = false;
+            const inputValue = event.target.value;
+            if (location === 'user') {
+                this.userNameEmail = inputValue;
+                this.isValidUserEmail = this.userEmailValidation(this.userNameEmail);
+            }
+            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.togglePassword = () => {
+            this.isPasswordVisible = !this.isPasswordVisible;
+        };
+        this.resetPassword = () => {
+            window.postMessage({ type: "NavForgotPassword" }, window.location.href);
+        };
+        this.endpoint = '';
+        this.lang = 'en';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.passwordReset = 'false';
+        this.userEmailRegex = undefined;
+        this.userEmailRegexOptions = 'i';
+        this.passwordRegex = undefined;
+        this.passwordRegexOptions = '';
+        this.userNameEmail = '';
+        this.userPassword = '';
+        this.isValidUserEmail = true;
+        this.isValidPassword = true;
+        this.isPasswordVisible = false;
+        this.limitStylingAppends = false;
+        this.errorMessage = '';
+        this.hasError = false;
+    }
+    handleNewTranslations() {
+        getTranslations(this.translationUrl);
+    }
+    async componentWillLoad() {
+        if (this.translationUrl.length > 2) {
+            await getTranslations(this.translationUrl);
         }
-        if ((data === null || data === void 0 ? void 0 : data.hasToSetPass) === true) {
-          window.postMessage({ type: 'HasToSetPass' }, window.location.href);
+    }
+    componentDidLoad() {
+        window.addEventListener('LoginCredentials', this.autofillCredentialsHandler);
+        window.postMessage({ type: 'UserLoginDidLoad' });
+    }
+    componentDidRender() {
+        // start custom styling area
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
         }
-        if (data.sessionId) {
-          window.postMessage({ type: 'UserSessionID', session: data.sessionId, userid: data.userId }, window.location.href);
-          window.postMessage({ type: 'WidgetNotification', data: {
-              type: 'success',
-              message: translate('successMessage', this.lang)
+        // end custom styling area
+    }
+    disconnectedCallback() {
+        window.removeEventListener('LoginCredentials', this.autofillCredentialsHandler);
+    }
+    sendErrorNotification(errorMessage) {
+        window.postMessage({ type: "HasError", error: errorMessage }, window.location.href);
+        window.postMessage({ type: 'WidgetNotification', data: {
+                type: 'error',
+                message: errorMessage
             } }, window.location.href);
-          this.hasError = false;
-        }
-        else {
-          // handles errors thrown by api
-          this.hasError = true;
-          this.errorCode = (_b = data === null || data === void 0 ? void 0 : data.thirdPartyResponse) === null || _b === void 0 ? void 0 : _b.errorCode;
-          this.errorMessage = translate(`${this.errorCode}`, this.lang) || ((_c = data === null || data === void 0 ? void 0 : data.thirdPartyResponse) === null || _c === void 0 ? void 0 : _c.message) || translate('genericError', this.lang);
-          if (this.errorMessage) {
-            console.error(this.errorMessage);
-            this.sendErrorNotification(this.errorMessage);
-          }
-        }
-      }).catch((err) => {
-        // handles unexpected errors
-        console.error(err);
-        this.hasError = true;
-        this.errorMessage = translate('genericError', this.lang);
-        this.sendErrorNotification(this.errorMessage);
-      });
-    };
-    this.debouncedUserLogin = this.debounce(this.userLogin, 850);
-    this.handleLogin = () => {
-      this.debouncedUserLogin({
-        username: this.userNameEmail,
-        password: this.userPassword
-      });
-      this.dispatchUpdateLoginCredentialsEvent();
-    };
-    this.handleInputChange = (event, location) => {
-      this.hasError = false;
-      const inputValue = event.target.value;
-      if (location === 'user') {
-        this.userNameEmail = inputValue;
-        this.isValidUserEmail = this.userEmailValidation(this.userNameEmail);
-      }
-      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.togglePassword = () => {
-      this.isPasswordVisible = !this.isPasswordVisible;
-    };
-    this.resetPassword = () => {
-      window.postMessage({ type: "NavForgotPassword" }, window.location.href);
-    };
-  }
-  handleNewTranslations() {
-    getTranslations(this.translationUrl);
-  }
-  async componentWillLoad() {
-    if (this.translationUrl.length > 2) {
-      await getTranslations(this.translationUrl);
     }
-  }
-  componentDidLoad() {
-    window.addEventListener('LoginCredentials', this.autofillCredentialsHandler);
-    window.postMessage({ type: 'UserLoginDidLoad' });
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrl)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
+    debounce(func, delay) {
+        let timer;
+        return function (...args) {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                func.apply(this, args);
+            }, delay);
+        };
     }
-    // end custom styling area
-  }
-  disconnectedCallback() {
-    window.removeEventListener('LoginCredentials', this.autofillCredentialsHandler);
-  }
-  sendErrorNotification(errorMessage) {
-    window.postMessage({ type: "HasError", error: errorMessage }, window.location.href);
-    window.postMessage({ type: 'WidgetNotification', data: {
-        type: 'error',
-        message: errorMessage
-      } }, window.location.href);
-  }
-  debounce(func, delay) {
-    let timer;
-    return function (...args) {
-      clearTimeout(timer);
-      timer = setTimeout(() => {
-        func.apply(this, args);
-      }, delay);
-    };
-  }
-  dispatchUpdateLoginCredentialsEvent() {
-    if (!this.hasError) {
-      this.updateLoginCredentialsEvent = new CustomEvent("UpdateLoginCredentials", {
-        bubbles: true,
-        detail: {
-          userNameEmail: this.userNameEmail,
-          userPassword: this.userPassword
+    dispatchUpdateLoginCredentialsEvent() {
+        if (!this.hasError) {
+            this.updateLoginCredentialsEvent = new CustomEvent("UpdateLoginCredentials", {
+                bubbles: true,
+                detail: {
+                    userNameEmail: this.userNameEmail,
+                    userPassword: this.userPassword
+                }
+            });
+            window.dispatchEvent(this.updateLoginCredentialsEvent);
         }
-      });
-      window.dispatchEvent(this.updateLoginCredentialsEvent);
     }
-  }
-  ;
-  render() {
-    let visibilityIcon = h("span", { 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)" }))),
-      !this.isPasswordVisible &&
-        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)" }))));
-    let userIdentification = h("div", { class: "FormBox" },
-      h("div", { class: "FormValue" },
-        h("div", { class: (!this.isValidUserEmail || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' },
-          h("input", { type: "text", placeholder: '', value: this.userNameEmail, onFocus: (event) => this.handleInputChange(event, 'user'), onInput: (event) => this.handleInputChange(event, '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", { class: (!this.isValidPassword || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' },
-          visibilityIcon,
-          h("input", { 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", { class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || this.hasError ? 'FieldInvalid' : '') }, translate('password', this.lang)),
-          !this.isValidPassword &&
-            h("p", { class: "InvalidField" }, translate('invalidField', this.lang))),
-        this.passwordReset == 'true' &&
-          h("div", { class: "ForgotPassword" },
-            h("button", { onClick: () => this.resetPassword() }, translate('forgotPassword', this.lang))),
-        h("button", { disabled: (!this.isValidUserEmail || !this.isValidPassword || !this.userNameEmail || !this.userPassword), class: "SubmitCredentials", onClick: () => this.handleLogin() }, translate('login', this.lang)),
-        this.hasError &&
-          h("p", { class: "CredentialsError" }, this.errorMessage)));
-    return h("section", { ref: el => this.stylingContainer = el }, userIdentification);
-  }
-  static get is() { return "user-login"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["user-login.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["user-login.css"]
-  }; }
-  static get properties() { return {
-    "endpoint": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Endpoint"
-      },
-      "attribute": "endpoint",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "lang": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Language"
-      },
-      "attribute": "lang",
-      "reflect": true,
-      "defaultValue": "'en'"
-    },
-    "clientStyling": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Client styling"
-      },
-      "attribute": "client-styling",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "clientStylingUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Client styling by url"
-      },
-      "attribute": "client-styling-url",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "translationUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Translation url"
-      },
-      "attribute": "translation-url",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "passwordReset": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Password reset"
-      },
-      "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": "User email regex"
-      },
-      "attribute": "user-email-regex",
-      "reflect": true
-    },
-    "userEmailRegexOptions": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "User email regex options"
-      },
-      "attribute": "user-email-regex-options",
-      "reflect": true,
-      "defaultValue": "'i'"
-    },
-    "passwordRegex": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Password regex"
-      },
-      "attribute": "password-regex",
-      "reflect": true
-    },
-    "passwordRegexOptions": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Password regex options"
-      },
-      "attribute": "password-regex-options",
-      "reflect": true,
-      "defaultValue": "''"
+    ;
+    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);
+    }
+    static get is() { return "user-login"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["user-login.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["user-login.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Endpoint"
+                },
+                "attribute": "endpoint",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "lang": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language"
+                },
+                "attribute": "lang",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client styling"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client styling by url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Translation url"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "passwordReset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Password reset"
+                },
+                "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": "User email regex"
+                },
+                "attribute": "user-email-regex",
+                "reflect": true
+            },
+            "userEmailRegexOptions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User email regex options"
+                },
+                "attribute": "user-email-regex-options",
+                "reflect": true,
+                "defaultValue": "'i'"
+            },
+            "passwordRegex": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Password regex"
+                },
+                "attribute": "password-regex",
+                "reflect": true
+            },
+            "passwordRegexOptions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Password regex options"
+                },
+                "attribute": "password-regex-options",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "userNameEmail": {},
+            "userPassword": {},
+            "isValidUserEmail": {},
+            "isValidPassword": {},
+            "isPasswordVisible": {},
+            "limitStylingAppends": {},
+            "errorMessage": {},
+            "hasError": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "translationUrl",
+                "methodName": "handleNewTranslations"
+            }];
     }
-  }; }
-  static get states() { return {
-    "userNameEmail": {},
-    "userPassword": {},
-    "isValidUserEmail": {},
-    "isValidPassword": {},
-    "isPasswordVisible": {},
-    "limitStylingAppends": {},
-    "errorMessage": {},
-    "hasError": {}
-  }; }
-  static get watchers() { return [{
-      "propName": "translationUrl",
-      "methodName": "handleNewTranslations"
-    }]; }
 }