@things-factory/auth-ui 8.0.0-beta.1 → 8.0.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/auth-ui",
-  "version": "8.0.0-beta.1",
+  "version": "8.0.0-beta.4",
   "main": "dist-server/index.js",
   "browser": "dist-client/index.js",
   "things-factory": true,
@@ -36,10 +36,10 @@
     "@operato/moment-timezone-es": "^8.0.0-beta",
     "@operato/p13n": "^8.0.0-beta",
     "@operato/popup": "^8.0.0-beta",
-    "@things-factory/auth-base": "^8.0.0-beta.1",
-    "@things-factory/more-base": "^8.0.0-beta.1",
+    "@things-factory/auth-base": "^8.0.0-beta.4",
+    "@things-factory/more-base": "^8.0.0-beta.4",
     "base64url": "^3.0.1",
     "clipboard": "^2.0.6"
   },
-  "gitHead": "36c494e587640c1490318ef7b95adab02606e0c2"
+  "gitHead": "d83d12ed4ba07177dff1dac26e37be347d156b43"
 }

package/client/auth-style-sign.ts

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

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

@@ -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 username = this.data?.username || ''
-    // .validationMessage=${String(i18next.t('text.invalid-username'))}
-
-    return html`
-      <input id="redirectTo" type="hidden" name="redirectTo" .value=${this.redirectTo || '/'} />
-
-      <div class="field">
-        <md-filled-text-field
-          name="username"
-          type="text"
-          label=${String(i18next.t('field.user-id or email'))}
-          required
-          .value=${username}
-          autocomplete="off"
-          autocapitalize="off"
-          ><md-icon slot="leading-icon">id_card</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">password</md-icon></md-filled-text-field
-        >
-      </div>
-
-      <md-elevated-button class="ui" type="button" 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">id_card</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
-  }
-}