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

package/client/pages/app-binding/app-binding.ts

@@ -1,423 +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, state } 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'
-
-@customElement('app-binding-page')
-class AppBinding 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%;
-      }
-
-      [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 {
-          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,
-      [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 {
-        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 }) appbinding: any
-  @property({ type: String }) accessToken?: string
-
-  @state() _refreshTokenInfo: any
-  @state() _accessTokenInfo: any
-
-  private clipboard?: Clipboard
-
-  get context() {
-    return {
-      title: {
-        icon: 'link',
-        text: this.appbinding.name
-      }
-    }
-  }
-
-  render() {
-    var binding = this.appbinding || {}
-    var app = this.appbinding?.application || {}
-    var refreshTokenExp = this._refreshTokenInfo?.exp
-    var accessTokenExp = this._accessTokenInfo?.exp
-
-    return html`
-      <div>
-        <h2><md-icon>link</md-icon>&nbsp;${app.name}</h2>
-        <p page-description>${app.description}</p>
-      </div>
-
-      ${app.icon
-        ? html`
-            <div icon>
-              <img src=${app.icon} />
-            </div>
-          `
-        : html``}
-
-      <form>
-        <div fieldset-container>
-          <fieldset>
-            <legend>application</legend>
-            <div field-2column>
-              <div field grid-span>
-                <label for="app-name">app name</label>
-                <input id="app-name" type="text" .value=${app.name} readonly />
-              </div>
-
-              <div field grid-span>
-                <label for="app-description">description</label>
-                <input id="app-description" type="text" .value=${app.description} readonly />
-              </div>
-
-              <div field>
-                <label for="contact-email">contact email</label>
-                <input id="contact-email" type="text" .value=${app.email} readonly />
-              </div>
-            </div>
-          </fieldset>
-        </div>
-
-        <div fieldset-container>
-          <fieldset>
-            <legend>binding</legend>
-            <div field-2column>
-              <div field grid-span>
-                <label for="id">id</label>
-                <input id="id" type="text" .value=${binding.id} readonly />
-              </div>
-
-              <div field grid-span>
-                <label for="name">name</label>
-                <input id="name" type="text" .value=${binding.email} readonly />
-              </div>
-
-              <div field>
-                <label for="status">status</label>
-                <input id="status" type="text" .value=${binding.status} readonly />
-              </div>
-
-              <div field>
-                <label for="scope">scope</label>
-                <input id="scope" type="text" .value=${binding.scope} readonly />
-              </div>
-            </div>
-          </fieldset>
-        </div>
-
-        <div fieldset-container>
-          <fieldset>
-            <legend>binding credential</legend>
-            <div field-2column>
-              <div field grid-span>
-                <label for="access-token">access token</label>
-                <input id="access-token" type="text" .value=${this.accessToken || ''} readonly />
-                <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
-                ${accessTokenExp
-                  ? html`<div input-hint>
-                      expired in ${new Date(accessTokenExp).toLocaleString()} :
-                      ${asyncReplace(this.expTimer(accessTokenExp))}
-                    </div>`
-                  : html``}
-              </div>
-
-              <div field grid-span>
-                <label for="refresh-token">refresh token</label>
-                <input id="refresh-token" type="text" .value=${binding.refreshToken || ''} readonly />
-                <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
-                ${refreshTokenExp
-                  ? html`<div input-hint>
-                      expired in ${new Date(refreshTokenExp).toLocaleString()} :
-                      ${asyncReplace(this.expTimer(refreshTokenExp))}
-                    </div>`
-                  : html``}
-              </div>
-            </div>
-          </fieldset>
-        </div>
-
-        <button @click=${this.deleteAppBinding.bind(this)}>delete this application binding</button>
-        <button @click=${this.renewApplicationAccessToken.bind(this)}>renew access token</button>
-      </form>
-    `
-  }
-
-  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 `${days} days ${hours} hours ${mins} mins ${secs} seconds remain`
-
-      await sleep(1000)
-    }
-  }
-
-  firstUpdated() {
-    const copybuttons = this.renderRoot.querySelectorAll('[clipboard-copy]')
-
-    this.clipboard = new Clipboard(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('appbinding')) {
-      const { refreshToken } = this.appbinding || {}
-      this._refreshTokenInfo = refreshToken ? parseJwt(refreshToken) : {}
-    }
-
-    if (changes.has('accessToken')) {
-      this._accessTokenInfo = this.accessToken ? parseJwt(this.accessToken) : {}
-    }
-  }
-
-  async pageUpdated(changes, lifecycle, before) {
-    if (this.active) {
-      /*
-       * this page is activated
-       */
-      await this.fetchAppBinding()
-    } else {
-      /* this page is deactivated */
-    }
-  }
-
-  async fetchAppBinding() {
-    const response = await client.query({
-      query: gql`
-        query ($id: String!) {
-          appBinding(id: $id) {
-            id
-            name
-            description
-            email
-            scope
-            status
-            application {
-              id
-              name
-              description
-              email
-              icon
-            }
-            refreshToken
-          }
-        }
-      `,
-      variables: {
-        id: this.lifecycle.resourceId
-      }
-    })
-
-    this.appbinding = response.data.appBinding
-  }
-
-  async deleteAppBinding(e) {
-    e.preventDefault()
-
-    const id = this.lifecycle.resourceId
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!) {
-          deleteAppBinding(id: $id)
-        }
-      `,
-      variables: {
-        id
-      }
-    })
-
-    const result = response.data.deleteAppBinding
-    if (result) {
-      console.log('delete sucess')
-      navigate(`app-bindings`)
-    } else {
-      console.error('delete fail')
-    }
-  }
-
-  async renewApplicationAccessToken(e) {
-    e.preventDefault()
-
-    const id = this.lifecycle.resourceId
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!) {
-          renewApplicationAccessToken(id: $id) {
-            accessToken
-            refreshToken
-          }
-        }
-      `,
-      variables: {
-        id
-      }
-    })
-
-    if (response.errors) {
-      console.error('renew application access token fail')
-    } else {
-      const { accessToken, refreshToken } = response.data.renewApplicationAccessToken
-      this.accessToken = accessToken
-      this.appbinding = {
-        ...this.appbinding,
-        refreshToken
-      }
-    }
-  }
-}

package/client/pages/app-binding/app-bindings.ts

@@ -1,171 +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('app-bindings-page')
-class AppBindings 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;
-      }
-    `
-  ]
-
-  @property({ type: Array }) appBindings: any[] = []
-
-  get context() {
-    return {
-      title: `application bindings`,
-      help: 'auth/application'
-    }
-  }
-
-  render() {
-    var appBindings = this.appBindings || []
-
-    return html`
-      <div>
-        <h2>Bound Applications</h2>
-        <p page-description>Bound Applications goes here</p>
-      </div>
-
-      <table>
-        <tr>
-          <th>app name</th>
-          <th>Scope</th>
-          <th>status</th>
-        </tr>
-        ${appBindings.map(
-          appBinding => html`
-            <tr>
-              <td>
-                <a href=${`app-binding/${appBinding.id}`}>${appBinding.name}</a>
-                ${appBinding.description}
-              </td>
-              <td>${appBinding.scope}</td>
-              <td>${appBinding.status}</td>
-            </tr>
-          `
-        )}
-      </table>
-      <md-elevated-button @click=${e => navigate('applications')}>registered applications ..</md-elevated-button>
-    `
-  }
-
-  async pageUpdated(changes, lifecycle, before) {
-    if (this.active) {
-      this.appBindings = (await this.fetchAppBindings()).items
-    }
-  }
-
-  async fetchAppBindings() {
-    const response = await client.query({
-      query: gql`
-        query {
-          appBindings {
-            items {
-              id
-              name
-              application {
-                id
-                name
-              }
-              scope
-              status
-            }
-            total
-          }
-        }
-      `
-    })
-
-    if (!response.errors) {
-      return response.data.appBindings
-    }
-  }
-}