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

package/client/entries/auth/activate.ts

@@ -1,272 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@material/web/button/elevated-button.js'
-
-import '@operato/i18n/ox-i18n.js'
-import '@operato/layout/ox-snack-bar.js'
-import '@operato/lottie-player'
-import '../../components/contact-us'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { i18next, localize } from '@operato/i18n'
-
-@customElement('auth-activate')
-export class AuthActivate extends localize(i18next)(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        width: 100vw;
-        height: 100vh;
-        height: 100dvh;
-        background-color: var(--md-sys-color-primary);
-        color: var(--md-sys-color-on-primary);
-      }
-
-      .wrap {
-        display: block;
-        width: 450px;
-        min-width: 350px;
-        margin: 0 auto;
-        text-align: center;
-      }
-
-      .auth-brand {
-        color: #fff;
-      }
-
-      .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);
-      }
-
-      h1 {
-        margin: 50px 0 0 0;
-        padding: 0;
-        font-size: 24px;
-        color: var(--auth-title-color, var(--md-sys-color-on-primary));
-      }
-
-      p {
-        margin: 0;
-        padding: var(--auth-description-padding);
-        font: var(--auth-description-font);
-        color: var(--auth-description-color, var(--md-sys-color-on-secondary));
-      }
-
-      #button-area {
-        border-top: 1px dashed #ccc;
-        padding-top: 10px;
-      }
-
-      md-elevated-button {
-        --md-elevated-button-horizontal-padding: var(--spacing-medium);
-        --md-elevated-button-ink-color: var(--md-sys-color-primary);
-      }
-
-      contact-us {
-        display: flex;
-        padding: 50px;
-        flex-direction: column;
-      }
-
-      .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;
-          padding-bottom: 100px;
-        }
-
-        .auth-form {
-          grid-template-columns: 1fr;
-        }
-
-        .auth-brand img {
-          margin: 12% auto 5px auto;
-          width: 75px;
-        }
-
-        .lottie-container {
-          overflow: hidden;
-          height: 200px;
-          pointer-events: none;
-        }
-
-        .lottie-container lottie-player {
-          width: 1200px;
-          left: -30%;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Object }) data: any
-  @property({ type: String }) email?: string | null
-
-  @query('#form') form!: HTMLFormElement
-
-  private _applicationMeta?: { icon?: string; title?: string; description?: string }
-
-  render() {
-    var { icon, title, description } = this.applicationMeta
-
-    return html`
-      <div class="wrap">
-        <div class="auth-brand">
-          <img src=${icon} />
-          <strong class="name">${title}</strong>
-          <span class="welcome-msg">${description}</span>
-        </div>
-
-        <h1><ox-i18n msgid="text.your account is not activated"></ox-i18n></h1>
-
-        <!--description message container-->
-        <p></p>
-
-        <form
-          id="form"
-          action="/auth/resend-verification-email"
-          method="POST"
-          @submit=${e => {
-            this.requestResend(e)
-          }}
-          hidden
-        >
-          <input name="email" type="hidden" .value=${this.email || ''} required />
-          <button id="submit-button" type="submit"><ox-i18n msgid="label.change password"></ox-i18n></button>
-        </form>
-
-        <div id="button-area">
-          <md-elevated-button @click=${e => this.requestResend(e)}>
-            <md-icon slot="icon">mail_outline</md-icon>
-            ${i18next.t('label.send activation email')}
-          </md-elevated-button>
-          <md-elevated-button
-            @click=${e => {
-              window.location.replace('/auth/signin')
-            }}
-          >
-            <md-icon slot="icon">home</md-icon>
-            ${i18next.t('button.go to home')}
-          </md-elevated-button>
-        </div>
-        <contact-us></contact-us>
-
-        <!--lottie animation begin-->
-        <div class="lottie-container">
-          <lottie-player autoplay loop src="../../assets/images/background-animation.json"></lottie-player>
-        </div>
-        <!--lottie animation end-->
-      </div>
-
-      <ox-snack-bar id="snackbar"></ox-snack-bar>
-    `
-  }
-
-  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 ? titleMeta.content : 'Things Factory',
-        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'
-      }
-    }
-
-    return this._applicationMeta
-  }
-
-  firstUpdated() {
-    var searchParams = new URLSearchParams(window.location.search)
-    this.email = searchParams.get('email')
-  }
-
-  updated(changed) {
-    if (changed.has('data')) {
-      this.email = this.data?.email
-    }
-  }
-
-  async requestResend(e) {
-    var timer
-    var formData = new FormData(this.form)
-    var button = e.target
-    try {
-      var controller = new AbortController()
-      var signal = controller.signal
-
-      button.disabled = true
-      timer = setTimeout(() => {
-        controller.abort()
-        throw new Error('timeout')
-      }, 30 * 1000)
-
-      var response = await fetch('/auth/resend-verification-email', {
-        credentials: 'include',
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(Object.fromEntries(formData.entries())),
-        signal
-      })
-
-      if (response) {
-        this.showSnackbar({
-          level: response.ok ? 'info' : 'error',
-          message: await response.text()
-        })
-      }
-    } catch (e) {
-    } finally {
-      button.disabled = false
-      clearTimeout(timer)
-    }
-  }
-
-  showSnackbar({ level, message, timer = 3000 }: { level: 'info' | 'error'; message: string; timer?: number }) {
-    const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {
-      level: 'info' | 'error'
-      message: string
-      active: boolean
-    }
-
-    snackbar.level = level
-    snackbar.message = message
-    snackbar.active = true
-
-    if (timer > -1)
-      setTimeout(() => {
-        snackbar.active = false
-      }, timer)
-  }
-}

package/client/entries/auth/checkin.ts

@@ -1,190 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@material/web/button/elevated-button.js'
-
-import '@operato/lottie-player'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } 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'
-
-@customElement('auth-checkin')
-export class AuthCheckIn extends localize(i18next)(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        margin: auto;
-        background-color: var(--md-sys-color-primary);
-        color: var(--md-sys-color-on-primary);
-        height: 100vh;
-        height: 100dvh;
-      }
-
-      .header {
-        background-color: var(--md-sys-color-primary);
-        color: var(--md-sys-color-on-primary);
-        height: var(--checkin-header-height);
-      }
-
-      .content {
-        flex: 1;
-        overflow: auto;
-      }
-
-      .domains {
-        margin: var(--spacing-large) 0;
-        padding: 0;
-        background-color: var(--md-sys-color-surface);
-        color: var(--md-sys-color-on-surface);
-        border-radius: var(--border-radius);
-        border: var(--border-dim-color);
-        list-style: none;
-      }
-
-      li {
-        border-bottom: var(--border-dim-color);
-        padding: var(--spacing-medium) var(--spacing-large);
-        font-size: 18px;
-        text-align: left;
-
-        cursor: pointer;
-      }
-
-      li:hover {
-        color: var(--md-sys-color-on-primary-container);
-        background-color: var(--md-sys-color-primary-container);
-      }
-
-      li span {
-        display: block;
-        font: normal var(--fontsize-default) var(--theme-font);
-      }
-
-      li md-icon {
-        float: right;
-        margin: 10px 0 0 0;
-        opacity: 0.5;
-      }
-
-      .button-container {
-        text-align: center;
-      }
-
-      .button-container md-elevated-button {
-        margin-left: var(--spacing-small);
-      }
-
-      @media (max-width: 450px) {
-        .button-container md-elevated-button {
-          width: 100%;
-          margin: var(--spacing-medium) 0 0 0;
-        }
-      }
-    `,
-    AUTH_STYLE_SIGN
-  ]
-
-  @property({ type: Object }) data: any
-  @property({ type: Array }) domains: any[] = []
-  @property({ type: String }) domainType?: string
-  @property({ type: Object }) user: any
-
-  private _applicationMeta?: { icon?: string; title?: string; description?: string }
-  private redirectTo?: string
-
-  render() {
-    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>
-
-          <h3>${i18next.t('label.select_domain')}</h3>
-
-          ${this.domains?.length
-            ? html`
-                <ul class="domains">
-                  ${this.domains.map(
-                    domain => html`
-                      <li
-                        @click=${() =>
-                          (location.href = `/auth/checkin/${domain.subdomain}?redirect_to=${encodeURIComponent(this.redirectTo || '/')}`)}
-                      >
-                        <md-icon>keyboard_arrow_right</md-icon>
-                        <strong>${domain.name}</strong>
-                        <span>${domain.description}&nbsp;</span>
-                      </li>
-                    `
-                  )}
-                </ul>
-              `
-            : html` <h3>${i18next.t('text.no domain available')}</h3> `}
-
-          <div class="button-container">
-            <md-elevated-button @click=${() => (location.pathname = '/auth/signout')}
-              >${String(i18next.t('button.logout'))}</md-elevated-button
-            >
-
-            ${this.domainType?.toLowerCase() === 'company'
-              ? html`<md-elevated-button
-                  @click=${e => (location.href = `/public/business-register?email=${this.user?.email}`)}
-                  >${String(i18next.t('button.register business domain'))}</md-elevated-button
-                > `
-              : ''}
-          </div>
-
-          ${isSafari()
-            ? html``
-            : html`
-                <div class="lottie-container">
-                  <lottie-player autoplay loop src="../../assets/images/background-animation.json"></lottie-player>
-                </div>
-              `}
-        </div>
-      </div>
-    `
-  }
-
-  updated(changed) {
-    if (changed.has('data')) {
-      this.domains = this.data.domains
-      this.user = this.data.user
-      this.domainType = this.data.domainType
-      this.redirectTo = this.data.redirectTo
-
-      this.requestUpdate()
-    }
-  }
-
-  navigateToUrl(url) {
-    location.pathname = url
-  }
-
-  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 ? titleMeta.content : 'Things Factory',
-        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'
-      }
-    }
-
-    return this._applicationMeta
-  }
-}

package/client/entries/auth/forgot-password.ts

@@ -1,112 +0,0 @@
-import '@material/web/button/elevated-button.js'
-import '@material/web/button/text-button.js'
-
-import '@operato/i18n/ox-i18n.js'
-import '../../components/profile-component'
-
-import { html } from 'lit'
-import { customElement, query } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-
-import { AbstractAuthPage } from '../../components/abstract-auth-page'
-
-@customElement('forgot-password')
-export class ForgotPassword extends AbstractAuthPage {
-  @query('#email') emailInput!: HTMLInputElement
-  @query('#submit-button') button!: HTMLInputElement
-
-  get pageName() {
-    return 'forgot password'
-  }
-
-  get actionUrl() {
-    return '/auth/forgot-password'
-  }
-
-  get formfields() {
-    const email = this.data?.email || ''
-
-    return html`
-      <div class="field">
-        <md-filled-text-field
-          name="email"
-          type="email"
-          label=${String(i18next.t('label.email'))}
-          .value=${email}
-          required
-          @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>
-      <md-elevated-button
-        id="submit-button"
-        class="ui button"
-        type="button"
-        @click=${e => {
-          this._onSubmit(e)
-          return false
-        }}
-      >
-        <ox-i18n msgid="button.submit"></ox-i18n>
-      </md-elevated-button>
-    `
-  }
-
-  get links() {
-    return html`
-      <a class="link" href="/auth/signin">
-        <md-text-button><ox-i18n msgid="field.sign in"></ox-i18n></md-text-button>
-      </a>
-    `
-  }
-
-  async submit() {
-    var timer
-    var formData = new FormData(this.formEl)
-
-    try {
-      var controller = new AbortController()
-      var signal = controller.signal
-
-      this.button.disabled = true
-      timer = setTimeout(() => {
-        controller.abort()
-        throw new Error('timeout')
-      }, 30 * 1000)
-
-      var response = await fetch('/auth/forgot-password', {
-        credentials: 'include',
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(Object.fromEntries(formData.entries())),
-        signal
-      })
-
-      this.showSnackbar({
-        message: await response.text(),
-        level: response.ok ? 'info' : 'error'
-      })
-    } catch (e) {
-    } finally {
-      this.button.disabled = false
-      clearTimeout(timer)
-    }
-  }
-
-  showSnackbar({ message, level }) {
-    super.showSnackbar({
-      level,
-      message
-    })
-  }
-}

package/client/entries/auth/reset-password.ts

@@ -1,22 +0,0 @@
-import { customElement } from 'lit/decorators.js'
-
-import { AbstractPasswordReset } from '../../components/abstract-password-reset'
-
-@customElement('reset-password')
-export class ResetPassword extends AbstractPasswordReset {
-  get pageName() {
-    return 'reset password'
-  }
-
-  get actionUrl() {
-    return '/auth/reset-password'
-  }
-
-  get submitButtonLabel() {
-    return 'label.change password'
-  }
-
-  get title() {
-    return 'reset password'
-  }
-}