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

package/client/pages/appliance/appliance.ts

@@ -1,452 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import Clipboard from 'clipboard'
-import gql from 'graphql-tag'
-import { css, html } from 'lit'
-import { customElement, property, queryAll } from 'lit/decorators.js'
-import { asyncReplace } from 'lit/directives/async-replace.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { client } from '@operato/graphql'
-import { navigate, PageView, store } from '@operato/shell'
-import { parseJwt, sleep } from '@operato/utils'
-import { i18next } from '@operato/i18n'
-
-@customElement('appliance-page')
-class Appliance extends connect(store)(PageView) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        overflow-y: auto;
-        position: relative;
-
-        background-color: var(--md-sys-color-background);
-        padding: var(--spacing-large);
-      }
-
-      h2 {
-        margin: var(--title-margin);
-        font: var(--title-font);
-        color: var(--title-text-color);
-      }
-
-      [page-description] {
-        margin: var(--page-description-margin);
-        font: var(--page-description-font);
-        color: var(--page-description-color);
-      }
-
-      [icon] {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        max-width: 80px;
-      }
-
-      [icon] img {
-        max-width: 100%;
-        max-height: 100%;
-      }
-
-      [button-primary] {
-        background-color: var(--button-primary-background-color);
-        border: var(--button-border);
-        border-radius: var(--button-border-radius);
-        margin: var(--button-margin);
-        padding: var(--button-primary-padding);
-        color: var(--button-primary-color);
-        font: var(--button-primary-font);
-        text-transform: var(--button-text-transform);
-
-        text-decoration: none;
-      }
-
-      [button-primary]:hover {
-        background-color: var(--button-primary-active-background-color);
-        box-shadow: var(--button-active-box-shadow);
-      }
-
-      [fieldset-container] {
-        background-color: var(--md-sys-color-surface);
-        margin: var(--spacing-large) 0 var(--spacing-medium) 0;
-        padding: var(--spacing-medium);
-        border-radius: var(--border-radius);
-        box-shadow: var(--box-shadow);
-
-        label {
-          font: var(--label-font);
-          color: var(--label-color, var(--md-sys-color-on-surface));
-          text-transform: var(--label-text-transform);
-        }
-
-        input,
-        select {
-          border: var(--border-dim-color);
-          border-radius: var(--border-radius);
-          margin: var(--input-margin);
-          padding: var(--input-padding);
-          font: var(--input-font);
-
-          flex: 1;
-        }
-
-        select:focus,
-        input:focus,
-        button {
-          outline: none;
-        }
-
-        form {
-          max-width: var(--content-container-max-width);
-        }
-      }
-
-      [fieldset-container] fieldset {
-        margin: 0;
-        margin-top: -15px;
-      }
-
-      fieldset {
-        border-radius: var(--border-radius);
-        border: var(--border-dim-color);
-        margin: var(--fieldset-margin);
-        padding: var(--fieldset-padding);
-      }
-
-      legend {
-        padding: var(--legend-padding);
-        font-weight: bold;
-        color: var(--legend-color);
-      }
-
-      [field-2column] {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-gap: 15px;
-      }
-
-      [field] {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-      }
-
-      [grid-span] {
-        grid-column: span 2;
-      }
-
-      button {
-        display: flex;
-        align-items: center;
-        gap: var(--spacing-small);
-      }
-
-      button,
-      input[type='submit'],
-      [button-in-field] {
-        background-color: var(--button-background-color);
-        border: var(--button-border);
-        border-radius: var(--button-border-radius);
-        padding: var(--button-padding);
-        color: var(--button-color);
-        font: var(--button-font);
-        text-transform: var(--button-text-transform);
-
-        margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
-        float: right;
-        text-decoration: none;
-      }
-
-      button:hover,
-      input[type='submit']:hover {
-        border: var(--button-activ-border);
-        box-shadow: var(--button-active-box-shadow);
-      }
-
-      [button-in-field] {
-        border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
-        position: absolute;
-        top: 12px;
-        right: 0;
-        max-height: 36px;
-      }
-
-      [input-hint] {
-        font: var(--input-hint-font);
-        color: var(--input-hint-color);
-      }
-
-      @media screen and (max-width: 480px) {
-        [field] {
-          grid-column: span 2;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Object }) appliance: any
-  @property({ type: String }) accessToken?: string
-  @property({ type: Object }) _accessTokenInfo: any
-
-  @queryAll('[clipboard-copy]') copybuttons
-
-  private clipboard?: Clipboard
-
-  get context() {
-    return {
-      title: {
-        icon: 'devices',
-        text: this.appliance.name
-      }
-    }
-  }
-
-  render() {
-    var appliance = this.appliance || {}
-    var accessTokenExp = this._accessTokenInfo?.exp
-
-    return html`
-      <div>
-        <h2><md-icon>devices</md-icon>&nbsp;${appliance.name}</h2>
-        <p page-description>${appliance.description}</p>
-      </div>
-
-      <form>
-        <div fieldset-container>
-          <fieldset>
-            <legend>${i18next.t('text.appliance')}</legend>
-            <div field-2column>
-              <div field grid-span>
-                <label for="name">${i18next.t('field.name')}</label>
-                <input id="name" type="text" name="name" .value=${appliance.name} />
-              </div>
-
-              <div field grid-span>
-                <label for="description">${i18next.t('field.description')}</label>
-                <input id="description" type="text" name="description" .value=${appliance.description} />
-              </div>
-
-              <div field>
-                <label for="brand">${i18next.t('field.brand')}</label>
-                <input id="brand" type="text" name="brand" .value=${appliance.brand} />
-              </div>
-
-              <div field>
-                <label for="serial-no">${i18next.t('field.serial-no')}</label>
-                <input id="serial-no" type="text" name="serialNo" .value=${appliance.serialNo} />
-              </div>
-
-              <div field>
-                <label for="model">${i18next.t('field.model')}</label>
-                <input id="model" type="text" name="model" .value=${appliance.model} />
-              </div>
-
-              <div field>
-                <label for="netmask">${i18next.t('field.netmask')}</label>
-                <input id="netmask" type="text" name="netmask" .value=${appliance.netmask} />
-              </div>
-            </div>
-          </fieldset>
-        </div>
-
-        <div fieldset-container>
-          <fieldset>
-            <legend>${i18next.t('text.appliance credential')}</legend>
-            <div field-2column>
-              <div field grid-span>
-                <label for="access-token">${i18next.t('label.access token')}</label>
-                <input id="access-token" type="text" .value=${appliance.accessToken} readonly />
-                <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>
-                  ${i18next.t('button.copy')}
-                </button>
-                ${accessTokenExp
-                  ? html`<div input-hint>
-                      ${i18next.t('text.token expiry time')} ${new Date(accessTokenExp * 1000).toLocaleString()} :
-                      ${asyncReplace(this.expTimer(accessTokenExp))}
-                    </div>`
-                  : html``}
-              </div>
-            </div>
-          </fieldset>
-        </div>
-
-        <button @click=${this.deleteAppliance.bind(this)}>${i18next.t('button.delete this appliance')}</button>
-        <button @click=${this.generateApplianceSecret.bind(this)}>
-          ${i18next.t('button.generate new access token')}
-        </button>
-        <button @click=${this.updateAppliance.bind(this)}>${i18next.t('button.update')}</button>
-      </form>
-    `
-  }
-
-  firstUpdated() {
-    this.clipboard = new Clipboard(this.copybuttons, {
-      target: (trigger => trigger.parentElement.querySelector('input')) as any
-    })
-  }
-
-  updated(changes) {
-    /*
-     * If this page properties are changed, this callback will be invoked.
-     * This callback will be called back only when this page is activated.
-     */
-    if (changes.has('appliance')) {
-      const { accessToken } = this.appliance || {}
-      this.accessToken = accessToken
-    }
-
-    if (changes.has('accessToken')) {
-      this._accessTokenInfo = this.accessToken ? parseJwt(this.accessToken) : {}
-    }
-  }
-
-  async pageUpdated(changes, lifecycle, before) {
-    if (this.active) {
-      await this.fetchAppliance()
-    }
-  }
-
-  async fetchAppliance() {
-    const response = await client.query({
-      query: gql`
-        query ($id: String!) {
-          appliance(id: $id) {
-            id
-            name
-            description
-            serialNo
-            brand
-            model
-            netmask
-            accessToken
-          }
-        }
-      `,
-      variables: {
-        id: this.lifecycle.resourceId
-      }
-    })
-
-    this.appliance = response.data.appliance
-  }
-
-  async updateAppliance(e) {
-    e.preventDefault()
-
-    const form = this.renderRoot.querySelector('form') as HTMLFormElement
-    const formData = new FormData(form)
-
-    const patch = Array.from(formData.entries()).reduce((patch, [key, value]) => {
-      patch[key] = value
-      return patch
-    }, {})
-
-    const id = this.lifecycle.resourceId
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!, $patch: AppliancePatch!) {
-          updateAppliance(id: $id, patch: $patch) {
-            id
-            name
-            description
-            serialNo
-            brand
-            model
-            netmask
-            accessToken
-          }
-        }
-      `,
-      variables: {
-        id,
-        patch
-      }
-    })
-
-    if (response.errors) {
-      console.error('update fail')
-    } else {
-      this.appliance = response.data.updateAppliance
-      console.log('update sucess')
-    }
-  }
-
-  async deleteAppliance(e) {
-    e.preventDefault()
-
-    const id = this.lifecycle.resourceId
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!) {
-          deleteAppliance(id: $id)
-        }
-      `,
-      variables: {
-        id
-      }
-    })
-
-    if (response.errors) {
-      console.error('delete fail')
-    } else {
-      navigate('appliance-home')
-    }
-  }
-
-  async generateApplianceSecret(e) {
-    e.preventDefault()
-
-    const id = this.lifecycle.resourceId
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!) {
-          generateApplianceSecret(id: $id) {
-            id
-            name
-            description
-            serialNo
-            brand
-            model
-            netmask
-            accessToken
-          }
-        }
-      `,
-      variables: {
-        id
-      }
-    })
-
-    if (response.errors) {
-      console.error('generate-appliance-secret fail')
-    } else {
-      this.appliance = response.data.generateApplianceSecret
-      console.log('generate-appliance-secret sucess')
-    }
-  }
-
-  async *expTimer(exp) {
-    const DAY = 24 * 60 * 60
-    const HOUR = 60 * 60
-    const MIN = 60
-
-    while (this.active) {
-      var remain = Math.floor(Number(exp) - Date.now() / 1000)
-      const days = Math.floor(remain / DAY)
-      remain -= days * DAY
-      const hours = Math.floor(remain / HOUR)
-      remain -= hours * HOUR
-      const mins = Math.floor(remain / MIN)
-      const secs = remain - mins * MIN
-
-      yield i18next.t('text.remaining time', { days, hours, mins, secs })
-
-      await sleep(1000)
-    }
-  }
-}

package/client/pages/appliance/home.ts

@@ -1,177 +0,0 @@
-import '@material/web/button/elevated-button.js'
-import '@material/web/button/outlined-button.js'
-
-import gql from 'graphql-tag'
-import { css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { client } from '@operato/graphql'
-import { navigate, PageView, store } from '@operato/shell'
-
-@customElement('appliance-home')
-class Appliances extends connect(store)(PageView) {
-  static styles = [
-    css`
-      :host {
-        background-color: var(--md-sys-color-background);
-        padding: var(--spacing-large);
-
-        overflow: auto;
-      }
-
-      md-elevated-button {
-        text-transform: capitalize;
-      }
-
-      md-outlined-button {
-        float: right;
-        margin-top: var(--spacing-medium);
-        text-transform: capitalize;
-      }
-
-      h2 {
-        margin: var(--title-margin);
-        font: var(--title-font);
-        color: var(--title-text-color);
-      }
-
-      [page-description] {
-        margin: var(--page-description-margin);
-        font: var(--page-description-font);
-        color: var(--page-description-color);
-      }
-
-      table {
-        width: 100%;
-        margin: var(--spacing-large) 0;
-        border-collapse: collapse;
-      }
-
-      tr {
-        background-color: var(--tr-background-color);
-      }
-
-      tr:nth-child(odd) {
-        background-color: var(--tr-background-odd-color);
-      }
-
-      tr:hover {
-        background-color: var(--tr-background-hover-color);
-      }
-
-      th {
-        border-top: var(--th-border-top);
-        border-bottom: var(--td-border-bottom);
-        padding: var(--th-padding);
-
-        font: var(--th-font);
-        color: var(--th-color);
-        text-transform: var(--th-text-transform);
-        text-align: left;
-      }
-
-      td {
-        padding: var(--td-padding);
-        border-bottom: var(--td-border-bottom);
-        font: var(--td-font);
-        color: var(--td-color);
-      }
-
-      td a {
-        color: var(--md-sys-color-primary);
-        font: bold 16px var(--theme-font);
-
-        display: block;
-        text-decoration: none;
-      }
-
-      .text-align-center {
-        text-align: center;
-      }
-
-      .text-align-right {
-        text-align: right;
-      }
-
-      @media screen and (max-width: 480px) {
-        :host {
-          padding: var(--spacing-medium);
-        }
-      }
-    `
-  ]
-
-  @property({ type: Array }) appliances: any[] = []
-
-  get context() {
-    return {
-      title: `appliance home`,
-      help: 'auth/appliance'
-    }
-  }
-
-  render() {
-    var appliances = this.appliances || []
-
-    return html`
-      <div>
-        <h2>Registered Appliances</h2>
-        <p page-description>
-          What type of appliance are you building?<br />Choose the app type that best suits the audience you’re building
-          for. The appliance type can’t be changed after it’s created.
-        </p>
-        <md-elevated-button @click=${e => navigate('appliance-register')}>register new appliance</md-elevated-button>
-      </div>
-
-      <table>
-        <tr>
-          <th>appliance name</th>
-          <th>API health</th>
-          <th>Installs</th>
-          <th>status</th>
-        </tr>
-        ${appliances.map(
-          appliance => html`
-            <tr>
-              <td>
-                <a href=${`appliance/${appliance.id}`}>${appliance.name}</a>
-                ${appliance.description}
-              </td>
-              <td>OK</td>
-              <td class="text-align-center">1</td>
-              <td>draft</td>
-            </tr>
-          `
-        )}
-      </table>
-    `
-  }
-
-  async pageUpdated() {
-    if (this.active) {
-      this.appliances = (await this.fetchAppliances()).items
-    }
-  }
-
-  async fetchAppliances() {
-    const response = await client.query({
-      query: gql`
-        query {
-          appliances {
-            items {
-              id
-              name
-              description
-            }
-            total
-          }
-        }
-      `
-    })
-
-    if (!response.errors) {
-      return response.data.appliances
-    }
-  }
-}