@things-factory/auth-ui 10.1.206 → 10.1.208

package/dist-client/components/profile-component.js.map

@@ -1 +1 @@
-{"version":3,"file":"profile-component.js","sourceRoot":"","sources":["../../client/components/profile-component.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport './change-password.js'\nimport './delete-user-popup.js'\nimport './my-login-history.js'\n\nimport { gql } from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { startRegistration } from '@simplewebauthn/browser'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { FormFieldStyles } from '@operato/styles'\nimport { auth, getLanguages } from '@things-factory/auth-base/dist-client'\n\nimport { readVerification } from '../utils/webauthn-verification.js'\n\nconst isAvailableWebauthn = 'PublicKeyCredential' in window\n@customElement('profile-component')\nexport class ProfileComponent extends localize(i18next)(LitElement) {\n  static styles = [\n    FormFieldStyles,\n    css`\n      :host {\n        display: block;\n        background-color: var(--md-sys-color-background);\n        padding: 15px 0;\n      }\n      .wrap {\n        max-width: var(--profile-wrap-max-width, 400px);\n        margin: auto;\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n      }\n\n      * {\n        box-sizing: border-box;\n      }\n\n      *:focus {\n        outline: none;\n      }\n\n      /* 색·테두리·모서리·포커스·placeholder 는 FormFieldStyles 가 담당하고, 여기서는 치수만 둔다 */\n      input {\n        margin: var(--spacing-small) 0;\n        padding: 9px;\n        border-radius: var(--border-radius);\n        font: var(--auth-input-field-font);\n        width: var(--auth-input-field-width);\n      }\n\n      .user {\n        background: url(/assets/images/icon-profile.png) center top no-repeat;\n        margin: var(--profile-icon-margin);\n        padding: 180px 20px 20px 20px;\n        color: var(--md-sys-color-secondary);\n        font: var(--header-bar-title);\n        text-align: center;\n      }\n\n      hr {\n        width: 100%;\n        /* rgba(0,0,0,.1) 은 다크 배경에서 보이지 않는다 */\n        border: dotted 1px var(--md-sys-color-outline-variant);\n      }\n\n      .wrap * {\n        grid-column: span 2;\n      }\n\n      label {\n        font: bold 14px var(--theme-font);\n        color: var(--md-sys-color-primary);\n        text-transform: capitalize;\n        grid-column: 1;\n      }\n\n      .wrap *.inline {\n        grid-column: unset;\n      }\n\n      /*\n       * 언어 select 는 ox-i18n-selector 의 shadow root 안에 있어 위 input 규칙이 닿지 않는다.\n       * 높이가 어긋나지 않도록 인풋과 **같은 값**을 토큰으로 넘긴다(padding 9px, 16px 글자).\n       */\n      ox-i18n-selector {\n        --i18n-selector-field-width: var(--auth-input-field-width);\n        /* 여백은 호스트에만 준다 — 내부에도 주면 두 번 더해져 인풋보다 벌어진다 */\n        --i18n-selector-field-margin: 0;\n        --i18n-selector-field-padding: 9px;\n        --i18n-selector-field-border-radius: var(--border-radius);\n        --i18n-selector-field-font: var(--auth-input-field-font);\n        /* ox-i18n-selector 가 font 뒤에 font-size(기본 15px)를 다시 선언하므로 크기도 넘겨야 한다 */\n        --i18n-selector-field-font-size: var(--profile-field-font-size, 16px);\n        --i18n-selector-field-border: var(--input-field-border, 1px solid var(--md-sys-color-outline));\n        --i18n-selector-field-background-color: var(\n          --input-field-background,\n          var(--md-sys-color-surface-container-highest)\n        );\n        --i18n-selector-field-color: var(--input-field-color, var(--md-sys-color-on-surface));\n        margin: var(--spacing-small) 0;\n      }\n\n      md-text-button {\n        text-transform: capitalize;\n      }\n\n      footer {\n        padding: 20px;\n        text-align: center;\n      }\n\n      footer p {\n        font-size: 14px;\n        margin-bottom: 5px;\n        color: var(--md-sys-color-on-background);\n      }\n\n      footer a {\n        color: var(--md-sys-color-primary);\n        text-decoration: none;\n        font-weight: bold;\n      }\n    `\n  ]\n\n  @property({ type: String }) username?: string\n  @property({ type: String }) email?: string\n  @property({ type: String }) name?: string\n\n  @state() languages: { code: string; display: string }[] = []\n  @state() passwordRule: {\n    lowerCase?: boolean\n    upperCase?: boolean\n    digit?: boolean\n    specialCharacter?: boolean\n    allowRepeat?: boolean\n    useTightPattern?: boolean\n    useLoosePattern?: boolean\n    tightCharacterLength?: number\n    looseCharacterLength?: number\n  } = {}\n\n  @query('#username') usernameEl!: HTMLInputElement\n  @query('#name') nameEl!: HTMLInputElement\n  @query('#email') emailEl!: HTMLInputElement\n  @query('#locale') localeEl!: HTMLInputElement\n\n  async connectedCallback(): Promise<void> {\n    super.connectedCallback()\n\n    const response = await client.query({\n      query: gql`\n        query {\n          passwordRule {\n            lowerCase\n            upperCase\n            digit\n            specialCharacter\n            allowRepeat\n            useTightPattern\n            useLoosePattern\n            tightCharacterLength\n            looseCharacterLength\n          }\n        }\n      `\n    })\n\n    this.passwordRule = response.data\n  }\n\n  async firstUpdated() {\n    auth.on('profile', ({ credential }) => {\n      this.setCredential(credential)\n    })\n\n    this.setCredential(auth.credential)\n\n    this.languages = await getLanguages()\n  }\n\n  setCredential(credential) {\n    if (credential) {\n      this.username = credential.username\n      this.name = credential.name\n      this.email = credential.email\n    } else {\n      this.username = ''\n      this.name = ''\n      this.email = ''\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"wrap\">\n        <div class=\"user\">${this.username || ''}</div>\n\n        <label for=\"username\"><ox-i18n slot=\"title\" msgid=\"label.user-id\"></ox-i18n></label>\n        <input id=\"username\" @change=${e => this.onUsernameChanged(e.target.value)} .value=${this.username || ''} />\n\n        <hr />\n\n        <label for=\"name\"><ox-i18n slot=\"title\" msgid=\"label.name\"></ox-i18n></label>\n        <input id=\"name\" @change=${e => this.onNameChanged(e.target.value)} .value=${this.name || ''} />\n\n        <hr />\n\n        <label for=\"email\"><ox-i18n slot=\"title\" msgid=\"label.email\"></ox-i18n></label>\n        <input id=\"email\" type=\"email\" @change=${e => this.onEmailChanged(e.target.value)} .value=${this.email || ''} />\n\n        <hr />\n\n        <label for=\"locale\"><ox-i18n slot=\"title\" msgid=\"label.language\"></ox-i18n></label>\n        <ox-i18n-selector\n          id=\"locale\"\n          @change=${e => this.onLocaleChanged(e.detail)}\n          value=${i18next.language || 'en-US'}\n          .languages=${this.languages}\n        ></ox-i18n-selector>\n\n        <hr />\n\n        <label for=\"change-password\">\n          <ox-i18n msgid=\"label.password\"></ox-i18n>\n        </label>\n\n        <change-password id=\"change-password\" .passwordRule=${this.passwordRule}></change-password>\n\n        ${\n          isAvailableWebauthn\n            ? html`\n                <md-text-button @click=${() => this.registerUser()}\n                  >${i18next.t('button.security-key registration')}</md-text-button\n                >\n              `\n            : nothing\n        }\n\n        <footer>\n          <p>\n            ${i18next.t('text.click login history')}\n            <a href=\"javascript:void(0);\" @click=${this.openLoginHistory.bind(this)}\n              >${i18next.t('label.login_history')}</a\n            >\n          </p>\n        </footer>\n      </div>\n    `\n  }\n\n  async onUsernameChanged(username) {\n    if (!username) return\n\n    var oldUsername = this.username\n\n    try {\n      const message = await auth.updateProfile({\n        username\n      })\n\n      notify({\n        level: 'info',\n        message\n      })\n    } catch (e: any) {\n      this.usernameEl.value = oldUsername || ''\n\n      notify({\n        level: 'error',\n        message: 'message' in e ? e.message : e\n      })\n    }\n  }\n\n  async onNameChanged(name) {\n    if (!name) return\n\n    var oldName = this.name\n\n    try {\n      const message = await auth.updateProfile({\n        name\n      })\n\n      notify({\n        level: 'info',\n        message\n      })\n    } catch (e: any) {\n      this.nameEl.value = oldName || ''\n\n      notify({\n        level: 'error',\n        message: 'message' in e ? e.message : e\n      })\n    }\n  }\n\n  async onEmailChanged(email) {\n    if (!email) return\n\n    var oldEmail = this.email\n\n    try {\n      const message = await auth.updateProfile({\n        email\n      })\n\n      notify({\n        level: 'info',\n        message\n      })\n    } catch (e: any) {\n      this.emailEl.value = oldEmail || ''\n\n      notify({\n        level: 'error',\n        message: 'message' in e ? e.message : e\n      })\n    }\n  }\n\n  async onLocaleChanged(value) {\n    if (!value) return\n\n    var oldLocale = i18next.language\n\n    try {\n      const message = await auth.updateProfile({\n        locale: value\n      })\n\n      i18next.changeLanguage(value)\n\n      notify({\n        level: 'info',\n        message\n      })\n    } catch (e: any) {\n      this.localeEl.value = oldLocale\n\n      notify({\n        level: 'error',\n        message: 'message' in e ? e.message : e\n      })\n    }\n  }\n\n  openLoginHistory() {\n    openPopup(html` <my-login-history></my-login-history> `, {\n      title: i18next.t('label.login_history')\n    })\n  }\n\n  deleteUser() {\n    openPopup(html` <delete-user-popup></delete-user-popup> `, {\n      title: i18next.t('label.delete account')\n    })\n  }\n\n  /*\n   * ⚠ The three endings here are not interchangeable, and the screen used to give the same one\n   * for all of them.\n   *\n   *   registered  the server confirmed it\n   *   refused     the server said no — usually this credential is already registered\n   *   failed      we never got an answer: the browser refused, the device was cancelled,\n   *               the network dropped\n   *\n   * `await verification.text()` on an already-parsed body threw a TypeError that the catch\n   * below swallowed, so **refused arrived as failed** and the refusal message was unreachable\n   * code. `readVerification` works out which ending it is without being able to throw; see\n   * `utils/webauthn-verification.ts`.\n   */\n  async registerUser() {\n    try {\n      const options = await fetch('/auth/register-webauthn/challenge').then(res => res.json())\n      const attResp = await startRegistration(options)\n\n      const verification = await readVerification(\n        await fetch('/auth/verify-registration', {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application/json'\n          },\n          body: JSON.stringify(attResp)\n        })\n      )\n\n      if (verification.outcome === 'registered') {\n        notify({\n          level: 'info',\n          message: i18next.t('text.user credential registered successfully')\n        })\n\n        return\n      }\n\n      /* The server's own words, in English, for whoever reads the console — not for the screen. */\n      console.error('passkey registration refused:', verification.reason)\n\n      notify({\n        level: 'error',\n        message: i18next.t('error.user credential registration not allowed')\n      })\n    } catch (error) {\n      /* Never reached the server, or never got past the device. A different thing to say. */\n      console.error('passkey registration failed:', error)\n\n      notify({\n        level: 'error',\n        message: i18next.t('error.user credential registration failed')\n      })\n    }\n  }\n\n  get applicationMeta() {\n    var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n    var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n    var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n    return {\n      icon: iconLink?.href || '',\n      title: titleMeta?.content || 'Things Factory',\n      description: descriptionMeta?.content || 'Reimagining Software'\n    }\n  }\n}\n"]}
+{"version":3,"file":"profile-component.js","sourceRoot":"","sources":["../../client/components/profile-component.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport './change-password.js'\nimport './delete-user-popup.js'\nimport './my-login-history.js'\nimport './my-passkeys.js'\n\nimport { gql } from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { FormFieldStyles } from '@operato/styles'\nimport { auth, getLanguages } from '@things-factory/auth-base/dist-client'\n\nconst isAvailableWebauthn = 'PublicKeyCredential' in window\n@customElement('profile-component')\nexport class ProfileComponent extends localize(i18next)(LitElement) {\n  static styles = [\n    FormFieldStyles,\n    css`\n      :host {\n        display: block;\n        background-color: var(--md-sys-color-background);\n        padding: 15px 0;\n      }\n      .wrap {\n        max-width: var(--profile-wrap-max-width, 400px);\n        margin: auto;\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n      }\n\n      * {\n        box-sizing: border-box;\n      }\n\n      *:focus {\n        outline: none;\n      }\n\n      /* 색·테두리·모서리·포커스·placeholder 는 FormFieldStyles 가 담당하고, 여기서는 치수만 둔다 */\n      input {\n        margin: var(--spacing-small) 0;\n        padding: 9px;\n        border-radius: var(--border-radius);\n        font: var(--auth-input-field-font);\n        width: var(--auth-input-field-width);\n      }\n\n      .user {\n        background: url(/assets/images/icon-profile.png) center top no-repeat;\n        margin: var(--profile-icon-margin);\n        padding: 180px 20px 20px 20px;\n        color: var(--md-sys-color-secondary);\n        font: var(--header-bar-title);\n        text-align: center;\n      }\n\n      hr {\n        width: 100%;\n        /* rgba(0,0,0,.1) 은 다크 배경에서 보이지 않는다 */\n        border: dotted 1px var(--md-sys-color-outline-variant);\n      }\n\n      .wrap * {\n        grid-column: span 2;\n      }\n\n      label {\n        font: bold 14px var(--theme-font);\n        color: var(--md-sys-color-primary);\n        text-transform: capitalize;\n        grid-column: 1;\n      }\n\n      .wrap *.inline {\n        grid-column: unset;\n      }\n\n      /*\n       * 언어 select 는 ox-i18n-selector 의 shadow root 안에 있어 위 input 규칙이 닿지 않는다.\n       * 높이가 어긋나지 않도록 인풋과 **같은 값**을 토큰으로 넘긴다(padding 9px, 16px 글자).\n       */\n      ox-i18n-selector {\n        --i18n-selector-field-width: var(--auth-input-field-width);\n        /* 여백은 호스트에만 준다 — 내부에도 주면 두 번 더해져 인풋보다 벌어진다 */\n        --i18n-selector-field-margin: 0;\n        --i18n-selector-field-padding: 9px;\n        --i18n-selector-field-border-radius: var(--border-radius);\n        --i18n-selector-field-font: var(--auth-input-field-font);\n        /* ox-i18n-selector 가 font 뒤에 font-size(기본 15px)를 다시 선언하므로 크기도 넘겨야 한다 */\n        --i18n-selector-field-font-size: var(--profile-field-font-size, 16px);\n        --i18n-selector-field-border: var(--input-field-border, 1px solid var(--md-sys-color-outline));\n        --i18n-selector-field-background-color: var(\n          --input-field-background,\n          var(--md-sys-color-surface-container-highest)\n        );\n        --i18n-selector-field-color: var(--input-field-color, var(--md-sys-color-on-surface));\n        margin: var(--spacing-small) 0;\n      }\n\n      md-text-button {\n        text-transform: capitalize;\n      }\n\n      footer {\n        padding: 20px;\n        text-align: center;\n      }\n\n      footer p {\n        font-size: 14px;\n        margin-bottom: 5px;\n        color: var(--md-sys-color-on-background);\n      }\n\n      footer a {\n        color: var(--md-sys-color-primary);\n        text-decoration: none;\n        font-weight: bold;\n      }\n    `\n  ]\n\n  @property({ type: String }) username?: string\n  @property({ type: String }) email?: string\n  @property({ type: String }) name?: string\n\n  @state() languages: { code: string; display: string }[] = []\n  @state() passwordRule: {\n    lowerCase?: boolean\n    upperCase?: boolean\n    digit?: boolean\n    specialCharacter?: boolean\n    allowRepeat?: boolean\n    useTightPattern?: boolean\n    useLoosePattern?: boolean\n    tightCharacterLength?: number\n    looseCharacterLength?: number\n  } = {}\n\n  @query('#username') usernameEl!: HTMLInputElement\n  @query('#name') nameEl!: HTMLInputElement\n  @query('#email') emailEl!: HTMLInputElement\n  @query('#locale') localeEl!: HTMLInputElement\n\n  async connectedCallback(): Promise<void> {\n    super.connectedCallback()\n\n    const response = await client.query({\n      query: gql`\n        query {\n          passwordRule {\n            lowerCase\n            upperCase\n            digit\n            specialCharacter\n            allowRepeat\n            useTightPattern\n            useLoosePattern\n            tightCharacterLength\n            looseCharacterLength\n          }\n        }\n      `\n    })\n\n    this.passwordRule = response.data\n  }\n\n  async firstUpdated() {\n    auth.on('profile', ({ credential }) => {\n      this.setCredential(credential)\n    })\n\n    this.setCredential(auth.credential)\n\n    this.languages = await getLanguages()\n  }\n\n  setCredential(credential) {\n    if (credential) {\n      this.username = credential.username\n      this.name = credential.name\n      this.email = credential.email\n    } else {\n      this.username = ''\n      this.name = ''\n      this.email = ''\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"wrap\">\n        <div class=\"user\">${this.username || ''}</div>\n\n        <label for=\"username\"><ox-i18n slot=\"title\" msgid=\"label.user-id\"></ox-i18n></label>\n        <input id=\"username\" @change=${e => this.onUsernameChanged(e.target.value)} .value=${this.username || ''} />\n\n        <hr />\n\n        <label for=\"name\"><ox-i18n slot=\"title\" msgid=\"label.name\"></ox-i18n></label>\n        <input id=\"name\" @change=${e => this.onNameChanged(e.target.value)} .value=${this.name || ''} />\n\n        <hr />\n\n        <label for=\"email\"><ox-i18n slot=\"title\" msgid=\"label.email\"></ox-i18n></label>\n        <input id=\"email\" type=\"email\" @change=${e => this.onEmailChanged(e.target.value)} .value=${this.email || ''} />\n\n        <hr />\n\n        <label for=\"locale\"><ox-i18n slot=\"title\" msgid=\"label.language\"></ox-i18n></label>\n        <ox-i18n-selector\n          id=\"locale\"\n          @change=${e => this.onLocaleChanged(e.detail)}\n          value=${i18next.language || 'en-US'}\n          .languages=${this.languages}\n        ></ox-i18n-selector>\n\n        <hr />\n\n        <label for=\"change-password\">\n          <ox-i18n msgid=\"label.password\"></ox-i18n>\n        </label>\n\n        <change-password id=\"change-password\" .passwordRule=${this.passwordRule}></change-password>\n\n        ${\n          isAvailableWebauthn\n            ? html`\n                <hr />\n                <label for=\"passkeys\"><ox-i18n msgid=\"label.passkey\"></ox-i18n></label>\n                <my-passkeys id=\"passkeys\"></my-passkeys>\n              `\n            : nothing\n        }\n\n        <footer>\n          <p>\n            ${i18next.t('text.click login history')}\n            <a href=\"javascript:void(0);\" @click=${this.openLoginHistory.bind(this)}\n              >${i18next.t('label.login_history')}</a\n            >\n          </p>\n        </footer>\n      </div>\n    `\n  }\n\n  async onUsernameChanged(username) {\n    if (!username) return\n\n    var oldUsername = this.username\n\n    try {\n      const message = await auth.updateProfile({\n        username\n      })\n\n      notify({\n        level: 'info',\n        message\n      })\n    } catch (e: any) {\n      this.usernameEl.value = oldUsername || ''\n\n      notify({\n        level: 'error',\n        message: 'message' in e ? e.message : e\n      })\n    }\n  }\n\n  async onNameChanged(name) {\n    if (!name) return\n\n    var oldName = this.name\n\n    try {\n      const message = await auth.updateProfile({\n        name\n      })\n\n      notify({\n        level: 'info',\n        message\n      })\n    } catch (e: any) {\n      this.nameEl.value = oldName || ''\n\n      notify({\n        level: 'error',\n        message: 'message' in e ? e.message : e\n      })\n    }\n  }\n\n  async onEmailChanged(email) {\n    if (!email) return\n\n    var oldEmail = this.email\n\n    try {\n      const message = await auth.updateProfile({\n        email\n      })\n\n      notify({\n        level: 'info',\n        message\n      })\n    } catch (e: any) {\n      this.emailEl.value = oldEmail || ''\n\n      notify({\n        level: 'error',\n        message: 'message' in e ? e.message : e\n      })\n    }\n  }\n\n  async onLocaleChanged(value) {\n    if (!value) return\n\n    var oldLocale = i18next.language\n\n    try {\n      const message = await auth.updateProfile({\n        locale: value\n      })\n\n      i18next.changeLanguage(value)\n\n      notify({\n        level: 'info',\n        message\n      })\n    } catch (e: any) {\n      this.localeEl.value = oldLocale\n\n      notify({\n        level: 'error',\n        message: 'message' in e ? e.message : e\n      })\n    }\n  }\n\n  openLoginHistory() {\n    openPopup(html` <my-login-history></my-login-history> `, {\n      title: i18next.t('label.login_history')\n    })\n  }\n\n  deleteUser() {\n    openPopup(html` <delete-user-popup></delete-user-popup> `, {\n      title: i18next.t('label.delete account')\n    })\n  }\n\n\n\n  get applicationMeta() {\n    var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n    var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n    var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n    return {\n      icon: iconLink?.href || '',\n      title: titleMeta?.content || 'Things Factory',\n      description: descriptionMeta?.content || 'Reimagining Software'\n    }\n  }\n}\n"]}

package/dist-client/entries/auth/passkey-offer.d.ts

@@ -0,0 +1,27 @@
+import '@material/web/button/elevated-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/icon/icon.js';
+import { AbstractAuthPage } from '../../components/abstract-auth-page.js';
+/**
+ * After a password sign-in, before check-in: an offer to put a passkey on this device (ADR-0156
+ * decision 5). Where there is nothing to offer - no authenticator built into this device, or the
+ * person said not to ask on this browser - the page moves on before it shows anything.
+ */
+export declare class AuthPasskeyOffer extends AbstractAuthPage {
+    static styles: import("lit").CSSResult[];
+    offering: boolean;
+    busy: boolean;
+    get pageName(): string;
+    get actionUrl(): string;
+    get username(): string;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    updated(changed: any): Promise<void>;
+    get formfields(): import("lit-html").TemplateResult<1>;
+    get links(): import("lit-html").TemplateResult<1>;
+    submit(): void;
+    private declined;
+    private decline;
+    private moveOn;
+    private register;
+}

package/dist-client/entries/auth/passkey-offer.js

@@ -0,0 +1,161 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/elevated-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/icon/icon.js';
+import { css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { platformAuthenticatorIsAvailable, startRegistration } from '@simplewebauthn/browser';
+import { i18next } from '@operato/i18n';
+import { notify } from '@operato/layout';
+import { AbstractAuthPage } from '../../components/abstract-auth-page.js';
+import { alreadyRegistered, deviceLabel, offerDeclinedKey, shouldOffer, wasCancelled } from '../../utils/passkey.js';
+import { readVerification } from '../../utils/webauthn-verification.js';
+/**
+ * After a password sign-in, before check-in: an offer to put a passkey on this device (ADR-0156
+ * decision 5). Where there is nothing to offer - no authenticator built into this device, or the
+ * person said not to ask on this browser - the page moves on before it shows anything.
+ */
+let AuthPasskeyOffer = class AuthPasskeyOffer extends AbstractAuthPage {
+    constructor() {
+        super(...arguments);
+        this.offering = false;
+        this.busy = false;
+    }
+    static { this.styles = [
+        ...AbstractAuthPage.styles,
+        css `
+      .offer {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-medium);
+      }
+
+      .offer p {
+        margin: 0;
+        font: var(--auth-description-font);
+        color: var(--md-sys-color-on-primary);
+      }
+
+      .later {
+        display: flex;
+        gap: var(--spacing-small);
+      }
+    `
+    ]; }
+    get pageName() {
+        return 'passkey offer';
+    }
+    get actionUrl() {
+        return '';
+    }
+    get username() {
+        return this.data?.username || '';
+    }
+    render() {
+        /* Nothing shows while it decides - most visits that have nothing to offer leave at once. */
+        return this.offering ? super.render() : html ``;
+    }
+    firstUpdated() {
+        /* No text field here for the base to focus. */
+    }
+    async updated(changed) {
+        super.updated(changed);
+        if (changed.has('data') && this.data) {
+            const platformAuthenticator = await platformAuthenticatorIsAvailable().catch(() => false);
+            if (shouldOffer({ platformAuthenticator, declined: this.declined() })) {
+                this.offering = true;
+            }
+            else {
+                this.moveOn();
+            }
+        }
+    }
+    get formfields() {
+        return html `
+      <div class="offer">
+        <p>${i18next.t('text.passkey offer')}</p>
+
+        <md-elevated-button type="button" ?disabled=${this.busy} @click=${() => this.register()}>
+          <md-icon slot="icon">passkey</md-icon>${i18next.t('button.register on this device')}
+        </md-elevated-button>
+
+        <div class="later">
+          <md-text-button type="button" ?disabled=${this.busy} @click=${() => this.moveOn()}>
+            ${i18next.t('button.later')}
+          </md-text-button>
+          <md-text-button type="button" ?disabled=${this.busy} @click=${() => this.decline()}>
+            ${i18next.t('button.do not ask on this device')}
+          </md-text-button>
+        </div>
+      </div>
+    `;
+    }
+    get links() {
+        return html ``;
+    }
+    /* Enter in the form does nothing - each choice is its own button. */
+    submit() { }
+    declined() {
+        try {
+            return localStorage.getItem(offerDeclinedKey(this.username)) === 'true';
+        }
+        catch {
+            return false;
+        }
+    }
+    decline() {
+        try {
+            localStorage.setItem(offerDeclinedKey(this.username), 'true');
+        }
+        catch { }
+        this.moveOn();
+    }
+    moveOn() {
+        window.location.replace(this.redirectTo || '/');
+    }
+    async register() {
+        this.busy = true;
+        try {
+            const optionsJSON = await fetch('/auth/register-webauthn/challenge').then(res => res.json());
+            const response = await startRegistration({ optionsJSON });
+            const verification = await readVerification(await fetch('/auth/verify-registration', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ response, name: deviceLabel(navigator.userAgent) })
+            }));
+            if (verification.outcome === 'registered') {
+                this.moveOn();
+                return;
+            }
+            console.error('passkey registration refused:', verification.reason);
+            notify({ level: 'error', message: i18next.t('error.user credential registration not allowed') });
+        }
+        catch (error) {
+            if (wasCancelled(error))
+                return;
+            /* This device already holds one of this person's passkeys - nothing more to offer here. */
+            if (alreadyRegistered(error)) {
+                this.decline();
+                return;
+            }
+            console.error('passkey registration failed:', error);
+            notify({ level: 'error', message: i18next.t('error.user credential registration failed') });
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AuthPasskeyOffer.prototype, "offering", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AuthPasskeyOffer.prototype, "busy", void 0);
+AuthPasskeyOffer = __decorate([
+    customElement('auth-passkey-offer')
+], AuthPasskeyOffer);
+export { AuthPasskeyOffer };
+//# sourceMappingURL=passkey-offer.js.map

package/dist-client/entries/auth/passkey-offer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"passkey-offer.js","sourceRoot":"","sources":["../../../client/entries/auth/passkey-offer.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { platformAuthenticatorIsAvailable, startRegistration } from '@simplewebauthn/browser'\n\nimport { i18next } from '@operato/i18n'\nimport { notify } from '@operato/layout'\n\nimport { AbstractAuthPage } from '../../components/abstract-auth-page.js'\nimport { alreadyRegistered, deviceLabel, offerDeclinedKey, shouldOffer, wasCancelled } from '../../utils/passkey.js'\nimport { readVerification } from '../../utils/webauthn-verification.js'\n\n/**\n * After a password sign-in, before check-in: an offer to put a passkey on this device (ADR-0156\n * decision 5). Where there is nothing to offer - no authenticator built into this device, or the\n * person said not to ask on this browser - the page moves on before it shows anything.\n */\n@customElement('auth-passkey-offer')\nexport class AuthPasskeyOffer extends AbstractAuthPage {\n  static styles = [\n    ...AbstractAuthPage.styles,\n    css`\n      .offer {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-medium);\n      }\n\n      .offer p {\n        margin: 0;\n        font: var(--auth-description-font);\n        color: var(--md-sys-color-on-primary);\n      }\n\n      .later {\n        display: flex;\n        gap: var(--spacing-small);\n      }\n    `\n  ]\n\n  @state() offering = false\n  @state() busy = false\n\n  get pageName() {\n    return 'passkey offer'\n  }\n\n  get actionUrl() {\n    return ''\n  }\n\n  get username(): string {\n    return this.data?.username || ''\n  }\n\n  render() {\n    /* Nothing shows while it decides - most visits that have nothing to offer leave at once. */\n    return this.offering ? super.render() : html``\n  }\n\n  firstUpdated() {\n    /* No text field here for the base to focus. */\n  }\n\n  async updated(changed) {\n    super.updated(changed)\n\n    if (changed.has('data') && this.data) {\n      const platformAuthenticator = await platformAuthenticatorIsAvailable().catch(() => false)\n      if (shouldOffer({ platformAuthenticator, declined: this.declined() })) {\n        this.offering = true\n      } else {\n        this.moveOn()\n      }\n    }\n  }\n\n  get formfields() {\n    return html`\n      <div class=\"offer\">\n        <p>${i18next.t('text.passkey offer')}</p>\n\n        <md-elevated-button type=\"button\" ?disabled=${this.busy} @click=${() => this.register()}>\n          <md-icon slot=\"icon\">passkey</md-icon>${i18next.t('button.register on this device')}\n        </md-elevated-button>\n\n        <div class=\"later\">\n          <md-text-button type=\"button\" ?disabled=${this.busy} @click=${() => this.moveOn()}>\n            ${i18next.t('button.later')}\n          </md-text-button>\n          <md-text-button type=\"button\" ?disabled=${this.busy} @click=${() => this.decline()}>\n            ${i18next.t('button.do not ask on this device')}\n          </md-text-button>\n        </div>\n      </div>\n    `\n  }\n\n  get links() {\n    return html``\n  }\n\n  /* Enter in the form does nothing - each choice is its own button. */\n  submit() {}\n\n  private declined(): boolean {\n    try {\n      return localStorage.getItem(offerDeclinedKey(this.username)) === 'true'\n    } catch {\n      return false\n    }\n  }\n\n  private decline() {\n    try {\n      localStorage.setItem(offerDeclinedKey(this.username), 'true')\n    } catch {}\n    this.moveOn()\n  }\n\n  private moveOn() {\n    window.location.replace(this.redirectTo || '/')\n  }\n\n  private async register() {\n    this.busy = true\n    try {\n      const optionsJSON = await fetch('/auth/register-webauthn/challenge').then(res => res.json())\n      const response = await startRegistration({ optionsJSON })\n\n      const verification = await readVerification(\n        await fetch('/auth/verify-registration', {\n          method: 'POST',\n          headers: { 'Content-Type': 'application/json' },\n          body: JSON.stringify({ response, name: deviceLabel(navigator.userAgent) })\n        })\n      )\n\n      if (verification.outcome === 'registered') {\n        this.moveOn()\n        return\n      }\n\n      console.error('passkey registration refused:', verification.reason)\n      notify({ level: 'error', message: i18next.t('error.user credential registration not allowed') })\n    } catch (error) {\n      if (wasCancelled(error)) return\n\n      /* This device already holds one of this person's passkeys - nothing more to offer here. */\n      if (alreadyRegistered(error)) {\n        this.decline()\n        return\n      }\n\n      console.error('passkey registration failed:', error)\n      notify({ level: 'error', message: i18next.t('error.user credential registration failed') })\n    } finally {\n      this.busy = false\n    }\n  }\n}\n"]}