npm - @salla.sa/twilight-components - Versions diffs - 2.11.104 → 2.11.105 - Mend

@salla.sa/twilight-components 2.11.104 → 2.11.105

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/collection/components/salla-verify/salla-verify.js CHANGED Viewed

@@ -41,6 +41,7 @@ export class SallaVerify {
       this.resendAfter = 0;
       this.timer.innerHTML = '30 : 00';
     });
+    this.otpHandler();
   }
   handleKeyUp(ev) {
     var _a, _b, _c, _d;
@@ -156,6 +157,22 @@ export class SallaVerify {
     return this.display == 'inline' ? h(Host, null, this.myBody()) :
       h("salla-modal", { width: "xs", class: "s-verify", ref: modal => this.modal = modal, "modal-title": this.title }, h("span", { slot: 'icon', class: "s-verify-header-icon", innerHTML: this.type == "mobile" ? AndroidPhoneIcon : MailIcon }), this.myBody());
   }
+  otpHandler() {
+    if (!window.OTPCredential) {
+      return;
+    }
+    const ac = new AbortController();
+    let o = {
+      otp: { transport: ['sms'] },
+      signal: ac.signal
+    };
+    navigator.credentials.get(o)
+      .then(otp => {
+      // @ts-ignore
+      this.otpInputs.forEach((input, index) => input.value = otp.code[index]);
+      return this.submit();
+    });
+  }
   myBody() {
     return (h("div", { class: "s-verify-body", ref: body => this.body = body }, h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "tel", autocomplete: "one-time-code", pattern: "[0-9]*", inputmode: "numeric", maxlength: "1", class: "s-verify-input", onInput: e => salla.helpers.inputDigitsOnly(e.target), onPaste: e => this.handlePaste(e), onKeyUp: e => this.handleKeyUp(e), required: true }))), h("div", { slot: "footer", class: "s-verify-footer" }, h("salla-button", { class: "s-verify-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-timer", ref: el => this.timer = el })), h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), h("slot", { name: "after-footer" })));
   }

package/dist/collection/components/salla-verify/salla-verify.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"salla-verify.js","sourceRoot":"","sources":["../../../src/components/salla-verify/salla-verify.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport AndroidPhoneIcon from '../../assets/svg/android-phone.svg';\nimport MailIcon from '../../assets/svg/mail.svg';\n\n/*\n @slot footer - Replaces the footer, by default it contains: verify button, resend, and timer\n * @slot after-footer - placeholder position\n /\n@Component({ tag: 'salla-verify', styleUrl: 'salla-verify.scss' })\n\nexport class SallaVerify {\n constructor() {\n salla.lang.onLoaded(() => {\n this.translationLoaded = true;\n this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + this.type);\n this.modal?.setTitle(this.title);\n });\n\n if (this.display == 'inline') {\n this.modal = { open: () => '', close: () => '', setTitle: () => '' };\n return;\n }\n\n //todo:: change this way, now we fire the event from the backend, we should listen to salla.profile.event.onUpdated\n salla.event.on('profile::verification', data => {\n let payload = Array.isArray(data) ? data[0] : data;\n this.isProfileVerify = true;\n this.open(payload);\n this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + payload.type);\n this.modal?.setTitle(this.title);\n });\n\n salla.event.on('modalClosed', () => {\n this.resendAfter = 0;\n this.timer.innerHTML = '30 : 00';\n });\n }\n\n private modal: HTMLSallaModalElement \| any;\n private body: HTMLDivElement;\n private code: HTMLInputElement;\n private btn: HTMLSallaButtonElement;\n private resendMessage: HTMLParagraphElement;\n private timer: HTMLElement;\n private resend: HTMLAnchorElement;\n private otpInputs: NodeListOf<HTMLInputElement>;\n private data: { type: 'mobile' \| 'email', phone?: string, country_code?: string, email?: string };\n\n @State() translationLoaded: boolean = false;\n\n @Element() host: HTMLElement;\n /\n Should render component without modal\n /\n @Prop() display: 'inline' \| 'modal' = 'modal';\n\n /\n Verifying method\n /\n @Prop({ mutable: true }) type: 'mobile' \| 'email' = 'mobile';\n /\n should auto reloading the page after success verification\n /\n @Prop() autoReload: boolean = true;\n\n /\n Once the api verify success, it will be login the customer in web pages\n /\n @Prop() supportWebAuth: boolean = true;\n\n /\n Event when success verification\n /\n @Event() verified: EventEmitter;\n\n @State() title: string;\n\n @State() resendAfter: number = 30;\n /\n to use: `salla.api.auth.verify` or `salla.profile.verify`\n /\n @State() isProfileVerify: boolean = false;\n\n private handleKeyUp(ev) {\n if (['Alt', 'Shift', 'Control', 'AltGraph', 'Ctrl'].includes(ev.key)) {\n return;\n }\n let key = ev.keyCode \|\| ev.charCode;\n if (ev.target.value) {\n ev.target.nextElementSibling?.focus();\n ev.target.nextElementSibling?.select();\n } else if ([8, 46].includes(key)) {\n ev.target.previousElementSibling?.focus();\n ev.target.previousElementSibling?.select();\n }\n this.toggleOTPSubmit();\n }\n\n private handlePaste(ev) {\n let text = salla.helpers.number(ev.clipboardData.getData('text'))\n .replace(/[^0-9.]/g, '')\n .replace('..', '.');\n this.otpInputs.forEach((input, i) => input.value = text[i] \|\| '');\n this.toggleOTPSubmit();\n setTimeout(() => this.otpInputs[3].focus(), 100);\n }\n\n /\n Get current code\n * @return {string}\n /\n @Method()\n async getCode() {\n return this.code.value;\n }\n\n /\n Open verifying modal\n * @param data\n /\n @Method()\n async open(data) {\n this.data = data;\n this.data.type = this.data.type \|\| this.type;\n this.type = this.data.type;\n this.resendTimer();\n this.otpInputs = this.body.querySelectorAll('.s-verify-input');\n\n this.reset();\n this.display == 'modal' && this.modal?.setTitle(this.title);\n this.modal.open();\n\n // focus the first input after opening the modal\n setTimeout(() => this.otpInputs[0].focus(), 100);\n }\n\n private toggleOTPSubmit() {\n let otp = []\n this.otpInputs.forEach(input => input.value && otp.push(input.value));\n\n this.code.value = otp.join('');\n\n if (otp.length === 4) {\n this.btn.disable()\n this.btn.click();\n return;\n }\n\n this.btn.enable()\n }\n\n private reset() {\n this.otpInputs.forEach((input) => input.value = '');\n this.code.value = '';\n this.otpInputs[0].focus();\n }\n\n private resendTimer() {\n this.resendMessage.style.display = 'block';\n this.resend.style.display = 'none';\n this.resendAfter = 30;\n\n let timerId = setInterval(() => {\n if (this.resendAfter <= 0) {\n clearInterval(timerId);\n this.resend.style.display = 'block';\n this.resendMessage.style.display = 'none';\n } else {\n this.timer.innerHTML = `${this.resendAfter >= 10 ? this.resendAfter : '0' + this.resendAfter} : 00`;\n this.resendAfter--;\n }\n }, 1000);\n }\n\n private resendCode() {\n return this.btn.stop()\n .then(() => this.btn.disable())\n .then(() => {\n this.otpInputs.forEach(input => input.value = '');\n this.otpInputs[0].focus();\n })\n .then(() => salla.api.auth.resend(this.data))\n .finally(() => this.resendTimer());\n }\n\n private submit() {\n //if code not 4 digits, focus on the after filled input,\n if (this.code.value.length < 4) {\n this.otpInputs[this.code.value.length].focus();\n salla.log('Trying to submit without 4 digits!');\n return;\n }\n\n let data = { code: this.code.value, ...this.data };\n\n return this.btn.load()\n .then(() => this.btn.disable())\n .then(() => this.isProfileVerify ? salla.profile.verify(data) : salla.auth.verify(data, this.supportWebAuth))\n .then(response => this.verified.emit(response))\n .then(() => this.btn.stop() && this.btn.disable())\n .then(() => this.modal.close())\n .then(() => this.autoReload && window.location.reload())\n .catch((error) => {\n salla.logger.error(error);\n this.btn.stop() && this.btn.enable() && this.reset()\n });\n }\n\n render() {\n return this.display == 'inline' ? <Host>{this.myBody()}</Host> :\n <salla-modal width=\"xs\" class=\"s-verify\" ref={modal => this.modal = modal}\n modal-title={this.title}>\n <span slot='icon' class=\"s-verify-header-icon\" innerHTML={this.type == \"mobile\" ? AndroidPhoneIcon : MailIcon}></span>\n {this.myBody()}\n </salla-modal>;\n }\n\n private myBody() {\n return (\n <div class=\"s-verify-body\" ref={body => this.body = body}>\n <div class=\"s-verify-message\" innerHTML={salla.lang.get('pages.profile.verify_message')} />\n <input type=\"hidden\" name=\"code\" maxlength=\"4\" required ref={code => this.code = code} />\n <div class=\"s-verify-codes\" dir=\"ltr\">\n {[1, 2, 3, 4].map(() => <input type=\"tel\" autocomplete=\"one-time-code\" pattern=\"[0-9]\" inputmode=\"numeric\"\n maxlength=\"1\" class=\"s-verify-input\"\n onInput={e => salla.helpers.inputDigitsOnly(e.target)}\n onPaste={e => this.handlePaste(e)}\n onKeyUp={e => this.handleKeyUp(e)}\n required />)}\n </div>\n <div slot=\"footer\" class=\"s-verify-footer\">\n <salla-button class=\"s-verify-submit\" loader-position='center' disabled={true}\n onClick={() => this.submit()}\n ref={b => this.btn = b}>\n {salla.lang.get('pages.profile.verify')}\n </salla-button>\n <p class=\"s-verify-resend-message\" ref={el => this.resendMessage = el}>\n {salla.lang.get('blocks.header.resend_after')}\n <b class=\"s-verify-timer\" ref={el => this.timer = el}></b></p>\n <a href=\"#\" class=\"s-verify-resend\" onClick={() => this.resendCode()}\n ref={el => this.resend = el}>{salla.lang.get('blocks.comments.submit')}</a>\n </div>\n <slot name=\"after-footer\" />\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"salla-verify.js","sourceRoot":"","sources":["../../../src/components/salla-verify/salla-verify.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport AndroidPhoneIcon from '../../assets/svg/android-phone.svg';\nimport MailIcon from '../../assets/svg/mail.svg';\n\n/*\n @slot footer - Replaces the footer, by default it contains: verify button, resend, and timer\n * @slot after-footer - placeholder position\n /\n@Component({ tag: 'salla-verify', styleUrl: 'salla-verify.scss' })\n\nexport class SallaVerify {\n constructor() {\n salla.lang.onLoaded(() => {\n this.translationLoaded = true;\n this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + this.type);\n this.modal?.setTitle(this.title);\n });\n\n if (this.display == 'inline') {\n this.modal = { open: () => '', close: () => '', setTitle: () => '' };\n return;\n }\n\n //todo:: change this way, now we fire the event from the backend, we should listen to salla.profile.event.onUpdated\n salla.event.on('profile::verification', data => {\n let payload = Array.isArray(data) ? data[0] : data;\n this.isProfileVerify = true;\n this.open(payload);\n this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + payload.type);\n this.modal?.setTitle(this.title);\n });\n\n salla.event.on('modalClosed', () => {\n this.resendAfter = 0;\n this.timer.innerHTML = '30 : 00';\n });\n\n this.otpHandler();\n }\n\n private modal: HTMLSallaModalElement \| any;\n private body: HTMLDivElement;\n private code: HTMLInputElement;\n private btn: HTMLSallaButtonElement;\n private resendMessage: HTMLParagraphElement;\n private timer: HTMLElement;\n private resend: HTMLAnchorElement;\n private otpInputs: NodeListOf<HTMLInputElement>;\n private data: { type: 'mobile' \| 'email', phone?: string, country_code?: string, email?: string };\n\n @State() translationLoaded: boolean = false;\n\n @Element() host: HTMLElement;\n /\n Should render component without modal\n /\n @Prop() display: 'inline' \| 'modal' = 'modal';\n\n /\n Verifying method\n /\n @Prop({ mutable: true }) type: 'mobile' \| 'email' = 'mobile';\n /\n should auto reloading the page after success verification\n /\n @Prop() autoReload: boolean = true;\n\n /\n Once the api verify success, it will be login the customer in web pages\n /\n @Prop() supportWebAuth: boolean = true;\n\n /\n Event when success verification\n /\n @Event() verified: EventEmitter;\n\n @State() title: string;\n\n @State() resendAfter: number = 30;\n /\n to use: `salla.api.auth.verify` or `salla.profile.verify`\n /\n @State() isProfileVerify: boolean = false;\n\n private handleKeyUp(ev) {\n if (['Alt', 'Shift', 'Control', 'AltGraph', 'Ctrl'].includes(ev.key)) {\n return;\n }\n let key = ev.keyCode \|\| ev.charCode;\n if (ev.target.value) {\n ev.target.nextElementSibling?.focus();\n ev.target.nextElementSibling?.select();\n } else if ([8, 46].includes(key)) {\n ev.target.previousElementSibling?.focus();\n ev.target.previousElementSibling?.select();\n }\n this.toggleOTPSubmit();\n }\n\n private handlePaste(ev) {\n let text = salla.helpers.number(ev.clipboardData.getData('text'))\n .replace(/[^0-9.]/g, '')\n .replace('..', '.');\n this.otpInputs.forEach((input, i) => input.value = text[i] \|\| '');\n this.toggleOTPSubmit();\n setTimeout(() => this.otpInputs[3].focus(), 100);\n }\n\n /\n Get current code\n * @return {string}\n /\n @Method()\n async getCode() {\n return this.code.value;\n }\n\n /\n Open verifying modal\n * @param data\n /\n @Method()\n async open(data) {\n this.data = data;\n this.data.type = this.data.type \|\| this.type;\n this.type = this.data.type;\n this.resendTimer();\n this.otpInputs = this.body.querySelectorAll('.s-verify-input');\n\n this.reset();\n this.display == 'modal' && this.modal?.setTitle(this.title);\n this.modal.open();\n\n // focus the first input after opening the modal\n setTimeout(() => this.otpInputs[0].focus(), 100);\n }\n\n private toggleOTPSubmit() {\n let otp = []\n this.otpInputs.forEach(input => input.value && otp.push(input.value));\n\n this.code.value = otp.join('');\n\n if (otp.length === 4) {\n this.btn.disable()\n this.btn.click();\n return;\n }\n\n this.btn.enable()\n }\n\n private reset() {\n this.otpInputs.forEach((input) => input.value = '');\n this.code.value = '';\n this.otpInputs[0].focus();\n }\n\n private resendTimer() {\n this.resendMessage.style.display = 'block';\n this.resend.style.display = 'none';\n this.resendAfter = 30;\n\n let timerId = setInterval(() => {\n if (this.resendAfter <= 0) {\n clearInterval(timerId);\n this.resend.style.display = 'block';\n this.resendMessage.style.display = 'none';\n } else {\n this.timer.innerHTML = `${this.resendAfter >= 10 ? this.resendAfter : '0' + this.resendAfter} : 00`;\n this.resendAfter--;\n }\n }, 1000);\n }\n\n private resendCode() {\n return this.btn.stop()\n .then(() => this.btn.disable())\n .then(() => {\n this.otpInputs.forEach(input => input.value = '');\n this.otpInputs[0].focus();\n })\n .then(() => salla.api.auth.resend(this.data))\n .finally(() => this.resendTimer());\n }\n\n private submit() {\n //if code not 4 digits, focus on the after filled input,\n if (this.code.value.length < 4) {\n this.otpInputs[this.code.value.length].focus();\n salla.log('Trying to submit without 4 digits!');\n return;\n }\n\n let data = { code: this.code.value, ...this.data };\n\n return this.btn.load()\n .then(() => this.btn.disable())\n .then(() => this.isProfileVerify ? salla.profile.verify(data) : salla.auth.verify(data, this.supportWebAuth))\n .then(response => this.verified.emit(response))\n .then(() => this.btn.stop() && this.btn.disable())\n .then(() => this.modal.close())\n .then(() => this.autoReload && window.location.reload())\n .catch((error) => {\n salla.logger.error(error);\n this.btn.stop() && this.btn.enable() && this.reset()\n });\n }\n\n render() {\n return this.display == 'inline' ? <Host>{this.myBody()}</Host> :\n <salla-modal width=\"xs\" class=\"s-verify\" ref={modal => this.modal = modal}\n modal-title={this.title}>\n <span slot='icon' class=\"s-verify-header-icon\" innerHTML={this.type == \"mobile\" ? AndroidPhoneIcon : MailIcon}></span>\n {this.myBody()}\n </salla-modal>;\n }\n\n private otpHandler() {\n if (!window.OTPCredential) {\n return;\n }\n\n const ac = new AbortController();\n\n let o = {\n otp: {transport: ['sms']},\n signal: ac.signal\n }\n\n navigator.credentials.get(o)\n .then(otp => {\n // @ts-ignore\n this.otpInputs.forEach((input, index) => input.value = otp.code[index])\n return this.submit()\n });\n }\n\n private myBody() {\n return (\n <div class=\"s-verify-body\" ref={body => this.body = body}>\n <div class=\"s-verify-message\" innerHTML={salla.lang.get('pages.profile.verify_message')} />\n <input type=\"hidden\" name=\"code\" maxlength=\"4\" required ref={code => this.code = code} />\n <div class=\"s-verify-codes\" dir=\"ltr\">\n {[1, 2, 3, 4].map(() => <input type=\"tel\" autocomplete=\"one-time-code\" pattern=\"[0-9]\" inputmode=\"numeric\"\n maxlength=\"1\" class=\"s-verify-input\"\n onInput={e => salla.helpers.inputDigitsOnly(e.target)}\n onPaste={e => this.handlePaste(e)}\n onKeyUp={e => this.handleKeyUp(e)}\n required />)}\n </div>\n <div slot=\"footer\" class=\"s-verify-footer\">\n <salla-button class=\"s-verify-submit\" loader-position='center' disabled={true}\n onClick={() => this.submit()}\n ref={b => this.btn = b}>\n {salla.lang.get('pages.profile.verify')}\n </salla-button>\n <p class=\"s-verify-resend-message\" ref={el => this.resendMessage = el}>\n {salla.lang.get('blocks.header.resend_after')}\n <b class=\"s-verify-timer\" ref={el => this.timer = el}></b></p>\n <a href=\"#\" class=\"s-verify-resend\" onClick={() => this.resendCode()}\n ref={el => this.resend = el}>{salla.lang.get('blocks.comments.submit')}</a>\n </div>\n <slot name=\"after-footer\" />\n </div>\n );\n }\n}\n"]}

package/dist/components/salla-verify2.js CHANGED Viewed

@@ -52,6 +52,7 @@ const SallaVerify = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.resendAfter = 0;
       this.timer.innerHTML = '30 : 00';
     });
+    this.otpHandler();
   }
   handleKeyUp(ev) {
     var _a, _b, _c, _d;
@@ -167,6 +168,22 @@ const SallaVerify = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return this.display == 'inline' ? h(Host, null, this.myBody()) :
       h("salla-modal", { width: "xs", class: "s-verify", ref: modal => this.modal = modal, "modal-title": this.title }, h("span", { slot: 'icon', class: "s-verify-header-icon", innerHTML: this.type == "mobile" ? AndroidPhoneIcon : email }), this.myBody());
   }
+  otpHandler() {
+    if (!window.OTPCredential) {
+      return;
+    }
+    const ac = new AbortController();
+    let o = {
+      otp: { transport: ['sms'] },
+      signal: ac.signal
+    };
+    navigator.credentials.get(o)
+      .then(otp => {
+      // @ts-ignore
+      this.otpInputs.forEach((input, index) => input.value = otp.code[index]);
+      return this.submit();
+    });
+  }
   myBody() {
     return (h("div", { class: "s-verify-body", ref: body => this.body = body }, h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "tel", autocomplete: "one-time-code", pattern: "[0-9]*", inputmode: "numeric", maxlength: "1", class: "s-verify-input", onInput: e => salla.helpers.inputDigitsOnly(e.target), onPaste: e => this.handlePaste(e), onKeyUp: e => this.handleKeyUp(e), required: true }))), h("div", { slot: "footer", class: "s-verify-footer" }, h("salla-button", { class: "s-verify-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-timer", ref: el => this.timer = el })), h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), h("slot", { name: "after-footer" })));
   }

package/dist/components/salla-verify2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-verify2.js","mappings":"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","names":["MailIcon"],"sources":["./src/components/salla-verify/salla-verify.scss?tag=salla-verify","./src/components/salla-verify/salla-verify.tsx"],"sourcesContent":["/\n Verify Component: verify step in login and register and displays after the user change it's phone number.\n* You can use these classes to target the elements in the component.\n/\n\nsalla-verify {\n display: block;\n}\n\n.s-verify {\n &-host{\n \n }\n &-message {\n\n }\n &-label {\n\n }\n &-codes {\n\n }\n &-input {\n\n }\n &-footer {\n\n }\n &-submit {\n\n }\n &-resend-message {\n\n }\n &-timer {\n\n }\n &-resend {\n\n }\n &-back {\n \n }\n}\n","import { Component, Host, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport AndroidPhoneIcon from '../../assets/svg/android-phone.svg';\nimport MailIcon from '../../assets/svg/mail.svg';\n\n/\n @slot footer - Replaces the footer, by default it contains: verify button, resend, and timer\n * @slot after-footer - placeholder position\n /\n@Component({ tag: 'salla-verify', styleUrl: 'salla-verify.scss' })\n\nexport class SallaVerify {\n constructor() {\n salla.lang.onLoaded(() => {\n this.translationLoaded = true;\n this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + this.type);\n this.modal?.setTitle(this.title);\n });\n\n if (this.display == 'inline') {\n this.modal = { open: () => '', close: () => '', setTitle: () => '' };\n return;\n }\n\n //todo:: change this way, now we fire the event from the backend, we should listen to salla.profile.event.onUpdated\n salla.event.on('profile::verification', data => {\n let payload = Array.isArray(data) ? data[0] : data;\n this.isProfileVerify = true;\n this.open(payload);\n this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + payload.type);\n this.modal?.setTitle(this.title);\n });\n\n salla.event.on('modalClosed', () => {\n this.resendAfter = 0;\n this.timer.innerHTML = '30 : 00';\n });\n }\n\n private modal: HTMLSallaModalElement \| any;\n private body: HTMLDivElement;\n private code: HTMLInputElement;\n private btn: HTMLSallaButtonElement;\n private resendMessage: HTMLParagraphElement;\n private timer: HTMLElement;\n private resend: HTMLAnchorElement;\n private otpInputs: NodeListOf<HTMLInputElement>;\n private data: { type: 'mobile' \| 'email', phone?: string, country_code?: string, email?: string };\n\n @State() translationLoaded: boolean = false;\n\n @Element() host: HTMLElement;\n /\n Should render component without modal\n /\n @Prop() display: 'inline' \| 'modal' = 'modal';\n\n /\n Verifying method\n /\n @Prop({ mutable: true }) type: 'mobile' \| 'email' = 'mobile';\n /\n should auto reloading the page after success verification\n /\n @Prop() autoReload: boolean = true;\n\n /\n Once the api verify success, it will be login the customer in web pages\n /\n @Prop() supportWebAuth: boolean = true;\n\n /\n Event when success verification\n /\n @Event() verified: EventEmitter;\n\n @State() title: string;\n\n @State() resendAfter: number = 30;\n /\n to use: `salla.api.auth.verify` or `salla.profile.verify`\n /\n @State() isProfileVerify: boolean = false;\n\n private handleKeyUp(ev) {\n if (['Alt', 'Shift', 'Control', 'AltGraph', 'Ctrl'].includes(ev.key)) {\n return;\n }\n let key = ev.keyCode \|\| ev.charCode;\n if (ev.target.value) {\n ev.target.nextElementSibling?.focus();\n ev.target.nextElementSibling?.select();\n } else if ([8, 46].includes(key)) {\n ev.target.previousElementSibling?.focus();\n ev.target.previousElementSibling?.select();\n }\n this.toggleOTPSubmit();\n }\n\n private handlePaste(ev) {\n let text = salla.helpers.number(ev.clipboardData.getData('text'))\n .replace(/[^0-9.]/g, '')\n .replace('..', '.');\n this.otpInputs.forEach((input, i) => input.value = text[i] \|\| '');\n this.toggleOTPSubmit();\n setTimeout(() => this.otpInputs[3].focus(), 100);\n }\n\n /\n Get current code\n * @return {string}\n /\n @Method()\n async getCode() {\n return this.code.value;\n }\n\n /\n Open verifying modal\n * @param data\n /\n @Method()\n async open(data) {\n this.data = data;\n this.data.type = this.data.type \|\| this.type;\n this.type = this.data.type;\n this.resendTimer();\n this.otpInputs = this.body.querySelectorAll('.s-verify-input');\n\n this.reset();\n this.display == 'modal' && this.modal?.setTitle(this.title);\n this.modal.open();\n\n // focus the first input after opening the modal\n setTimeout(() => this.otpInputs[0].focus(), 100);\n }\n\n private toggleOTPSubmit() {\n let otp = []\n this.otpInputs.forEach(input => input.value && otp.push(input.value));\n\n this.code.value = otp.join('');\n\n if (otp.length === 4) {\n this.btn.disable()\n this.btn.click();\n return;\n }\n\n this.btn.enable()\n }\n\n private reset() {\n this.otpInputs.forEach((input) => input.value = '');\n this.code.value = '';\n this.otpInputs[0].focus();\n }\n\n private resendTimer() {\n this.resendMessage.style.display = 'block';\n this.resend.style.display = 'none';\n this.resendAfter = 30;\n\n let timerId = setInterval(() => {\n if (this.resendAfter <= 0) {\n clearInterval(timerId);\n this.resend.style.display = 'block';\n this.resendMessage.style.display = 'none';\n } else {\n this.timer.innerHTML = `${this.resendAfter >= 10 ? this.resendAfter : '0' + this.resendAfter} : 00`;\n this.resendAfter--;\n }\n }, 1000);\n }\n\n private resendCode() {\n return this.btn.stop()\n .then(() => this.btn.disable())\n .then(() => {\n this.otpInputs.forEach(input => input.value = '');\n this.otpInputs[0].focus();\n })\n .then(() => salla.api.auth.resend(this.data))\n .finally(() => this.resendTimer());\n }\n\n private submit() {\n //if code not 4 digits, focus on the after filled input,\n if (this.code.value.length < 4) {\n this.otpInputs[this.code.value.length].focus();\n salla.log('Trying to submit without 4 digits!');\n return;\n }\n\n let data = { code: this.code.value, ...this.data };\n\n return this.btn.load()\n .then(() => this.btn.disable())\n .then(() => this.isProfileVerify ? salla.profile.verify(data) : salla.auth.verify(data, this.supportWebAuth))\n .then(response => this.verified.emit(response))\n .then(() => this.btn.stop() && this.btn.disable())\n .then(() => this.modal.close())\n .then(() => this.autoReload && window.location.reload())\n .catch((error) => {\n salla.logger.error(error);\n this.btn.stop() && this.btn.enable() && this.reset()\n });\n }\n\n render() {\n return this.display == 'inline' ? <Host>{this.myBody()}</Host> :\n <salla-modal width=\"xs\" class=\"s-verify\" ref={modal => this.modal = modal}\n modal-title={this.title}>\n <span slot='icon' class=\"s-verify-header-icon\" innerHTML={this.type == \"mobile\" ? AndroidPhoneIcon : MailIcon}></span>\n {this.myBody()}\n </salla-modal>;\n }\n\n private myBody() {\n return (\n <div class=\"s-verify-body\" ref={body => this.body = body}>\n <div class=\"s-verify-message\" innerHTML={salla.lang.get('pages.profile.verify_message')} />\n <input type=\"hidden\" name=\"code\" maxlength=\"4\" required ref={code => this.code = code} />\n <div class=\"s-verify-codes\" dir=\"ltr\">\n {[1, 2, 3, 4].map(() => <input type=\"tel\" autocomplete=\"one-time-code\" pattern=\"[0-9]\" inputmode=\"numeric\"\n maxlength=\"1\" class=\"s-verify-input\"\n onInput={e => salla.helpers.inputDigitsOnly(e.target)}\n onPaste={e => this.handlePaste(e)}\n onKeyUp={e => this.handleKeyUp(e)}\n required />)}\n </div>\n <div slot=\"footer\" class=\"s-verify-footer\">\n <salla-button class=\"s-verify-submit\" loader-position='center' disabled={true}\n onClick={() => this.submit()}\n ref={b => this.btn = b}>\n {salla.lang.get('pages.profile.verify')}\n </salla-button>\n <p class=\"s-verify-resend-message\" ref={el => this.resendMessage = el}>\n {salla.lang.get('blocks.header.resend_after')}\n <b class=\"s-verify-timer\" ref={el => this.timer = el}></b></p>\n <a href=\"#\" class=\"s-verify-resend\" onClick={() => this.resendCode()}\n ref={el => this.resend = el}>{salla.lang.get('blocks.comments.submit')}</a>\n </div>\n <slot name=\"after-footer\" />\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"salla-verify2.js","mappings":"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","names":["MailIcon"],"sources":["./src/components/salla-verify/salla-verify.scss?tag=salla-verify","./src/components/salla-verify/salla-verify.tsx"],"sourcesContent":["/\n Verify Component: verify step in login and register and displays after the user change it's phone number.\n* You can use these classes to target the elements in the component.\n/\n\nsalla-verify {\n display: block;\n}\n\n.s-verify {\n &-host{\n \n }\n &-message {\n\n }\n &-label {\n\n }\n &-codes {\n\n }\n &-input {\n\n }\n &-footer {\n\n }\n &-submit {\n\n }\n &-resend-message {\n\n }\n &-timer {\n\n }\n &-resend {\n\n }\n &-back {\n \n }\n}\n","import { Component, Host, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport AndroidPhoneIcon from '../../assets/svg/android-phone.svg';\nimport MailIcon from '../../assets/svg/mail.svg';\n\n/\n @slot footer - Replaces the footer, by default it contains: verify button, resend, and timer\n * @slot after-footer - placeholder position\n /\n@Component({ tag: 'salla-verify', styleUrl: 'salla-verify.scss' })\n\nexport class SallaVerify {\n constructor() {\n salla.lang.onLoaded(() => {\n this.translationLoaded = true;\n this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + this.type);\n this.modal?.setTitle(this.title);\n });\n\n if (this.display == 'inline') {\n this.modal = { open: () => '', close: () => '', setTitle: () => '' };\n return;\n }\n\n //todo:: change this way, now we fire the event from the backend, we should listen to salla.profile.event.onUpdated\n salla.event.on('profile::verification', data => {\n let payload = Array.isArray(data) ? data[0] : data;\n this.isProfileVerify = true;\n this.open(payload);\n this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + payload.type);\n this.modal?.setTitle(this.title);\n });\n\n salla.event.on('modalClosed', () => {\n this.resendAfter = 0;\n this.timer.innerHTML = '30 : 00';\n });\n\n this.otpHandler();\n }\n\n private modal: HTMLSallaModalElement \| any;\n private body: HTMLDivElement;\n private code: HTMLInputElement;\n private btn: HTMLSallaButtonElement;\n private resendMessage: HTMLParagraphElement;\n private timer: HTMLElement;\n private resend: HTMLAnchorElement;\n private otpInputs: NodeListOf<HTMLInputElement>;\n private data: { type: 'mobile' \| 'email', phone?: string, country_code?: string, email?: string };\n\n @State() translationLoaded: boolean = false;\n\n @Element() host: HTMLElement;\n /\n Should render component without modal\n /\n @Prop() display: 'inline' \| 'modal' = 'modal';\n\n /\n Verifying method\n /\n @Prop({ mutable: true }) type: 'mobile' \| 'email' = 'mobile';\n /\n should auto reloading the page after success verification\n /\n @Prop() autoReload: boolean = true;\n\n /\n Once the api verify success, it will be login the customer in web pages\n /\n @Prop() supportWebAuth: boolean = true;\n\n /\n Event when success verification\n /\n @Event() verified: EventEmitter;\n\n @State() title: string;\n\n @State() resendAfter: number = 30;\n /\n to use: `salla.api.auth.verify` or `salla.profile.verify`\n /\n @State() isProfileVerify: boolean = false;\n\n private handleKeyUp(ev) {\n if (['Alt', 'Shift', 'Control', 'AltGraph', 'Ctrl'].includes(ev.key)) {\n return;\n }\n let key = ev.keyCode \|\| ev.charCode;\n if (ev.target.value) {\n ev.target.nextElementSibling?.focus();\n ev.target.nextElementSibling?.select();\n } else if ([8, 46].includes(key)) {\n ev.target.previousElementSibling?.focus();\n ev.target.previousElementSibling?.select();\n }\n this.toggleOTPSubmit();\n }\n\n private handlePaste(ev) {\n let text = salla.helpers.number(ev.clipboardData.getData('text'))\n .replace(/[^0-9.]/g, '')\n .replace('..', '.');\n this.otpInputs.forEach((input, i) => input.value = text[i] \|\| '');\n this.toggleOTPSubmit();\n setTimeout(() => this.otpInputs[3].focus(), 100);\n }\n\n /\n Get current code\n * @return {string}\n /\n @Method()\n async getCode() {\n return this.code.value;\n }\n\n /\n Open verifying modal\n * @param data\n /\n @Method()\n async open(data) {\n this.data = data;\n this.data.type = this.data.type \|\| this.type;\n this.type = this.data.type;\n this.resendTimer();\n this.otpInputs = this.body.querySelectorAll('.s-verify-input');\n\n this.reset();\n this.display == 'modal' && this.modal?.setTitle(this.title);\n this.modal.open();\n\n // focus the first input after opening the modal\n setTimeout(() => this.otpInputs[0].focus(), 100);\n }\n\n private toggleOTPSubmit() {\n let otp = []\n this.otpInputs.forEach(input => input.value && otp.push(input.value));\n\n this.code.value = otp.join('');\n\n if (otp.length === 4) {\n this.btn.disable()\n this.btn.click();\n return;\n }\n\n this.btn.enable()\n }\n\n private reset() {\n this.otpInputs.forEach((input) => input.value = '');\n this.code.value = '';\n this.otpInputs[0].focus();\n }\n\n private resendTimer() {\n this.resendMessage.style.display = 'block';\n this.resend.style.display = 'none';\n this.resendAfter = 30;\n\n let timerId = setInterval(() => {\n if (this.resendAfter <= 0) {\n clearInterval(timerId);\n this.resend.style.display = 'block';\n this.resendMessage.style.display = 'none';\n } else {\n this.timer.innerHTML = `${this.resendAfter >= 10 ? this.resendAfter : '0' + this.resendAfter} : 00`;\n this.resendAfter--;\n }\n }, 1000);\n }\n\n private resendCode() {\n return this.btn.stop()\n .then(() => this.btn.disable())\n .then(() => {\n this.otpInputs.forEach(input => input.value = '');\n this.otpInputs[0].focus();\n })\n .then(() => salla.api.auth.resend(this.data))\n .finally(() => this.resendTimer());\n }\n\n private submit() {\n //if code not 4 digits, focus on the after filled input,\n if (this.code.value.length < 4) {\n this.otpInputs[this.code.value.length].focus();\n salla.log('Trying to submit without 4 digits!');\n return;\n }\n\n let data = { code: this.code.value, ...this.data };\n\n return this.btn.load()\n .then(() => this.btn.disable())\n .then(() => this.isProfileVerify ? salla.profile.verify(data) : salla.auth.verify(data, this.supportWebAuth))\n .then(response => this.verified.emit(response))\n .then(() => this.btn.stop() && this.btn.disable())\n .then(() => this.modal.close())\n .then(() => this.autoReload && window.location.reload())\n .catch((error) => {\n salla.logger.error(error);\n this.btn.stop() && this.btn.enable() && this.reset()\n });\n }\n\n render() {\n return this.display == 'inline' ? <Host>{this.myBody()}</Host> :\n <salla-modal width=\"xs\" class=\"s-verify\" ref={modal => this.modal = modal}\n modal-title={this.title}>\n <span slot='icon' class=\"s-verify-header-icon\" innerHTML={this.type == \"mobile\" ? AndroidPhoneIcon : MailIcon}></span>\n {this.myBody()}\n </salla-modal>;\n }\n\n private otpHandler() {\n if (!window.OTPCredential) {\n return;\n }\n\n const ac = new AbortController();\n\n let o = {\n otp: {transport: ['sms']},\n signal: ac.signal\n }\n\n navigator.credentials.get(o)\n .then(otp => {\n // @ts-ignore\n this.otpInputs.forEach((input, index) => input.value = otp.code[index])\n return this.submit()\n });\n }\n\n private myBody() {\n return (\n <div class=\"s-verify-body\" ref={body => this.body = body}>\n <div class=\"s-verify-message\" innerHTML={salla.lang.get('pages.profile.verify_message')} />\n <input type=\"hidden\" name=\"code\" maxlength=\"4\" required ref={code => this.code = code} />\n <div class=\"s-verify-codes\" dir=\"ltr\">\n {[1, 2, 3, 4].map(() => <input type=\"tel\" autocomplete=\"one-time-code\" pattern=\"[0-9]\" inputmode=\"numeric\"\n maxlength=\"1\" class=\"s-verify-input\"\n onInput={e => salla.helpers.inputDigitsOnly(e.target)}\n onPaste={e => this.handlePaste(e)}\n onKeyUp={e => this.handleKeyUp(e)}\n required />)}\n </div>\n <div slot=\"footer\" class=\"s-verify-footer\">\n <salla-button class=\"s-verify-submit\" loader-position='center' disabled={true}\n onClick={() => this.submit()}\n ref={b => this.btn = b}>\n {salla.lang.get('pages.profile.verify')}\n </salla-button>\n <p class=\"s-verify-resend-message\" ref={el => this.resendMessage = el}>\n {salla.lang.get('blocks.header.resend_after')}\n <b class=\"s-verify-timer\" ref={el => this.timer = el}></b></p>\n <a href=\"#\" class=\"s-verify-resend\" onClick={() => this.resendCode()}\n ref={el => this.resend = el}>{salla.lang.get('blocks.comments.submit')}</a>\n </div>\n <slot name=\"after-footer\" />\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/salla-add-product-button_40.entry.js CHANGED Viewed

@@ -29452,6 +29452,7 @@ const SallaVerify = class {
       this.resendAfter = 0;
       this.timer.innerHTML = '30 : 00';
     });
+    this.otpHandler();
   }
   handleKeyUp(ev) {
     var _a, _b, _c, _d;
@@ -29567,6 +29568,22 @@ const SallaVerify = class {
     return this.display == 'inline' ? h(Host, null, this.myBody()) :
       h("salla-modal", { width: "xs", class: "s-verify", ref: modal => this.modal = modal, "modal-title": this.title }, h("span", { slot: 'icon', class: "s-verify-header-icon", innerHTML: this.type == "mobile" ? AndroidPhoneIcon : MailIcon }), this.myBody());
   }
+  otpHandler() {
+    if (!window.OTPCredential) {
+      return;
+    }
+    const ac = new AbortController();
+    let o = {
+      otp: { transport: ['sms'] },
+      signal: ac.signal
+    };
+    navigator.credentials.get(o)
+      .then(otp => {
+      // @ts-ignore
+      this.otpInputs.forEach((input, index) => input.value = otp.code[index]);
+      return this.submit();
+    });
+  }
   myBody() {
     return (h("div", { class: "s-verify-body", ref: body => this.body = body }, h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "tel", autocomplete: "one-time-code", pattern: "[0-9]*", inputmode: "numeric", maxlength: "1", class: "s-verify-input", onInput: e => salla.helpers.inputDigitsOnly(e.target), onPaste: e => this.handlePaste(e), onKeyUp: e => this.handleKeyUp(e), required: true }))), h("div", { slot: "footer", class: "s-verify-footer" }, h("salla-button", { class: "s-verify-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-timer", ref: el => this.timer = el })), h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), h("slot", { name: "after-footer" })));
   }