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

package/client/pages/appliance/register.ts

@@ -1,183 +0,0 @@
-import gql from 'graphql-tag'
-import { css, html } from 'lit'
-import { customElement, property, query } 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-register')
-class ApplianceRegister extends connect(store)(PageView) {
-  static get styles() {
-    return [
-      css`
-        :host {
-          background-color: var(--md-sys-color-background);
-          padding: var(--spacing-large);
-
-          display: flex;
-          flex-direction: column;
-
-          align-items: center;
-
-          overflow: auto;
-        }
-        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);
-        }
-
-        [form-container] {
-          background-color: var(--md-sys-color-surface);
-          padding: var(--spacing-large);
-          border-radius: var(--border-radius);
-          box-shadow: var(--box-shadow);
-          min-width: 60%;
-          max-width: var(--input-container-max-width);
-          position: relative;
-          clear: both;
-        }
-        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 {
-          outline: none;
-        }
-        [field-2column] {
-          display: grid;
-          grid-template-columns: 1fr 1fr;
-          grid-gap: 15px;
-          max-width: var(--content-container-max-width);
-        }
-        [field] {
-          display: flex;
-          flex-direction: column;
-        }
-        [grid-span] {
-          grid-column: span 2;
-        }
-        @media screen and (max-width: 480px) {
-          [form-container] {
-            position: initial;
-            width: 100%;
-          }
-          [field] {
-            grid-column: span 2;
-          }
-        }
-      `
-    ]
-  }
-
-  @property({ type: Object }) appliance: any
-
-  @query('form') form!: HTMLFormElement
-
-  get context() {
-    return {
-      title: `appliance registration`,
-      help: 'auth/appliance'
-    }
-  }
-
-  render() {
-    return html`
-      <h2>Register new appliance</h2>
-      <p page-description>You can register new appliance here</p>
-
-      <div form-container>
-        <form>
-          <div field-2column>
-            <div field grid-span>
-              <label for="name">name</label>
-              <input id="name" type="text" name="name" />
-            </div>
-
-            <div field grid-span>
-              <label for="description">description</label>
-              <input id="description" type="text" name="description" />
-            </div>
-
-            <div field>
-              <label for="brand">brand</label>
-              <input id="brand" type="text" name="brand" />
-            </div>
-
-            <div field>
-              <label for="serial-no">serial #</label>
-              <input id="serial-no" type="text" name="serialNo" />
-            </div>
-
-            <div field>
-              <label for="model">model</label>
-              <input id="model" type="text" name="model" />
-            </div>
-
-            <div field>
-              <label for="netmask">netmask</label>
-              <input id="netmask" type="text" name="netmask" />
-            </div>
-
-            <md-elevated-button grid-span @click=${this.createAppliance.bind(this)}>register</md-elevated-button>
-          </div>
-        </form>
-      </div>
-    `
-  }
-
-  async createAppliance(e) {
-    e.preventDefault()
-
-    const form = this.renderRoot.querySelector('form') as HTMLFormElement
-    const formData = new FormData(form)
-
-    const appliance = Array.from(formData.entries()).reduce((appliance, [key, value]) => {
-      appliance[key] = value
-      return appliance
-    }, {})
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($appliance: NewAppliance!) {
-          createAppliance(appliance: $appliance) {
-            id
-          }
-        }
-      `,
-      variables: {
-        appliance
-      }
-    })
-
-    if (response.errors) {
-      console.log('creation fail.')
-    } else {
-      const id = response.data.createAppliance.id
-      navigate(`appliance/${id}`)
-    }
-  }
-
-  pageUpdated(changes, lifecycle, before) {
-    if (this.active) {
-      this.form.reset()
-    }
-  }
-}

package/client/pages/application/application.ts

@@ -1,428 +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 { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { APPLICATION_TYPES } from '../../constants/application'
-
-import { client } from '@operato/graphql'
-import { navigate, PageView, store } from '@operato/shell'
-
-@customElement('application-page')
-class Application 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 }) application: any
-  @queryAll('[clipboard-copy]') copybuttons
-  private clipboard?: Clipboard
-
-  get context() {
-    return {
-      title: {
-        icon: 'apps',
-        text: this.application.name
-      }
-    }
-  }
-
-  render() {
-    var app = this.application || {}
-
-    return html`
-      <div>
-        <h2><md-icon>apps</md-icon>&nbsp;${app.name}</h2>
-        <p page-description>${app.description}</p>
-      </div>
-
-      <div icon>
-        <img src=${app.icon} />
-      </div>
-
-      <form>
-        <div fieldset-container>
-          <fieldset>
-            <legend>application</legend>
-            <div field-2column>
-              <div field grid-span>
-                <label for="name">app name</label>
-                <input id="name" type="text" name="name" .value=${app.name} />
-              </div>
-
-              <div field grid-span>
-                <label for="description">description</label>
-                <input id="description" type="text" name="description" .value=${app.description} />
-              </div>
-
-              <div field grid-span>
-                <label for="email">contact email</label>
-                <input id="email" type="text" name="email" .value=${app.email} />
-              </div>
-
-              <div field grid-span>
-                <label for="type-selector">type</label>
-                <select id="type-selector" name="type">
-                  ${APPLICATION_TYPES.map(
-                    type =>
-                      html`<option value="${app.type}" ?selected="${type === app.type ? true : false}">${type}</option>`
-                  )}
-                </select>
-              </div>
-
-              <div field grid-span>
-                <label for="url">application URL</label>
-                <input id="url" type="text" name="url" .value=${app.url} />
-              </div>
-
-              <div field grid-span>
-                <label for="icon">icon</label>
-                <input id="icon" type="text" name="icon" .value=${app.icon} />
-              </div>
-
-              <div field grid-span>
-                <label for="redirect-url">redirect URL</label>
-                <input id="redirect-url" type="text" name="redirectUrl" .value=${app.redirectUrl} />
-              </div>
-
-              <div field grid-span>
-                <label for="webhook">webhook</label>
-                <input id="webhook" type="text" name="webhook" .value=${app.webhook} />
-              </div>
-
-              <div field grid-span>
-                <label for="available-scopes">available-scopes</label>
-                <input id="available-scopes" type="text" .value=${app.availableScopes} readonly />
-              </div>
-
-              <div field grid-span>
-                <label for="auth-url">auth URL</label>
-                <input id="auth-url" type="text" .value=${app.authUrl} readonly />
-                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
-                The endpoint for authorization server. This is used to get the authorization code.
-              </div>
-
-              <div field grid-span>
-                <label for="access-token-url">access token URL</label>
-                <input id="access-token-url" type="text" .value=${app.accessTokenUrl} readonly />
-                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
-                The endpoint for authentication server. This is used to exchange the authorization code for an access
-                token.
-              </div>
-            </div>
-          </fieldset>
-        </div>
-
-        <div fieldset-container>
-          <fieldset>
-            <legend>credentials</legend>
-            <div field-2column>
-              <div field grid-span>
-                <label for="app-key">appKey</label>
-                <input id="app-key" type="text" .value=${app.appKey} readonly />
-                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
-              </div>
-
-              <div field grid-span>
-                <label for="app-secret">appSecret</label>
-                <input id="app-secret" type="text" .value=${app.appSecret} readonly />
-                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
-              </div>
-            </div>
-          </fieldset>
-        </div>
-
-        <div class="button-container">
-          <button danger @click=${this.deleteApplication.bind(this)}>
-            <md-icon>delete_forever</md-icon>delete this app
-          </button>
-          <button @click=${this.updateApplication.bind(this)}><md-icon>save</md-icon>update</button>
-          <button><md-icon>passkey</md-icon>generate new secret</button>
-        </div>
-      </form>
-    `
-  }
-
-  firstUpdated() {
-    this.clipboard = new Clipboard(this.copybuttons, {
-      target: (trigger => trigger.parentElement.querySelector('input')) as any
-    })
-  }
-
-  async pageUpdated(changes, lifecycle, before) {
-    if (this.active) {
-      await this.fetchApplication()
-    }
-  }
-
-  async fetchApplication() {
-    const response = await client.query({
-      query: gql`
-        query ($id: String!) {
-          application(id: $id) {
-            id
-            name
-            description
-            email
-            url
-            icon
-            redirectUrl
-            authUrl
-            accessTokenUrl
-            webhook
-            availableScopes
-            appKey
-            appSecret
-            type
-          }
-        }
-      `,
-      variables: {
-        id: this.lifecycle.resourceId
-      }
-    })
-
-    this.application = response.data.application
-  }
-
-  async updateApplication(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: ApplicationPatch!) {
-          updateApplication(id: $id, patch: $patch) {
-            id
-            name
-            description
-            email
-            url
-            icon
-            redirectUrl
-            webhook
-            appKey
-            appSecret
-            type
-          }
-        }
-      `,
-      variables: {
-        id,
-        patch
-      }
-    })
-
-    if (response.errors) {
-      console.error('update fail')
-    } else {
-      this.application = { ...this.application, ...response.data.updateApplication }
-      console.log('update sucess')
-    }
-  }
-
-  async deleteApplication(e) {
-    e.preventDefault()
-
-    const id = this.lifecycle.resourceId
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!) {
-          deleteApplication(id: $id)
-        }
-      `,
-      variables: {
-        id
-      }
-    })
-
-    const result = response.data.deleteApplication
-    if (result) {
-      console.log('delete sucess')
-      navigate('applications')
-    } else {
-      console.error('delete fail')
-    }
-  }
-}