@things-factory/auth-ui 8.0.0 → 9.0.0-beta.3

package/client/components/delete-user-popup.ts

@@ -1,117 +0,0 @@
-import '@operato/i18n/ox-i18n.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { i18next, localize } from '@operato/i18n'
-import { notify } from '@operato/layout'
-import { auth } from '@things-factory/auth-base/dist-client/auth.js'
-
-@customElement('delete-user-popup')
-export class DeleteUserPopup extends localize(i18next)(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        color: var(--popup-content-color);
-        background-color: var(--popup-content-background-color);
-        padding: var(--popup-content-padding);
-      }
-
-      * {
-        box-sizing: border-box;
-      }
-      *:focus {
-        outline: none;
-      }
-
-      label {
-        font: bold 14px var(--theme-font);
-        color: var(--md-sys-color-primary);
-      }
-
-      input {
-        border: var(--change-password-field-border);
-        border-radius: var(--change-password-field-border-radius);
-        padding: var(--change-password-field-padding);
-
-        font: var(--change-password-field-font);
-        width: var(--change-password-field-width);
-      }
-      input:focus {
-        border: 1px solid var(--focus-background-color);
-      }
-
-      div.field {
-        padding-bottom: 10px;
-      }
-
-      ::placeholder {
-        font-size: 0.8rem;
-        text-transform: capitalize;
-      }
-
-      button {
-        background-color: var(--status-danger-color, #d14946);
-        margin: 2px 2px 10px 2px;
-        height: var(--button-height, 28px);
-        color: var(--button-color, #fff);
-        font: var(--button-font);
-        border-radius: var(--button-radius, 5px);
-        border: var(--button-border, 1px solid transparent);
-        line-height: 1.5;
-      }
-      button:hover,
-      button:active {
-        background-color: var(--button-active-background-color, #22a6a7);
-        border: var(--button-active-border);
-      }
-    `
-  ]
-
-  render() {
-    return html`
-      <h1><ox-i18n msgid="label.delete account"></ox-i18n></h1>
-      <span><ox-i18n msgid="text.delete account warning message"></ox-i18n></span>
-      <form @submit=${e => this.submit(e)}>
-        <div class="field">
-          <label for="email"><ox-i18n msgid="label.email"></ox-i18n></label>
-          <input id="email" type="email" name="email" autocapitalize="off" required />
-          <label for="password"><ox-i18n msgid="label.password"></ox-i18n></label>
-          <input id="password" type="password" name="password" required />
-        </div>
-
-        <button class="ui button" type="submit"><ox-i18n msgid="label.delete account"></ox-i18n></button>
-      </form>
-    `
-  }
-
-  async submit(e: Event) {
-    e.preventDefault()
-
-    const form = e.target as HTMLFormElement
-
-    var params = {}
-    new FormData(form).forEach((value, key) => {
-      params[key] = value
-    })
-
-    try {
-      const message = await auth.deleteUser(params)
-      notify({
-        level: 'info',
-        message
-      })
-
-      auth.signout()
-    } catch (e: any) {
-      form.reset()
-
-      notify({
-        level: 'error',
-        message: 'message' in e ? e.message : e
-      })
-    }
-  }
-}

package/client/components/domain-switch.ts

@@ -1,127 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin'
-
-import { store } from '@operato/shell'
-import { ScrollbarStyles } from '@operato/styles'
-
-@customElement('domain-switch')
-export class DomainSwitch extends connect(store)(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        max-width: 100%;
-        background-color: var(--md-sys-color-primary-container, rgb(215 231 241));
-        border-bottom: var(--border-dim-color);
-      }
-
-      :host * {
-        vertical-align: middle;
-      }
-
-      div {
-        flex: 1;
-        display: flex;
-        flex-direction: row;
-        padding: var(--spacing-small);
-      }
-
-      md-icon {
-        background-color: var(--md-sys-color-primary, rgb(46 121 190));
-        margin-right: var(--spacing-small);
-        padding: 2px;
-        border-radius: 50%;
-        font-size: var(--fontsize-large);
-        color: var(--md-sys-color-on-primary, rgba(255,255,255,.9));
-      }
-      span,
-      select {
-        flex: 1;
-        color: var(--md-sys-color-on-primary-container, rgb(50 66 82));
-        font: bold 14px/20px var(--theme-font);
-      }
-
-      select {
-        border: none;
-        background-color: transparent;
-      }
-
-      select:focus {
-        outline: 0;
-      }
-      :host([dark]) {
-        background-color: rgba(0, 0, 0, 0.2);
-        padding: 0 !important;
-        border-bottom: none;
-      }
-      :host([dark]) md-icon {
-        background-color: var(--secondary-text-color);
-        margin: 1px 4px 0px 0px;
-        padding: 1px 2px;
-        border-radius: 50%;
-        line-height: 19px;
-      }
-      :host([dark]) span,
-      :host([dark]) select {
-        color: var(--md-sys-color-on-primary);
-        font: bold 13px/13px var(--theme-font);
-      }
-      :host([dark]) option {
-        background-color: var(--primary-color, #585858);
-        color: var(--md-sys-color-on-primary, #fff);
-      }
-      :host([dark]) span {
-        line-height: 23px;
-      }
-
-      :host([rounded-corner]) {
-        height: 30px;
-        border-radius: 20px;
-        border: var(--border-dim-color);
-      }
-      :host([rounded-corner]) div {
-        padding: var(--spacing-small) var(--spacing-medium);
-      }
-    `
-  ]
-
-  @property({ type: Array }) domains: any[] = []
-  @property({ type: Object }) domain: any
-  @property({ type: String, attribute: true }) attrname: string = 'name'
-  @property({ type: String, attribute: true }) icon?: string
-
-  render() {
-    const domains = this.domains || []
-    const domain = this.domain || {}
-    const attrname = this.attrname || 'name'
-
-    return html`
-      <div>
-        ${this.icon ? html`<md-icon>${this.icon}</md-icon>` : nothing}
-        ${domains.length <= 1
-          ? html` <span>${domains[0]?.[attrname] || domain.name}</span> `
-          : html`
-              <select
-                .value=${domain.subdomain}
-                @change=${e => (window.location.pathname = `/auth/checkin/${e.target.value}`)}
-              >
-                ${domains.map(
-                  d => html`
-                    <option .value=${d.subdomain} ?selected=${d.subdomain == domain.subdomain}>${d[attrname]}</option>
-                  `
-                )}
-              </select>
-            `}
-      </div>
-    `
-  }
-
-  stateChanged(state) {
-    this.domains = state.app.domains
-    this.domain = state.app.domain
-  }
-}

package/client/components/invite-customer.ts

@@ -1,104 +0,0 @@
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { client, gqlContext } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
-import { OxPrompt } from '@operato/popup/ox-prompt.js'
-
-@customElement('invite-customer')
-class InviteCustomer extends localize(i18next)(LitElement) {
-  static styles = [
-    css`
-      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);
-      }
-      md-outlined-button {
-        margin: var(--input-margin);
-      }
-      @media screen and (max-width: 480px) {
-        div {
-          display: grid;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Array }) customers: any[] = []
-
-  @query('input#customer-name') customerNameInput!: HTMLInputElement
-
-  render() {
-    return html`
-      <div>
-        <input id="customer-name" required />
-        <md-outlined-button @click=${this.invite.bind(this)}>
-          <md-icon slot="icon">group_add</md-icon>
-          ${String(i18next.t('label.invite customer'))}
-        </md-outlined-button>
-      </div>
-    `
-  }
-
-  async invite() {
-    try {
-      if (!this.customerNameInput.value)
-        throw new Error(i18next.t('error.value is empty', { value: i18next.t('field.name') }))
-
-      if (this.customers.find(c => c.name?.toLowerCase() === this.customerNameInput.value.toLowerCase())) {
-        throw new Error(
-          i18next.t('error.x already exists in y', { x: this.customerNameInput.value, y: i18next.t('field.customer') })
-        )
-      }
-
-      if (
-        await OxPrompt.open({
-          title: i18next.t('text.are_you_sure'),
-          text: i18next.t('text.do_you_want_to_invite_x', { x: i18next.t(`label.partner`) }),
-          confirmButton: { text: i18next.t('button.confirm') },
-          cancelButton: { text: i18next.t('button.cancel') }
-        })
-      ) {
-        const customerDomainName = this.customerNameInput.value
-
-        const response = await client.mutate({
-          mutation: gql`
-            mutation inviteCustomer($customerDomainName: String!) {
-              inviteCustomer(customerDomainName: $customerDomainName)
-            }
-          `,
-          variables: { customerDomainName },
-          context: gqlContext()
-        })
-
-        if (!response.errors) {
-          const answer = this.dispatchEvent(new CustomEvent('invitationCompleted'))
-
-          if (answer) {
-            await OxPrompt.open({
-              type: 'success',
-              title: i18next.t('text.completed'),
-              confirmButton: { text: i18next.t('button.confirm') }
-            })
-          }
-
-          this.customerNameInput.value = ''
-        }
-      }
-    } catch (e: any) {
-      document.dispatchEvent(
-        new CustomEvent('notify', {
-          detail: {
-            level: 'error',
-            message: 'message' in e ? e.message : e
-          }
-        })
-      )
-    }
-  }
-}

package/client/components/invite-user.ts

@@ -1,96 +0,0 @@
-import './user-role-editor'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, query } from 'lit/decorators.js'
-
-import { client, gqlContext } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
-import { OxPrompt } from '@operato/popup/ox-prompt.js'
-
-@customElement('invite-user')
-class InviteUser extends localize(i18next)(LitElement) {
-  static styles = css`
-    :host {
-      display: grid;
-    }
-
-    input {
-      flex: 1;
-
-      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);
-    }
-
-    md-outlined-button {
-      margin: var(--input-margin);
-      text-transform: capitalize;
-    }
-  `
-
-  @query('input[name=email]') emailInput!: HTMLInputElement
-
-  render() {
-    return html`
-      <input name="email" type="email" required name="invite-email" autocapitalize="off" />
-      <md-outlined-button @click=${this.invite.bind(this)}>
-        <md-icon slot="icon">group_add</md-icon>${String(i18next.t('label.invite user'))}
-      </md-outlined-button>
-    `
-  }
-
-  async invite() {
-    try {
-      if (!this.emailInput.checkValidity()) {
-        throw new Error(i18next.t('error.not valid pattern of type', { type: 'e-mail' }))
-      }
-
-      if (
-        await OxPrompt.open({
-          title: i18next.t('text.are_you_sure'),
-          text: i18next.t('text.do_you_want_to_invite_x', { x: i18next.t(`label.user`) }),
-          confirmButton: { text: i18next.t('button.confirm') },
-          cancelButton: { text: i18next.t('button.cancel') }
-        })
-      ) {
-        await this.inviteUser(this.emailInput.value)
-
-        this.dispatchEvent(new CustomEvent('invitationCompleted'))
-      }
-    } catch (e: any) {
-      document.dispatchEvent(
-        new CustomEvent('notify', {
-          detail: {
-            level: 'error',
-            message: 'message' in e ? e.message : e
-          }
-        })
-      )
-    }
-  }
-
-  async inviteUser(email) {
-    const response = await client.mutate({
-      mutation: gql`
-        mutation inviteUser($email: EmailAddress!) {
-          inviteUser(email: $email)
-        }
-      `,
-      variables: { email },
-      context: gqlContext()
-    })
-
-    if (!response.errors) {
-      await OxPrompt.open({
-        title: i18next.t('text.completed'),
-        confirmButton: { text: i18next.t('button.confirm') }
-      })
-
-      this.emailInput.value = ''
-    }
-  }
-}

package/client/components/my-login-history.ts

@@ -1,101 +0,0 @@
-import '@operato/data-grist'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { client } from '@operato/graphql'
-import { i18next } from '@operato/i18n'
-import { isMobileDevice } from '@operato/utils'
-
-@customElement('my-login-history')
-class MyLoginHistory extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-      background-color: var(--md-sys-color-background);
-      padding: var(--spacing-large);
-      overflow: auto;
-    }
-    ox-grist {
-      flex: 1;
-    }
-  `
-
-  @property({ type: Array }) histories: any[] = []
-  @property({ type: Number }) limit?: number
-
-  render() {
-    if (!this.histories?.length) return html``
-
-    const config = {
-      rows: { appendable: false },
-      pagination: { infinite: true },
-      columns: [
-        { type: 'gutter', gutterName: 'sequence' },
-        {
-          type: 'object',
-          name: 'accessDomain',
-          header: i18next.t('field.domain'),
-          record: { editable: false },
-          width: 200
-        },
-        {
-          type: 'datetime',
-          name: 'accessedAt',
-          header: i18next.t('field.accessed-at'),
-          record: { editable: false },
-          width: 200
-        },
-        {
-          type: 'string',
-          name: 'accessorIp',
-          header: i18next.t('field.ip_address'),
-          record: { editable: false },
-          width: 200
-        }
-      ]
-    }
-
-    return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${config}
-        .data="${{ records: this.histories }}"
-      ></ox-grist>
-    `
-  }
-
-  firstUpdated() {
-    this.fetchLoginHistories()
-  }
-
-  async fetchLoginHistories() {
-    try {
-      const response = await client.query({
-        query: gql`
-          query myLoginHistories($limit: Float!) {
-            myLoginHistories(limit: $limit) {
-              accessDomain {
-                name
-              }
-              accessorIp
-              accessedAt
-            }
-          }
-        `,
-        variables: { limit: this.limit || 10 }
-      })
-
-      if (response.errors?.length) return
-      this.histories = response.data.myLoginHistories
-    } catch (e: any) {
-      this.showToast('message' in e ? e.message : e)
-    }
-  }
-
-  showToast(message) {
-    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))
-  }
-}

package/client/components/ownership-transfer-popup.ts

@@ -1,110 +0,0 @@
-import '@material/web/button/elevated-button.js'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { client, gqlContext } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
-import { OxPrompt } from '@operato/popup/ox-prompt.js'
-
-@customElement('ownership-transfer-popup')
-class OwnershipTransferPopup extends localize(i18next)(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        background-color: var(--md-sys-color-background);
-        padding: var(--spacing-large);
-        overflow: auto;
-      }
-      .container {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-      }
-      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);
-      }
-      .input-container {
-        margin: auto;
-        display: flex;
-      }
-      .input-container md-elevated-button {
-        margin: auto 0px auto var(--spacing-large);
-      }
-    `
-  ]
-
-  @property({ type: Object }) user: any
-
-  @query('input[name=email]') emailInput!: HTMLInputElement
-
-  render() {
-    return html`
-      <div class="container">
-        <div>${i18next.t('text.please enter the email of the user you want to transfer owner')}</div>
-        <div class="input-container">
-          <input name="email" />
-          <md-elevated-button @click=${this.transferOwnership}>${i18next.t('button.confirm')}</md-elevated-button>
-        </div>
-      </div>
-    `
-  }
-
-  async transferOwnership() {
-    if (!this.doubleCheckEmail()) {
-      this.showToast(i18next.t('text.email is not matched'))
-
-      return
-    }
-
-    if (
-      await OxPrompt.open({
-        title: i18next.t('text.are_you_sure'),
-        text: i18next.t('text.are_you_sure_to_transfer_owner'),
-        confirmButton: { text: i18next.t('button.confirm') },
-        cancelButton: { text: i18next.t('button.cancel') }
-      })
-    ) {
-      const response = await client.mutate({
-        mutation: gql`
-          mutation transferOwner($email: EmailAddress!) {
-            transferOwner(email: $email)
-          }
-        `,
-        variables: { email: this.user.email },
-        context: gqlContext()
-      })
-
-      if (!response.errors?.length) {
-        await OxPrompt.open({
-          type: 'success',
-          title: i18next.t('text.completed'),
-          text: i18next.t('text.owner_transfer_completed'),
-          confirmButton: { text: i18next.t('button.confirm') }
-        })
-
-        history.back()
-
-        this.dispatchEvent(new CustomEvent('ownershipTransferred', { bubbles: true, composed: true }))
-      }
-    } else {
-      history.back()
-    }
-  }
-
-  doubleCheckEmail() {
-    return this.emailInput.value === this.user.email
-  }
-
-  showToast(message) {
-    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
-  }
-}