@everymatrix/user-login 1.32.4 → 1.33.0

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

@@ -0,0 +1,440 @@
+import { Component, Prop, State, Watch, 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.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.messageHandler = (e) => {
+      switch (e.data.type) {
+        case 'SendLoginCredentials':
+          this.userNameEmail = e.data.data.userNameEmail;
+          this.userPassword = e.data.data.userPassword;
+          this.userLogin({
+            username: this.userNameEmail,
+            password: this.userPassword
+          });
+          break;
+      }
+    };
+    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;
+        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.errorMessage = (_b = data === null || data === void 0 ? void 0 : data.thirdPartyResponse) === null || _b === void 0 ? void 0 : _b.message;
+          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.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('message', this.messageHandler);
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  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);
+    };
+  }
+  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'), 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'), 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 ? this.errorMessage : translate('genericError', this.lang))));
+    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": "''"
+    }
+  }; }
+  static get states() { return {
+    "userNameEmail": {},
+    "userPassword": {},
+    "isValidUserEmail": {},
+    "isValidPassword": {},
+    "isPasswordVisible": {},
+    "limitStylingAppends": {},
+    "errorMessage": {},
+    "hasError": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "translationUrl",
+      "methodName": "handleNewTranslations"
+    }]; }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/utils/locale.utils.js

@@ -0,0 +1,102 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'cz', 'de', 'hr'];
+const TRANSLATIONS = {
+  en: {
+    invalidField: 'This field is invalid',
+    forgotPassword: 'Forgot Password',
+    userEmail: 'Username or Email',
+    password: 'Password',
+    login: 'Login',
+    genericError: 'An unexpected error has occured',
+    successMessage: 'Login successful'
+  },
+  ro: {
+    invalidField: 'This field is invalid',
+    forgotPassword: 'Forgot Password',
+    userEmail: 'Username or Email',
+    password: 'Password',
+    login: 'Login',
+    genericError: 'An unexpected error has occured',
+    successMessage: 'Login successful'
+  },
+  hr: {
+    invalidField: 'Ovo polje je nevažeće',
+    forgotPassword: 'Zaboravljena lozinka',
+    userEmail: 'Korisničko ime ili email',
+    password: 'Lozinka',
+    login: 'Prijava',
+    genericError: 'Došlo je do neočekivane pogreške',
+    successMessage: 'Prijava uspješna'
+  },
+  fr: {
+    invalidField: 'This field is invalid',
+    forgotPassword: 'Forgot Password',
+    userEmail: 'Username or Email',
+    password: 'Password',
+    login: 'Login',
+    genericError: 'An unexpected error has occured',
+    successMessage: 'Login successful'
+  },
+  cs: {
+    invalidField: 'Ovo polje je nevažeće.',
+    forgotPassword: 'Zaboravio sam lozinku ',
+    userEmail: 'Korisničko ime ili email',
+    password: 'Lozinka',
+    login: 'Prijava',
+    genericError: 'An unexpected error has occured',
+    successMessage: 'Login successful'
+  },
+  de: {
+    invalidField: 'This field is invalid',
+    forgotPassword: 'Forgot Password',
+    userEmail: 'Username or Email',
+    password: 'Password',
+    login: 'Login',
+    genericError: 'An unexpected error has occured',
+    successMessage: 'Login successful'
+  },
+  'pt-br': {
+    'invalidField': 'O campo é inválido',
+    'forgotPassword': 'Esqueceu sua senha',
+    'userEmail': 'Usuário ou e-mail',
+    'Password': 'Senha',
+    'login': 'Entrem',
+    'genericError': 'Ocorreu um erro inesperado',
+    'successMessage': 'Você fez login com sucesso'
+  },
+  'es-mx': {
+    'invalidField': 'El campo es inválido',
+    'forgotPassword': 'Olvidó contraseña',
+    'userEmail': 'Usuario o Correo Electrónico',
+    'Password': 'Contraseña',
+    'login': 'Entrar',
+    'genericError': 'Ha ocurrido un error inesperado',
+    'successMessage': 'Ha ingreasado de forma exitosa'
+  }
+};
+export const getTranslations = (url) => {
+  // fetch url, get the data, replace the TRANSLATIONS content
+  return new Promise((resolve) => {
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+      Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+          TRANSLATIONS[item][key] = data[item][key];
+        }
+      });
+      resolve(true);
+    });
+  });
+};
+export const translate = (key, customLang, values) => {
+  const lang = customLang;
+  let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+  if (values !== undefined) {
+    for (const [key, value] of Object.entries(values.values)) {
+      const regex = new RegExp(`{${key}}`, 'g');
+      translation = translation.replace(regex, value);
+    }
+  }
+  return translation;
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+  return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
+}

package/dist/components/index.d.ts

@@ -0,0 +1,26 @@
+/* UserLogin custom elements */
+
+import type { Components, JSX } from "../types/components";
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UserLogin extends Components.UserLogin, HTMLElement {}
+export const UserLogin: {
+  prototype: UserLogin;
+  new (): UserLogin;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;