@salla.sa/twilight-components 1.0.19 → 1.0.21

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

@@ -1,378 +0,0 @@
-import { Component, Element, h, Listen, Method, Prop } from '@stencil/core';
-import Helper from "../../Helpers/Helper";
-export class SallaLogin {
-  constructor() {
-    this.regType = 'sms';
-    this.isLoginByMail = true;
-    this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');
-    this.loginText = salla.lang.get('blocks.header.login');
-    this.smsLabel = salla.lang.get('blocks.header.sms');
-    this.mobileLabel = salla.lang.get('common.elements.mobile');
-    this.emailLabel = salla.lang.get('common.elements.email');
-    this.enterText = salla.lang.get('blocks.header.enter');
-    this.bySMSText = salla.lang.get('blocks.header.login_by_sms');
-    this.byEmailText = salla.lang.get('blocks.header.login_by_email');
-    this.backText = salla.lang.get('common.elements.back');
-    this.title = this.host.title || salla.lang.get('blocks.header.login');
-    this.host.removeAttribute('title');
-    salla.auth.event.onVerificationFailed(() => {
-      //
-    });
-  }
-  /**
-   * @param {CustomEvent|{details:{case:'new_customer'|'authenticated', redirect_url:string|null}}} event
-   */
-  onVerified(event) {
-    if (!event.detail.case) {
-      console.log('verified but without case!');
-      return;
-    }
-    if (event.detail.case === "new_customer") {
-      return this.showTab(this.tab5);
-    }
-    //TODO::It looks that is this workaround🤔
-    if (salla.auth.event.getTypeActionOnVerified() !== 'redirect') {
-      return;
-    }
-    if (event.redirect_url) {
-      return window.location.href = event.redirect_url;
-    }
-    window.location.reload();
-  }
-  onbackClicked() {
-    this.regType == 'sms' ? this.showTab(this.tab2) : this.showTab(this.tab3);
-  }
-  async show() {
-    this.showTab(this.isLoginByMail ? this.tab1 : this.tab2);
-    return this.modal.show();
-  }
-  showTab(tab) {
-    [this.tab1, this.tab2, this.tab3, this.tab4, this.tab5].map(el => Helper.toggleElement(el, 'visible', 'hidden', () => el == tab));
-    setTimeout(() => { [this.tab1, this.tab2, this.tab3, this.tab4, this.tab5].map(el => Helper.toggleElement(el, 's-login-active', 's-login-unactive', () => el == tab)); }, 200);
-    setTimeout(() => { this.host.querySelector('.s-login-wrapper').setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'); });
-    if ([this.tab2, this.tab3].includes(tab)) {
-      this.regType = tab === this.tab2 ? 'sms' : 'email';
-    }
-    let isRegistrationTab = tab == this.tab5;
-    this.modal.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
-    if (!isRegistrationTab) {
-      Helper.toggleElement(this.regMobileBlock, 's-hidden', 's-block', () => this.regType === 'sms')
-        .toggleElement(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
-    }
-    return this;
-  }
-  loginByEmail() {
-    if (!Helper.isValidEmail(this.email.value)) {
-      this.email.classList.add('s-has-error');
-      this.email.nextElementSibling['innerText'] = '* ' + salla.lang.get('common.elements.email_is_valid');
-      return;
-    }
-    this.email.nextElementSibling['innerText'] = '';
-    this.email.classList.remove('s-has-error');
-    salla.auth.api.login({ type: 'email', email: this.email.value })
-      .then(() => this.showTab(this.tab4))
-      .then(() => (this.tab4.by = 'email') && (this.tab4.url = 'auth/email/verify'))
-      .then(() => this.tab4.show({ email: this.email.value }));
-  }
-  loginBySMS() {
-    if (this.mobile.value.length < 6) {
-      this.mobile.classList.add('s-has-error');
-      this.mobile.nextElementSibling['innerText'] = '* ' + salla.lang.get('mobile_app.strings.incorrect_mobile');
-      return;
-    }
-    this.mobile.nextElementSibling['innerText'] = '';
-    this.mobile.classList.remove('s-has-error');
-    salla.auth.api.login({ type: 'sms', mobile: this.mobile.value })
-      .then(() => this.showTab(this.tab4))
-      .then(() => (this.tab4.by = 'sms') && (this.tab4.url = 'auth/mobile/verify'))
-      .then(() => this.tab4.show({ mobile: this.mobile.value, country_code: 'SA' }));
-  }
-  //TODO:: if it's enter, go submit
-  typing({ target }) {
-    target.type === 'tel' && salla.helpers.digitsOnly(target);
-    target.classList.remove('s-has-error');
-    target.nextElementSibling.innerText = '';
-  }
-  newUser() {
-    this.tab4.getCode()
-      .then(code => salla.auth.api.register({
-      first_name: this.firstName.value,
-      last_name: this.lastName.value,
-      phone: this.regMobile.value || this.mobile.value,
-      email: this.regEmail.value || this.email.value,
-      country_code: '',
-      country_key: '',
-      code: code,
-      verified_by: this.regType,
-    }));
-  }
-  render() {
-    return (h("salla-modal", { id: "salla-login", title: this.title, ref: modal => this.modal = modal, width: "xs" },
-      h("div", { class: "s-login-wrapper" },
-        this.isLoginByMail ?
-          h("div", { class: "s-login-tab", ref: tab => this.tab1 = tab },
-            h("p", { class: "s-login-sub-title" }, this.loginTypeTitle),
-            h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab2) },
-              h("i", { class: "s-login-main-btn-icon sicon-phone" }),
-              h("span", { class: "s-login-main-btn-text" }, this.smsLabel),
-              h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })),
-            h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab3) },
-              h("i", { class: "s-login-main-btn-icon sicon-mail" }),
-              h("span", { class: "s-login-main-btn-text" }, this.emailLabel),
-              h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })))
-          : '',
-        h("div", { class: "s-login-tab", ref: tab => this.tab2 = tab },
-          h("label", { class: "s-login-label" }, this.mobileLabel),
-          h("salla-tel-input", null),
-          h("input", { onChange: () => this.loginBySMS(), type: "tel", ref: el => this.mobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input  tel-input s-ltr" }),
-          h("span", { class: "s-login-error-message" }),
-          h("salla-button", { wide: true, onClick: () => this.loginBySMS() }, this.enterText),
-          this.isLoginByMail ? h("a", { href: "#", onClick: () => this.showTab(this.tab3), class: "s-login-link" }, this.byEmailText) : ''),
-        this.isLoginByMail ?
-          h("div", { class: "s-login-tab", ref: tab => this.tab3 = tab },
-            h("label", { class: "s-login-label" }, this.emailLabel),
-            h("input", { onChange: () => this.loginByEmail(), type: "email", ref: el => this.email = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }),
-            h("span", { class: "s-login-error-message" }),
-            h("salla-button", { wide: true, onClick: () => this.loginByEmail() }, this.enterText),
-            h("a", { href: "#", onClick: () => this.showTab(this.tab2), class: "s-login-link" }, this.bySMSText)) : '',
-        h("salla-verify", { "without-modal": true, ref: tab => this.tab4 = tab, autoReload: false, "back-text": this.backText }),
-        h("div", { ref: tab => this.tab5 = tab },
-          h("label", { class: "s-login-label" }, salla.lang.get('blocks.header.your_name')),
-          h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, placeholder: salla.lang.get('pages.profile.first_name') }),
-          h("label", { class: "s-login-label" }, salla.lang.get('pages.profile.last_name')),
-          h("input", { type: "text", class: "s-login-input", ref: el => this.lastName = el, placeholder: salla.lang.get('pages.profile.last_name') }),
-          h("div", { ref: el => this.regMobileBlock = el },
-            h("label", { class: "s-login-label" }, this.mobileLabel),
-            h("input", { type: "tel", ref: el => this.regMobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input s-ltr" }),
-            h("span", { class: "s-login-error-message" })),
-          h("div", { ref: el => this.regEmailBlock = el },
-            h("label", { class: "s-login-label" }, this.emailLabel),
-            h("input", { type: "email", ref: el => this.regEmail = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }),
-            h("span", { class: "s-login-error-message" })),
-          h("salla-button", { wide: true, onClick: () => this.newUser() }, salla.lang.get('blocks.header.register'))))));
-  }
-  static get is() { return "salla-login"; }
-  static get originalStyleUrls() { return {
-    "$": ["salla-login.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["salla-login.css"]
-  }; }
-  static get properties() { return {
-    "isLoginByMail": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-login-by-mail",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "loginTypeTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "login-type-title",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.select_login_way')"
-    },
-    "loginText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "login-text",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.login')"
-    },
-    "smsLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "sms-label",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.sms')"
-    },
-    "mobileLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "mobile-label",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.mobile')"
-    },
-    "emailLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "email-label",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.email')"
-    },
-    "enterText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "enter-text",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.enter')"
-    },
-    "bySMSText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "by-s-m-s-text",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.login_by_sms')"
-    },
-    "byEmailText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "by-email-text",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.login_by_email')"
-    },
-    "backText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "back-text",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.back')"
-    }
-  }; }
-  static get methods() { return {
-    "show": {
-      "complexType": {
-        "signature": "() => Promise<HTMLElement>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLElement>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-  static get listeners() { return [{
-      "name": "verified",
-      "method": "onVerified",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "backClicked",
-      "method": "onbackClicked",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}