@things-factory/auth-ui 8.0.0 → 9.0.0-beta.3

package/client/components/abstract-auth-page.ts

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

package/client/components/abstract-password-reset.ts

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

package/client/components/abstract-sign.ts

@@ -1,127 +0,0 @@
-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'
-
-const isAvailableWebauthn = 'PublicKeyCredential' in window
-
-interface AssertionResponse {
-  id: string
-  rawId?: number[]
-  response: {
-    authenticatorData: string
-    clientDataJSON: string
-    signature: string
-    userHandle: string | null
-  }
-  type: PublicKeyCredentialType
-  authenticatorAttachment?: AuthenticatorAttachment
-}
-
-export abstract class AbstractSign extends AbstractAuthPage {
-  async submit() {
-    this.formEl.submit()
-  }
-
-  updated(changed) {
-    super.updated(changed)
-
-    if (changed.has('message')) {
-      if (!this.message) {
-        this.hideSnackbar()
-      } else {
-        this.showSnackbar({
-          level: 'error',
-          timer: -1
-        })
-      }
-    }
-  }
-
-  get formfields() {
-    const email = this.data?.email || ''
-    const autocompletable = this.autocompletable
-
-    return html`
-      <input id="redirectTo" type="hidden" name="redirectTo" .value=${this.redirectTo || '/'} />
-
-      <div class="field">
-        <md-filled-text-field
-          name="email"
-          type="email"
-          label=${String(i18next.t('field.email'))}
-          required
-          .value=${email}
-          autocomplete=${autocompletable ? "username" : "off"}
-          autocapitalize="off"
-          @input=${(e: Event) => {
-            const target = e.target as HTMLInputElement
-            if (target.validity.typeMismatch) {
-              target.setCustomValidity(i18next.t('text.invalid-email'))
-            } else {
-              target.setCustomValidity('')
-            }
-          }}
-          ><md-icon slot="leading-icon">mail</md-icon></md-filled-text-field
-        >
-      </div>
-      <div class="field">
-        <md-filled-text-field
-          name="password"
-          type="password"
-          label=${String(i18next.t('field.password'))}
-          autocomplete=${autocompletable ? "current-password" : "off"}
-          required
-          ><md-icon slot="leading-icon">vpn_key</md-icon></md-filled-text-field
-        >
-      </div>
-
-      <div class="submit-buttons-container">
-        <md-elevated-button class="submit-button" type="submit" raised @click=${e => this._onSubmit(e)}>
-          <ox-i18n msgid="field.${this.pageName}"> </ox-i18n>
-        </md-elevated-button>
-        ${isAvailableWebauthn
-          ? html` <md-icon class="fingerprint" raised @click=${e => this.authenticateUser()}> fingerprint </md-icon>`
-          : nothing}
-      </div>
-    `
-  }
-
-  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
-        }
-      } else {
-        notify({
-          level: 'error',
-          message: verification.message
-        })
-      }
-  
-    } catch (error) {
-      notify({
-        level: 'error',
-        message: i18next.t('error.authn verification failed')
-      })
-    }
-  }
-}