@nopwdio/sdk-js/cdn/components/np-login.js

Nopwd JS SDK

import{a as c,b as N}from"../chunk-MI4LMNWM.js";import{a as E,b,c as f,e as y,i as s,j as g}from"../chunk-PJMUNIPM.js";import{a as l}from"../chunk-HHPIKOXT.js";import{a as d,b as m}from"../chunk-325E7D5T.js";import{a as p,b as n,d as h,e as u,f as i}from"../chunk-X5RZB7NH.js";import{a as S,b as I,c as C}from"../chunk-4EBZHP4G.js";import{c as w,d as k,e as A,f as R}from"../chunk-4DGRMKHT.js";import"../chunk-XGY7T5A3.js";import"../chunk-VS4C5FIV.js";import{b as v}from"../chunk-EX74VC7J.js";import{a as o}from"../chunk-JFKSI6I7.js";var T=p`
  :host {
    display: flex;
    overflow: hidden;

    border: solid var(--np-component-border-color) var(--np-component-border-width);
    border-radius: var(--np-component-border-radius);
  }

  :host {
    --np-component-border-color: var(--np-core-color-grey-m);
  }

  :host(:hover) {
    --np-component-border-color: var(--np-core-color-grey-s);
  }

  :host(:focus) {
    --np-component-border-color: var(--np-core-color-grey-xs);
  }

  :host([state="authenticated"]) {
    --np-component-border-color: var(--np-core-color-green-m);
  }

  :host([state="error"]) {
    --np-component-border-color: var(--np-core-color-red-m);
  }

  input,
  button {
    display: flex;

    border: none;
    outline: none;

    margin: 0;
    padding: var(--np-component-padding);
    font-size: var(--np-component-font-size);
    font-weight: var(--np-component-font-weight);

    background-color: var(--np-component-background-color);
  }

  input {
    flex-grow: 1;
    color: var(--np-component-text-color);
  }

  button {
    color: var(--np-component-text-color);
  }
`;var M=(r=>(r.EMAIL_SENDING="email:link:sending",r.EMAIL_SENT="email:link:sent",r.EMAIL_VERIFYING="email:link:verifying",r.AUTHENTICATED="authenticated",r.PASSKEYS_VERIFYING="passkeys:verifying",r.ERROR="error",r))(M||{}),e=class extends h{constructor(){super(...arguments);this.placeholder="Your email";this.id="input";this.value=""}async connectedCallback(){super.connectedCallback(),this.startConditionalUI(),this.handleCallbackIfNeeded()}async disconnectedCallback(){super.disconnectedCallback(),this.abortConditianal?.abort(),this.abortConditianal=void 0}async loginWithEmail(){if(!(this.state!==void 0&&this.state!=="email:link:sent"||this.value.length<3))try{this.state="email:link:sending";let t=await S({email:this.value});return this.state="email:link:sent",t}catch(t){this.signalError(t)}}async handleCallbackIfNeeded(){if(!I())return!1;try{this.state="email:link:verifying";let t=await C(),a=await c(t,this.lifetime,this.idletimeout);return await this.signalSuccess(a),!0}catch(t){return await this.signalError(t),!1}}async startConditionalUI(){this.passkeys=void 0,this.passkeys=await R(),this.abortConditianal?.abort(),this.abortConditianal=new AbortController;for(let t=0;t<=20;t++)try{let{challenge:a}=await w();this.passkeys=!0;let _=await k(a,this.abortConditianal.signal);this.state="passkeys:verifying";let $=await A(_),r=await c($,this.lifetime,this.idletimeout);await this.signalSuccess(r)}catch(a){console.log(a),a instanceof v?(this.state=void 0,await l((t+1)*1e3)):await this.signalError(a)}return!1}async getSession(){return N()}async signalSuccess(t){this.state="authenticated",this.dispatchEvent(new CustomEvent("np:login",{composed:!0,cancelable:!0,bubbles:!0,detail:t})),await l(3e3),this.state=void 0}async signalError(t){this.state="error",this.dispatchEvent(new CustomEvent("np:error",{composed:!0,cancelable:!0,bubbles:!0,detail:t})),await l(1e3),this.state=void 0}async onInput(){let t=this.shadowRoot?.querySelector("input");if(!t)return;let a=this.value;this.value=t.value,this.state==="email:link:sent"&&(this.state=void 0),a.length===0&&this.value.length>=3&&this.loginWithEmail()}onKeyUp(t){t.key==="Enter"&&this.loginWithEmail()}render(){return n`
      <input
        type="email"
        @input=${this.onInput}
        @keyup=${this.onKeyUp}
        value=${this.value}
        placeholder=${this.placeholder}
        id="${this.id}"
        autocomplete="username webauthn"
        part="input"
      />
      <button @click=${this.loginWithEmail} part="button">
        ${this.state==="email:link:sending"?n`${s}`:this.state==="email:link:sent"?n`${y}`:this.state==="email:link:verifying"?n`${s}`:this.state==="passkeys:verifying"?n`${s}`:this.state==="authenticated"?n`${f}`:this.state==="error"?n`${g}`:n`${this.passkeys?b:E}`}
      </button>
    `}};e.styles=[d,m,T],o([i({reflect:!0})],e.prototype,"state",2),o([i({reflect:!0,type:Boolean})],e.prototype,"passkeys",2),o([i({type:String})],e.prototype,"placeholder",2),o([i({type:String})],e.prototype,"id",2),o([i({type:Number})],e.prototype,"lifetime",2),o([i({type:Number})],e.prototype,"idletimeout",2),o([i({type:String})],e.prototype,"value",2),e=o([u("np-login")],e);export{e as NpLogin,M as State};