@qrauth/web-components 0.1.0 → 0.3.0
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.
- package/CHANGELOG.md +32 -0
- package/README.md +105 -0
- package/dist/base.d.ts +21 -0
- package/dist/ephemeral.d.ts +25 -8
- package/dist/login.d.ts +41 -8
- package/dist/qrauth-components.esm.js +170 -43
- package/dist/qrauth-components.js +170 -43
- package/dist/twofa.d.ts +41 -6
- package/package.json +12 -4
- package/dist/base.js +0 -148
- package/dist/ephemeral.js +0 -727
- package/dist/index.js +0 -4
- package/dist/login.js +0 -769
- package/dist/qrauth-components.esm.js.map +0 -7
- package/dist/qrauth-components.js.map +0 -7
- package/dist/twofa.js +0 -625
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* @qrauth/web-components v0.
|
|
2
|
-
var w=Object.defineProperty;var
|
|
1
|
+
/* @qrauth/web-components v0.3.0 — https://qrauth.io */
|
|
2
|
+
var w=Object.defineProperty;var k=(h,d,t)=>d in h?w(h,d,{enumerable:!0,configurable:!0,writable:!0,value:t}):h[d]=t;var n=(h,d,t)=>k(h,typeof d!="symbol"?d+"":d,t);var p=class extends HTMLElement{constructor(){super();n(this,"shadow");n(this,"_sseConnection",null);n(this,"_pollInterval",null);this.shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["tenant","theme","base-url","force-mode","mobile-fallback-only"]}get tenant(){return this.getAttribute("tenant")||""}get theme(){return this.getAttribute("theme")||"light"}get baseUrl(){let t=this.getAttribute("base-url");return t!==null?t:"https://qrauth.io"}connectedCallback(){this.render()}disconnectedCallback(){this.cleanup()}attributeChangedCallback(t,e,i){e!==i&&this.render()}isMobileLike(){if(typeof window>"u")return!1;let t=this.getAttribute("force-mode");if(t==="mobile")return!0;if(t==="desktop"||this.hasAttribute("mobile-fallback-only"))return!1;if(typeof window.matchMedia=="function"){let e=window.matchMedia("(pointer: coarse)").matches,i=window.matchMedia("(hover: none)").matches;if(e&&i)return!0}return/Android|iPhone|iPad|iPod|Mobile|Tablet|BlackBerry|Opera Mini/i.test(navigator.userAgent)}connectSSE(t){this.disconnectSSE(),this._sseConnection=new EventSource(t),this._sseConnection.onerror=()=>{this.disconnectSSE()}}onSSEEvent(t,e){this._sseConnection&&this._sseConnection.addEventListener(t,i=>{let s=i;try{e(JSON.parse(s.data))}catch{}})}disconnectSSE(){this._sseConnection&&(this._sseConnection.close(),this._sseConnection=null)}startPolling(t,e,i,s){this.stopPolling();let r=async()=>{try{let a=await fetch(t,{headers:s});a.ok&&i(await a.json())}catch{}};r(),this._pollInterval=setInterval(r,e)}stopPolling(){this._pollInterval&&(clearInterval(this._pollInterval),this._pollInterval=null)}cleanup(){this.disconnectSSE(),this.stopPolling()}emit(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:e}))}async generateCodeVerifier(){let t=new Uint8Array(32);return crypto.getRandomValues(t),this._base64url(t)}async computeCodeChallenge(t){let i=new TextEncoder().encode(t),s=await crypto.subtle.digest("SHA-256",i);return this._base64url(new Uint8Array(s))}_base64url(t){let e=Array.from(t,i=>String.fromCodePoint(i)).join("");return btoa(e).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,"")}getBaseStyles(){return`
|
|
3
3
|
:host {
|
|
4
4
|
display: inline-block;
|
|
5
5
|
font-family: var(--qrauth-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
|
|
@@ -49,10 +49,10 @@ var w=Object.defineProperty;var E=(h,d,e)=>d in h?w(h,d,{enumerable:!0,configura
|
|
|
49
49
|
stroke-linecap="round" stroke-linejoin="round"/>
|
|
50
50
|
</svg>`,f=`<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
51
51
|
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/>
|
|
52
|
-
</svg>`,
|
|
52
|
+
</svg>`,E=`<svg class="spinner" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
53
53
|
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2.5"
|
|
54
54
|
stroke-dasharray="31.416" stroke-dashoffset="10" stroke-linecap="round"/>
|
|
55
|
-
</svg>`,g=class extends p{constructor(){super(...arguments);n(this,"_sessionId",null);n(this,"_codeVerifier",null);n(this,"_status","idle");n(this,"_expiresAt",null);n(this,"_timerInterval",null);n(this,"_pollTimeout",null)}static get observedAttributes(){return[...super.observedAttributes,"scopes","redirect-url","on-auth","display","animated"]}get scopes(){return this.getAttribute("scopes")||"identity"}get redirectUrl(){return this.getAttribute("redirect-url")}get onAuth(){return this.getAttribute("on-auth")}get display(){return this.getAttribute("display")||"button"}get animated(){return this.hasAttribute("animated")}disconnectedCallback(){super.disconnectedCallback(),this._clearTimers()}render(){this.display==="inline"?this._renderInline():this._renderButton()}_renderButton(){this.shadow.innerHTML=`
|
|
55
|
+
</svg>`,g=class extends p{constructor(){super(...arguments);n(this,"_sessionId",null);n(this,"_sessionToken",null);n(this,"_codeVerifier",null);n(this,"_status","idle");n(this,"_expiresAt",null);n(this,"_timerInterval",null);n(this,"_pollTimeout",null)}static get observedAttributes(){return[...super.observedAttributes,"scopes","redirect-url","on-auth","display","animated"]}get scopes(){return this.getAttribute("scopes")||"identity"}get redirectUrl(){return this.getAttribute("redirect-url")}get onAuth(){return this.getAttribute("on-auth")}get display(){return this.getAttribute("display")||"button"}get animated(){return this.hasAttribute("animated")}get forceMode(){let t=this.getAttribute("force-mode");return t==="mobile"||t==="desktop"?t:"auto"}get mobileFallbackOnly(){return this.hasAttribute("mobile-fallback-only")}disconnectedCallback(){super.disconnectedCallback(),this._clearTimers()}render(){this.display==="inline"?this._renderInline():this._renderButton()}_renderButton(){this.shadow.innerHTML=`
|
|
56
56
|
<style>
|
|
57
57
|
${this.getBaseStyles()}
|
|
58
58
|
:host { display: inline-block; }
|
|
@@ -185,7 +185,7 @@ var w=Object.defineProperty;var E=(h,d,e)=>d in h?w(h,d,{enumerable:!0,configura
|
|
|
185
185
|
<div id="modal-body">
|
|
186
186
|
${this._bodyForStatus("idle")}
|
|
187
187
|
</div>
|
|
188
|
-
`}_bodyForStatus(e
|
|
188
|
+
`}_bodyForStatus(t,e){switch(t){case"idle":return`
|
|
189
189
|
<div class="state-header">
|
|
190
190
|
<div class="brand-icon">${u}</div>
|
|
191
191
|
<h3>Sign in with QRAuth</h3>
|
|
@@ -193,21 +193,17 @@ var w=Object.defineProperty;var E=(h,d,e)=>d in h?w(h,d,{enumerable:!0,configura
|
|
|
193
193
|
</div>
|
|
194
194
|
`;case"loading":return`
|
|
195
195
|
<div class="state-loading">
|
|
196
|
-
<div class="spinner-wrap">${
|
|
196
|
+
<div class="spinner-wrap">${E}</div>
|
|
197
197
|
<p class="status-text">Generating QR code...</p>
|
|
198
198
|
</div>
|
|
199
|
-
`;case"pending":case"SCANNED":{
|
|
199
|
+
`;case"pending":case"SCANNED":{if(this.isMobileLike())return this._mobilePendingBody(t,e);let i=t==="SCANNED";return`
|
|
200
200
|
<h3>Sign in with QRAuth</h3>
|
|
201
201
|
<p class="subtitle">Scan this QR code with your phone camera</p>
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
${s?'<div class="scanned-overlay"><span class="scanned-check">'+f+"</span></div>":""}
|
|
202
|
+
${this._qrFrameHtml(e?.qrUrl??"",i)}
|
|
203
|
+
<div class="status-text ${i?"status-scanned":""}">
|
|
204
|
+
${i?"✓ QR code scanned — waiting for approval...":"Waiting for scan..."}
|
|
206
205
|
</div>
|
|
207
|
-
<div class="
|
|
208
|
-
${s?"✓ QR code scanned — waiting for approval...":"Waiting for scan..."}
|
|
209
|
-
</div>
|
|
210
|
-
<div class="timer" id="timer">${t?.timerHtml??""}</div>
|
|
206
|
+
<div class="timer" id="timer">${e?.timerHtml??""}</div>
|
|
211
207
|
<div class="footer">Secured by <a href="https://qrauth.io" target="_blank" rel="noopener">QRAuth</a></div>
|
|
212
208
|
`}case"APPROVED":return`
|
|
213
209
|
<div class="state-approved">
|
|
@@ -233,10 +229,32 @@ var w=Object.defineProperty;var E=(h,d,e)=>d in h?w(h,d,{enumerable:!0,configura
|
|
|
233
229
|
<div class="state-error">
|
|
234
230
|
<div class="error-icon">⚠</div>
|
|
235
231
|
<h3>Something went wrong</h3>
|
|
236
|
-
<p class="subtitle">${
|
|
232
|
+
<p class="subtitle">${e?.errorMessage??"Failed to start authentication."}</p>
|
|
237
233
|
<button class="retry-btn" id="retry-btn">Try again</button>
|
|
238
234
|
</div>
|
|
239
|
-
`;default:return""}}
|
|
235
|
+
`;default:return""}}_qrFrameHtml(t,e){let i=t?`https://api.qrserver.com/v1/create-qr-code/?size=440x440&data=${encodeURIComponent(t)}`:"";return`
|
|
236
|
+
<div class="qr-frame ${e?"scanned":""}${this.animated?" animated":""}">
|
|
237
|
+
<img src="${i}" alt="QR Code for authentication" width="220" height="220" loading="lazy"/>
|
|
238
|
+
<div class="qr-badge">${u}</div>
|
|
239
|
+
${e?'<div class="scanned-overlay"><span class="scanned-check">'+f+"</span></div>":""}
|
|
240
|
+
</div>
|
|
241
|
+
`}_mobilePendingBody(t,e){let i=t==="SCANNED";return`
|
|
242
|
+
<h3>Sign in with QRAuth</h3>
|
|
243
|
+
<p class="subtitle">Tap continue to verify on this device.</p>
|
|
244
|
+
<button class="mobile-cta" id="mobile-cta" type="button">
|
|
245
|
+
<span class="btn-icon">${u}</span>
|
|
246
|
+
Continue with QRAuth
|
|
247
|
+
</button>
|
|
248
|
+
<div class="status-text ${i?"status-scanned":""}">
|
|
249
|
+
${i?"✓ Scanned — waiting for approval...":"Waiting for approval..."}
|
|
250
|
+
</div>
|
|
251
|
+
<div class="timer" id="timer">${e?.timerHtml??""}</div>
|
|
252
|
+
<details class="alt-device">
|
|
253
|
+
<summary>Use another device</summary>
|
|
254
|
+
${this._qrFrameHtml(e?.qrUrl??"",i)}
|
|
255
|
+
</details>
|
|
256
|
+
<div class="footer">Secured by <a href="https://qrauth.io" target="_blank" rel="noopener">QRAuth</a></div>
|
|
257
|
+
`}_sharedModalStyles(){return`
|
|
240
258
|
/* Typography */
|
|
241
259
|
h3 {
|
|
242
260
|
font-size: 18px;
|
|
@@ -435,6 +453,51 @@ var w=Object.defineProperty;var E=(h,d,e)=>d in h?w(h,d,{enumerable:!0,configura
|
|
|
435
453
|
}
|
|
436
454
|
.retry-btn:hover { background: var(--_border); color: var(--_text); }
|
|
437
455
|
|
|
456
|
+
/* Mobile-aware pending state: primary CTA + QR expander */
|
|
457
|
+
.mobile-cta {
|
|
458
|
+
display: flex;
|
|
459
|
+
align-items: center;
|
|
460
|
+
justify-content: center;
|
|
461
|
+
gap: 10px;
|
|
462
|
+
width: 100%;
|
|
463
|
+
padding: 14px 20px;
|
|
464
|
+
background: var(--_btn-bg);
|
|
465
|
+
color: #fff;
|
|
466
|
+
border: none;
|
|
467
|
+
border-radius: var(--_radius);
|
|
468
|
+
font-size: 15px;
|
|
469
|
+
font-weight: 600;
|
|
470
|
+
cursor: pointer;
|
|
471
|
+
font-family: inherit;
|
|
472
|
+
margin-bottom: 16px;
|
|
473
|
+
}
|
|
474
|
+
.mobile-cta:hover { background: var(--_btn-hover); }
|
|
475
|
+
.mobile-cta .btn-icon { width: 20px; height: 20px; }
|
|
476
|
+
|
|
477
|
+
details.alt-device {
|
|
478
|
+
margin-top: 14px;
|
|
479
|
+
text-align: left;
|
|
480
|
+
border-top: 1px solid var(--_border);
|
|
481
|
+
padding-top: 12px;
|
|
482
|
+
}
|
|
483
|
+
details.alt-device summary {
|
|
484
|
+
cursor: pointer;
|
|
485
|
+
font-size: 13px;
|
|
486
|
+
color: var(--_text-muted);
|
|
487
|
+
user-select: none;
|
|
488
|
+
padding: 6px 0;
|
|
489
|
+
text-align: center;
|
|
490
|
+
list-style: none;
|
|
491
|
+
}
|
|
492
|
+
details.alt-device summary::-webkit-details-marker { display: none; }
|
|
493
|
+
details.alt-device summary::before {
|
|
494
|
+
content: '\u25B8 ';
|
|
495
|
+
display: inline-block;
|
|
496
|
+
transition: transform 0.2s;
|
|
497
|
+
}
|
|
498
|
+
details.alt-device[open] summary::before { transform: rotate(90deg); }
|
|
499
|
+
details.alt-device > .qr-frame { margin-top: 10px; }
|
|
500
|
+
|
|
438
501
|
/* Footer */
|
|
439
502
|
.footer {
|
|
440
503
|
margin-top: 18px;
|
|
@@ -443,7 +506,7 @@ var w=Object.defineProperty;var E=(h,d,e)=>d in h?w(h,d,{enumerable:!0,configura
|
|
|
443
506
|
}
|
|
444
507
|
.footer a { color: var(--_disabled); text-decoration: none; }
|
|
445
508
|
.footer a:hover { text-decoration: underline; }
|
|
446
|
-
`}_bindButtonEvents(){this.shadow.getElementById("open-btn")?.addEventListener("click",()=>{this._openModal(),this._startAuth()});let
|
|
509
|
+
`}_bindButtonEvents(){this.shadow.getElementById("open-btn")?.addEventListener("click",()=>{this._openModal(),this._startAuth()});let e=this.shadow.getElementById("overlay");e?.addEventListener("click",i=>{i.target===e&&this._closeModal()}),this._bindModalButtons()}_bindInlineEvents(){this.shadow.getElementById("start-btn")?.addEventListener("click",()=>{this._startAuth()})}_bindModalButtons(){this.shadow.getElementById("close-btn")?.addEventListener("click",()=>this._closeModal()),this.shadow.getElementById("retry-btn")?.addEventListener("click",()=>this._retry()),this.shadow.getElementById("mobile-cta")?.addEventListener("click",()=>this._openApprovalPage())}_openApprovalPage(){if(!this._sessionToken)return;let t=`${this.baseUrl}/a/${this._sessionToken}`;window.open(t,"_blank","noopener")||(window.location.href=t)}_openModal(){this.shadow.getElementById("overlay")?.classList.remove("hidden"),this._updateBody(this._bodyForStatus("idle"))}_closeModal(){this.shadow.getElementById("overlay")?.classList.add("hidden"),this._clearTimers(),this._sessionId=null,this._sessionToken=null,this._codeVerifier=null,this._status="idle",this._expiresAt=null}async _startAuth(){this._status="loading",this._updateBody(this._bodyForStatus("loading"));try{this._codeVerifier=await this.generateCodeVerifier();let t=await this.computeCodeChallenge(this._codeVerifier),e={"Content-Type":"application/json","X-Client-Id":this.tenant},i={scopes:this.scopes.split(/\s+/).filter(Boolean),codeChallenge:t,codeChallengeMethod:"S256"},s=await fetch(`${this.baseUrl}/api/v1/auth-sessions`,{method:"POST",headers:e,body:JSON.stringify(i)});if(!s.ok){let a=await s.json().catch(()=>({message:"Failed to create session"}));throw new Error(a.message??"Failed to create session")}let r=await s.json();this._sessionId=r.sessionId,this._sessionToken=r.token||(r.qrUrl?r.qrUrl.split("/").pop()??null:null),this._expiresAt=new Date(r.expiresAt).getTime(),this._status="pending",this._updateBody(this._bodyForStatus("pending",{qrUrl:r.qrUrl})),this._bindModalButtons(),this._startCountdown(),this._beginPolling(r.sessionId)}catch(t){let e=t instanceof Error?t.message:"Unexpected error";this._status="error",this._updateBody(this._bodyForStatus("error",{errorMessage:e})),this._bindModalButtons(),this.emit("qrauth:error",{message:e})}}_retry(){if(this._clearTimers(),this._sessionId=null,this._sessionToken=null,this._codeVerifier=null,this._status="idle",this._expiresAt=null,this.display==="inline"){let t=this.shadow.getElementById("inline-body");t&&(t.innerHTML=this._inlineIdleContent(),this._bindInlineEvents())}else this._startAuth()}_beginPolling(t){let e="PENDING",i=2e3,s=5e3,r=0,a=20,c=async()=>{if(!this._sessionId)return;let o=`${this.baseUrl}/api/v1/auth-sessions/${t}`;this._codeVerifier&&(o+=`?code_verifier=${encodeURIComponent(this._codeVerifier)}`);try{let l=await(await fetch(o,{headers:{"X-Client-Id":this.tenant}})).json();if(r=0,i=2e3,l.status!==e&&(e=l.status,this._handleStatusChange(l.status,l),["APPROVED","DENIED","EXPIRED"].includes(l.status)))return;this._pollTimeout=setTimeout(c,i)}catch{if(r++,r>=a){this._handleStatusChange("EXPIRED",void 0);return}i=Math.min(i*1.5,s),this._pollTimeout=setTimeout(c,i)}};this._pollTimeout=setTimeout(c,i)}_handleStatusChange(t,e){switch(this._status=t,t){case"SCANNED":{let i=this.shadow.querySelector(".qr-frame img")?.src,s=i?decodeURIComponent(i.replace(/.*[?&]data=/,"").split("&")[0]):"";this._updateBody(this._bodyForStatus("SCANNED",{qrUrl:s,timerHtml:this._formatTimer()})),this._bindModalButtons(),this.emit("qrauth:scanned",e);break}case"APPROVED":{this._clearTimers(),this._updateBody(this._bodyForStatus("APPROVED")),this._bindModalButtons(),this.emit("qrauth:authenticated",{sessionId:e?.sessionId,user:e?.user,signature:e?.signature});let i=this.onAuth;if(i){let s=window[i];typeof s=="function"&&s(e)}this.redirectUrl?setTimeout(()=>{window.location.href=this.redirectUrl},1500):this.display==="button"&&setTimeout(()=>this._closeModal(),2200);break}case"DENIED":this._clearTimers(),this._updateBody(this._bodyForStatus("DENIED")),this._bindModalButtons(),this.emit("qrauth:denied");break;case"EXPIRED":this._clearTimers(),this._status="EXPIRED",this._updateBody(this._bodyForStatus("EXPIRED")),this._bindModalButtons(),this.emit("qrauth:expired");break}}_startCountdown(){this._timerInterval=setInterval(()=>{let t=this.shadow.getElementById("timer");if(!t||!this._expiresAt)return;let e=Math.max(0,Math.floor((this._expiresAt-Date.now())/1e3));t.textContent=e>0?this._formatTimer(e):"",e<=0&&(clearInterval(this._timerInterval),this._timerInterval=null,(this._status==="pending"||this._status==="SCANNED")&&this._handleStatusChange("EXPIRED",void 0))},1e3)}_formatTimer(t){let e=t??(this._expiresAt?Math.max(0,Math.floor((this._expiresAt-Date.now())/1e3)):0),i=Math.floor(e/60),s=e%60;return`Expires in ${i}:${s<10?"0":""}${s}`}_updateBody(t){let e=this.display==="inline"?this.shadow.getElementById("inline-body"):this.shadow.getElementById("modal-body");e&&(e.innerHTML=t)}_clearTimers(){this._timerInterval&&(clearInterval(this._timerInterval),this._timerInterval=null),this._pollTimeout&&(clearTimeout(this._pollTimeout),this._pollTimeout=null)}};customElements.define("qrauth-login",g);var b=`<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
447
510
|
<path d="M48 24 H152 Q166 24 166 38 V108 Q166 156 100 182 Q34 156 34 108 V38 Q34 24 48 24 Z"
|
|
448
511
|
fill="none" stroke="#fff" stroke-width="5"/>
|
|
449
512
|
<g fill="#fff" opacity="0.2">
|
|
@@ -465,7 +528,7 @@ var w=Object.defineProperty;var E=(h,d,e)=>d in h?w(h,d,{enumerable:!0,configura
|
|
|
465
528
|
</svg>`,S=`<svg class="spinner" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
466
529
|
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2.5"
|
|
467
530
|
stroke-dasharray="31.416" stroke-dashoffset="10" stroke-linecap="round"/>
|
|
468
|
-
</svg>`,
|
|
531
|
+
</svg>`,m=class extends p{constructor(){super(...arguments);n(this,"_sessionId",null);n(this,"_claimUrl",null);n(this,"_status","idle");n(this,"_expiresAt",null);n(this,"_timerInterval",null);n(this,"_pollTimeout",null)}static get observedAttributes(){return[...super.observedAttributes,"scopes","ttl","max-uses","device-binding","display"]}get scopes(){return this.getAttribute("scopes")||"access"}get ttl(){return this.getAttribute("ttl")||"30m"}get maxUses(){return parseInt(this.getAttribute("max-uses")||"1",10)}get deviceBinding(){return this.hasAttribute("device-binding")}get display(){return this.getAttribute("display")||"inline"}get forceMode(){let t=this.getAttribute("force-mode");return t==="mobile"||t==="desktop"?t:"auto"}get mobileFallbackOnly(){return this.hasAttribute("mobile-fallback-only")}disconnectedCallback(){super.disconnectedCallback(),this._clearTimers()}render(){this.display==="button"?this._renderButton():this._renderInline()}_renderButton(){this.shadow.innerHTML=`
|
|
469
532
|
<style>
|
|
470
533
|
${this.getBaseStyles()}
|
|
471
534
|
:host { display: inline-block; }
|
|
@@ -598,7 +661,7 @@ var w=Object.defineProperty;var E=(h,d,e)=>d in h?w(h,d,{enumerable:!0,configura
|
|
|
598
661
|
<div id="modal-body">
|
|
599
662
|
${this._bodyForStatus("idle")}
|
|
600
663
|
</div>
|
|
601
|
-
`}_bodyForStatus(e
|
|
664
|
+
`}_bodyForStatus(t,e){switch(t){case"idle":return`
|
|
602
665
|
<div class="state-header">
|
|
603
666
|
<div class="brand-icon">${b}</div>
|
|
604
667
|
<h3>Ephemeral Access</h3>
|
|
@@ -609,7 +672,7 @@ var w=Object.defineProperty;var E=(h,d,e)=>d in h?w(h,d,{enumerable:!0,configura
|
|
|
609
672
|
<div class="spinner-wrap">${S}</div>
|
|
610
673
|
<p class="status-text">Generating access QR...</p>
|
|
611
674
|
</div>
|
|
612
|
-
`;case"active":{let i=
|
|
675
|
+
`;case"active":{let i=e?.claimUrl?`https://api.qrserver.com/v1/create-qr-code/?size=440x440&data=${encodeURIComponent(e.claimUrl)}`:"",s=e?.useCount??0,r=e?.maxUses??1,c=r>1?`<div class="use-badge">${s}/${r} claimed</div>`:"";return`
|
|
613
676
|
<h3>Scan to Access</h3>
|
|
614
677
|
<p class="subtitle">Present this QR code to gain entry</p>
|
|
615
678
|
<div class="qr-frame">
|
|
@@ -617,7 +680,7 @@ var w=Object.defineProperty;var E=(h,d,e)=>d in h?w(h,d,{enumerable:!0,configura
|
|
|
617
680
|
<div class="qr-badge">${b}</div>
|
|
618
681
|
</div>
|
|
619
682
|
${c}
|
|
620
|
-
<div class="timer" id="timer">${
|
|
683
|
+
<div class="timer" id="timer">${e?.timerHtml??""}</div>
|
|
621
684
|
<div class="footer">Secured by <a href="https://qrauth.io" target="_blank" rel="noopener">QRAuth</a></div>
|
|
622
685
|
`}case"CLAIMED":return`
|
|
623
686
|
<div class="state-claimed">
|
|
@@ -642,7 +705,7 @@ var w=Object.defineProperty;var E=(h,d,e)=>d in h?w(h,d,{enumerable:!0,configura
|
|
|
642
705
|
<div class="state-error">
|
|
643
706
|
<div class="error-icon">⚠</div>
|
|
644
707
|
<h3>Something went wrong</h3>
|
|
645
|
-
<p class="subtitle">${
|
|
708
|
+
<p class="subtitle">${e?.errorMessage??"Failed to create ephemeral session."}</p>
|
|
646
709
|
<button class="retry-btn" id="retry-btn">Try again</button>
|
|
647
710
|
</div>
|
|
648
711
|
`;default:return""}}_sharedModalStyles(){return`
|
|
@@ -827,7 +890,7 @@ var w=Object.defineProperty;var E=(h,d,e)=>d in h?w(h,d,{enumerable:!0,configura
|
|
|
827
890
|
}
|
|
828
891
|
.footer a { color: var(--_disabled); text-decoration: none; }
|
|
829
892
|
.footer a:hover { text-decoration: underline; }
|
|
830
|
-
`}_bindButtonEvents(){this.shadow.getElementById("open-btn")?.addEventListener("click",()=>{this._openModal(),this._startSession()});let
|
|
893
|
+
`}_bindButtonEvents(){this.shadow.getElementById("open-btn")?.addEventListener("click",()=>{this._openModal(),this._startSession()});let e=this.shadow.getElementById("overlay");e?.addEventListener("click",i=>{i.target===e&&this._closeModal()}),this._bindModalButtons()}_bindInlineEvents(){this.shadow.getElementById("start-btn")?.addEventListener("click",()=>{this._startSession()})}_bindModalButtons(){this.shadow.getElementById("close-btn")?.addEventListener("click",()=>this._closeModal()),this.shadow.getElementById("retry-btn")?.addEventListener("click",()=>this._retry())}_openModal(){this.shadow.getElementById("overlay")?.classList.remove("hidden"),this._updateBody(this._bodyForStatus("idle"))}_closeModal(){this.shadow.getElementById("overlay")?.classList.add("hidden"),this._clearTimers(),this._sessionId=null,this._claimUrl=null,this._status="idle",this._expiresAt=null}async _startSession(){this._status="loading",this._updateBody(this._bodyForStatus("loading"));try{let t=await fetch(`${this.baseUrl}/api/v1/ephemeral`,{method:"POST",headers:{"Content-Type":"application/json","X-Client-Id":this.tenant},body:JSON.stringify({scopes:this.scopes.split(/\s+/).filter(Boolean),ttl:this.ttl,maxUses:this.maxUses,deviceBinding:this.deviceBinding})});if(!t.ok){let i=await t.json().catch(()=>({message:"Failed to create session"}));throw new Error(i.message??"Failed to create session")}let e=await t.json();this._sessionId=e.sessionId,this._claimUrl=e.claimUrl,this._expiresAt=new Date(e.expiresAt).getTime(),this._status="active",this._updateBody(this._bodyForStatus("active",{claimUrl:e.claimUrl,timerHtml:this._formatTimer(),useCount:0,maxUses:e.maxUses})),this._bindModalButtons(),this._startCountdown(),this._beginPolling(e.sessionId)}catch(t){let e=t instanceof Error?t.message:"Unexpected error";this._status="error",this._updateBody(this._bodyForStatus("error",{errorMessage:e})),this._bindModalButtons(),this.emit("qrauth:error",{message:e})}}_retry(){if(this._clearTimers(),this._sessionId=null,this._claimUrl=null,this._status="idle",this._expiresAt=null,this.display==="inline"){let t=this.shadow.getElementById("inline-body");t&&(t.innerHTML=this._inlineIdleContent(),this._bindInlineEvents())}else this._startSession()}_beginPolling(t){let e=2e3,i=5e3,s=0,r=20,a=async()=>{if(this._sessionId)try{let o=await(await fetch(`${this.baseUrl}/api/v1/ephemeral/${t}`,{headers:{"X-Client-Id":this.tenant}})).json();if(s=0,e=2e3,this._handleStatusChange(o.status,o),["CLAIMED","EXPIRED","REVOKED"].includes(o.status)){if(o.status==="CLAIMED"&&o.useCount<o.maxUses){this._updateBody(this._bodyForStatus("active",{claimUrl:this._claimUrl??void 0,timerHtml:this._formatTimer(),useCount:o.useCount,maxUses:o.maxUses})),this._bindModalButtons(),this._pollTimeout=setTimeout(a,e);return}return}this._pollTimeout=setTimeout(a,e)}catch{if(s++,s>=r){this._handleStatusChange("EXPIRED",void 0);return}e=Math.min(e*1.5,i),this._pollTimeout=setTimeout(a,e)}};this._pollTimeout=setTimeout(a,e)}_handleStatusChange(t,e){switch(t){case"CLAIMED":{this._clearTimers(),this._status="CLAIMED",this._updateBody(this._bodyForStatus("CLAIMED")),this._bindModalButtons(),this.emit("qrauth:claimed",{sessionId:e?.sessionId,status:e?.status,scopes:e?.scopes,metadata:e?.metadata,useCount:e?.useCount,maxUses:e?.maxUses}),this.display==="button"&&setTimeout(()=>this._closeModal(),2200);break}case"EXPIRED":this._clearTimers(),this._status="EXPIRED",this._updateBody(this._bodyForStatus("EXPIRED")),this._bindModalButtons(),this.emit("qrauth:expired");break;case"REVOKED":this._clearTimers(),this._status="REVOKED",this._updateBody(this._bodyForStatus("REVOKED")),this._bindModalButtons(),this.emit("qrauth:revoked");break}}_startCountdown(){this._timerInterval=setInterval(()=>{let t=this.shadow.getElementById("timer");if(!t||!this._expiresAt)return;let e=Math.max(0,Math.floor((this._expiresAt-Date.now())/1e3));t.textContent=e>0?this._formatTimer(e):"",e<=0&&(clearInterval(this._timerInterval),this._timerInterval=null,this._status==="active"&&this._handleStatusChange("EXPIRED",void 0))},1e3)}_formatTimer(t){let e=t??(this._expiresAt?Math.max(0,Math.floor((this._expiresAt-Date.now())/1e3)):0),i=Math.floor(e/60),s=e%60;return`Expires in ${i}:${s<10?"0":""}${s}`}_updateBody(t){let e=this.display==="inline"?this.shadow.getElementById("inline-body"):this.shadow.getElementById("modal-body");e&&(e.innerHTML=t)}_clearTimers(){this._timerInterval&&(clearInterval(this._timerInterval),this._timerInterval=null),this._pollTimeout&&(clearTimeout(this._pollTimeout),this._pollTimeout=null)}};customElements.define("qrauth-ephemeral",m);var v=`<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
831
894
|
<path d="M48 24 H152 Q166 24 166 38 V108 Q166 156 100 182 Q34 156 34 108 V38 Q34 24 48 24 Z"
|
|
832
895
|
fill="none" stroke="#fff" stroke-width="5"/>
|
|
833
896
|
<g fill="#fff" opacity="0.2">
|
|
@@ -846,10 +909,10 @@ var w=Object.defineProperty;var E=(h,d,e)=>d in h?w(h,d,{enumerable:!0,configura
|
|
|
846
909
|
stroke-linecap="round" stroke-linejoin="round"/>
|
|
847
910
|
</svg>`,_=`<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
848
911
|
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/>
|
|
849
|
-
</svg>`,
|
|
912
|
+
</svg>`,A=`<svg class="spinner" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
850
913
|
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2.5"
|
|
851
914
|
stroke-dasharray="31.416" stroke-dashoffset="10" stroke-linecap="round"/>
|
|
852
|
-
</svg>`,
|
|
915
|
+
</svg>`,x=class extends p{constructor(){super(...arguments);n(this,"_sessionId",null);n(this,"_sessionToken",null);n(this,"_codeVerifier",null);n(this,"_status","idle");n(this,"_expiresAt",null);n(this,"_timerInterval",null);n(this,"_pollTimeout",null)}static get observedAttributes(){return[...super.observedAttributes,"session-token","scopes","auto-start"]}get sessionToken(){return this.getAttribute("session-token")}get scopes(){return this.getAttribute("scopes")||"identity"}get autoStart(){return this.hasAttribute("auto-start")}get forceMode(){let t=this.getAttribute("force-mode");return t==="mobile"||t==="desktop"?t:"auto"}get mobileFallbackOnly(){return this.hasAttribute("mobile-fallback-only")}connectedCallback(){super.connectedCallback(),this.autoStart&&this._startAuth()}disconnectedCallback(){super.disconnectedCallback(),this._clearTimers()}render(){this.shadow.innerHTML=`
|
|
853
916
|
<style>
|
|
854
917
|
${this.getBaseStyles()}
|
|
855
918
|
:host { display: block; }
|
|
@@ -924,41 +987,37 @@ var w=Object.defineProperty;var E=(h,d,e)=>d in h?w(h,d,{enumerable:!0,configura
|
|
|
924
987
|
${this._bodyForStatus("idle")}
|
|
925
988
|
</div>
|
|
926
989
|
</div>
|
|
927
|
-
`,this._bindBodyEvents()}_bodyForStatus(e
|
|
990
|
+
`,this._bindBodyEvents()}_bodyForStatus(t,e){let i=`
|
|
928
991
|
<div class="step-label">
|
|
929
992
|
<span class="step-dot"></span>
|
|
930
993
|
Step 2 of 2 — Verify identity
|
|
931
994
|
</div>
|
|
932
|
-
`;switch(
|
|
995
|
+
`;switch(t){case"idle":return`
|
|
933
996
|
${i}
|
|
934
997
|
<div class="state-header">
|
|
935
|
-
<div class="brand-icon">${
|
|
998
|
+
<div class="brand-icon">${v}</div>
|
|
936
999
|
<h3>Verify your identity</h3>
|
|
937
1000
|
<p class="subtitle">Scan the QR code with your phone to confirm it's you</p>
|
|
938
1001
|
</div>
|
|
939
1002
|
<button class="start-btn" id="start-btn" aria-label="Start 2FA verification">
|
|
940
|
-
<span class="btn-icon">${
|
|
1003
|
+
<span class="btn-icon">${v}</span>
|
|
941
1004
|
Verify your identity
|
|
942
1005
|
</button>
|
|
943
1006
|
`;case"loading":return`
|
|
944
1007
|
${i}
|
|
945
1008
|
<div class="state-loading">
|
|
946
|
-
<div class="spinner-wrap">${
|
|
1009
|
+
<div class="spinner-wrap">${A}</div>
|
|
947
1010
|
<p class="status-text">Generating QR code...</p>
|
|
948
1011
|
</div>
|
|
949
|
-
`;case"pending":case"SCANNED":{
|
|
1012
|
+
`;case"pending":case"SCANNED":{if(this.isMobileLike())return this._mobilePendingBody(t,e,i);let s=t==="SCANNED";return`
|
|
950
1013
|
${i}
|
|
951
1014
|
<h3>Scan to verify</h3>
|
|
952
1015
|
<p class="subtitle">Use your phone camera to complete verification</p>
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
${r?'<div class="scanned-overlay"><span class="scanned-check">'+_+"</span></div>":""}
|
|
957
|
-
</div>
|
|
958
|
-
<div class="status-text ${r?"status-scanned":""}">
|
|
959
|
-
${r?"✓ Scanned — waiting for approval...":"Waiting for scan..."}
|
|
1016
|
+
${this._qrFrameHtml(e?.qrUrl??"",s)}
|
|
1017
|
+
<div class="status-text ${s?"status-scanned":""}">
|
|
1018
|
+
${s?"✓ Scanned — waiting for approval...":"Waiting for scan..."}
|
|
960
1019
|
</div>
|
|
961
|
-
<div class="timer" id="timer">${
|
|
1020
|
+
<div class="timer" id="timer">${e?.timerHtml??""}</div>
|
|
962
1021
|
<div class="footer">Secured by <a href="https://qrauth.io" target="_blank" rel="noopener">QRAuth</a></div>
|
|
963
1022
|
`}case"APPROVED":return`
|
|
964
1023
|
<div class="state-approved">
|
|
@@ -984,10 +1043,33 @@ var w=Object.defineProperty;var E=(h,d,e)=>d in h?w(h,d,{enumerable:!0,configura
|
|
|
984
1043
|
<div class="state-error">
|
|
985
1044
|
<div class="error-icon">⚠</div>
|
|
986
1045
|
<h3>Something went wrong</h3>
|
|
987
|
-
<p class="subtitle">${
|
|
1046
|
+
<p class="subtitle">${e?.errorMessage??"Failed to start verification."}</p>
|
|
988
1047
|
<button class="retry-btn" id="retry-btn">Try again</button>
|
|
989
1048
|
</div>
|
|
990
|
-
`;default:return""}}
|
|
1049
|
+
`;default:return""}}_qrFrameHtml(t,e){let i=t?`https://api.qrserver.com/v1/create-qr-code/?size=320x320&data=${encodeURIComponent(t)}`:"";return`
|
|
1050
|
+
<div class="qr-frame ${e?"scanned":""}">
|
|
1051
|
+
<img src="${i}" alt="QR Code for 2FA verification" width="160" height="160" loading="lazy"/>
|
|
1052
|
+
<div class="qr-badge">${v}</div>
|
|
1053
|
+
${e?'<div class="scanned-overlay"><span class="scanned-check">'+_+"</span></div>":""}
|
|
1054
|
+
</div>
|
|
1055
|
+
`}_mobilePendingBody(t,e,i=""){let s=t==="SCANNED";return`
|
|
1056
|
+
${i}
|
|
1057
|
+
<h3>Verify your identity</h3>
|
|
1058
|
+
<p class="subtitle">Tap continue to verify on this device.</p>
|
|
1059
|
+
<button class="mobile-cta" id="mobile-cta" type="button">
|
|
1060
|
+
<span class="btn-icon">${v}</span>
|
|
1061
|
+
Continue with QRAuth
|
|
1062
|
+
</button>
|
|
1063
|
+
<div class="status-text ${s?"status-scanned":""}">
|
|
1064
|
+
${s?"✓ Scanned — waiting for approval...":"Waiting for approval..."}
|
|
1065
|
+
</div>
|
|
1066
|
+
<div class="timer" id="timer">${e?.timerHtml??""}</div>
|
|
1067
|
+
<details class="alt-device">
|
|
1068
|
+
<summary>Use another device</summary>
|
|
1069
|
+
${this._qrFrameHtml(e?.qrUrl??"",s)}
|
|
1070
|
+
</details>
|
|
1071
|
+
<div class="footer">Secured by <a href="https://qrauth.io" target="_blank" rel="noopener">QRAuth</a></div>
|
|
1072
|
+
`}_sharedStyles(){return`
|
|
991
1073
|
/* Typography */
|
|
992
1074
|
h3 {
|
|
993
1075
|
font-size: 16px;
|
|
@@ -1165,6 +1247,51 @@ var w=Object.defineProperty;var E=(h,d,e)=>d in h?w(h,d,{enumerable:!0,configura
|
|
|
1165
1247
|
}
|
|
1166
1248
|
.retry-btn:hover { background: var(--_border); color: var(--_text); }
|
|
1167
1249
|
|
|
1250
|
+
/* Mobile-aware pending state: primary CTA + QR expander */
|
|
1251
|
+
.mobile-cta {
|
|
1252
|
+
display: flex;
|
|
1253
|
+
align-items: center;
|
|
1254
|
+
justify-content: center;
|
|
1255
|
+
gap: 10px;
|
|
1256
|
+
width: 100%;
|
|
1257
|
+
padding: 12px 18px;
|
|
1258
|
+
background: var(--_btn-bg);
|
|
1259
|
+
color: #fff;
|
|
1260
|
+
border: none;
|
|
1261
|
+
border-radius: var(--_radius);
|
|
1262
|
+
font-size: 14px;
|
|
1263
|
+
font-weight: 600;
|
|
1264
|
+
cursor: pointer;
|
|
1265
|
+
font-family: inherit;
|
|
1266
|
+
margin-bottom: 12px;
|
|
1267
|
+
}
|
|
1268
|
+
.mobile-cta:hover { background: var(--_btn-hover); }
|
|
1269
|
+
.mobile-cta .btn-icon { width: 18px; height: 18px; }
|
|
1270
|
+
|
|
1271
|
+
details.alt-device {
|
|
1272
|
+
margin-top: 12px;
|
|
1273
|
+
text-align: left;
|
|
1274
|
+
border-top: 1px solid var(--_border);
|
|
1275
|
+
padding-top: 10px;
|
|
1276
|
+
}
|
|
1277
|
+
details.alt-device summary {
|
|
1278
|
+
cursor: pointer;
|
|
1279
|
+
font-size: 12px;
|
|
1280
|
+
color: var(--_text-muted);
|
|
1281
|
+
user-select: none;
|
|
1282
|
+
padding: 4px 0;
|
|
1283
|
+
text-align: center;
|
|
1284
|
+
list-style: none;
|
|
1285
|
+
}
|
|
1286
|
+
details.alt-device summary::-webkit-details-marker { display: none; }
|
|
1287
|
+
details.alt-device summary::before {
|
|
1288
|
+
content: '\u25B8 ';
|
|
1289
|
+
display: inline-block;
|
|
1290
|
+
transition: transform 0.2s;
|
|
1291
|
+
}
|
|
1292
|
+
details.alt-device[open] summary::before { transform: rotate(90deg); }
|
|
1293
|
+
details.alt-device > .qr-frame { margin-top: 8px; }
|
|
1294
|
+
|
|
1168
1295
|
/* Footer */
|
|
1169
1296
|
.footer {
|
|
1170
1297
|
margin-top: 14px;
|
|
@@ -1173,5 +1300,5 @@ var w=Object.defineProperty;var E=(h,d,e)=>d in h?w(h,d,{enumerable:!0,configura
|
|
|
1173
1300
|
}
|
|
1174
1301
|
.footer a { color: var(--_disabled); text-decoration: none; }
|
|
1175
1302
|
.footer a:hover { text-decoration: underline; }
|
|
1176
|
-
`}_bindBodyEvents(){this.shadow.getElementById("start-btn")?.addEventListener("click",()=>this._startAuth()),this.shadow.getElementById("retry-btn")?.addEventListener("click",()=>this._retry())}async _startAuth(){this._status="loading",this._updateBody(this._bodyForStatus("loading"));try{this._codeVerifier=await this.generateCodeVerifier();let
|
|
1303
|
+
`}_bindBodyEvents(){this.shadow.getElementById("start-btn")?.addEventListener("click",()=>this._startAuth()),this.shadow.getElementById("retry-btn")?.addEventListener("click",()=>this._retry()),this.shadow.getElementById("mobile-cta")?.addEventListener("click",()=>this._openApprovalPage())}_openApprovalPage(){if(!this._sessionToken)return;let t=`${this.baseUrl}/a/${this._sessionToken}`;window.open(t,"_blank","noopener")||(window.location.href=t)}async _startAuth(){this._status="loading",this._updateBody(this._bodyForStatus("loading"));try{this._codeVerifier=await this.generateCodeVerifier();let t=await this.computeCodeChallenge(this._codeVerifier),e={"Content-Type":"application/json","X-Client-Id":this.tenant},i={scopes:this.scopes.split(/\s+/).filter(Boolean),codeChallenge:t,codeChallengeMethod:"S256"},s=await fetch(`${this.baseUrl}/api/v1/auth-sessions`,{method:"POST",headers:e,body:JSON.stringify(i)});if(!s.ok){let a=await s.json().catch(()=>({message:"Failed to create session"}));throw new Error(a.message??"Failed to create session")}let r=await s.json();this._sessionId=r.sessionId,this._sessionToken=r.token||(r.qrUrl?r.qrUrl.split("/").pop()??null:null),this._expiresAt=new Date(r.expiresAt).getTime(),this._status="pending",this._updateBody(this._bodyForStatus("pending",{qrUrl:r.qrUrl})),this._bindBodyEvents(),this._startCountdown(),this._beginPolling(r.sessionId)}catch(t){let e=t instanceof Error?t.message:"Unexpected error";this._status="error",this._updateBody(this._bodyForStatus("error",{errorMessage:e})),this._bindBodyEvents(),this.emit("qrauth:error",{message:e})}}_retry(){this._clearTimers(),this._sessionId=null,this._sessionToken=null,this._codeVerifier=null,this._status="idle",this._expiresAt=null,this._updateBody(this._bodyForStatus("idle")),this._bindBodyEvents()}_beginPolling(t){let e="PENDING",i=2e3,s=5e3,r=0,a=20,c=async()=>{if(!this._sessionId)return;let o=`${this.baseUrl}/api/v1/auth-sessions/${t}`;this._codeVerifier&&(o+=`?code_verifier=${encodeURIComponent(this._codeVerifier)}`);try{let l=await(await fetch(o,{headers:{"X-Client-Id":this.tenant}})).json();if(r=0,i=2e3,l.status!==e&&(e=l.status,this._handleStatusChange(l.status,l),["APPROVED","DENIED","EXPIRED"].includes(l.status)))return;this._pollTimeout=setTimeout(c,i)}catch{if(r++,r>=a){this._handleStatusChange("EXPIRED",void 0);return}i=Math.min(i*1.5,s),this._pollTimeout=setTimeout(c,i)}};this._pollTimeout=setTimeout(c,i)}_handleStatusChange(t,e){switch(this._status=t,t){case"SCANNED":{let i=this.shadow.querySelector(".qr-frame img")?.src,s=i?decodeURIComponent(i.replace(/.*[?&]data=/,"").split("&")[0]):"";this._updateBody(this._bodyForStatus("SCANNED",{qrUrl:s,timerHtml:this._formatTimer()})),this._bindBodyEvents();break}case"APPROVED":{this._clearTimers(),this._updateBody(this._bodyForStatus("APPROVED")),this.emit("qrauth:verified",{sessionId:e?.sessionId,user:e?.user,signature:e?.signature});break}case"DENIED":this._clearTimers(),this._updateBody(this._bodyForStatus("DENIED")),this._bindBodyEvents(),this.emit("qrauth:denied");break;case"EXPIRED":this._clearTimers(),this._status="EXPIRED",this._updateBody(this._bodyForStatus("EXPIRED")),this._bindBodyEvents(),this.emit("qrauth:expired");break}}_startCountdown(){this._timerInterval=setInterval(()=>{let t=this.shadow.getElementById("timer");if(!t||!this._expiresAt)return;let e=Math.max(0,Math.floor((this._expiresAt-Date.now())/1e3));t.textContent=e>0?this._formatTimer(e):"",e<=0&&(clearInterval(this._timerInterval),this._timerInterval=null,(this._status==="pending"||this._status==="SCANNED")&&this._handleStatusChange("EXPIRED",void 0))},1e3)}_formatTimer(t){let e=t??(this._expiresAt?Math.max(0,Math.floor((this._expiresAt-Date.now())/1e3)):0),i=Math.floor(e/60),s=e%60;return`Expires in ${i}:${s<10?"0":""}${s}`}_updateBody(t){let e=this.shadow.getElementById("body");e&&(e.innerHTML=t)}_clearTimers(){this._timerInterval&&(clearInterval(this._timerInterval),this._timerInterval=null),this._pollTimeout&&(clearTimeout(this._pollTimeout),this._pollTimeout=null)}};customElements.define("qrauth-2fa",x);export{p as QRAuthElement,m as QRAuthEphemeral,g as QRAuthLogin,x as QRAuthTwoFA};
|
|
1177
1304
|
//# sourceMappingURL=qrauth-components.esm.js.map
|