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

package/client/entries/auth/result.ts

@@ -1,193 +0,0 @@
-import '@material/web/button/elevated-button.js'
-
-import '@operato/lottie-player'
-import '../../components/profile-component'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next, localize } from '@operato/i18n'
-import { isSafari } from '@operato/utils'
-
-@customElement('auth-result')
-export class AuthResult 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));
-      }
-      :host *:focus {
-        outline: none;
-      }
-      .user {
-        background: url(/assets/images/icon-profile.png) center top no-repeat;
-        margin: var(--profile-icon-margin);
-        padding: 180px 20px 20px 20px;
-        color: var(--md-sys-color-secondary);
-        font: var(--header-bar-title);
-        text-align: center;
-      }
-
-      label {
-        font: bold 14px var(--theme-font);
-        color: var(--md-sys-color-primary);
-      }
-
-      #button-area {
-        border-top: 1px dashed rgba(0, 0, 0, 0.1);
-        padding-top: 10px;
-      }
-
-      md-elevated-button {
-        --md-button-horizontal-padding: var(--spacing-medium);
-        --md-button-ink-color: var(--md-sys-color-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;
-          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 }) message?: string
-  @property({ type: String }) resultType?: string
-
-  private _applicationMeta?: { icon?: string; title?: string; description?: string }
-
-  updated(changed) {
-    if (changed.has('data')) {
-      this.message = this.data.message
-      this.resultType = this.data.resultType || 'congratulations'
-    }
-  }
-
-  render() {
-    var { icon, title, description } = this.applicationMeta
-
-    return html`
-      <div class="wrap ${this.resultType}">
-        <div class="auth-brand">
-          <img src=${icon} />
-          <strong class="name">${title}</strong>
-          <span class="welcome-msg">${description}</span>
-        </div>
-
-        <div id="message-area">
-          <h1>${this.message || ''}</h1>
-
-          <!--description message container-->
-          <p></p>
-        </div>
-        <div id="button-area">
-          <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>
-
-        ${isSafari()
-          ? html``
-          : html`
-              <div class="lottie-container">
-                <lottie-player autoplay loop src="../../assets/images/background-animation.json"></lottie-player>
-              </div>
-            `}
-      </div>
-    `
-  }
-
-  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/signin.ts

@@ -1,18 +0,0 @@
-import { customElement } from 'lit/decorators.js'
-
-import { AbstractSign } from '../../components/abstract-sign'
-
-@customElement('auth-signin')
-export class AuthSignin extends AbstractSign {
-  get pageName() {
-    return 'sign in'
-  }
-
-  get actionUrl() {
-    return '/auth/signin'
-  }
-
-  get autocompletable() {
-    return true
-  }
-}

package/client/entries/auth/signup.ts

@@ -1,115 +0,0 @@
-import '@operato/i18n/ox-i18n.js'
-
-import { html } from 'lit'
-import { customElement, query } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-
-import { AbstractSign } from '../../components/abstract-sign'
-import { generatePasswordPatternHelp, generatePasswordPatternRegExp } from '../../utils/password-rule'
-
-@customElement('auth-signup')
-export class AuthSignup extends AbstractSign {
-  private passwordPattern?: string
-  private passwordHelp?: string
-
-  get pageName() {
-    return 'sign up'
-  }
-
-  get actionUrl() {
-    return '/auth/signup'
-  }
-
-  @query('#confirm-password') confirmPass!: HTMLInputElement
-
-  get formfields() {
-    const { username = '', name = '', email = '' } = this.data || {}
-
-    // .validationMessage=${this.passwordHelp || ''}
-    // .validationMessage=${String(i18next.t('text.passwords do not match'))}
-
-    return html`
-      <div class="field">
-        <md-filled-text-field
-          name="username"
-          type="text"
-          label=${String(i18next.t('field.username'))}
-          .value=${username}
-          required
-          ><md-icon slot="leading-icon">badge</md-icon></md-filled-text-field
-        >
-      </div>
-      <div class="field">
-        <md-filled-text-field name="name" type="text" label=${String(i18next.t('field.name'))} .value=${name} required
-          ><md-icon slot="leading-icon">id_card</md-icon></md-filled-text-field
-        >
-      </div>
-      <div class="field">
-        <md-filled-text-field
-          name="email"
-          type="email"
-          label=${String(i18next.t('field.email'))}
-          required
-          .value=${email}
-          autocapitalize="off"
-          autocomplete="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'))}
-          pattern=${this.passwordPattern || ''}
-          supporting-text=${this.passwordHelp || ''}
-          required
-          autocomplete="off"
-          @input=${e => {
-            var val = e.target.value
-            this.confirmPass.setAttribute('pattern', val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '[$&]'))
-          }}
-        >
-          ><md-icon slot="leading-icon">password</md-icon></md-filled-text-field
-        >
-      </div>
-      <div class="field">
-        <md-filled-text-field
-          id="confirm-password"
-          name="confirm-password"
-          type="password"
-          autocomplete="off"
-          label=${String(i18next.t('field.confirm password'))}
-          required
-        >
-          ><md-icon slot="leading-icon">password</md-icon></md-filled-text-field
-        >
-      </div>
-      <md-elevated-button class="ui button" @click=${e => this._onSubmit(e)}>
-        <ox-i18n msgid="field.${this.pageName}"></ox-i18n>
-      </md-elevated-button>
-    `
-  }
-
-  languageUpdated() {
-    this.passwordPattern = generatePasswordPatternRegExp(this.data.passwordRule).source
-    this.passwordHelp = generatePasswordPatternHelp(this.data.passwordRule)
-  }
-
-  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>
-    `
-  }
-}

package/client/entries/auth/unlock-user.ts

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

package/client/entries/oauth2/oauth2-decision-error-page.ts

@@ -1,50 +0,0 @@
-import '@material/web/button/elevated-button.js'
-
-import { html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-@customElement('oauth2-decision-error')
-class OAuth2DecisionErrorPage extends LitElement {
-  @property({ type: Object }) data: any = {}
-  @property({ type: Object }) user: any = {}
-  @property({ type: Object }) domain: any = {}
-  @property({ type: Object }) req: any = {}
-  @property({ type: String }) redirectURI: string = ''
-  @property({ type: String }) transactionID: string = ''
-
-  render() {
-    return html`
-      <h2>Application Binding Error</h2>
-
-      <p>Hi ${this.user.name}!</p>
-      <p><b>Application Not Found</b></p>
-      <p>You better check you give a correct client id (appKey)</p>
-
-      <p>Company: ${this.domain.subdomain}</p>
-      <p>Application Client ID : ${this.req.clientID}</p>
-      <p>Redirect URI : ${this.redirectURI}</p>
-      <p>State : ${this.req.state}</p>
-
-      <form>
-        <input name="transaction_id" value="${this.transactionID}" hidden />
-        <input name="subdomain" type="text" value="${this.domain.subdomain}" hidden />
-        <input name="appKey" value="${this.req.clientID}" hidden />
-        <input name="scope" value="${this.req.scope}" hidden />
-        <input name="state" type="text" value="${this.req.state}" hidden />
-        <input name="email" type="text" value="${this.user.email}" hidden />
-
-        <md-elevated-button raised @click="${() => history.back()}">Move back</md-elevated-button>
-      </form>
-    `
-  }
-
-  updated(changedProps) {
-    if (changedProps.has('data')) {
-      this.user = this.data?.oauth2?.user || this.user
-      this.domain = this.data?.domain || this.domain
-      this.req = this.data?.oauth2?.req || this.req
-      this.redirectURI = this.data?.oauth2?.redirectURI || this.redirectURI
-      this.transactionID = this.data?.oauth2?.transactionID || this.transactionID
-    }
-  }
-}

package/client/entries/oauth2/oauth2-decision-page.ts

@@ -1,196 +0,0 @@
-import '@material/web/button/elevated-button.js'
-import '../../components/role-selector'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { client } from '@operato/graphql'
-import { i18next } from '@operato/i18n'
-import { OxPrompt } from '@operato/popup/ox-prompt.js'
-import { ButtonContainerStyles } from '@operato/styles'
-
-@customElement('oauth2-decision')
-class OAuth2DecisionPage extends LitElement {
-  static styles = [
-    ButtonContainerStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        border: 1px solid var(--md-sys-color-primary);
-        margin: var(--spacing-medium);
-        padding: var(--spacing-medium);
-        font: normal 15px var(--theme-font);
-        color: var(--md-sys-color-secondary);
-      }
-
-      [field-2column] {
-        border-radius: var(--border-radius);
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 5px 15px;
-        clear: both;
-        max-width: var(--input-container-max-width);
-      }
-
-      [field] {
-        display: flex;
-        flex-direction: column;
-        padding-bottom: var(--spacing-medium);
-      }
-
-      input {
-        border: var(--border-dim-color);
-        border-radius: var(--border-radius);
-        margin: var(--input-margin);
-        padding: var(--input-padding);
-        min-width: 250px;
-        font: var(--input-font);
-      }
-
-      label {
-        display: flex;
-        flex-direction: column;
-        font: var(--label-font);
-        color: var(--label-color, var(--md-sys-color-on-surface));
-        text-transform: var(--label-text-transform);
-      }
-
-      md-elevated-button {
-        margin-right: var(--spacing-small);
-      }
-    `
-  ]
-
-  @property({ type: Object }) data: any = {}
-  @property({ type: Object }) user: any = {}
-  @property({ type: Object }) client: any = {}
-  @property({ type: Object }) domain: any = {}
-  @property({ type: Object }) req: any = {}
-  @property({ type: String }) redirectURI: string = ''
-  @property({ type: String }) transactionID: string = ''
-  @property({ type: Array }) roles: any[] = []
-
-  @query('role-selector') roleSelector!: HTMLElement & { selectedRoles: () => any[] }
-
-  render() {
-    return html`
-      <h2>Application Binding</h2>
-      <p>Hi ${this.user.name}!</p>
-      <p><b> ${this.client.name} </b> is requesting access to your account.</p>
-      <p>Do you approve?</p>
-
-      <form field-2column>
-        <div field>
-          <label
-            >${i18next.t('label.company')}
-            <input readonly value="${this.domain.subdomain}" />
-          </label>
-
-          <label
-            >${i18next.t('label.client-id')}
-            <input readonly value="${this.req.clientID}" />
-          </label>
-        </div>
-
-        <div field>
-          <label
-            >${i18next.t('label.redirect_uri')}
-            <input readonly value="${this.redirectURI}" />
-          </label>
-
-          <label
-            >${i18next.t('label.state')}
-            <input readonly value="${this.req.state}" />
-          </label>
-        </div>
-      </form>
-
-      <role-selector .roleCategory="${this.domain.name}" .roles="${this.roles}"></role-selector>
-
-      <div class="button-container">
-        <md-elevated-button @click="${() => this.decision(true)}" raised label="Allow"></md-elevated-button>
-        <md-elevated-button @click="${() => this.decision(false)}" raised danger label="Deny"></md-elevated-button>
-      </div>
-    `
-  }
-
-  async firstUpdated() {
-    this.fetchMyRoles()
-  }
-
-  updated(changedProps) {
-    if (changedProps.has('data')) {
-      this.user = this.data?.oauth2?.user || this.user
-      this.client = this.data?.oauth2?.client || this.client
-      this.domain = this.data?.domain || this.domain
-      this.req = this.data?.oauth2?.req || this.req
-      this.redirectURI = this.data?.oauth2?.redirectURI || this.redirectURI
-      this.transactionID = this.data?.oauth2?.transactionID || this.transactionID
-    }
-  }
-
-  async fetchMyRoles() {
-    const response = await client.query({
-      query: gql`
-        query myRoles {
-          myRoles {
-            id
-            name
-            description
-          }
-        }
-      `
-    })
-
-    if (!response.errors?.length) {
-      this.roles = response.data.myRoles
-    }
-  }
-
-  async decision(allowOrCancel) {
-    const selectedRoles = this.selectedRoles()
-    if (allowOrCancel && !selectedRoles?.length) {
-      await OxPrompt.open({
-        title: i18next.t('title.nothing selected'),
-        text: i18next.t('text.should select at least one of x', { x: i18next.t('label.role') }),
-        confirmButton: { text: i18next.t('button.confirm') }
-      })
-
-      return
-    }
-
-    let data: any = {
-      transaction_id: this.transactionID,
-      subdomain: this.domain.subdomain,
-      appKey: this.req.clientID,
-      state: this.req.state,
-      email: this.user.email,
-      scopes: selectedRoles
-    }
-    if (!allowOrCancel) {
-      data.cancel = 'Deny'
-    }
-
-    const response = await fetch('/oauth/decision', {
-      method: 'POST',
-      mode: 'cors',
-      credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      redirect: 'follow',
-      body: JSON.stringify(data)
-    })
-
-    if (response.redirected) {
-      location.href = response.url
-    }
-  }
-
-  selectedRoles() {
-    return this.roleSelector.selectedRoles()
-  }
-}