@things-factory/oauth2-client 5.0.15 → 6.0.0-alpha.10

package/client/pages/{oauth2-client.js → oauth2-client.ts}

@@ -3,6 +3,7 @@ import '@operato/help/ox-help-icon.js'
 import Clipboard from 'clipboard'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query, queryAll } from 'lit/decorators.js'
 import { asyncReplace } from 'lit/directives/async-replace.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
@@ -37,160 +38,161 @@ updatedAt
 createdAt
 `
 
-class Oauth2Client extends connect(store)(PageView) {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          overflow-y: auto;
-          position: relative;
-
-          background-color: var(--main-section-background-color);
-          padding: var(--padding-wide);
-        }
-        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%;
-        }
+@customElement('oauth2-client')
+export class Oauth2Client extends connect(store)(PageView) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        position: relative;
+
+        background-color: var(--main-section-background-color);
+        padding: var(--padding-wide);
+      }
+      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);
-        }
-        label {
-          font: var(--label-font);
-          color: var(--label-color);
-          text-transform: var(--label-text-transform);
-        }
-        input,
-        select {
-          border: var(--border-dark-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] {
-          background-color: var(--theme-white-color);
-          margin: var(--margin-wide) 0 var(--margin-default) 0;
-          padding: var(--padding-default);
-          border-radius: var(--border-radius);
-          box-shadow: var(--box-shadow);
-        }
-        [fieldset-container] fieldset {
-          margin: 0;
-          margin-top: -15px;
-        }
-        fieldset {
-          border-radius: var(--border-radius);
-          border: var(--border-dark-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;
-        }
+      [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);
+      }
+      label {
+        font: var(--label-font);
+        color: var(--label-color);
+        text-transform: var(--label-text-transform);
+      }
+      input,
+      select {
+        border: var(--border-dark-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] {
+        background-color: var(--theme-white-color);
+        margin: var(--margin-wide) 0 var(--margin-default) 0;
+        padding: var(--padding-default);
+        border-radius: var(--border-radius);
+        box-shadow: var(--box-shadow);
+      }
+      [fieldset-container] fieldset {
+        margin: 0;
+        margin-top: -15px;
+      }
+      fieldset {
+        border-radius: var(--border-radius);
+        border: var(--border-dark-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,
+      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(--margin-default) 0 var(--margin-default) var(--margin-default);
+        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: 11px;
+        right: 0;
+        max-height: 36px;
+      }
+      [input-hint] {
+        font: var(--input-hint-font);
+        color: var(--input-hint-color);
+      }
+      @media screen and (max-width: 480px) {
         [field] {
-          display: flex;
-          flex-direction: column;
-          position: relative;
-        }
-        [grid-span] {
           grid-column: span 2;
         }
-        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(--margin-default) 0 var(--margin-default) var(--margin-default);
-          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: 11px;
-          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;
-          }
-        }
-      `
-    ]
-  }
+      }
+    `
+  ]
 
-  static get properties() {
-    return {
-      oauth2Client: Object,
-      _grantType: String
-    }
-  }
+  @property({ type: Object }) oauth2Client: any
+  @property({ type: String }) _grantType?: string
+
+  @query('form') form!: HTMLFormElement
+  @queryAll('[clipboard-copy]') copybuttons
+
+  private clipboard?: Clipboard
+  private _icon?: string
 
   get context() {
     return {
@@ -414,10 +416,8 @@ class Oauth2Client extends connect(store)(PageView) {
   }
 
   firstUpdated() {
-    const copybuttons = this.renderRoot.querySelectorAll('[clipboard-copy]')
-
-    this.clipboard = new Clipboard(copybuttons, {
-      target: trigger => trigger.parentElement.querySelector('input')
+    this.clipboard = new Clipboard(this.copybuttons, {
+      target: (trigger => trigger.parentElement.querySelector('input')) as any
     })
   }
 
@@ -463,8 +463,7 @@ class Oauth2Client extends connect(store)(PageView) {
   }
 
   async updateOauth2Client() {
-    const form = this.renderRoot.querySelector('form')
-    const formData = new FormData(form)
+    const formData = new FormData(this.form)
 
     const patch = Array.from(formData.entries()).reduce((patch, [key, value]) => {
       patch[key] = value
@@ -527,9 +526,9 @@ class Oauth2Client extends connect(store)(PageView) {
     const id = this.lifecycle.resourceId
 
     if (this.oauth2Client.grantType == 'code') {
-      const response = await client.query({
-        query: gql`
-          query ($id: String!) {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation ($id: String!) {
             getOauth2AuthUrl(id: $id)
           }
         `,
@@ -541,7 +540,6 @@ class Oauth2Client extends connect(store)(PageView) {
       if (!response.errors) {
         location.href = response.data.getOauth2AuthUrl
       } else {
-        console.log('error', response.status, await response.text())
         notify({
           level: 'error',
           message: 'getting application access token fail'
@@ -606,5 +604,3 @@ class Oauth2Client extends connect(store)(PageView) {
     }
   }
 }
-
-customElements.define('oauth2-client', Oauth2Client)

package/client/pages/oauth2-clients.ts

@@ -0,0 +1,192 @@
+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 { notify } from '@operato/layout'
+import { PageView, store } from '@operato/shell'
+
+@customElement('oauth2-clients')
+class Oauth2Clients extends connect(store)(PageView) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--main-section-background-color);
+        padding: var(--padding-wide);
+
+        overflow: auto;
+      }
+
+      [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);
+      }
+      [button] {
+        background-color: var(--button-background-color);
+        border: var(--button-border);
+        border-radius: var(--button-border-radius);
+        margin: var(--button-margin);
+        padding: var(--button-padding);
+        color: var(--button-color);
+        font: var(--button-font);
+        text-transform: var(--button-text-transform);
+
+        margin-right: 0;
+        float: right;
+        text-decoration: none;
+      }
+      [button]:hover {
+        border: var(--button-activ-border);
+        box-shadow: var(--button-active-box-shadow);
+      }
+      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);
+      }
+      div {
+        margin: var(--margin-wide) 0;
+      }
+      table {
+        background-color: var(--theme-white-color);
+        width: 100%;
+        border-collapse: collapse;
+      }
+      th {
+        background-color: rgba(var(--primary-color-rgb), 0.1);
+        border-top: var(--th-border-top);
+        border-bottom: var(--border-dark-color);
+        padding: var(--th-padding);
+
+        font: var(--th-font);
+        color: var(--secondary-color);
+        text-transform: var(--th-text-transform);
+      }
+      td {
+        padding: var(--td-padding);
+        border-bottom: var(--border-dark-color);
+        line-height: 1.1;
+      }
+      td a {
+        font: var(--td-font);
+        text-decoration: none;
+        color: var(--theme-black-color);
+      }
+      td a strong {
+        color: var(--secondary-text-color);
+        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 }) clients: any[] = []
+
+  get context() {
+    return {
+      title: `clients`
+    }
+  }
+
+  render() {
+    var clients = this.clients || []
+
+    return html`
+      <div>
+        <h2>Registered Oauth2 Clients</h2>
+        <p page-description>
+          What type of oauth2 client are you building?<br />Choose the platform type that best suits the audience you’re
+          building for.
+        </p>
+        <a href="oauth2-client-register" button-primary>register new oauth2 client</a>
+      </div>
+
+      <div>
+        <table>
+          <tr>
+            <th>app name</th>
+            <th>API health</th>
+            <th>Installs</th>
+            <th>status</th>
+          </tr>
+          ${clients.map(
+            client => html`
+              <tr>
+                <td>
+                  <a href=${`oauth2-client/${client.id}`}>
+                    <strong>${client.name}</strong>
+                    ${client.description}
+                  </a>
+                </td>
+                <td class="text-align-center">OK</td>
+                <td class="text-align-right">1</td>
+                <td class="text-align-center">draft</td>
+              </tr>
+            `
+          )}
+        </table>
+      </div>
+    `
+  }
+
+  async pageUpdated(changes, lifecycle, before) {
+    if (this.active) {
+      this.clients = (await this.fetchOauth2Clients())?.items || []
+    }
+  }
+
+  async fetchOauth2Clients() {
+    const response = await client.query({
+      query: gql`
+        query {
+          oauth2Clients {
+            items {
+              id
+              name
+              description
+            }
+            total
+          }
+        }
+      `
+    })
+
+    if (response.errors) {
+      notify({
+        level: 'error',
+        message: 'fetch oauth2 clients fail'
+      })
+    } else {
+      return response.data.oauth2Clients
+    }
+  }
+}

package/client/{route.js → route.ts}

@@ -1,4 +1,4 @@
-export default function route(page) {
+export default function route(page: string) {
   switch (page) {
     case 'oauth2-client-register':
       import('./pages/oauth2-client-register')

package/client/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig-base.json",
+  "compilerOptions": {
+    "strict": true,
+    "declaration": true,
+    "module": "esnext",
+    "outDir": "../dist-client",
+    "baseUrl": "./"
+  },
+  "include": ["./**/*"]
+}