@everymatrix/user-login 1.13.16

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

@@ -0,0 +1,235 @@
+import { r as registerInstance, h } from './index-58908c9a.js';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'cz', 'de'];
+const TRANSLATIONS = {
+  en: {
+    invalidField: 'This field is invalid',
+    forgotPassword: 'Forgot Password',
+    userEmail: 'Username or Email',
+    password: 'Password',
+    login: 'Login'
+  },
+  ro: {
+    invalidField: 'This field is invalid',
+    forgotPassword: 'Forgot Password',
+    userEmail: 'Username or Email',
+    password: 'Password',
+    login: 'Login'
+  },
+  fr: {
+    invalidField: 'This field is invalid',
+    forgotPassword: 'Forgot Password',
+    userEmail: 'Username or Email',
+    password: 'Password',
+    login: 'Login'
+  },
+  cs: {
+    invalidField: 'Ovo polje je nevažeće.',
+    forgotPassword: 'Zaboravio sam lozinku ',
+    userEmail: 'Korisničko ime ili email',
+    password: 'Lozinka',
+    login: 'Prijava'
+  },
+  de: {
+    invalidField: 'This field is invalid',
+    forgotPassword: 'Forgot Password',
+    userEmail: 'Username or Email',
+    password: 'Password',
+    login: 'Login'
+  },
+};
+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);
+    });
+  });
+};
+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;
+};
+
+const userLoginCss = ":host{display:block;font-family:\"Roboto\", sans-serif}section{min-height:100vh;width:100%;background-position:center;background-size:cover}.FormBox{height:100vh;display:flex;position:relative;background:#082649;border:none;backdrop-filter:blur(15px) brightness(80%);justify-content:center;align-items:center}.InputBox{position:relative;margin:30px 0;width:310px;border-bottom:2px solid #0797B9}.InputBox.InputInvalidBox::after{content:\"\";height:2px;width:100%;transition:width 0.6s linear;background:#C23135}.InputBox::after{content:\"\";display:block;width:0;height:2px;position:relative;top:2px}.InputBox .PasswordVisibilityIcon{fill:#0797B9}.InputBox .InputIcon .TogglePasswordVisibility{cursor:pointer;position:absolute;top:18px;right:0}.InputBox .InputIcon .TogglePasswordVisibility.PasswordVisible{top:19.5px}.InputBox label{position:absolute;top:50%;left:5px;transform:translateY(-50%);color:#0797B9;font-size:1em;pointer-events:none;transition:0.5s}.InputBox label.FieldInvalid{color:#C23135}.InputBox input{width:100%;height:50px;background:transparent;border:none;outline:none;font-size:1em;padding:0 35px 0 5px;color:#fff;box-sizing:border-box}input:focus~label,label.FieldFilledIn{top:-3px;font-size:0.7em}.ForgotPassword button{margin:-10px 0 17px;font-size:0.9em;color:#0797B9;display:flex;justify-content:space-between;background-color:transparent;padding:0;height:unset;border:0;cursor:pointer}.ForgotPassword button:hover{color:#fff}.SubmitCredentials{display:block;margin:0 auto;padding:10px 20px;border-radius:5px;color:#fff;background:linear-gradient(to right, #EA0C66, #77318F);border:none;outline:none;cursor:pointer;font-size:1em}.SubmitCredentials:disabled{background:#707070}.Register{font-size:0.9em;color:#fff;text-align:center;margin:25px 0 10px}.Register p a{text-decoration:none;color:#fff;font-weight:600}.Register p a:hover{text-decoration:underline}.InvalidField{position:absolute;top:45px;color:#C23135;font-size:0.7em}.SubmitCredentials{margin-bottom:20px}.CredentialsError{color:#C23135;font-size:0.7em;padding:0 0 20px 0;margin:0}@media screen and (max-width: 480px){.FormBox{width:100%;border-radius:0px}}";
+
+const UserLogin = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Endpoint
+     */
+    this.endpoint = '';
+    /**
+    * Language
+    */
+    this.lang = 'en';
+    /**
+    * Client styling
+    */
+    this.clientStyling = '';
+    /**
+    * Client styling by url
+    */
+    this.clientStylingUrl = '';
+    /**
+    * Translation url
+    */
+    this.translationUrl = '';
+    /**
+     * Endpoint
+     */
+    this.passwordReset = false;
+    /**
+     * Endpoint
+     */
+    this.userEmailRegex = '^(?:[A-Z0-9][A-Z0-9._%@+-]{5,30}|[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4})$';
+    /**
+     * Endpoint
+     */
+    this.passwordRegex = '^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\\w\\s]).{8,20}$';
+    /**
+     * Username
+     */
+    this.userNameEmail = '';
+    /**
+     * Password
+     */
+    this.userPassword = '';
+    this.isValidUserEmail = true;
+    this.isValidPassword = true;
+    this.isPasswordVisible = false;
+    this.limitStylingAppends = false;
+    this.errorMessage = '';
+    this.checkValid = true;
+    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}/player/legislation/login`, options)
+        .then((res) => {
+        return res.json();
+      }).then((data) => {
+        var _a;
+        if (data.sessionId) {
+          window.postMessage({ type: 'UserSessionID', session: data.sessionID, userid: data.universalID }, window.location.href);
+          this.isFormValid(this.errorMessage = '');
+        }
+        else {
+          let error = (_a = data === null || data === void 0 ? void 0 : data.thirdPartyResponse) === null || _a === void 0 ? void 0 : _a.message;
+          this.errorMessage = error;
+          this.isFormValid(this.errorMessage);
+          window.postMessage({ type: "HasError", error }, window.location.href);
+          window.postMessage({ type: 'WidgetNotification', data: {
+              type: 'error',
+              message: error
+            } }, window.location.href);
+        }
+      });
+    };
+    this.isFormValid = (error) => {
+      this.checkValid = (error === '');
+    };
+    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.handleInputChange = (event, location) => {
+      this.checkValid = true;
+      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, "i");
+      return regex.test(input);
+    };
+    this.passwordValidation = (input) => {
+      const regex = new RegExp(this.passwordRegex, '');
+      return regex.test(input);
+    };
+    this.togglePassword = () => {
+      this.isPasswordVisible = !this.isPasswordVisible;
+    };
+    this.resetPassword = () => {
+      window.postMessage({ type: "ResetPassword" }, window.location.href);
+    };
+  }
+  handleNewTranslations() {
+    getTranslations(this.translationUrl);
+  }
+  async componentWillLoad() {
+    if (this.translationUrl.length > 2) {
+      await getTranslations(this.translationUrl);
+    }
+  }
+  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
+  }
+  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", ref: el => this.stylingContainer = el }, h("div", { class: "FormValue" }, h("div", { class: (!this.isValidUserEmail || !this.checkValid) ? '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.checkValid ? 'FieldInvalid' : '') }, translate('userEmail', this.lang)), !this.isValidUserEmail &&
+      h("p", { class: "InvalidField" }, translate('invalidField', this.lang))), h("div", { class: (!this.isValidPassword || !this.checkValid) ? '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.checkValid ? 'FieldInvalid' : '') }, translate('password', this.lang)), !this.isValidPassword &&
+      h("p", { class: "InvalidField" }, translate('invalidField', this.lang))), this.passwordReset &&
+      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.userLogin({ username: this.userNameEmail, password: this.userPassword }) }, translate('login', this.lang)), this.errorMessage &&
+      h("p", { class: "CredentialsError" }, this.errorMessage)));
+    return h("section", null, userIdentification);
+  }
+  static get watchers() { return {
+    "translationUrl": ["handleNewTranslations"]
+  }; }
+};
+UserLogin.style = userLoginCss;
+
+export { UserLogin as user_login };

package/dist/esm/user-login.js

@@ -0,0 +1,17 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-58908c9a.js';
+
+/*
+ Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = import.meta.url;
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return bootstrapLazy([["user-login",[[1,"user-login",{"endpoint":[513],"lang":[1537],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"passwordReset":[516,"password-reset"],"userEmailRegex":[513,"user-email-regex"],"passwordRegex":[513,"password-regex"],"userNameEmail":[32],"userPassword":[32],"isValidUserEmail":[32],"isValidPassword":[32],"isPasswordVisible":[32],"limitStylingAppends":[32],"errorMessage":[32],"checkValid":[32]}]]]], options);
+});

package/dist/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('./cjs/index.cjs.js');

package/dist/index.js

@@ -0,0 +1 @@
+export * from './esm/index.js';

package/dist/stencil.config.js

@@ -0,0 +1,22 @@
+import { sass } from '@stencil/sass';
+export const config = {
+  namespace: 'user-login',
+  taskQueue: 'async',
+  plugins: [sass()],
+  outputTargets: [
+    {
+      type: 'dist',
+      esmLoaderPath: '../loader',
+    },
+    {
+      type: 'dist-custom-elements',
+    },
+    {
+      type: 'docs-readme',
+    },
+    {
+      type: 'www',
+      serviceWorker: null, // disable service workers
+    },
+  ],
+};

package/dist/types/Users/user/workspace/everymatrix/widgets-stencil/packages/user-login/.stencil/packages/user-login/stencil.config.d.ts

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

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

@@ -0,0 +1,65 @@
+export declare class UserLogin {
+  /**
+   * Endpoint
+   */
+  endpoint: string;
+  /**
+  * Language
+  */
+  lang: string;
+  /**
+  * Client styling
+  */
+  clientStyling: string;
+  /**
+  * Client styling by url
+  */
+  clientStylingUrl: string;
+  /**
+  * Translation url
+  */
+  translationUrl: string;
+  /**
+   * Endpoint
+   */
+  passwordReset: boolean;
+  /**
+   * Endpoint
+   */
+  userEmailRegex: string;
+  /**
+   * Endpoint
+   */
+  passwordRegex: string;
+  /**
+   * Username
+   */
+  userNameEmail: string;
+  /**
+   * Password
+   */
+  userPassword: string;
+  isValidUserEmail: boolean;
+  isValidPassword: boolean;
+  isPasswordVisible: boolean;
+  private limitStylingAppends;
+  private errorMessage;
+  private checkValid;
+  handleNewTranslations(): void;
+  componentWillLoad(): Promise<void>;
+  private stylingContainer;
+  userLogin: ({ username, password }: {
+    username: any;
+    password: any;
+  }) => Promise<any>;
+  isFormValid: (error: any) => void;
+  setClientStyling: () => void;
+  setClientStylingURL: () => void;
+  handleInputChange: (event: Event, location: string) => void;
+  userEmailValidation: (input: any) => boolean;
+  passwordValidation: (input: any) => boolean;
+  togglePassword: () => void;
+  resetPassword: () => void;
+  componentDidRender(): void;
+  render(): any;
+}

package/dist/types/components.d.ts

@@ -0,0 +1,101 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+export namespace Components {
+    interface UserLogin {
+        /**
+          * Client styling
+         */
+        "clientStyling": string;
+        /**
+          * Client styling by url
+         */
+        "clientStylingUrl": string;
+        /**
+          * Endpoint
+         */
+        "endpoint": string;
+        /**
+          * Language
+         */
+        "lang": string;
+        /**
+          * Endpoint
+         */
+        "passwordRegex": string;
+        /**
+          * Endpoint
+         */
+        "passwordReset": boolean;
+        /**
+          * Translation url
+         */
+        "translationUrl": string;
+        /**
+          * Endpoint
+         */
+        "userEmailRegex": string;
+    }
+}
+declare global {
+    interface HTMLUserLoginElement extends Components.UserLogin, HTMLStencilElement {
+    }
+    var HTMLUserLoginElement: {
+        prototype: HTMLUserLoginElement;
+        new (): HTMLUserLoginElement;
+    };
+    interface HTMLElementTagNameMap {
+        "user-login": HTMLUserLoginElement;
+    }
+}
+declare namespace LocalJSX {
+    interface UserLogin {
+        /**
+          * Client styling
+         */
+        "clientStyling"?: string;
+        /**
+          * Client styling by url
+         */
+        "clientStylingUrl"?: string;
+        /**
+          * Endpoint
+         */
+        "endpoint"?: string;
+        /**
+          * Language
+         */
+        "lang"?: string;
+        /**
+          * Endpoint
+         */
+        "passwordRegex"?: string;
+        /**
+          * Endpoint
+         */
+        "passwordReset"?: boolean;
+        /**
+          * Translation url
+         */
+        "translationUrl"?: string;
+        /**
+          * Endpoint
+         */
+        "userEmailRegex"?: string;
+    }
+    interface IntrinsicElements {
+        "user-login": UserLogin;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "user-login": LocalJSX.UserLogin & JSXBase.HTMLAttributes<HTMLUserLoginElement>;
+        }
+    }
+}

package/dist/types/index.d.ts

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