139 lines
9.9 KiB
JavaScript
Executable File
139 lines
9.9 KiB
JavaScript
Executable File
import{i as v,r as $,e as C,a as b,b as l,z as g,R,p as T,h as S,S as O}from"./index-B6fu-u6K.js";import{n as h,c as x,r as d,U as E}from"./if-defined-D6swbWyQ.js";import"./index-BEFi7f_e.js";import"./index-BqLefJXm.js";const L=v`
|
|
:host {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
input {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: var(--wui-color-gray-glass-010);
|
|
border-radius: var(--wui-border-radius-xs);
|
|
border: 1px solid var(--wui-color-gray-glass-005);
|
|
font-family: var(--wui-font-family);
|
|
font-size: var(--wui-font-size-large);
|
|
font-weight: var(--wui-font-weight-regular);
|
|
letter-spacing: var(--wui-letter-spacing-large);
|
|
text-align: center;
|
|
color: var(--wui-color-fg-100);
|
|
caret-color: var(--wui-color-accent-100);
|
|
transition:
|
|
background-color var(--wui-ease-inout-power-1) var(--wui-duration-md),
|
|
border-color var(--wui-ease-inout-power-1) var(--wui-duration-md),
|
|
box-shadow var(--wui-ease-inout-power-1) var(--wui-duration-md);
|
|
will-change: background-color, border-color, box-shadow;
|
|
box-sizing: border-box;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: textfield;
|
|
padding: 0px;
|
|
}
|
|
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type='number'] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
input:disabled {
|
|
cursor: not-allowed;
|
|
border: 1px solid var(--wui-color-gray-glass-010);
|
|
background: var(--wui-color-gray-glass-005);
|
|
}
|
|
|
|
input:focus:enabled {
|
|
background-color: var(--wui-color-gray-glass-015);
|
|
border: 1px solid var(--wui-color-accent-100);
|
|
-webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
|
|
-moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
|
|
box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
input:hover:enabled {
|
|
background-color: var(--wui-color-gray-glass-015);
|
|
}
|
|
}
|
|
`;var y=function(a,t,e,i){var o=arguments.length,n=o<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,e):i,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(a,t,e,i);else for(var s=a.length-1;s>=0;s--)(r=a[s])&&(n=(o<3?r(n):o>3?r(t,e,n):r(t,e))||n);return o>3&&n&&Object.defineProperty(t,e,n),n};let c=class extends b{constructor(){super(...arguments),this.disabled=!1,this.value=""}render(){return l`<input
|
|
type="number"
|
|
maxlength="1"
|
|
inputmode="numeric"
|
|
autofocus
|
|
?disabled=${this.disabled}
|
|
value=${this.value}
|
|
/> `}};c.styles=[$,C,L];y([h({type:Boolean})],c.prototype,"disabled",void 0);y([h({type:String})],c.prototype,"value",void 0);c=y([x("wui-input-numeric")],c);const P=v`
|
|
:host {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
`;var m=function(a,t,e,i){var o=arguments.length,n=o<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,e):i,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(a,t,e,i);else for(var s=a.length-1;s>=0;s--)(r=a[s])&&(n=(o<3?r(n):o>3?r(t,e,n):r(t,e))||n);return o>3&&n&&Object.defineProperty(t,e,n),n};let p=class extends b{constructor(){super(...arguments),this.length=6,this.otp="",this.values=Array.from({length:this.length}).map(()=>""),this.numerics=[],this.shouldInputBeEnabled=t=>this.values.slice(0,t).every(i=>i!==""),this.handleKeyDown=(t,e)=>{const i=t.target,o=this.getInputElement(i),n=["ArrowLeft","ArrowRight","Shift","Delete"];if(!o)return;n.includes(t.key)&&t.preventDefault();const r=o.selectionStart;switch(t.key){case"ArrowLeft":r&&o.setSelectionRange(r+1,r+1),this.focusInputField("prev",e);break;case"ArrowRight":this.focusInputField("next",e);break;case"Shift":this.focusInputField("next",e);break;case"Delete":o.value===""?this.focusInputField("prev",e):this.updateInput(o,e,"");break;case"Backspace":o.value===""?this.focusInputField("prev",e):this.updateInput(o,e,"");break}},this.focusInputField=(t,e)=>{if(t==="next"){const i=e+1;if(!this.shouldInputBeEnabled(i))return;const o=this.numerics[i<this.length?i:e],n=o?this.getInputElement(o):void 0;n&&(n.disabled=!1,n.focus())}if(t==="prev"){const i=e-1,o=this.numerics[i>-1?i:e],n=o?this.getInputElement(o):void 0;n&&n.focus()}}}firstUpdated(){var e,i;this.otp&&(this.values=this.otp.split(""));const t=(e=this.shadowRoot)==null?void 0:e.querySelectorAll("wui-input-numeric");t&&(this.numerics=Array.from(t)),(i=this.numerics[0])==null||i.focus()}render(){return l`
|
|
<wui-flex gap="xxs" data-testid="wui-otp-input">
|
|
${Array.from({length:this.length}).map((t,e)=>l`
|
|
<wui-input-numeric
|
|
@input=${i=>this.handleInput(i,e)}
|
|
@click=${i=>this.selectInput(i)}
|
|
@keydown=${i=>this.handleKeyDown(i,e)}
|
|
.disabled=${!this.shouldInputBeEnabled(e)}
|
|
.value=${this.values[e]||""}
|
|
>
|
|
</wui-input-numeric>
|
|
`)}
|
|
</wui-flex>
|
|
`}updateInput(t,e,i){const o=this.numerics[e],n=t||(o?this.getInputElement(o):void 0);n&&(n.value=i,this.values=this.values.map((r,s)=>s===e?i:r))}selectInput(t){const e=t.target;if(e){const i=this.getInputElement(e);i==null||i.select()}}handleInput(t,e){const i=t.target,o=this.getInputElement(i);if(o){const n=o.value;t.inputType==="insertFromPaste"?this.handlePaste(o,n,e):E.isNumber(n)&&t.data?(this.updateInput(o,e,t.data),this.focusInputField("next",e)):this.updateInput(o,e,"")}this.dispatchInputChangeEvent()}handlePaste(t,e,i){const o=e[0];if(o&&E.isNumber(o)){this.updateInput(t,i,o);const r=e.substring(1);if(i+1<this.length&&r.length){const s=this.numerics[i+1],I=s?this.getInputElement(s):void 0;I&&this.handlePaste(I,r,i+1)}else this.focusInputField("next",i)}else this.updateInput(t,i,"")}getInputElement(t){var e;return(e=t.shadowRoot)!=null&&e.querySelector("input")?t.shadowRoot.querySelector("input"):null}dispatchInputChangeEvent(){const t=this.values.join("");this.dispatchEvent(new CustomEvent("inputChange",{detail:t,bubbles:!0,composed:!0}))}};p.styles=[$,P];m([h({type:Number})],p.prototype,"length",void 0);m([h({type:String})],p.prototype,"otp",void 0);m([d()],p.prototype,"values",void 0);p=m([x("wui-otp")],p);const k=v`
|
|
wui-loading-spinner {
|
|
margin: 9px auto;
|
|
}
|
|
|
|
.email-display,
|
|
.email-display wui-text {
|
|
max-width: 100%;
|
|
}
|
|
`;var f=function(a,t,e,i){var o=arguments.length,n=o<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,e):i,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(a,t,e,i);else for(var s=a.length-1;s>=0;s--)(r=a[s])&&(n=(o<3?r(n):o>3?r(t,e,n):r(t,e))||n);return o>3&&n&&Object.defineProperty(t,e,n),n},w;let u=w=class extends b{firstUpdated(){this.startOTPTimeout()}disconnectedCallback(){clearTimeout(this.OTPTimeout)}constructor(){var t;super(),this.loading=!1,this.timeoutTimeLeft=g.getTimeToNextEmailLogin(),this.error="",this.otp="",this.email=(t=R.state.data)==null?void 0:t.email,this.authConnector=T.getAuthConnector()}render(){if(!this.email)throw new Error("w3m-email-otp-widget: No email provided");const t=!!this.timeoutTimeLeft,e=this.getFooterLabels(t);return l`
|
|
<wui-flex
|
|
flexDirection="column"
|
|
alignItems="center"
|
|
.padding=${["l","0","l","0"]}
|
|
gap="l"
|
|
>
|
|
<wui-flex
|
|
class="email-display"
|
|
flexDirection="column"
|
|
alignItems="center"
|
|
.padding=${["0","xl","0","xl"]}
|
|
>
|
|
<wui-text variant="paragraph-400" color="fg-100" align="center">
|
|
Enter the code we sent to
|
|
</wui-text>
|
|
<wui-text variant="paragraph-500" color="fg-100" lineClamp="1" align="center">
|
|
${this.email}
|
|
</wui-text>
|
|
</wui-flex>
|
|
|
|
<wui-text variant="small-400" color="fg-200">The code expires in 20 minutes</wui-text>
|
|
|
|
${this.loading?l`<wui-loading-spinner size="xl" color="accent-100"></wui-loading-spinner>`:l` <wui-flex flexDirection="column" alignItems="center" gap="xs">
|
|
<wui-otp
|
|
dissabled
|
|
length="6"
|
|
@inputChange=${this.onOtpInputChange.bind(this)}
|
|
.otp=${this.otp}
|
|
></wui-otp>
|
|
${this.error?l`
|
|
<wui-text variant="small-400" align="center" color="error-100">
|
|
${this.error}. Try Again
|
|
</wui-text>
|
|
`:null}
|
|
</wui-flex>`}
|
|
|
|
<wui-flex alignItems="center" gap="xs">
|
|
<wui-text variant="small-400" color="fg-200">${e.title}</wui-text>
|
|
<wui-link @click=${this.onResendCode.bind(this)} .disabled=${t}>
|
|
${e.action}
|
|
</wui-link>
|
|
</wui-flex>
|
|
</wui-flex>
|
|
`}startOTPTimeout(){this.timeoutTimeLeft=g.getTimeToNextEmailLogin(),this.OTPTimeout=setInterval(()=>{this.timeoutTimeLeft>0?this.timeoutTimeLeft=g.getTimeToNextEmailLogin():clearInterval(this.OTPTimeout)},1e3)}async onOtpInputChange(t){var e;try{this.loading||(this.otp=t.detail,this.shouldSubmitOnOtpChange()&&(this.loading=!0,await((e=this.onOtpSubmit)==null?void 0:e.call(this,this.otp))))}catch(i){this.error=S.parseError(i),this.loading=!1}}async onResendCode(){try{if(this.onOtpResend){if(!this.loading&&!this.timeoutTimeLeft){if(this.error="",this.otp="",!T.getAuthConnector()||!this.email)throw new Error("w3m-email-otp-widget: Unable to resend email");this.loading=!0,await this.onOtpResend(this.email),this.startOTPTimeout(),O.showSuccess("Code email resent")}}else this.onStartOver&&this.onStartOver()}catch(t){O.showError(t)}finally{this.loading=!1}}getFooterLabels(t){return this.onStartOver?{title:"Something wrong?",action:`Try again ${t?`in ${this.timeoutTimeLeft}s`:""}`}:{title:"Didn't receive it?",action:`Resend ${t?`in ${this.timeoutTimeLeft}s`:"Code"}`}}shouldSubmitOnOtpChange(){return this.authConnector&&this.otp.length===w.OTP_LENGTH}};u.OTP_LENGTH=6;u.styles=k;f([d()],u.prototype,"loading",void 0);f([d()],u.prototype,"timeoutTimeLeft",void 0);f([d()],u.prototype,"error",void 0);u=w=f([x("w3m-email-otp-widget")],u);export{u as W};
|