@salla.sa/twilight-components/dist/twilight/p-2088d47e.entry.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import{r as s,c as i,h as t,H as e,g as r}from"./p-BrMYHkA5.js";import{M as l}from"./p-DmgxDvXL.js";var h=`\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>android-phone</title>\n<path d="M22.667 0h-13.333c-2.941 0-5.333 2.392-5.333 5.333v21.333c0 2.941 2.392 5.333 5.333 5.333h13.333c2.941 0 5.333-2.392 5.333-5.333v-21.333c0-2.941-2.392-5.333-5.333-5.333zM25.333 26.667c0 1.471-1.196 2.667-2.667 2.667h-13.333c-1.471 0-2.667-1.196-2.667-2.667v-2.667h18.667zM25.333 21.333h-18.667v-16c0-1.471 1.196-2.667 2.667-2.667h13.333c1.471 0 2.667 1.196 2.667 2.667zM13.333 28h5.333c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333z"></path>\n</svg>\n`;const o="salla-verify{display:block}.s-verify-input{}.s-verify-input::-webkit-outer-spin-button,.s-verify-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.s-verify-input[type=number]{-moz-appearance:textfield}";const a=class{constructor(t){s(this,t);this.verified=i(this,"verified");this.translationLoaded=false;this.display="modal";this.type="mobile";this.autoReload=true;this.supportWebAuth=true;this.resendAfter=30;this.isProfileVerify=false;salla.lang.onLoaded((()=>{var s;this.translationLoaded=true;this.title=salla.lang.get("pages.profile.verify_title")+salla.lang.get("common.elements."+this.type);(s=this.modal)===null||s===void 0?void 0:s.setTitle(this.title)}));if(this.display=="inline"){this.modal={open:()=>"",close:()=>"",setTitle:()=>""};return}salla.event.on("profile::verification",(s=>{var i;let t=Array.isArray(s)?s[0]:s;this.isProfileVerify=true;this.open(t);this.title=salla.lang.get("pages.profile.verify_title")+salla.lang.get("common.elements."+t.type);(i=this.modal)===null||i===void 0?void 0:i.setTitle(this.title)}));salla.event.on("modalClosed",(()=>{this.resendAfter=0;this.timer.innerHTML="30 : 00"}))}splitNumber(s){this.resetError();let i=s.data||s.target.value;if(!i)return;if(i.length===1)return;this.modifyNext(s.target,i)}modifyNext(s,i){s.value=i[0];i=i.substring(1);if(s.nextElementSibling&&i.length){this.modifyNext(s.nextElementSibling,i)}else if(!s.nextElementSibling&&i.length===0){s.focus()}else if(s.nextElementSibling&&i.length===0){s.nextElementSibling.focus()}}checkAllInputs(){let s=true;for(let i=0;i<this.otpInputs.length;i++){if(this.otpInputs[i].value===""){s=false}}return s}handleKeyUp(s){var i,t,e,r;this.resetError();if(["Alt","Shift","Control","AltGraph","Ctrl"].includes(s.key)){return}let l=s.keyCode||s.charCode;if(s.target.value){(i=s.target.nextElementSibling)===null||i===void 0?void 0:i.focus();(t=s.target.nextElementSibling)===null||t===void 0?void 0:t.select()}else if([8,46].includes(l)){(e=s.target.previousElementSibling)===null||e===void 0?void 0:e.focus();(r=s.target.previousElementSibling)===null||r===void 0?void 0:r.select()}if(s.target.value.length>1){this.splitNumber(s)}}handlePaste(s){this.resetError();const i=salla.helpers.number(s.clipboardData.getData("text"))||"";let t=i.replace(/[^0-9]/g,"");t=t.substring(0,this.otpInputs.length);this.otpInputs.forEach((s=>s.value=""));this.modifyNext(this.otpInputs[0],t)}handleInput(s){this.resetError();salla.helpers.inputDigitsOnly(s.target);if(this.checkAllInputs()){setTimeout((()=>{this.toggleOTPSubmit()}),100)}}resetError(){this.hasError=false;this.errorMessage=""}handleFocus(s){var i;if(s.target===this.firstOtpInput)return;if(((i=this.firstOtpInput)===null||i===void 0?void 0:i.value)==""){this.firstOtpInput.focus()}if(s.target.previousElementSibling.value==""){s.target.previousElementSibling.focus()}}async getCode(){return this.code.value}async open(s){var i,t;this.data=s;this.data.type=this.data.type||this.type;this.type=this.data.type;this.resendTimer();this.otpInputs=this.body.querySelectorAll(".s-verify-input");this.firstOtpInput=this.body.querySelector("#otp-1");this.reset();this.resetError();this.display=="modal"&&((i=this.modal)===null||i===void 0?void 0:i.setTitle(this.title));this.modal.open();(t=this.firstOtpInput)===null||t===void 0?void 0:t.addEventListener("input",(s=>this.splitNumber(s)));setTimeout((()=>this.otpInputs[0].focus()),100)}toggleOTPSubmit(){let s=[];this.otpInputs.forEach((i=>i.value&&s.push(i.value)));this.code.value=s.join("");if(s.length===4){this.btn.disable();this.btn.click();return}this.btn.enable()}reset(){this.otpInputs.forEach((s=>s.value=""));this.code.value="";this.otpInputs[0].focus()}resendTimer(){this.resendMessage.style.display="block";this.resend.style.display="none";this.resendAfter=30;let s=setInterval((()=>{if(this.resendAfter<=0){clearInterval(s);this.resend.style.display="block";this.resendMessage.style.display="none"}else{this.timer.innerHTML=`${this.resendAfter>=10?this.resendAfter:"0"+this.resendAfter} : 00`;this.resendAfter--}}),1e3)}resendCode(){return this.btn.stop().then((()=>this.btn.disable())).then((()=>{this.otpInputs.forEach((s=>s.value=""));this.otpInputs[0].focus()})).then((()=>salla.api.auth.resend(this.data))).finally((()=>this.resendTimer()))}submit(){if(this.code.value.length<4){this.otpInputs[this.code.value.length].focus();salla.log("Trying to submit without 4 digits!");return}let s=Object.assign({code:this.code.value},this.data);return this.btn.load().then((()=>this.btn.disable())).then((()=>this.isProfileVerify?salla.profile.verify(s):salla.auth.verify(s,this.supportWebAuth))).then((s=>this.verified.emit(s))).then((()=>this.btn.stop()&&this.btn.disable())).then((()=>this.modal.close())).then((()=>this.autoReload&&window.location.reload())).catch((s=>{var i,t,e;this.hasError=true;this.errorMessage=((e=(t=(i=s.response)===null||i===void 0?void 0:i.data)===null||t===void 0?void 0:t.error)===null||e===void 0?void 0:e.message)||salla.lang.get("common.errors.error_occurred");if(!s.response){console.log("Unexpected error",s)}else{salla.logger.error(s)}this.btn.stop()&&this.btn.enable()&&this.reset()}))}render(){return this.display=="inline"?t(e,null,this.myBody()):t("salla-modal",{width:"xs",class:"s-verify",ref:s=>this.modal=s,"modal-title":this.title},t("span",{slot:"icon",class:"s-verify-header-icon",innerHTML:this.type=="mobile"?h:l}),this.myBody())}myBody(){return t("div",{class:"s-verify-body",ref:s=>this.body=s},t("div",{class:"s-verify-message",innerHTML:salla.lang.get("pages.profile.verify_message")}),t("slot",{name:"mobile"}),t("slot",{name:"email"}),t("input",{type:"hidden",name:"code",maxlength:"4",required:true,ref:s=>this.code=s}),t("div",{class:{"s-verify-codes":true,"has-error":this.hasError},dir:"ltr"},[1,2,3,4].map((s=>t("input",{type:"number",autocomplete:"one-time-code",pattern:"[0-9]*",inputmode:"numeric",maxlength:"1",value:"",id:`otp-${s}`,class:{"s-verify-input":true,"s-has-error":this.hasError},onInput:s=>this.handleInput(s),onPaste:s=>this.handlePaste(s),onKeyUp:s=>this.handleKeyUp(s),onFocus:s=>this.handleFocus(s),required:true})))),this.hasError&&this.errorMessage?t("span",{class:"s-verify-error-message"},this.errorMessage):"",t("div",{slot:"footer",class:"s-verify-footer"},t("salla-button",{class:"s-verify-submit","loader-position":"center",disabled:true,onClick:()=>this.submit(),ref:s=>this.btn=s},salla.lang.get("pages.profile.verify")),t("p",{class:"s-verify-resend-message",ref:s=>this.resendMessage=s},salla.lang.get("blocks.header.resend_after"),t("b",{class:"s-verify-timer",ref:s=>this.timer=s})),t("a",{href:"#",class:"s-verify-resend",onClick:()=>this.resendCode(),ref:s=>this.resend=s},salla.lang.get("blocks.comments.submit"))),t("slot",{name:"after-footer"}))}get host(){return r(this)}};a.style=o;export{a as salla_verify};
//# sourceMappingURL=p-2088d47e.entry.js.map