@things-factory/auth-ui 7.0.1-rc.1 → 7.0.1-rc.11

package/dist-client/components/abstract-auth-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"abstract-auth-page.js","sourceRoot":"","sources":["../../client/components/abstract-auth-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/textfield/filled-text-field.js'\n\nimport '@operato/lottie-player'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport '@operato/layout/ox-snack-bar.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isSafari } from '@operato/utils'\n\nimport { AUTH_STYLE_SIGN } from '../auth-style-sign.js'\n\nexport abstract class AbstractAuthPage extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        position: relative;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: row;\n\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n      }\n\n      .content {\n        flex: 1;\n        overflow: auto;\n      }\n\n      .home {\n        position: absolute;\n        padding: var(--padding-dufault, 9px);\n        left: 20px;\n        top: 10px;\n        color: var(--md-sys-color-on-primary);\n      }\n\n      div.field {\n        margin-bottom: var(--margin-default);\n      }\n\n      [hidden] {\n        display: none;\n      }\n\n      #snackbar {\n        width: 100%;\n        z-index: 10;\n      }\n\n      @media print {\n        :host {\n          width: 100%;\n          height: 100%;\n          min-height: 100vh;\n          min-height: 100dvh;\n        }\n      }\n    `,\n    AUTH_STYLE_SIGN\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: String }) message?: string\n  @property({ type: Object }) detail: any\n  @property({ type: String }) redirectTo?: string\n\n  @query('#form') formEl!: HTMLFormElement\n\n  private _applicationMeta?: {\n    icon: string\n    title: string\n    description: string\n  }\n\n  render() {\n    const { disableUserFavoredLanguage, languages } = this.data || {}\n    var { icon, title, description } = this.applicationMeta\n\n    return html`\n      <div class=\"content md-typescale-display-medium\">\n        <div class=\"wrap\">\n          <div class=\"auth-brand\">\n            <img src=${icon} />\n            <strong class=\"name\">${title}</strong>\n            <span class=\"welcome-msg\">${description}</span>\n          </div>\n\n          <div class=\"auth-form\">\n            <h3><ox-i18n msgid=\"title.${this.pageName}\"></ox-i18n></h3>\n\n            <form\n              id=\"form\"\n              action=\"${this.actionUrl}\"\n              method=\"post\"\n              @keypress=${e => {\n                if (e.key == 'Enter') this._onSubmit(e)\n              }}\n            >\n              ${this.formfields}\n            </form>\n            ${this.links}\n            ${!disableUserFavoredLanguage\n              ? html` <div id=\"locale-area\">\n                  <label for=\"locale-selector\"><md-icon>language</md-icon></label>\n                  <ox-i18n-selector\n                    id=\"locale-selector\"\n                    value=${i18next.language || 'en-US'}\n                    .languages=${languages}\n                    @change=${e => {\n                      var locale = e.detail\n                      if (!locale) return\n\n                      i18next.changeLanguage(locale)\n                    }}\n                  ></ox-i18n-selector>\n                </div>`\n              : nothing}\n          </div>\n        </div>\n\n        <md-icon-button class=\"home\" @click=${e => (window.location.href = '/')}\n          ><md-icon>home</md-icon></md-icon-button\n        >\n        <ox-snack-bar id=\"snackbar\" level=\"error\" .message=${this.message}></ox-snack-bar>\n\n        ${isSafari()\n          ? html``\n          : html`\n              <div class=\"lottie-container\">\n                <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n              </div>\n            `}\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    setTimeout(() => {\n      ;(this.renderRoot.querySelector('md-filled-text-field') as any).focus()\n    }, 100)\n\n    this.formEl.reset = () => {\n      this.formElements.filter(el => !(el.hidden || el.type == 'hidden')).forEach(el => (el.value = ''))\n    }\n  }\n\n  updated(changed) {\n    if (changed.has('data') && this.data) {\n      this.message = this.data.message\n      this.redirectTo = this.data.redirectTo\n    }\n  }\n\n  abstract get pageName(): string\n  abstract get actionUrl(): string\n\n  get formElements(): HTMLInputElement[] {\n    return Array.from(this.formEl.querySelectorAll('[name]'))\n  }\n\n  get formfields() {\n    const email = this.data?.email || ''\n    // .validationMessage=${String(i18next.t('text.invalid-email'))}\n\n    return html`\n      <input id=\"redirectTo\" type=\"hidden\" name=\"redirectTo\" .value=${this.redirectTo || '/'} />\n\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"email\"\n          type=\"email\"\n          label=${String(i18next.t('field.email'))}\n          required\n          .value=${email}\n          autocomplete=\"username\"\n          autocapitalize=\"off\"\n          ><md-icon slot=\"leading-icon\">mail</md-icon></md-filled-text-field\n        >\n      </div>\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"password\"\n          type=\"password\"\n          label=${String(i18next.t('field.password'))}\n          autocomplete=\"current-password\"\n          required\n          ><md-icon slot=\"leading-icon\">vpn_key</md-icon></md-filled-text-field\n        >\n      </div>\n\n      <md-elevated-button class=\"ui\" type=\"submit\" raised @click=${e => this._onSubmit(e)}>\n        <ox-i18n msgid=\"field.${this.pageName}\"> </ox-i18n>\n      </md-elevated-button>\n    `\n  }\n\n  get links() {\n    const { disableUserSignupProcess, ssoLinks = [] } = this.data || {}\n\n    return html`\n      ${!disableUserSignupProcess\n        ? html`\n            <a class=\"link\" href=\"/auth/signup\">\n              <md-text-button>\n                <md-icon slot=\"icon\">add_task</md-icon>\n                <ox-i18n msgid=\"field.sign up\"></ox-i18n>\n              </md-text-button>\n            </a>\n            <a class=\"link\" href=\"/auth/forgot-password\">\n              <md-text-button>\n                <md-icon slot=\"icon\">lock_open</md-icon>\n                <ox-i18n msgid=\"field.forgot-password\"></ox-i18n>\n              </md-text-button>\n            </a>\n          `\n        : nothing}\n      ${ssoLinks.map(\n        sso => html`\n          <a class=\"link\" href=${sso.link}>\n            <md-text-button>\n              <md-icon slot=\"icon\">badge</md-icon>\n              ${i18next.t('label.signin with', { title: sso.title })}\n            </md-text-button>\n          </a>\n        `\n      )}\n    `\n  }\n\n  async _onSubmit(e) {\n    if (this.checkValidity()) {\n      this.submit()\n    }\n  }\n\n  checkValidity() {\n    return this.formElements.every(el => el.checkValidity())\n  }\n\n  abstract submit()\n\n  showSnackbar({ level, message, timer = 3000 }: { level?: string; message?: string; timer?: number } = {}) {\n    const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {\n      level: string\n      message: string\n      active: boolean\n    }\n\n    if (level) snackbar.level = level\n    if (message) snackbar.message = message\n    snackbar.active = true\n\n    if (timer > -1)\n      setTimeout(() => {\n        this.hideSnackbar()\n      }, timer)\n  }\n\n  hideSnackbar() {\n    const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {\n      level: string\n      message: string\n      active: boolean\n    }\n\n    snackbar.active = false\n  }\n\n  get applicationMeta() {\n    if (!this._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      this._applicationMeta = {\n        icon: iconLink?.href || '',\n        title: titleMeta?.content || 'Things Factory',\n        description: descriptionMeta?.content || 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}
+{"version":3,"file":"abstract-auth-page.js","sourceRoot":"","sources":["../../client/components/abstract-auth-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/textfield/filled-text-field.js'\n\nimport '@operato/lottie-player'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport '@operato/layout/ox-snack-bar.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isSafari } from '@operato/utils'\n\nimport { AUTH_STYLE_SIGN } from '../auth-style-sign.js'\n\nexport abstract class AbstractAuthPage extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        position: relative;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: row;\n\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n      }\n\n      .content {\n        flex: 1;\n        overflow: auto;\n      }\n\n      .home {\n        position: absolute;\n        padding: var(--padding-dufault, 9px);\n        left: 20px;\n        top: 10px;\n        color: var(--md-sys-color-on-primary);\n      }\n\n      div.field {\n        margin-bottom: var(--margin-default);\n      }\n\n      [hidden] {\n        display: none;\n      }\n\n      #snackbar {\n        width: 100%;\n        z-index: 10;\n      }\n\n      @media print {\n        :host {\n          width: 100%;\n          height: 100%;\n          min-height: 100vh;\n          min-height: 100dvh;\n        }\n      }\n    `,\n    AUTH_STYLE_SIGN\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: String }) message?: string\n  @property({ type: Object }) detail: any\n  @property({ type: String }) redirectTo?: string\n\n  @query('#form') formEl!: HTMLFormElement\n\n  private _applicationMeta?: {\n    icon: string\n    title: string\n    description: string\n  }\n\n  get autocompletable() {\n    return false\n  }\n\n  render() {\n    const { disableUserFavoredLanguage, languages } = this.data || {}\n    var { icon, title, description } = this.applicationMeta\n\n    return html`\n      <div class=\"content md-typescale-display-medium\">\n        <div class=\"wrap\">\n          <div class=\"auth-brand\">\n            <img src=${icon} />\n            <strong class=\"name\">${title}</strong>\n            <span class=\"welcome-msg\">${description}</span>\n          </div>\n\n          <div class=\"auth-form\">\n            <h3><ox-i18n msgid=\"title.${this.pageName}\"></ox-i18n></h3>\n\n            <form\n              id=\"form\"\n              action=\"${this.actionUrl}\"\n              method=\"post\"\n              autocomplete=${this.autocompletable ? \"on\": \"off\"}\n              @keypress=${e => {\n                if (e.key == 'Enter') this._onSubmit(e)\n              }}\n            >\n              ${this.formfields}\n            </form>\n            ${this.links}\n            ${!disableUserFavoredLanguage\n              ? html` <div id=\"locale-area\">\n                  <label for=\"locale-selector\"><md-icon>language</md-icon></label>\n                  <ox-i18n-selector\n                    id=\"locale-selector\"\n                    value=${i18next.language || 'en-US'}\n                    .languages=${languages}\n                    @change=${e => {\n                      var locale = e.detail\n                      if (!locale) return\n\n                      i18next.changeLanguage(locale)\n                    }}\n                  ></ox-i18n-selector>\n                </div>`\n              : nothing}\n          </div>\n        </div>\n\n        <md-icon-button class=\"home\" @click=${e => (window.location.href = '/')}\n          ><md-icon>home</md-icon></md-icon-button\n        >\n        <ox-snack-bar id=\"snackbar\" level=\"error\" .message=${this.message}></ox-snack-bar>\n\n        ${isSafari()\n          ? html``\n          : html`\n              <div class=\"lottie-container\">\n                <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n              </div>\n            `}\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    setTimeout(() => {\n      ;(this.renderRoot.querySelector('md-filled-text-field') as any).focus()\n    }, 100)\n\n    this.formEl.reset = () => {\n      this.formElements.filter(el => !(el.hidden || el.type == 'hidden')).forEach(el => (el.value = ''))\n    }\n  }\n\n  updated(changed) {\n    if (changed.has('data') && this.data) {\n      this.message = this.data.message\n      this.redirectTo = this.data.redirectTo\n    }\n  }\n\n  abstract get pageName(): string\n  abstract get actionUrl(): string\n\n  get formElements(): HTMLInputElement[] {\n    return Array.from(this.formEl.querySelectorAll('[name]'))\n  }\n\n  get formfields() {\n    const email = this.data?.email || ''\n    // .validationMessage=${String(i18next.t('text.invalid-email'))}\n\n    return html`\n      <input id=\"redirectTo\" type=\"hidden\" name=\"redirectTo\" .value=${this.redirectTo || '/'} />\n\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"email\"\n          type=\"email\"\n          label=${String(i18next.t('field.email'))}\n          required\n          .value=${email}\n          autocomplete=\"off\"\n          autocapitalize=\"off\"\n          ><md-icon slot=\"leading-icon\">mail</md-icon></md-filled-text-field\n        >\n      </div>\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"password\"\n          type=\"password\"\n          label=${String(i18next.t('field.password'))}\n          autocomplete=\"off\"\n          required\n          ><md-icon slot=\"leading-icon\">vpn_key</md-icon></md-filled-text-field\n        >\n      </div>\n\n      <md-elevated-button class=\"ui\" type=\"submit\" raised @click=${e => this._onSubmit(e)}>\n        <ox-i18n msgid=\"field.${this.pageName}\"> </ox-i18n>\n      </md-elevated-button>\n    `\n  }\n\n  get links() {\n    const { disableUserSignupProcess, ssoLinks = [] } = this.data || {}\n\n    return html`\n      ${!disableUserSignupProcess\n        ? html`\n            <a class=\"link\" href=\"/auth/signup\">\n              <md-text-button>\n                <md-icon slot=\"icon\">add_task</md-icon>\n                <ox-i18n msgid=\"field.sign up\"></ox-i18n>\n              </md-text-button>\n            </a>\n            <a class=\"link\" href=\"/auth/forgot-password\">\n              <md-text-button>\n                <md-icon slot=\"icon\">lock_open</md-icon>\n                <ox-i18n msgid=\"field.forgot-password\"></ox-i18n>\n              </md-text-button>\n            </a>\n          `\n        : nothing}\n      ${ssoLinks.map(\n        sso => html`\n          <a class=\"link\" href=${sso.link}>\n            <md-text-button>\n              <md-icon slot=\"icon\">badge</md-icon>\n              ${i18next.t('label.signin with', { title: sso.title })}\n            </md-text-button>\n          </a>\n        `\n      )}\n    `\n  }\n\n  async _onSubmit(e) {\n    if (this.checkValidity()) {\n      this.submit()\n    }\n  }\n\n  checkValidity() {\n    return this.formElements.every(el => el.checkValidity())\n  }\n\n  abstract submit()\n\n  showSnackbar({ level, message, timer = 3000 }: { level?: string; message?: string; timer?: number } = {}) {\n    const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {\n      level: string\n      message: string\n      active: boolean\n    }\n\n    if (level) snackbar.level = level\n    if (message) snackbar.message = message\n    snackbar.active = true\n\n    if (timer > -1)\n      setTimeout(() => {\n        this.hideSnackbar()\n      }, timer)\n  }\n\n  hideSnackbar() {\n    const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {\n      level: string\n      message: string\n      active: boolean\n    }\n\n    snackbar.active = false\n  }\n\n  get applicationMeta() {\n    if (!this._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      this._applicationMeta = {\n        icon: iconLink?.href || '',\n        title: titleMeta?.content || 'Things Factory',\n        description: descriptionMeta?.content || 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}

package/dist-client/components/abstract-password-reset.js

@@ -51,6 +51,7 @@ export class AbstractPasswordReset extends AbstractAuthPage {
                 .pattern=${this.passwordPattern}
                 helper=${this.passwordHelp}
                 helperPersistent
+                autocomplete="off"
                 @input=${e => {
             var val = e.target.value;
             this.confirmPass.setAttribute('pattern', val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '[$&]'));
@@ -65,6 +66,7 @@ export class AbstractPasswordReset extends AbstractAuthPage {
                 name="confirm-password"
                 type="password"
                 label=${String(i18next.t('field.confirm password'))}
+                autocomplete="off"
                 required
               ></md-filled-text-field>
             </div>

package/dist-client/components/abstract-password-reset.js.map

@@ -1 +1 @@
-{"version":3,"file":"abstract-password-reset.js","sourceRoot":"","sources":["../../client/components/abstract-password-reset.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/textfield/filled-text-field.js'\n\nimport '@operato/lottie-player'\nimport '../components/profile-component'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport '@operato/layout/ox-snack-bar.js'\n\nimport { css, html, nothing } from 'lit'\nimport { property, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { isSafari } from '@operato/utils'\n\nimport { AUTH_STYLE_SIGN } from '../auth-style-sign'\nimport { generatePasswordPatternHelp, generatePasswordPatternRegExp } from '../utils/password-rule'\nimport { AbstractAuthPage } from './abstract-auth-page'\n\nexport abstract class AbstractPasswordReset extends AbstractAuthPage {\n  static styles = [\n    css`\n      :host {\n        position: relative;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: row;\n\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n      }\n\n      @media print {\n        :host {\n          width: 100%;\n          height: 100%;\n          min-height: 100vh;\n          min-height: 100dvh;\n        }\n      }\n    `,\n    AUTH_STYLE_SIGN\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: String }) token?: string\n\n  @query('#confirm-password') confirmPass!: HTMLElement\n\n  private passwordPattern: string = ''\n  private passwordHelp: string = ''\n\n  abstract get submitButtonLabel(): string\n\n  render() {\n    var { icon, title, description } = this.applicationMeta\n    const { disableUserFavoredLanguage, languages } = this.data || {}\n\n    return html`\n      <div class=\"wrap\">\n        <div class=\"auth-brand\">\n          <img src=${icon} />\n          <strong class=\"name\">${title}</strong>\n          <span class=\"welcome-msg\">${description}</span>\n        </div>\n\n        <div class=\"auth-form\">\n          <h3><ox-i18n msgid=\"title.${this.title}\"></ox-i18n></h3>\n          <form\n            id=\"form\"\n            action=\"${this.actionUrl}\"\n            method=\"post\"\n            @keypress=${e => {\n              if (e.key == 'Enter') this._onSubmit(e)\n            }}\n          >\n            <input name=\"token\" type=\"hidden\" .value=${this.token || ''} required />\n            <div class=\"field\">\n              <md-filled-text-field\n                name=\"password\"\n                type=\"password\"\n                label=${String(i18next.t('label.password'))}\n                .pattern=${this.passwordPattern}\n                helper=${this.passwordHelp}\n                helperPersistent\n                @input=${e => {\n                  var val = e.target.value\n                  this.confirmPass.setAttribute('pattern', val.replace(/[-[\\]{}()*+?.,\\\\^$|#\\s]/g, '[$&]'))\n                }}\n                required\n              ></md-filled-text-field>\n            </div>\n\n            <div class=\"field\">\n              <md-filled-text-field\n                id=\"confirm-password\"\n                name=\"confirm-password\"\n                type=\"password\"\n                label=${String(i18next.t('field.confirm password'))}\n                required\n              ></md-filled-text-field>\n            </div>\n\n            <md-elevated-button id=\"submit-button\" type=\"submit\" @click=${e => this._onSubmit(e)}>\n              <ox-i18n msgid=\"${this.submitButtonLabel}\"></ox-i18n>\n            </md-elevated-button>\n\n            ${!disableUserFavoredLanguage\n              ? html` <div id=\"locale-area\">\n                  <label for=\"locale-selector\"><md-icon>language</md-icon></label>\n                  <ox-i18n-selector\n                    id=\"locale-selector\"\n                    value=${i18next.language || 'en-US'}\n                    .languages=${languages}\n                    @change=${e => {\n                      var locale = e.detail\n                      if (!locale) return\n\n                      i18next.changeLanguage(locale)\n                    }}\n                  ></ox-i18n-selector>\n                </div>`\n              : nothing}\n          </form>\n        </div>\n      </div>\n      <ox-snack-bar id=\"snackbar\" level=\"error\" .message=${this.message}></ox-snack-bar>\n\n      ${isSafari()\n        ? html``\n        : html`\n            <div class=\"lottie-container\">\n              <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n            </div>\n          `}\n    `\n  }\n\n  updated(changed) {\n    super.updated(changed)\n    if (changed.has('data')) {\n      this.token = this.data.token\n    }\n\n    if (changed.has('message')) {\n      if (!this.message) {\n        this.hideSnackbar()\n      } else {\n        this.showSnackbar({\n          timer: -1\n        })\n      }\n    }\n  }\n\n  languageUpdated() {\n    this.passwordPattern = generatePasswordPatternRegExp(this.data.passwordRule).source\n    this.passwordHelp = generatePasswordPatternHelp(this.data.passwordRule)\n  }\n\n  async submit() {\n    this.formEl.submit()\n  }\n}\n"]}
+{"version":3,"file":"abstract-password-reset.js","sourceRoot":"","sources":["../../client/components/abstract-password-reset.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/textfield/filled-text-field.js'\n\nimport '@operato/lottie-player'\nimport '../components/profile-component'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport '@operato/layout/ox-snack-bar.js'\n\nimport { css, html, nothing } from 'lit'\nimport { property, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { isSafari } from '@operato/utils'\n\nimport { AUTH_STYLE_SIGN } from '../auth-style-sign'\nimport { generatePasswordPatternHelp, generatePasswordPatternRegExp } from '../utils/password-rule'\nimport { AbstractAuthPage } from './abstract-auth-page'\n\nexport abstract class AbstractPasswordReset extends AbstractAuthPage {\n  static styles = [\n    css`\n      :host {\n        position: relative;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: row;\n\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n      }\n\n      @media print {\n        :host {\n          width: 100%;\n          height: 100%;\n          min-height: 100vh;\n          min-height: 100dvh;\n        }\n      }\n    `,\n    AUTH_STYLE_SIGN\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: String }) token?: string\n\n  @query('#confirm-password') confirmPass!: HTMLElement\n\n  private passwordPattern: string = ''\n  private passwordHelp: string = ''\n\n  abstract get submitButtonLabel(): string\n\n  render() {\n    var { icon, title, description } = this.applicationMeta\n    const { disableUserFavoredLanguage, languages } = this.data || {}\n\n    return html`\n      <div class=\"wrap\">\n        <div class=\"auth-brand\">\n          <img src=${icon} />\n          <strong class=\"name\">${title}</strong>\n          <span class=\"welcome-msg\">${description}</span>\n        </div>\n\n        <div class=\"auth-form\">\n          <h3><ox-i18n msgid=\"title.${this.title}\"></ox-i18n></h3>\n          <form\n            id=\"form\"\n            action=\"${this.actionUrl}\"\n            method=\"post\"\n            @keypress=${e => {\n              if (e.key == 'Enter') this._onSubmit(e)\n            }}\n          >\n            <input name=\"token\" type=\"hidden\" .value=${this.token || ''} required />\n            <div class=\"field\">\n              <md-filled-text-field\n                name=\"password\"\n                type=\"password\"\n                label=${String(i18next.t('label.password'))}\n                .pattern=${this.passwordPattern}\n                helper=${this.passwordHelp}\n                helperPersistent\n                autocomplete=\"off\"\n                @input=${e => {\n                  var val = e.target.value\n                  this.confirmPass.setAttribute('pattern', val.replace(/[-[\\]{}()*+?.,\\\\^$|#\\s]/g, '[$&]'))\n                }}\n                required\n              ></md-filled-text-field>\n            </div>\n\n            <div class=\"field\">\n              <md-filled-text-field\n                id=\"confirm-password\"\n                name=\"confirm-password\"\n                type=\"password\"\n                label=${String(i18next.t('field.confirm password'))}\n                autocomplete=\"off\"\n                required\n              ></md-filled-text-field>\n            </div>\n\n            <md-elevated-button id=\"submit-button\" type=\"submit\" @click=${e => this._onSubmit(e)}>\n              <ox-i18n msgid=\"${this.submitButtonLabel}\"></ox-i18n>\n            </md-elevated-button>\n\n            ${!disableUserFavoredLanguage\n              ? html` <div id=\"locale-area\">\n                  <label for=\"locale-selector\"><md-icon>language</md-icon></label>\n                  <ox-i18n-selector\n                    id=\"locale-selector\"\n                    value=${i18next.language || 'en-US'}\n                    .languages=${languages}\n                    @change=${e => {\n                      var locale = e.detail\n                      if (!locale) return\n\n                      i18next.changeLanguage(locale)\n                    }}\n                  ></ox-i18n-selector>\n                </div>`\n              : nothing}\n          </form>\n        </div>\n      </div>\n      <ox-snack-bar id=\"snackbar\" level=\"error\" .message=${this.message}></ox-snack-bar>\n\n      ${isSafari()\n        ? html``\n        : html`\n            <div class=\"lottie-container\">\n              <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n            </div>\n          `}\n    `\n  }\n\n  updated(changed) {\n    super.updated(changed)\n    if (changed.has('data')) {\n      this.token = this.data.token\n    }\n\n    if (changed.has('message')) {\n      if (!this.message) {\n        this.hideSnackbar()\n      } else {\n        this.showSnackbar({\n          timer: -1\n        })\n      }\n    }\n  }\n\n  languageUpdated() {\n    this.passwordPattern = generatePasswordPatternRegExp(this.data.passwordRule).source\n    this.passwordHelp = generatePasswordPatternHelp(this.data.passwordRule)\n  }\n\n  async submit() {\n    this.formEl.submit()\n  }\n}\n"]}

package/dist-client/components/abstract-sign.d.ts

@@ -4,5 +4,5 @@ export declare abstract class AbstractSign extends AbstractAuthPage {
     submit(): Promise<void>;
     updated(changed: any): void;
     get formfields(): import("lit-html").TemplateResult<1>;
-    signinWithAuthn(): Promise<void>;
+    authenticateUser(): Promise<void>;
 }

package/dist-client/components/abstract-sign.js

@@ -1,6 +1,6 @@
-import { html, nothing } from 'lit';
-import base64url from 'base64url';
 import '@operato/i18n/ox-i18n.js';
+import { html, nothing } from 'lit';
+import { startAuthentication } from '@simplewebauthn/browser';
 import { i18next } from '@operato/i18n';
 import { notify } from '@operato/layout';
 import { AbstractAuthPage } from './abstract-auth-page.js';
@@ -26,6 +26,7 @@ export class AbstractSign extends AbstractAuthPage {
     get formfields() {
         var _a;
         const email = ((_a = this.data) === null || _a === void 0 ? void 0 : _a.email) || '';
+        const autocompletable = this.autocompletable;
         return html `
       <input id="redirectTo" type="hidden" name="redirectTo" .value=${this.redirectTo || '/'} />
 
@@ -36,7 +37,7 @@ export class AbstractSign extends AbstractAuthPage {
           label=${String(i18next.t('field.email'))}
           required
           .value=${email}
-          autocomplete="username"
+          autocomplete=${autocompletable ? "username" : "off"}
           autocapitalize="off"
           @input=${(e) => {
             const target = e.target;
@@ -55,7 +56,7 @@ export class AbstractSign extends AbstractAuthPage {
           name="password"
           type="password"
           label=${String(i18next.t('field.password'))}
-          autocomplete="current-password"
+          autocomplete=${autocompletable ? "current-password" : "off"}
           required
           ><md-icon slot="leading-icon">vpn_key</md-icon></md-filled-text-field
         >
@@ -66,75 +67,41 @@ export class AbstractSign extends AbstractAuthPage {
           <ox-i18n msgid="field.${this.pageName}"> </ox-i18n>
         </md-elevated-button>
         ${isAvailableWebauthn
-            ? html ` <md-icon class="fingerprint" raised @click=${e => this.signinWithAuthn()}> fingerprint </md-icon>`
+            ? html ` <md-icon class="fingerprint" raised @click=${e => this.authenticateUser()}> fingerprint </md-icon>`
             : nothing}
       </div>
     `;
     }
-    async signinWithAuthn() {
-        const response = await fetch('/auth/signin-webauthn/challenge', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                Accept: 'application/json'
-            },
-            credentials: 'include'
-        });
-        if (!response.ok) {
-            notify({
-                level: 'error',
-                message: await response.text()
-            });
-            return;
-        }
-        const options = await response.json();
-        const credential = (await navigator.credentials.get({
-            publicKey: {
-                challenge: Buffer.from(options.challenge, 'base64')
+    async authenticateUser() {
+        try {
+            const options = await fetch('/auth/signin-webauthn/challenge').then(res => res.json());
+            const assertionResp = await startAuthentication(options);
+            const verification = await fetch('/auth/signin-webauthn', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(assertionResp)
+            }).then(res => res.json());
+            if (verification.verified) {
+                const { redirectURL } = verification;
+                if (redirectURL) {
+                    window.location.href = redirectURL;
+                }
             }
-        }));
-        if (!credential) {
-            notify({
-                level: 'error',
-                message: 'can not get user credential'
-            });
-            return;
-        }
-        const assertionResponse = {
-            id: credential.id,
-            response: {
-                clientDataJSON: base64url.encode(Buffer.from(credential.response.clientDataJSON)),
-                authenticatorData: base64url.encode(credential.response.authenticatorData),
-                signature: base64url.encode(credential.response.signature),
-                userHandle: credential.response.userHandle
-                    ? base64url.encode(credential.response.userHandle)
-                    : null
+            else {
+                notify({
+                    level: 'error',
+                    message: verification.message
+                });
             }
-        };
-        if (credential.authenticatorAttachment) {
-            assertionResponse.authenticatorAttachment = credential.authenticatorAttachment;
         }
-        const signinResponse = await fetch('/auth/signin-webauthn', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                Accept: 'application/json'
-            },
-            body: JSON.stringify(assertionResponse),
-            credentials: 'include'
-        });
-        if (!signinResponse.ok) {
+        catch (error) {
             notify({
                 level: 'error',
-                message: await signinResponse.text()
+                message: i18next.t('error.authn verification failed')
             });
         }
-        else {
-            const { redirectURL } = await signinResponse.json();
-            if (redirectURL) {
-                window.location.href = redirectURL;
-            }
-        }
     }
 }
 //# sourceMappingURL=abstract-sign.js.map

package/dist-client/components/abstract-sign.js.map

@@ -1 +1 @@
-{"version":3,"file":"abstract-sign.js","sourceRoot":"","sources":["../../client/components/abstract-sign.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing } from 'lit'\nimport base64url from 'base64url'\n\nimport '@operato/i18n/ox-i18n.js'\n\nimport { i18next } from '@operato/i18n'\nimport { notify } from '@operato/layout'\n\nimport { AbstractAuthPage } from './abstract-auth-page.js'\n\nconst isAvailableWebauthn = 'PublicKeyCredential' in window\n\ninterface AssertionResponse {\n  id: string\n  rawId?: number[]\n  response: {\n    authenticatorData: string\n    clientDataJSON: string\n    signature: string\n    userHandle: string | null\n  }\n  type: PublicKeyCredentialType\n  authenticatorAttachment?: AuthenticatorAttachment\n}\n\nexport abstract class AbstractSign extends AbstractAuthPage {\n  async submit() {\n    this.formEl.submit()\n  }\n\n  updated(changed) {\n    super.updated(changed)\n\n    if (changed.has('message')) {\n      if (!this.message) {\n        this.hideSnackbar()\n      } else {\n        this.showSnackbar({\n          level: 'error',\n          timer: -1\n        })\n      }\n    }\n  }\n\n  get formfields() {\n    const email = this.data?.email || ''\n\n    return html`\n      <input id=\"redirectTo\" type=\"hidden\" name=\"redirectTo\" .value=${this.redirectTo || '/'} />\n\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"email\"\n          type=\"email\"\n          label=${String(i18next.t('field.email'))}\n          required\n          .value=${email}\n          autocomplete=\"username\"\n          autocapitalize=\"off\"\n          @input=${(e: Event) => {\n            const target = e.target as HTMLInputElement\n            if (target.validity.typeMismatch) {\n              target.setCustomValidity(i18next.t('text.invalid-email'))\n            } else {\n              target.setCustomValidity('')\n            }\n          }}\n          ><md-icon slot=\"leading-icon\">mail</md-icon></md-filled-text-field\n        >\n      </div>\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"password\"\n          type=\"password\"\n          label=${String(i18next.t('field.password'))}\n          autocomplete=\"current-password\"\n          required\n          ><md-icon slot=\"leading-icon\">vpn_key</md-icon></md-filled-text-field\n        >\n      </div>\n\n      <div class=\"submit-buttons-container\">\n        <md-elevated-button class=\"submit-button\" type=\"submit\" raised @click=${e => this._onSubmit(e)}>\n          <ox-i18n msgid=\"field.${this.pageName}\"> </ox-i18n>\n        </md-elevated-button>\n        ${isAvailableWebauthn\n          ? html` <md-icon class=\"fingerprint\" raised @click=${e => this.signinWithAuthn()}> fingerprint </md-icon>`\n          : nothing}\n      </div>\n    `\n  }\n\n  async signinWithAuthn() {\n    const response = await fetch('/auth/signin-webauthn/challenge', {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n        Accept: 'application/json'\n      },\n      credentials: 'include'\n    })\n\n    if (!response.ok) {\n      notify({\n        level: 'error',\n        message: await response.text()\n      })\n\n      return\n    }\n\n    const options = await response.json()\n    const credential = (await navigator.credentials.get({\n      publicKey: {\n        challenge: Buffer.from(options.challenge, 'base64')\n      }\n    })) as PublicKeyCredential\n\n    if (!credential) {\n      notify({\n        level: 'error',\n        message: 'can not get user credential'\n      })\n\n      return\n    }\n\n    const assertionResponse = {\n      id: credential.id,\n      response: {\n        clientDataJSON: base64url.encode(Buffer.from(credential.response.clientDataJSON)),\n        authenticatorData: base64url.encode((credential.response as any).authenticatorData),\n        signature: base64url.encode((credential.response as any).signature),\n        userHandle: (credential.response as any).userHandle\n          ? base64url.encode((credential.response as any).userHandle)\n          : null\n      }\n    } as AssertionResponse\n\n    if (credential.authenticatorAttachment) {\n      assertionResponse.authenticatorAttachment = credential.authenticatorAttachment as AuthenticatorAttachment\n    }\n\n    const signinResponse = await fetch('/auth/signin-webauthn', {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n        Accept: 'application/json'\n      },\n      body: JSON.stringify(assertionResponse),\n      credentials: 'include'\n    })\n\n    if (!signinResponse.ok) {\n      notify({\n        level: 'error',\n        message: await signinResponse.text()\n      })\n    } else {\n      const { redirectURL } = await signinResponse.json()\n\n      if (redirectURL) {\n        window.location.href = redirectURL\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"abstract-sign.js","sourceRoot":"","sources":["../../client/components/abstract-sign.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html, nothing } from 'lit'\nimport { startAuthentication } from '@simplewebauthn/browser'\n\nimport { i18next } from '@operato/i18n'\nimport { notify } from '@operato/layout'\n\nimport { AbstractAuthPage } from './abstract-auth-page.js'\n\nconst isAvailableWebauthn = 'PublicKeyCredential' in window\n\ninterface AssertionResponse {\n  id: string\n  rawId?: number[]\n  response: {\n    authenticatorData: string\n    clientDataJSON: string\n    signature: string\n    userHandle: string | null\n  }\n  type: PublicKeyCredentialType\n  authenticatorAttachment?: AuthenticatorAttachment\n}\n\nexport abstract class AbstractSign extends AbstractAuthPage {\n  async submit() {\n    this.formEl.submit()\n  }\n\n  updated(changed) {\n    super.updated(changed)\n\n    if (changed.has('message')) {\n      if (!this.message) {\n        this.hideSnackbar()\n      } else {\n        this.showSnackbar({\n          level: 'error',\n          timer: -1\n        })\n      }\n    }\n  }\n\n  get formfields() {\n    const email = this.data?.email || ''\n    const autocompletable = this.autocompletable\n\n    return html`\n      <input id=\"redirectTo\" type=\"hidden\" name=\"redirectTo\" .value=${this.redirectTo || '/'} />\n\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"email\"\n          type=\"email\"\n          label=${String(i18next.t('field.email'))}\n          required\n          .value=${email}\n          autocomplete=${autocompletable ? \"username\" : \"off\"}\n          autocapitalize=\"off\"\n          @input=${(e: Event) => {\n            const target = e.target as HTMLInputElement\n            if (target.validity.typeMismatch) {\n              target.setCustomValidity(i18next.t('text.invalid-email'))\n            } else {\n              target.setCustomValidity('')\n            }\n          }}\n          ><md-icon slot=\"leading-icon\">mail</md-icon></md-filled-text-field\n        >\n      </div>\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"password\"\n          type=\"password\"\n          label=${String(i18next.t('field.password'))}\n          autocomplete=${autocompletable ? \"current-password\" : \"off\"}\n          required\n          ><md-icon slot=\"leading-icon\">vpn_key</md-icon></md-filled-text-field\n        >\n      </div>\n\n      <div class=\"submit-buttons-container\">\n        <md-elevated-button class=\"submit-button\" type=\"submit\" raised @click=${e => this._onSubmit(e)}>\n          <ox-i18n msgid=\"field.${this.pageName}\"> </ox-i18n>\n        </md-elevated-button>\n        ${isAvailableWebauthn\n          ? html` <md-icon class=\"fingerprint\" raised @click=${e => this.authenticateUser()}> fingerprint </md-icon>`\n          : nothing}\n      </div>\n    `\n  }\n\n  async authenticateUser() {\n    try {\n      const options = await fetch('/auth/signin-webauthn/challenge').then(res => res.json())\n      const assertionResp = await startAuthentication(options)\n      const verification = await fetch('/auth/signin-webauthn', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify(assertionResp)\n      }).then(res => res.json())\n\n      if (verification.verified) {\n        const { redirectURL } = verification\n  \n        if (redirectURL) {\n          window.location.href = redirectURL\n        }\n      } else {\n        notify({\n          level: 'error',\n          message: verification.message\n        })\n      }\n  \n    } catch (error) {\n      notify({\n        level: 'error',\n        message: i18next.t('error.authn verification failed')\n      })\n    }\n  }\n}\n"]}

package/dist-client/components/profile-component.d.ts

@@ -23,7 +23,7 @@ export declare class ProfileComponent extends ProfileComponent_base {
     onLocaleChanged(value: any): Promise<void>;
     openLoginHistory(): void;
     deleteUser(): void;
-    registerWebAuthn(): Promise<void>;
+    registerUser(): Promise<void>;
     get applicationMeta(): {
         icon: string;
         title: string;

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

@@ -4,9 +4,9 @@ import '@operato/i18n/ox-i18n-selector.js';
 import './change-password';
 import './delete-user-popup';
 import './my-login-history';
-import base64url from 'base64url';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
+import { startRegistration } from '@simplewebauthn/browser';
 import { i18next, localize } from '@operato/i18n';
 import { notify, openPopup } from '@operato/layout';
 import { auth, getLanguages } from '@things-factory/auth-base/dist-client';
@@ -63,7 +63,7 @@ let ProfileComponent = class ProfileComponent extends localize(i18next)(LitEleme
 
         ${isAvailableWebauthn
             ? html `
-              <md-text-button @click=${() => this.registerWebAuthn()}
+              <md-text-button @click=${() => this.registerUser()}
                 >${i18next.t('button.security-key registration')}</md-text-button
               >
             `
@@ -133,86 +133,35 @@ let ProfileComponent = class ProfileComponent extends localize(i18next)(LitEleme
             title: i18next.t('label.delete account')
         });
     }
-    async registerWebAuthn() {
-        const challenge = await fetch('/auth/register-webauthn/challenge', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                Accept: 'application/json'
-            },
-            body: JSON.stringify({ id: this.userId }),
-            credentials: 'include'
-        });
-        if (!challenge.ok) {
-            notify({
-                level: 'error',
-                message: await challenge.text()
-            });
-            return;
-        }
-        const options = await challenge.json();
-        const credential = (await navigator.credentials.create({
-            publicKey: {
-                rp: {
-                    name: this.applicationMeta.title
-                },
-                user: {
-                    id: Uint8Array.from(base64url.toBuffer(options.user.id)).buffer,
-                    name: options.user.name,
-                    displayName: options.user.displayName
+    async registerUser() {
+        try {
+            const options = await fetch('/auth/register-webauthn/challenge').then(res => res.json());
+            const attResp = await startRegistration(options);
+            const verification = await fetch('/auth/verify-registration', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
                 },
-                challenge: Uint8Array.from(atob(options.challenge), c => c.charCodeAt(0)),
-                pubKeyCredParams: [
-                    {
-                        type: 'public-key',
-                        alg: -7 // ES256
-                    },
-                    {
-                        type: 'public-key',
-                        alg: -257 // RS256
-                    }
-                ],
-                authenticatorSelection: {
-                    userVerification: 'preferred'
-                }
+                body: JSON.stringify(attResp)
+            }).then(res => res.json());
+            if (verification.verified) {
+                notify({
+                    level: 'info',
+                    message: i18next.t('text.user credential registered successfully')
+                });
             }
-        }));
-        if (!credential) {
-            notify({
-                level: 'error',
-                message: 'can not get user credential'
-            });
-            return;
-        }
-        const response = credential.response;
-        var body = {
-            response: {
-                clientDataJSON: Buffer.from(response.clientDataJSON).toString('base64'),
-                attestationObject: Buffer.from(response.attestationObject).toString('base64')
+            else {
+                console.error(await verification.text());
+                notify({
+                    level: 'error',
+                    message: i18next.t('error.user credential registeration not allowed')
+                });
             }
-        };
-        if (response.getTransports) {
-            body.response.transports = response.getTransports();
         }
-        const signinResponse = await fetch('/auth/signin-webauthn', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                Accept: 'application/json'
-            },
-            body: JSON.stringify(body),
-            credentials: 'include'
-        });
-        if (!signinResponse.ok) {
+        catch (error) {
             notify({
                 level: 'error',
-                message: await signinResponse.text()
-            });
-        }
-        else {
-            notify({
-                level: 'info',
-                message: i18next.t('text.user credential registered successfully')
+                message: i18next.t('error.user credential registeration failed')
             });
         }
     }

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":";AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,mBAAmB,CAAA;AAC1B,OAAO,qBAAqB,CAAA;AAC5B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,SAAS,MAAM,WAAW,CAAA;AACjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAA;AAE1E,MAAM,mBAAmB,GAAG,qBAAqB,IAAI,MAAM,CAAA;AAEpD,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA5D;;QA+FI,cAAS,GAAwC,EAAE,CAAA;IAgP9D,CAAC;IA3OC,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE;YACpC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;QAChC,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QAEnC,IAAI,CAAC,SAAS,GAAG,MAAM,YAAY,EAAE,CAAA;IACvC,CAAC;IAED,aAAa,CAAC,UAAU;QACtB,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,EAAE,CAAA;YAC3B,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,CAAA;YAC3B,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK,CAAA;QAC/B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;YAChB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA;YACd,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;QACjB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;4BAEa,IAAI,CAAC,KAAK,IAAI,EAAE;;;mCAGT,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,IAAI,CAAC,IAAI,IAAI,EAAE;;;;;;;oBAOhF,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC;kBACrC,OAAO,CAAC,QAAQ,IAAI,OAAO;uBACtB,IAAI,CAAC,SAAS;;;;;;;;;;;UAW3B,mBAAmB;YACnB,CAAC,CAAC,IAAI,CAAA;uCACuB,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE;mBACjD,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC;;aAEnD;YACH,CAAC,CAAC,OAAO;;;;cAIL,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC;mDACA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;iBAClE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;KAK5C,CAAA;IACH,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,IAAI;QACtB,IAAI,CAAC,IAAI;YAAE,OAAM;QAEjB,IAAI,OAAO,GAAG,IAAI,CAAC,IAAI,CAAA;QAEvB,IAAI,CAAC;YACH,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC;gBACvC,IAAI;aACL,CAAC,CAAA;YAEF,MAAM,CAAC;gBACL,KAAK,EAAE,MAAM;gBACb,OAAO;aACR,CAAC,CAAA;QACJ,CAAC;QAAC,OAAO,CAAM,EAAE,CAAC;YAChB,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,OAAO,IAAI,EAAE,CAAA;YAEjC,MAAM,CAAC;gBACL,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;aACxC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAED,KAAK,CAAC,eAAe,CAAC,KAAK;QACzB,IAAI,CAAC,KAAK;YAAE,OAAM;QAElB,IAAI,SAAS,GAAG,OAAO,CAAC,QAAQ,CAAA;QAEhC,IAAI,CAAC;YACH,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC;gBACvC,MAAM,EAAE,KAAK;aACd,CAAC,CAAA;YAEF,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;YAE7B,MAAM,CAAC;gBACL,KAAK,EAAE,MAAM;gBACb,OAAO;aACR,CAAC,CAAA;QACJ,CAAC;QAAC,OAAO,CAAM,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,SAAS,CAAA;YAE/B,MAAM,CAAC;gBACL,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;aACxC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,SAAS,CAAC,IAAI,CAAA,yCAAyC,EAAE;YACvD,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;SACxC,CAAC,CAAA;IACJ,CAAC;IAED,UAAU;QACR,SAAS,CAAC,IAAI,CAAA,2CAA2C,EAAE;YACzD,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;SACzC,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,MAAM,SAAS,GAAG,MAAM,KAAK,CAAC,mCAAmC,EAAE;YACjE,MAAM,EAAE,MAAM;YACd,OAAO,EAAE;gBACP,cAAc,EAAE,kBAAkB;gBAClC,MAAM,EAAE,kBAAkB;aAC3B;YACD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;YACzC,WAAW,EAAE,SAAS;SACvB,CAAC,CAAA;QAEF,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC;YAClB,MAAM,CAAC;gBACL,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,MAAM,SAAS,CAAC,IAAI,EAAE;aAChC,CAAC,CAAA;YAEF,OAAM;QACR,CAAC;QAED,MAAM,OAAO,GAAG,MAAM,SAAS,CAAC,IAAI,EAAE,CAAA;QAEtC,MAAM,UAAU,GAAG,CAAC,MAAM,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC;YACrD,SAAS,EAAE;gBACT,EAAE,EAAE;oBACF,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,KAAK;iBACjC;gBACD,IAAI,EAAE;oBACJ,EAAE,EAAE,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;oBAC/D,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;oBACvB,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW;iBACtC;gBACD,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;gBACzE,gBAAgB,EAAE;oBAChB;wBACE,IAAI,EAAE,YAAY;wBAClB,GAAG,EAAE,CAAC,CAAC,CAAC,QAAQ;qBACjB;oBACD;wBACE,IAAI,EAAE,YAAY;wBAClB,GAAG,EAAE,CAAC,GAAG,CAAC,QAAQ;qBACnB;iBACF;gBACD,sBAAsB,EAAE;oBACtB,gBAAgB,EAAE,WAAW;iBAC9B;aACF;SACF,CAAC,CAAwB,CAAA;QAE1B,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,MAAM,CAAC;gBACL,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,6BAA6B;aACvC,CAAC,CAAA;YAEF,OAAM;QACR,CAAC;QAED,MAAM,QAAQ,GAAG,UAAU,CAAC,QAA4C,CAAA;QAExE,IAAI,IAAI,GAAG;YACT,QAAQ,EAAE;gBACR,cAAc,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC;gBACvE,iBAAiB,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC;aACvE;SACT,CAAA;QAED,IAAI,QAAQ,CAAC,aAAa,EAAE,CAAC;YAC3B,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAA;QACrD,CAAC;QAED,MAAM,cAAc,GAAG,MAAM,KAAK,CAAC,uBAAuB,EAAE;YAC1D,MAAM,EAAE,MAAM;YACd,OAAO,EAAE;gBACP,cAAc,EAAE,kBAAkB;gBAClC,MAAM,EAAE,kBAAkB;aAC3B;YACD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAC1B,WAAW,EAAE,SAAS;SACvB,CAAC,CAAA;QAEF,IAAI,CAAC,cAAc,CAAC,EAAE,EAAE,CAAC;YACvB,MAAM,CAAC;gBACL,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,MAAM,cAAc,CAAC,IAAI,EAAE;aACrC,CAAC,CAAA;QACJ,CAAC;aAAM,CAAC;YACN,MAAM,CAAC;gBACL,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,8CAA8C,CAAC;aACnE,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,QAAQ,GAA2B,QAAQ,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAA;QAC7F,IAAI,SAAS,GAA2B,QAAQ,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAA;QAC/F,IAAI,eAAe,GAA2B,QAAQ,CAAC,aAAa,CAAC,sCAAsC,CAAC,CAAA;QAE5G,OAAO;YACL,IAAI,EAAE,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,KAAI,EAAE;YAC1B,KAAK,EAAE,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,KAAI,gBAAgB;YAC7C,WAAW,EAAE,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,OAAO,KAAI,sBAAsB;SAChE,CAAA;IACH,CAAC;;AA7UM,uBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsFF;CACF,AAxFY,CAwFZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAc;AAEhC;IAAR,KAAK,EAAE;;mDAAoD;AAE5C;IAAf,KAAK,CAAC,OAAO,CAAC;8BAAU,gBAAgB;gDAAA;AACvB;IAAjB,KAAK,CAAC,SAAS,CAAC;8BAAY,gBAAgB;kDAAA;AAlGlC,gBAAgB;IAD5B,aAAa,CAAC,mBAAmB,CAAC;GACtB,gBAAgB,CA+U5B","sourcesContent":["import '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport './change-password'\nimport './delete-user-popup'\nimport './my-login-history'\n\nimport base64url from 'base64url'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\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    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      input {\n        margin: var(--margin-narrow) 0;\n        border: 1px solid rgba(0, 0, 0, 0.2);\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      input:focus {\n        border: 1px solid var(--focus-background-color);\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        border: dotted 1px rgba(0, 0, 0, 0.1);\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      ox-i18n-selector {\n        --i18n-selector-field-width: var(--auth-input-field-width);\n        --i18n-selector-field-margin: var(--change-password-field-margin);\n        --i18n-selector-field-padding: var(--padding-default);\n        --i18n-selector-field-border-radius: var(--border-radius);\n        margin: var(--change-password-field-margin);\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 }) userId?: string\n  @property({ type: String }) email?: string\n  @property({ type: String }) name?: string\n\n  @state() languages: { code: string; display: string }[] = []\n\n  @query('#name') nameEl!: HTMLInputElement\n  @query('#locale') localeEl!: HTMLInputElement\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.userId = credential.id\n      this.name = credential.name\n      this.email = credential.email\n    } else {\n      this.userId = ''\n      this.name = ''\n      this.email = ''\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"wrap\">\n        <div class=\"user\">${this.email || ''}</div>\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=\"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\"></change-password>\n\n        ${isAvailableWebauthn\n          ? html`\n              <md-text-button @click=${() => this.registerWebAuthn()}\n                >${i18next.t('button.security-key registration')}</md-text-button\n              >\n            `\n          : nothing}\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 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 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  async registerWebAuthn() {\n    const challenge = await fetch('/auth/register-webauthn/challenge', {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n        Accept: 'application/json'\n      },\n      body: JSON.stringify({ id: this.userId }),\n      credentials: 'include'\n    })\n\n    if (!challenge.ok) {\n      notify({\n        level: 'error',\n        message: await challenge.text()\n      })\n\n      return\n    }\n\n    const options = await challenge.json()\n\n    const credential = (await navigator.credentials.create({\n      publicKey: {\n        rp: {\n          name: this.applicationMeta.title\n        },\n        user: {\n          id: Uint8Array.from(base64url.toBuffer(options.user.id)).buffer,\n          name: options.user.name,\n          displayName: options.user.displayName\n        },\n        challenge: Uint8Array.from(atob(options.challenge), c => c.charCodeAt(0)),\n        pubKeyCredParams: [\n          {\n            type: 'public-key',\n            alg: -7 // ES256\n          },\n          {\n            type: 'public-key',\n            alg: -257 // RS256\n          }\n        ],\n        authenticatorSelection: {\n          userVerification: 'preferred'\n        }\n      }\n    })) as PublicKeyCredential\n\n    if (!credential) {\n      notify({\n        level: 'error',\n        message: 'can not get user credential'\n      })\n\n      return\n    }\n\n    const response = credential.response as AuthenticatorAttestationResponse\n\n    var body = {\n      response: {\n        clientDataJSON: Buffer.from(response.clientDataJSON).toString('base64'),\n        attestationObject: Buffer.from(response.attestationObject).toString('base64')\n      } as any\n    }\n\n    if (response.getTransports) {\n      body.response.transports = response.getTransports()\n    }\n\n    const signinResponse = await fetch('/auth/signin-webauthn', {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n        Accept: 'application/json'\n      },\n      body: JSON.stringify(body),\n      credentials: 'include'\n    })\n\n    if (!signinResponse.ok) {\n      notify({\n        level: 'error',\n        message: await signinResponse.text()\n      })\n    } else {\n      notify({\n        level: 'info',\n        message: i18next.t('text.user credential registered successfully')\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'\nimport './delete-user-popup'\nimport './my-login-history'\n\nimport base64url from 'base64url'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { startRegistration } from '@simplewebauthn/browser'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\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    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      input {\n        margin: var(--margin-narrow) 0;\n        border: 1px solid rgba(0, 0, 0, 0.2);\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      input:focus {\n        border: 1px solid var(--focus-background-color);\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        border: dotted 1px rgba(0, 0, 0, 0.1);\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      ox-i18n-selector {\n        --i18n-selector-field-width: var(--auth-input-field-width);\n        --i18n-selector-field-margin: var(--change-password-field-margin);\n        --i18n-selector-field-padding: var(--padding-default);\n        --i18n-selector-field-border-radius: var(--border-radius);\n        margin: var(--change-password-field-margin);\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 }) userId?: string\n  @property({ type: String }) email?: string\n  @property({ type: String }) name?: string\n\n  @state() languages: { code: string; display: string }[] = []\n\n  @query('#name') nameEl!: HTMLInputElement\n  @query('#locale') localeEl!: HTMLInputElement\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.userId = credential.id\n      this.name = credential.name\n      this.email = credential.email\n    } else {\n      this.userId = ''\n      this.name = ''\n      this.email = ''\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"wrap\">\n        <div class=\"user\">${this.email || ''}</div>\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=\"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\"></change-password>\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        <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 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 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  async registerUser() {\n    try {\n      const options = await fetch('/auth/register-webauthn/challenge').then(res => res.json())\n      const attResp = await startRegistration(options)\n      const verification = await fetch('/auth/verify-registration', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify(attResp)\n      }).then(res => res.json())\n\n      if (verification.verified) {\n        notify({\n          level: 'info',\n          message: i18next.t('text.user credential registered successfully')\n        })\n      } else {\n        console.error(await verification.text())\n\n        notify({\n          level: 'error',\n          message: i18next.t('error.user credential registeration not allowed')\n        })\n      }\n    } catch (error) {\n      notify({\n        level: 'error',\n        message: i18next.t('error.user credential registeration 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"]}

package/dist-client/components/user-role-editor.js

@@ -13,6 +13,7 @@ import { openPopup } from '@operato/layout';
 import { store } from '@operato/shell';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { ButtonContainerStyles } from '@operato/styles';
+import { InheritedValueType } from '@operato/data-grist';
 let UserRoleEditor = class UserRoleEditor extends connect(store)(LitElement) {
     constructor() {
         super(...arguments);
@@ -184,8 +185,8 @@ let UserRoleEditor = class UserRoleEditor extends connect(store)(LitElement) {
         var _a;
         const response = await client.query({
             query: gql `
-        query {
-          roles {
+        query roles($inherited: InheritedValueType) {
+          roles(inherited: $inherited) {
             items {
               id
               domain {
@@ -209,6 +210,9 @@ let UserRoleEditor = class UserRoleEditor extends connect(store)(LitElement) {
           }
         }
       `,
+            variables: {
+                inherited: InheritedValueType.Include
+            },
             context: gqlContext()
         });
         if (!((_a = response.errors) === null || _a === void 0 ? void 0 : _a.length)) {