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

package/client/pages/appliance/appliance.ts

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

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