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

package/client/entries/auth/activate.ts

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

@@ -0,0 +1,190 @@
+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 {
+        background-color: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-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

@@ -0,0 +1,103 @@
+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-filled-text-field>
+      </div>
+      <md-elevated-button id="submit-button" class="ui button" type="submit" @click=${e => this._onSubmit(e)}>
+        <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

@@ -0,0 +1,22 @@
+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'
+  }
+}