@things-factory/auth-ui 8.0.0-beta.9 → 8.0.0

package/client/auth-style-sign.ts

@@ -0,0 +1,194 @@
+import { css } from 'lit'
+
+export const AUTH_STYLE_SIGN = css`
+  :host {
+    display: flex;
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+
+    --md-filled-text-field-supporting-text-color: var(--md-sys-color-on-primary);
+  }
+
+  :host *:focus {
+    outline: none;
+  }
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+  .wrap {
+    display: block;
+    width: 450px;
+    min-width: 350px;
+    margin: 0 auto;
+    padding-bottom: 100px;
+    text-align: center;
+  }
+
+  .auth-brand {
+    color: var(--md-sys-color-on-primary);
+  }
+
+  .auth-brand img {
+    margin: 15% auto 5px auto;
+    width: 100px;
+    border: 3px solid var(--md-sys-color-on-primary);
+    border-radius: 25px;
+    box-shadow: var(--box-shadow);
+  }
+  .name {
+    display: block;
+    font: var(--auth-brand-name);
+    text-shadow: var(--auth-brand-name-shadow);
+  }
+  .auth-brand .welcome-msg {
+    font: var(--auth-brand-welcome-msg);
+  }
+  .auth-form {
+    display: grid;
+    grid-gap: var(--spacing-medium);
+    grid-template-columns: 1fr 1fr;
+  }
+
+  form {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: var(--spacing-medium);
+    align-items: center;
+  }
+
+  h3 {
+    grid-column: 1 / -1;
+    margin: 50px 0 0 0;
+    font: var(--auth-title-font);
+    color: var(--auth-title-color, var(--md-sys-color-on-primary));
+    text-transform: uppercase;
+  }
+
+  .field {
+    grid-column: 1 / -1;
+    text-align: left;
+  }
+
+  .submit-buttons-container {
+    grid-column: 1 / -1;
+    text-align: center;
+
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .fingerprint {
+    color: var(--md-sys-color-on-primary);
+    border: 1.5px solid var(--md-sys-color-on-primary);
+    border-radius: 20%;
+    width: 36px;
+    height: 36px;
+  }
+
+  .field md-filled-text-field {
+    grid-column: 1 / -1;
+    width: 100%;
+  }
+
+  md-text-button,
+  md-elevated-button {
+    grid-column: 1 / -1;
+    flex: 1;
+  }
+
+  .wrap .link {
+    text-decoration: none;
+    justify-self: flex-start;
+  }
+
+  .wrap .link md-text-button {
+    --md-text-button-label-text-color: var(--md-sys-color-on-primary);
+    --md-text-button-focus-label-text-color: var(--md-sys-color-on-primary);
+    --md-text-button-hover-label-text-color: var(--md-sys-color-on-primary);
+  }
+
+  .wrap .link md-icon {
+    color: var(--md-sys-color-on-primary);
+  }
+
+  #locale-area {
+    display: flex;
+    grid-column: 1 / -1;
+    padding: 0 var(--spacing-medium);
+  }
+
+  #locale-area > label {
+    display: flex;
+    align-items: center;
+    color: var(--md-sys-color-on-primary);
+    --md-icon-size: 16px;
+  }
+
+  #locale-selector {
+    font-size: 16px;
+    width: 100%;
+  }
+
+  #locale-selector {
+    --i18n-selector-field-border: none;
+    --i18n-selector-field-background-color: none;
+    --i18n-selector-field-font-size: 14px;
+    --i18n-selector-field-color: var(--md-sys-color-on-primary);
+  }
+
+  .lottie-container {
+    width: 100%;
+    height: 300px;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+  .lottie-container lottie-player {
+    position: absolute;
+    bottom: -6%;
+    width: 100%;
+    height: auto;
+  }
+
+  @media (max-width: 450px) {
+    .wrap {
+      width: 85%;
+      min-width: 320px;
+    }
+    .auth-form {
+      grid-template-columns: 1fr;
+    }
+    .auth-brand img {
+      margin: 12% auto 5px auto;
+      width: 75px;
+    }
+    h3 {
+      margin: 15px 0 0 0;
+    }
+    .lottie-container {
+      overflow: hidden;
+      height: 200px;
+      pointer-events: none;
+    }
+    .lottie-container lottie-player {
+      width: 1200px;
+      left: -30%;
+    }
+  }
+
+  @media screen and (min-width: 1400px) {
+    .wrap {
+      padding-bottom: 150px;
+    }
+  }
+  @media screen and (min-width: 2500px) {
+    .wrap {
+      padding-bottom: 280px;
+    }
+  }
+`

package/client/bootstrap.ts

@@ -0,0 +1,51 @@
+import '@material/web/icon/icon.js'
+import '@operato/i18n/ox-i18n.js'
+import '@operato/attribute/grist-editor' /* for register data-grist editor type 'attributes' */
+
+import { html } from 'lit-html'
+
+import { navigate, store } from '@operato/shell'
+import { TOOL_POSITION } from '@operato/layout'
+import { OxGristEditorPrivilege } from '@operato/app/grist-editor/ox-grist-editor-privilege.js'
+import { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer, OxGristRendererJson5 } from '@operato/data-grist'
+
+import { auth } from '@things-factory/auth-base/dist-client/auth.js'
+import { ADD_MORENDA } from '@things-factory/more-base/client'
+
+export default function bootstrap() {
+  registerGristEditor('privilege', OxGristEditorPrivilege)
+  registerGristRenderer('privilege', OxGristRendererJson5)
+
+  /* add user profile morenda */
+  store.dispatch({
+    type: ADD_MORENDA,
+    morenda: {
+      icon: html` <md-icon>account_circle</md-icon> `,
+      name: html` <ox-i18n msgid="text.auth profile"></ox-i18n> `,
+      position: TOOL_POSITION.FRONT_END,
+      action: () => {
+        navigate('profile')
+      }
+    }
+  })
+
+  /* add sign-out morenda */
+  store.dispatch({
+    type: ADD_MORENDA,
+    morenda: {
+      icon: html` <md-icon>exit_to_app</md-icon> `,
+      name: html` <ox-i18n msgid="field.sign out"></ox-i18n> `,
+      position: TOOL_POSITION.FRONT_END,
+      action: () => {
+        auth.signout()
+      }
+    }
+  })
+
+  /* 
+    Get user profile information from server. 
+    As soon as response received, auth.on('profile', ...) handlers start to work.
+    It's very important point to build UI for the user.
+  */
+  auth.profile()
+}

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

@@ -0,0 +1,301 @@
+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

@@ -0,0 +1,168 @@
+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()
+  }
+}