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

package/client/components/invite-user.ts

@@ -1,104 +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=username]') userIdInput!: HTMLInputElement
-
-  render() {
-    return html`
-      <input
-        name="username"
-        type="text"
-        required
-        name="username"
-        autocapitalize="off"
-        placeholder=${String(i18next.t('text.user invitation prompt'))}
-        pattern="^(?:[A-Za-z0-9]*|[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,})$"
-      />
-      <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.userIdInput.checkValidity()) {
-        throw new Error(i18next.t('error.not valid pattern of type', { type: 'user-id or email' }))
-      }
-
-      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.userIdInput.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(username) {
-    const response = await client.mutate({
-      mutation: gql`
-        mutation inviteUser($username: String!) {
-          inviteUser(username: $username)
-        }
-      `,
-      variables: { username },
-      context: gqlContext()
-    })
-
-    if (!response.errors) {
-      await OxPrompt.open({
-        title: i18next.t('text.completed'),
-        confirmButton: { text: i18next.t('button.confirm') }
-      })
-
-      this.userIdInput.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($username: String!) {
-            transferOwner(username: $username)
-          }
-        `,
-        variables: { username: this.user.username || 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 } } }))
-  }
-}

package/client/components/partner-info-card.ts

@@ -1,89 +0,0 @@
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-
-@customElement('partner-info-card')
-export class PartnerInfoCard extends LitElement {
-  static styles = [
-    css`
-      input {
-        border: var(--border-dim-color);
-        border-radius: var(--border-radius);
-        margin: var(--input-margin);
-        padding: var(--input-padding);
-        background-color: transparent;
-        font: var(--input-font);
-
-        flex: 1;
-      }
-      #vendors {
-        display: flex;
-        max-height: 45vh;
-        flex-direction: row;
-        background-color: var(--md-sys-color-surface-variant);
-        margin: 0;
-        padding: 0;
-        border-radius: var(--border-radius);
-        box-shadow: var(--box-shadow);
-        overflow: hidden;
-      }
-      [field-2column] {
-        overflow: auto;
-        flex: 1;
-        background-color: var(--md-sys-color-surface-variant);
-        padding: var(--spacing-medium);
-        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);
-      }
-      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);
-      }
-      @media screen and (max-width: 480px) {
-        [field] {
-          grid-column: span 2;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Object }) partner: any
-
-  render() {
-    const partner = this.partner || {}
-
-    return html`
-      <div id="vendors">
-        <div field-2column>
-          <div field>
-            <label
-              >${i18next.t('label.name')}
-              <input type="text" name="name" readonly .value=${partner.name || ''} />
-            </label>
-          </div>
-
-          <div field>
-            <label
-              >${i18next.t('label.description')}
-              <input type="text" name="description" readonly .value=${partner.description || ''} />
-            </label>
-          </div>
-        </div>
-      </div>
-    `
-  }
-}

package/client/components/partner-role-editor.ts

@@ -1,153 +0,0 @@
-import '@material/web/button/elevated-button.js'
-import './role-selector.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'
-import { ButtonContainerStyles } from '@operato/styles'
-
-import { RoleSelector } from './role-selector'
-
-@customElement('partner-role-editor')
-class PartnerRoleEditor extends localize(i18next)(LitElement) {
-  static styles = [
-    ButtonContainerStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        border: 1px solid var(--md-sys-color-primary);
-        padding: var(--spacing-medium);
-        font: normal 15px var(--theme-font);
-        color: var(--md-sys-color-secondary);
-      }
-
-      md-elevated-button {
-        margin-right: var(--spacing-small);
-      }
-    `
-  ]
-
-  @property({ type: Object }) customer: any
-  @property({ type: Array }) roles: any[] = []
-  @property({ type: Array }) grantingRoles: any[] = []
-
-  @query('role-selector') roleSelector!: RoleSelector
-
-  render() {
-    const roles = this.roles || []
-    const grantingRoles = this.grantingRoles || []
-
-    return html`
-      <role-selector .roles="${roles}" .userRoles="${grantingRoles}"></role-selector>
-
-      <div class="button-container">
-        <md-elevated-button @click=${this.onSave}>${i18next.t('button.save')}</md-elevated-button>
-        <md-elevated-button @click=${this.onTerminateContract} danger
-          >${i18next.t('button.terminate contract')}</md-elevated-button
-        >
-      </div>
-    `
-  }
-
-  updated(changes) {
-    if (changes.has('customer')) {
-      this.refreshRoles()
-    }
-  }
-
-  async refreshRoles() {
-    const response = await client.query({
-      query: gql`
-        query roles($customerId: String!) {
-          roles {
-            items {
-              id
-              name
-              description
-            }
-            total
-          }
-          grantingRoles(customerId: $customerId) {
-            id
-            role {
-              id
-              name
-              description
-            }
-          }
-        }
-      `,
-      variables: { customerId: this.customer.id },
-      context: gqlContext()
-    })
-
-    if (!response.errors?.length) {
-      this.roles = response.data.roles.items
-      this.grantingRoles = response.data.grantingRoles.map(grantingRole => grantingRole.role)
-    } else {
-      this.roles = []
-      this.grantingRoles = []
-    }
-  }
-
-  async onSave() {
-    const roles = this.roleSelector.selectedRoles()
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation grantRoles($customerId: String!, $roles: [RolePatch!]!) {
-          grantRoles(customerId: $customerId, roles: $roles)
-        }
-      `,
-      variables: { customerId: this.customer.id, roles },
-      context: gqlContext()
-    })
-
-    if (!response.errors?.length) {
-      this.showToast(i18next.t('text.data_updated_successfully'))
-    }
-  }
-
-  async onTerminateContract() {
-    if (
-      await OxPrompt.open({
-        title: i18next.t('text.are_you_sure'),
-        text: i18next.t('text.are_you_sure_to_terminate_contract'),
-        confirmButton: { text: i18next.t('button.terminate contract') },
-        cancelButton: { text: i18next.t('button.cancel') }
-      })
-    ) {
-      const response = await client.mutate({
-        mutation: gql`
-          mutation terminateContract($partnerName: String!) {
-            terminateContract(partnerName: $partnerName)
-          }
-        `,
-        variables: { partnerName: this.customer.name },
-        context: gqlContext()
-      })
-
-      if (!response.errors?.length) {
-        const answer = this.dispatchEvent(new CustomEvent('contractTerminated'))
-
-        if (answer) {
-          await OxPrompt.open({
-            type: 'success',
-            title: i18next.t('text.completed'),
-            confirmButton: { text: i18next.t('button.confirm') }
-          })
-        }
-      }
-    }
-  }
-
-  showToast(message) {
-    document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))
-  }
-}