@everymatrix/player-sms-verification 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-64b46357.js');
+
+/*
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["player-sms-verification.cjs",[[1,"player-sms-verification",{"endpoint":[513],"userId":[513,"user-id"],"lang":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"tempBtnResendCount":[32],"code":[32],"errMsg":[32],"msgEnterCode":[32]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/player-sms-verification.cjs.entry.js

@@ -0,0 +1,302 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-64b46357.js');
+
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+  en: {
+    btnSend: 'Send Code',
+    btnResend: 'Resend Code',
+    btnActivate: 'Activate',
+    msgEnterCode: 'Please enter the verification code you received on your number',
+    msgResendNotice: 'A new verification code has been sent to your phone number',
+    errGenerateCode: 'An error occurred while generating your code. Please click the resend button to generate a new code',
+    errInvalidCode: 'The code is incorrect',
+    errExceededAttempts: 'You have exceeded the maximum number of tries. Please try again later',
+    errExpiredToken: 'The code expired, resend code'
+  },
+  ro: {
+    btnSend: 'Send Code',
+    btnResend: 'Resend Code',
+    btnActivate: 'Activate',
+    msgEnterCode: 'Please enter the verification code you received on your number',
+    msgResendNotice: 'A new verification code has been sent to your phone number',
+    errGenerateCode: 'An error occurred while generating your code. Please click the resend button to generate a new code',
+    errInvalidCode: 'The code is incorrect',
+    errExceededAttempts: 'You have exceeded the maximum number of tries. Please try again later',
+    errExpiredToken: 'The code expired, resend code'
+  },
+  fr: {
+    btnSend: 'Send Code',
+    btnResend: 'Resend Code',
+    btnActivate: 'Activate',
+    msgEnterCode: 'Please enter the verification code you received on your number',
+    msgResendNotice: 'A new verification code has been sent to your phone number',
+    errGenerateCode: 'An error occurred while generating your code. Please click the resend button to generate a new code',
+    errInvalidCode: 'The code is incorrect',
+    errExceededAttempts: 'You have exceeded the maximum number of tries. Please try again later',
+    errExpiredToken: 'The code expired, resend code'
+  },
+  hu: {
+    btnSend: 'Send Code',
+    btnResend: 'Resend Code',
+    btnActivate: 'Activate',
+    msgEnterCode: 'Please enter the verification code you received on your number',
+    msgResendNotice: 'A new verification code has been sent to your phone number',
+    errGenerateCode: 'An error occurred while generating your code. Please click the resend button to generate a new code',
+    errInvalidCode: 'The code is incorrect',
+    errExceededAttempts: 'You have exceeded the maximum number of tries. Please try again later',
+    errExpiredToken: 'The code expired, resend code'
+  },
+  tr: {
+    btnSend: 'Send Code',
+    btnResend: 'Resend Code',
+    btnActivate: 'Activate',
+    msgEnterCode: 'Please enter the verification code you received on your number',
+    msgResendNotice: 'A new verification code has been sent to your phone number',
+    errGenerateCode: 'An error occurred while generating your code. Please click the resend button to generate a new code',
+    errInvalidCode: 'The code is incorrect',
+    errExceededAttempts: 'You have exceeded the maximum number of tries. Please try again later',
+    errExpiredToken: 'The code expired, resend code'
+  },
+  el: {
+    btnSend: 'Send Code',
+    btnResend: 'Resend Code',
+    btnActivate: 'Activate',
+    msgEnterCode: 'Please enter the verification code you received on your number',
+    msgResendNotice: 'A new verification code has been sent to your phone number',
+    errGenerateCode: 'An error occurred while generating your code. Please click the resend button to generate a new code',
+    errInvalidCode: 'The code is incorrect',
+    errExceededAttempts: 'You have exceeded the maximum number of tries. Please try again later',
+    errExpiredToken: 'The code expired, resend code'
+  },
+  es: {
+    btnSend: 'Send Code',
+    btnResend: 'Resend Code',
+    btnActivate: 'Activate',
+    msgEnterCode: 'Please enter the verification code you received on your number',
+    msgResendNotice: 'A new verification code has been sent to your phone number',
+    errGenerateCode: 'An error occurred while generating your code. Please click the resend button to generate a new code',
+    errInvalidCode: 'The code is incorrect',
+    errExceededAttempts: 'You have exceeded the maximum number of tries. Please try again later',
+    errExpiredToken: 'The code expired, resend code'
+  },
+  pt: {
+    btnSend: 'Send Code',
+    btnResend: 'Resend Code',
+    btnActivate: 'Activate',
+    msgEnterCode: 'Please enter the verification code you received on your number',
+    msgResendNotice: 'A new verification code has been sent to your phone number',
+    errGenerateCode: 'An error occurred while generating your code. Please click the resend button to generate a new code',
+    errInvalidCode: 'The code is incorrect',
+    errExceededAttempts: 'You have exceeded the maximum number of tries. Please try again later',
+    errExpiredToken: 'The code expired, resend code'
+  },
+  hr: {
+    btnSend: 'Send Code',
+    btnResend: 'Resend Code',
+    btnActivate: 'Activate',
+    msgEnterCode: 'Please enter the verification code you received on your number',
+    msgResendNotice: 'A new verification code has been sent to your phone number',
+    errGenerateCode: 'An error occurred while generating your code. Please click the resend button to generate a new code',
+    errInvalidCode: 'The code is incorrect',
+    errExceededAttempts: 'You have exceeded the maximum number of tries. Please try again later',
+    errExpiredToken: 'The code expired, resend code'
+  },
+};
+const getTranslations = (url) => {
+  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) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const playerSmsVerificationCss = ":host{display:block}.PlayerSmsVerification{padding:30px;display:flex;align-items:center;flex-direction:column;background:var(--emfe-w-registration-color-bg, var(--emfe-w-color-gray-50, #F9F8F8))}.PlayerSmsVerificationContainer{position:relative;width:100%;display:flex;flex-direction:column;margin-bottom:30px}.PlayerSmsVerificationButtonContainer{width:100%;display:flex;flex-direction:column;gap:25px}.PlayerSmsVerificationButton{color:var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));background:var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));border:1px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));border-radius:5px;width:100%;height:60px;padding:0;text-transform:uppercase;font-size:18px;cursor:pointer;font-family:inherit}.PlayerSmsVerificationButton:disabled{background:var(--emfe-w-color-gray-100, #E6E6E6);border:1px solid var(--emfe-w-color-gray-150, #828282);cursor:not-allowed}.PlayerSmsVerificationInput{color:var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B));display:flex;flex-direction:column;position:relative;width:100%}.PlayerSmsVerificationInput input{width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);border-radius:5px;box-sizing:border-box;padding:5px 15px;font-size:16px;text-align:center;line-height:18px;font-family:inherit}.PlayerSmsVerificationInput.Hidden{display:none}.PlayerSmsVerificationMsg{font-size:12px;color:var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B))}.PlayerSmsVerificationMsg.Hidden{display:none}.PlayerSmsVerificationErrMsg{font-size:12px;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}";
+
+const PlayerSmsVerification = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+    * Currently selected language
+    */
+    this.lang = 'en';
+    /**
+     * Client custom styling via inline styles
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Translations via URL
+     */
+    this.translationUrl = '';
+    this.code = '';
+    this.errMsg = '';
+    this.msgEnterCode = '';
+    // Other variables
+    this.btnResendCount = 60;
+    this.isCodeSentOnce = false;
+    this.isBtnSendAvailable = true;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(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.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('error ', err);
+      });
+    };
+  }
+  updateClientStyling() {
+    if (this.clientStyling)
+      this.setClientStyling();
+    if (this.clientStylingUrl)
+      this.setClientStylingURL();
+  }
+  componentWillLoad() {
+    if (this.translationUrl) {
+      const translationPromise = getTranslations(this.translationUrl);
+      return translationPromise;
+    }
+    if (this.clientStyling)
+      this.setClientStyling();
+    if (this.clientStylingUrl)
+      this.setClientStylingURL();
+  }
+  startTimerBtnResendCode() {
+    this.isBtnSendAvailable = false;
+    this.tempBtnResendCount = this.btnResendCount;
+    this.btnResendTimer = setInterval(() => {
+      this.tempBtnResendCount--;
+      if (this.tempBtnResendCount < 0) {
+        clearInterval(this.btnResendTimer);
+        this.isBtnSendAvailable = true;
+      }
+    }, 1000);
+  }
+  setErrMsg(errMsg) {
+    if (errMsg === 'INVALID_CODE') {
+      this.errMsg = 'errInvalidCode';
+    }
+    else if (errMsg === 'BLOCK_USER_INCORRECT_CODE') {
+      this.errMsg = 'errExceededAttempts';
+    }
+    else if (errMsg === 'ExpiredToken') {
+      this.errMsg = 'errExpiredToken';
+    }
+    else if (errMsg === 'errGenerateCode') {
+      this.errMsg = 'errGenerateCode';
+    }
+  }
+  debounce(func, delay) {
+    return function (...args) {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = setTimeout(() => {
+        func.apply(this, args);
+      }, delay);
+    };
+  }
+  handleSendCode() {
+    this.errMsg = '';
+    let url = new URL(`${this.endpoint}/v1/player/legislation/generate2FACode`);
+    const options = {
+      method: 'POST',
+      headers: {
+        'accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        'userId': `${this.userId}`
+      })
+    };
+    fetch(url.href, options)
+      .then(() => {
+      this.msgEnterCode = 'msgEnterCode';
+      if (this.isCodeSentOnce) {
+        this.startTimerBtnResendCode();
+      }
+      this.isCodeSentOnce = true;
+    })
+      .catch((err) => {
+      this.setErrMsg('errGenerateCode');
+      window.postMessage({ type: 'WidgetNotification', data: {
+          type: 'error',
+          message: err
+        } }, window.location.href);
+    });
+  }
+  handleCheckCode() {
+    let url = new URL(`${this.endpoint}/v1/player/legislation/generate2FACode`);
+    url.searchParams.append('userId', this.userId);
+    url.searchParams.append('code', this.code);
+    const options = {
+      method: 'GET',
+      headers: {
+        'accept': 'application/json',
+      }
+    };
+    fetch(url.href, options)
+      .then((res) => res.json())
+      .then((res) => {
+      if (res.httpStatusCode === 200) {
+        this.errMsg = '';
+        window.postMessage({ type: 'SmsVerificationSuccess' }, window.location.href);
+      }
+      else if (res.thirdPartyResponse) {
+        this.setErrMsg(res.thirdPartyResponse.message);
+        if (this.errMsg === 'errExceededAttempts') {
+          window.postMessage({ type: 'SmsVerificationErrExceededAttempts' }, window.location.href);
+        }
+      }
+    })
+      .catch((err) => {
+      window.postMessage({ type: 'WidgetNotification', data: {
+          type: 'error',
+          message: err
+        } }, window.location.href);
+    })
+      .finally(() => {
+      this.code = '';
+    });
+  }
+  handleInput(event) {
+    this.code = event.target.value;
+  }
+  render() {
+    return index.h("div", { class: "PlayerSmsVerification", ref: el => this.stylingContainer = el }, index.h("div", { class: "PlayerSmsVerificationContainer" }, index.h("p", { class: "PlayerSmsVerificationMsg" + (this.msgEnterCode ? "" : " " + "Hidden") }, translate(this.msgEnterCode, this.lang)), index.h("div", { class: "PlayerSmsVerificationInput" }, index.h("input", { type: "text", onInput: (event) => this.handleInput(event), value: this.code })), this.errMsg
+      ? index.h("p", { class: "PlayerSmsVerificationErrMsg" }, translate(this.errMsg, this.lang))
+      : index.h("p", { class: "PlayerSmsVerificationMsg" + (!this.isBtnSendAvailable && this.isCodeSentOnce ? "" : " " + "Hidden") }, translate('msgResendNotice', this.lang))), index.h("div", { class: "PlayerSmsVerificationButtonContainer" }, index.h("button", { class: "PlayerSmsVerificationButton", onClick: this.debounce(this.handleSendCode.bind(this), 850), disabled: !this.isBtnSendAvailable }, this.isCodeSentOnce ? this.isBtnSendAvailable ? translate('btnResend', this.lang) : this.tempBtnResendCount : translate('btnSend', this.lang)), index.h("button", { class: "PlayerSmsVerificationButton", onClick: this.debounce(this.handleCheckCode.bind(this), 850), disabled: !this.isCodeSentOnce || this.code === '' || this.code === undefined }, translate('btnActivate', this.lang))));
+  }
+  static get watchers() { return {
+    "clientStyling": ["updateClientStyling"],
+    "clientStylingUrl": ["updateClientStyling"]
+  }; }
+};
+PlayerSmsVerification.style = playerSmsVerificationCss;
+
+exports.player_sms_verification = PlayerSmsVerification;

package/dist/cjs/player-sms-verification.cjs.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-64b46357.js');
+
+/*
+ Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('player-sms-verification.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["player-sms-verification.cjs",[[1,"player-sms-verification",{"endpoint":[513],"userId":[513,"user-id"],"lang":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"tempBtnResendCount":[32],"code":[32],"errMsg":[32],"msgEnterCode":[32]}]]]], options);
+});

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "./components/player-sms-verification/player-sms-verification.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/player-sms-verification/player-sms-verification.css

@@ -0,0 +1,82 @@
+:host {
+  display: block;
+}
+
+.PlayerSmsVerification {
+  padding: 30px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  background: var(--emfe-w-registration-color-bg, var(--emfe-w-color-gray-50, #F9F8F8));
+}
+
+.PlayerSmsVerificationContainer {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 30px;
+}
+
+.PlayerSmsVerificationButtonContainer {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+
+.PlayerSmsVerificationButton {
+  color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
+  background: var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
+  border: 1px solid var(--emfe-w-registration-color-primary, var(--emfe-w-color-primary, #D0046C));
+  border-radius: 5px;
+  width: 100%;
+  height: 60px;
+  padding: 0;
+  text-transform: uppercase;
+  font-size: 18px;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.PlayerSmsVerificationButton:disabled {
+  background: var(--emfe-w-color-gray-100, #E6E6E6);
+  border: 1px solid var(--emfe-w-color-gray-150, #828282);
+  cursor: not-allowed;
+}
+
+.PlayerSmsVerificationInput {
+  color: var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B));
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+}
+.PlayerSmsVerificationInput input {
+  width: 100%;
+  height: 44px;
+  border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
+  border-radius: 5px;
+  box-sizing: border-box;
+  padding: 5px 15px;
+  font-size: 16px;
+  text-align: center;
+  line-height: 18px;
+  font-family: inherit;
+}
+.PlayerSmsVerificationInput.Hidden {
+  display: none;
+}
+
+.PlayerSmsVerificationMsg {
+  font-size: 12px;
+  color: var(--emfe-w-registration-contrast, var(--emfe-w-color-gray-300, #58586B));
+}
+.PlayerSmsVerificationMsg.Hidden {
+  display: none;
+}
+
+.PlayerSmsVerificationErrMsg {
+  font-size: 12px;
+  color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
+}