npm - @things-factory/auth-ui - Versions diffs - 9.1.13 → 10.0.0-beta.1 - Mend

@things-factory/auth-ui 9.1.13 → 10.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/dist-client/pages/application/application.js CHANGED Viewed

@@ -4,49 +4,42 @@ 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.js';
 import { client } from '@operato/graphql';
-import { navigate, PageView, store } from '@operato/shell';
-let Application = class Application extends connect(store)(PageView) {
+import { navigate, PageView } from '@operato/shell';
+let Application = class Application extends PageView {
     static { this.styles = [
         css `
-      :host {
-        display: flex;
+      :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);
+      h2 {         margin: var(--title-margin);
         font: var(--title-font);
         color: var(--title-text-color);
-      }
+ }
-      [page-description] {
-        margin: var(--page-description-margin);
+      [page-description] {         margin: var(--page-description-margin);
         font: var(--page-description-font);
         color: var(--page-description-color);
-      }
+ }
-      [icon] {
-        position: absolute;
+      [icon] {         position: absolute;
         top: 10px;
         right: 10px;
         max-width: 80px;
-      }
+ }
-      [icon] img {
-        max-width: 100%;
+      [icon] img {         max-width: 100%;
         max-height: 100%;
-      }
+ }
-      [button-primary] {
-        background-color: var(--button-primary-background-color);
+      [button-primary] {         background-color: var(--button-primary-background-color);
         border: var(--button-border);
         border-radius: var(--button-border-radius);
         margin: var(--button-margin);
@@ -56,92 +49,78 @@ let Application = class Application extends connect(store)(PageView) {
         text-transform: var(--button-text-transform);
         text-decoration: none;
-      }
+ }
-      [button-primary]:hover {
-        background-color: var(--button-primary-active-background-color);
+      [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);
+      [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);
+        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);
+        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;
-        }
+        button {           outline: none;
+ }
-        form {
-          max-width: var(--content-container-max-width);
-        }
-      }
+        form {           max-width: var(--content-container-max-width);
+ }
+ }
-      [fieldset-container] fieldset {
-        margin: 0;
+      [fieldset-container] fieldset {         margin: 0;
         margin-top: -15px;
-      }
+ }
-      fieldset {
-        border-radius: var(--border-radius);
+      fieldset {         border-radius: var(--border-radius);
         border: var(--border-dim-color);
         margin: var(--fieldset-margin);
         padding: var(--fieldset-padding);
-      }
+ }
-      legend {
-        padding: var(--legend-padding);
+      legend {         padding: var(--legend-padding);
         font-weight: bold;
         color: var(--legend-color);
-      }
+ }
-      [field-2column] {
-        display: grid;
+      [field-2column] {         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-gap: 15px;
-      }
+ }
-      [field] {
-        display: flex;
+      [field] {         display: flex;
         flex-direction: column;
         position: relative;
-      }
+ }
-      [grid-span] {
-        grid-column: span 2;
-      }
+      [grid-span] {         grid-column: span 2;
+ }
-      button {
-        display: flex;
+      button {         display: flex;
         align-items: center;
         gap: var(--spacing-small);
-      }
+ }
       button,
       input[type='submit'],
-      [button-in-field] {
-        background-color: var(--button-background-color);
+      [button-in-field] {         background-color: var(--button-background-color);
         border: var(--button-border);
         border-radius: var(--button-border-radius);
         padding: var(--button-padding);
@@ -152,38 +131,31 @@ let Application = class Application extends connect(store)(PageView) {
         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);
+      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;
+      [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);
+      [input-hint] {         font: var(--input-hint-font);
         color: var(--input-hint-color);
-      }
+ }
-      @media screen and (max-width: 480px) {
-        [field] {
-          grid-column: span 2;
-        }
-      }
+      @media screen and (max-width: 480px) {         [field] {           grid-column: span 2;
+ }
+ }
     `
     ]; }
     get context() {
-        return {
-            title: {
-                icon: 'apps',
+        return { title: { icon: 'apps',
                 text: this.application.name
             }
         };
@@ -300,8 +272,7 @@ let Application = class Application extends connect(store)(PageView) {
     `;
     }
     firstUpdated() {
-        this.clipboard = new Clipboard(this.copybuttons, {
-            target: (trigger => trigger.parentElement.querySelector('input'))
+        this.clipboard = new Clipboard(this.copybuttons, { target: (trigger => trigger.parentElement.querySelector('input'))
         });
     }
     async pageUpdated(changes, lifecycle, before) {
@@ -310,11 +281,8 @@ let Application = class Application extends connect(store)(PageView) {
         }
     }
     async fetchApplication() {
-        const response = await client.query({
-            query: gql `
-        query ($id: String!) {
-          application(id: $id) {
-            id
+        const response = await client.query({ query: gql `
+        query ($id: String!) {           application(id: $id) {             id
             name
             description
             email
@@ -328,11 +296,10 @@ let Application = class Application extends connect(store)(PageView) {
             appKey
             appSecret
             type
-          }
-        }
+ }
+ }
       `,
-            variables: {
-                id: this.lifecycle.resourceId
+            variables: { id: this.lifecycle.resourceId
             }
         });
         this.application = response.data.application;
@@ -346,11 +313,8 @@ let Application = class Application extends connect(store)(PageView) {
             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
+        const response = await client.mutate({ mutation: gql `
+        mutation ($id: String!, $patch: ApplicationPatch!) {           updateApplication(id: $id, patch: $patch) {             id
             name
             description
             email
@@ -361,11 +325,10 @@ let Application = class Application extends connect(store)(PageView) {
             appKey
             appSecret
             type
-          }
-        }
+ }
+ }
       `,
-            variables: {
-                id,
+            variables: { id,
                 patch
             }
         });
@@ -380,14 +343,11 @@ let Application = class Application extends connect(store)(PageView) {
     async deleteApplication(e) {
         e.preventDefault();
         const id = this.lifecycle.resourceId;
-        const response = await client.mutate({
-            mutation: gql `
-        mutation ($id: String!) {
-          deleteApplication(id: $id)
-        }
+        const response = await client.mutate({ mutation: gql `
+        mutation ($id: String!) {           deleteApplication(id: $id)
+ }
       `,
-            variables: {
-                id
+            variables: { id
             }
         });
         const result = response.data.deleteApplication;

package/dist-client/pages/application/application.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"application.js","sourceRoot":"","sources":["../../../client/pages/application/application.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { APPLICATION_TYPES } from '../../constants/application.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\n\n@customElement('application-page')\nclass Application extends connect(store)(PageView) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n position: relative;\n\n background-color: var(--md-sys-color-background);\n padding: var(--spacing-large);\n }\n\n h2 {\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n\n [page-description] {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n\n [icon] {\n position: absolute;\n top: 10px;\n right: 10px;\n max-width: 80px;\n }\n\n [icon] img {\n max-width: 100%;\n max-height: 100%;\n }\n\n [button-primary] {\n background-color: var(--button-primary-background-color);\n border: var(--button-border);\n border-radius: var(--button-border-radius);\n margin: var(--button-margin);\n padding: var(--button-primary-padding);\n color: var(--button-primary-color);\n font: var(--button-primary-font);\n text-transform: var(--button-text-transform);\n\n text-decoration: none;\n }\n\n [button-primary]:hover {\n background-color: var(--button-primary-active-background-color);\n box-shadow: var(--button-active-box-shadow);\n }\n\n [fieldset-container] {\n background-color: var(--md-sys-color-surface);\n margin: var(--spacing-large) 0 var(--spacing-medium) 0;\n padding: var(--spacing-medium);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n\n label {\n font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-transform: var(--label-text-transform);\n }\n\n input,\n select {\n border: var(--border-dim-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n font: var(--input-font);\n\n flex: 1;\n }\n\n select:focus,\n input:focus,\n button {\n outline: none;\n }\n\n form {\n max-width: var(--content-container-max-width);\n }\n }\n\n [fieldset-container] fieldset {\n margin: 0;\n margin-top: -15px;\n }\n\n fieldset {\n border-radius: var(--border-radius);\n border: var(--border-dim-color);\n margin: var(--fieldset-margin);\n padding: var(--fieldset-padding);\n }\n\n legend {\n padding: var(--legend-padding);\n font-weight: bold;\n color: var(--legend-color);\n }\n\n [field-2column] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n }\n\n [field] {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n\n [grid-span] {\n grid-column: span 2;\n }\n\n button {\n display: flex;\n align-items: center;\n gap: var(--spacing-small);\n }\n\n button,\n input[type='submit'],\n [button-in-field] {\n background-color: var(--button-background-color);\n border: var(--button-border);\n border-radius: var(--button-border-radius);\n padding: var(--button-padding);\n color: var(--button-color);\n font: var(--button-font);\n text-transform: var(--button-text-transform);\n\n margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);\n float: right;\n text-decoration: none;\n }\n\n button:hover,\n input[type='submit']:hover {\n border: var(--button-activ-border);\n box-shadow: var(--button-active-box-shadow);\n }\n\n [button-in-field] {\n border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;\n position: absolute;\n top: 12px;\n right: 0;\n max-height: 36px;\n }\n\n [input-hint] {\n font: var(--input-hint-font);\n color: var(--input-hint-color);\n }\n\n @media screen and (max-width: 480px) {\n [field] {\n grid-column: span 2;\n }\n }\n `\n ]\n\n @property({ type: Object }) application: any\n @queryAll('[clipboard-copy]') copybuttons\n private clipboard?: Clipboard\n\n get context() {\n return {\n title: {\n icon: 'apps',\n text: this.application.name\n }\n }\n }\n\n render() {\n var app = this.application \|\| {}\n\n return html`\n <div>\n <h2><md-icon>apps</md-icon> ${app.name}</h2>\n <p page-description>${app.description}</p>\n </div>\n\n <div icon>\n <img src=${app.icon} />\n </div>\n\n <form>\n <div fieldset-container>\n <fieldset>\n <legend>application</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">app name</label>\n <input id=\"name\" type=\"text\" name=\"name\" .value=${app.name} />\n </div>\n\n <div field grid-span>\n <label for=\"description\">description</label>\n <input id=\"description\" type=\"text\" name=\"description\" .value=${app.description} />\n </div>\n\n <div field grid-span>\n <label for=\"email\">contact email</label>\n <input id=\"email\" type=\"text\" name=\"email\" .value=${app.email} />\n </div>\n\n <div field grid-span>\n <label for=\"type-selector\">type</label>\n <select id=\"type-selector\" name=\"type\">\n ${APPLICATION_TYPES.map(\n type =>\n html`<option value=\"${app.type}\" ?selected=\"${type === app.type ? true : false}\">${type}</option>`\n )}\n </select>\n </div>\n\n <div field grid-span>\n <label for=\"url\">application URL</label>\n <input id=\"url\" type=\"text\" name=\"url\" .value=${app.url} />\n </div>\n\n <div field grid-span>\n <label for=\"icon\">icon</label>\n <input id=\"icon\" type=\"text\" name=\"icon\" .value=${app.icon} />\n </div>\n\n <div field grid-span>\n <label for=\"redirect-url\">redirect URL</label>\n <input id=\"redirect-url\" type=\"text\" name=\"redirectUrl\" .value=${app.redirectUrl} />\n </div>\n\n <div field grid-span>\n <label for=\"webhook\">webhook</label>\n <input id=\"webhook\" type=\"text\" name=\"webhook\" .value=${app.webhook} />\n </div>\n\n <div field grid-span>\n <label for=\"available-scopes\">available-scopes</label>\n <input id=\"available-scopes\" type=\"text\" .value=${app.availableScopes} readonly />\n </div>\n\n <div field grid-span>\n <label for=\"auth-url\">auth URL</label>\n <input id=\"auth-url\" type=\"text\" .value=${app.authUrl} readonly />\n <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n The endpoint for authorization server. This is used to get the authorization code.\n </div>\n\n <div field grid-span>\n <label for=\"access-token-url\">access token URL</label>\n <input id=\"access-token-url\" type=\"text\" .value=${app.accessTokenUrl} readonly />\n <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n The endpoint for authentication server. This is used to exchange the authorization code for an access\n token.\n </div>\n </div>\n </fieldset>\n </div>\n\n <div fieldset-container>\n <fieldset>\n <legend>credentials</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"app-key\">appKey</label>\n <input id=\"app-key\" type=\"text\" .value=${app.appKey} readonly />\n <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n </div>\n\n <div field grid-span>\n <label for=\"app-secret\">appSecret</label>\n <input id=\"app-secret\" type=\"text\" .value=${app.appSecret} readonly />\n <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n </div>\n </div>\n </fieldset>\n </div>\n\n <div class=\"button-container\">\n <button danger @click=${this.deleteApplication.bind(this)}>\n <md-icon>delete_forever</md-icon>delete this app\n </button>\n <button @click=${this.updateApplication.bind(this)}><md-icon>save</md-icon>update</button>\n <button><md-icon>passkey</md-icon>generate new secret</button>\n </div>\n </form>\n `\n }\n\n firstUpdated() {\n this.clipboard = new Clipboard(this.copybuttons, {\n target: (trigger => trigger.parentElement.querySelector('input')) as any\n })\n }\n\n async pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n await this.fetchApplication()\n }\n }\n\n async fetchApplication() {\n const response = await client.query({\n query: gql`\n query ($id: String!) {\n application(id: $id) {\n id\n name\n description\n email\n url\n icon\n redirectUrl\n authUrl\n accessTokenUrl\n webhook\n availableScopes\n appKey\n appSecret\n type\n }\n }\n `,\n variables: {\n id: this.lifecycle.resourceId\n }\n })\n\n this.application = response.data.application\n }\n\n async updateApplication(e) {\n e.preventDefault()\n\n const form = this.renderRoot.querySelector('form') as HTMLFormElement\n const formData = new FormData(form)\n\n const patch = Array.from(formData.entries()).reduce((patch, [key, value]) => {\n patch[key] = value\n return patch\n }, {})\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!, $patch: ApplicationPatch!) {\n updateApplication(id: $id, patch: $patch) {\n id\n name\n description\n email\n url\n icon\n redirectUrl\n webhook\n appKey\n appSecret\n type\n }\n }\n `,\n variables: {\n id,\n patch\n }\n })\n\n if (response.errors) {\n console.error('update fail')\n } else {\n this.application = { ...this.application, ...response.data.updateApplication }\n console.log('update sucess')\n }\n }\n\n async deleteApplication(e) {\n e.preventDefault()\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!) {\n deleteApplication(id: $id)\n }\n `,\n variables: {\n id\n }\n })\n\n const result = response.data.deleteApplication\n if (result) {\n console.log('delete sucess')\n navigate('applications')\n } else {\n console.error('delete fail')\n }\n }\n}\n"]}
1	+ {"version":3,"file":"application.js","sourceRoot":"","sources":["../../../client/pages/application/application.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { APPLICATION_TYPES } from '../../constants/application.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView } from '@operato/shell'\n\n@customElement('application-page')\nclass Application extends PageView { static styles = [\n css`\n :host { display: flex;\n flex-direction: column;\n overflow-y: auto;\n position: relative;\n\n background-color: var(--md-sys-color-background);\n padding: var(--spacing-large);\n }\n\n h2 { margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n\n [page-description] { margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n\n [icon] { position: absolute;\n top: 10px;\n right: 10px;\n max-width: 80px;\n }\n\n [icon] img { max-width: 100%;\n max-height: 100%;\n }\n\n [button-primary] { background-color: var(--button-primary-background-color);\n border: var(--button-border);\n border-radius: var(--button-border-radius);\n margin: var(--button-margin);\n padding: var(--button-primary-padding);\n color: var(--button-primary-color);\n font: var(--button-primary-font);\n text-transform: var(--button-text-transform);\n\n text-decoration: none;\n }\n\n [button-primary]:hover { background-color: var(--button-primary-active-background-color);\n box-shadow: var(--button-active-box-shadow);\n }\n\n [fieldset-container] { background-color: var(--md-sys-color-surface);\n margin: var(--spacing-large) 0 var(--spacing-medium) 0;\n padding: var(--spacing-medium);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n\n label { font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-transform: var(--label-text-transform);\n }\n\n input,\n select { border: var(--border-dim-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n font: var(--input-font);\n\n flex: 1;\n }\n\n select:focus,\n input:focus,\n button { outline: none;\n }\n\n form { max-width: var(--content-container-max-width);\n }\n }\n\n [fieldset-container] fieldset { margin: 0;\n margin-top: -15px;\n }\n\n fieldset { border-radius: var(--border-radius);\n border: var(--border-dim-color);\n margin: var(--fieldset-margin);\n padding: var(--fieldset-padding);\n }\n\n legend { padding: var(--legend-padding);\n font-weight: bold;\n color: var(--legend-color);\n }\n\n [field-2column] { display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n }\n\n [field] { display: flex;\n flex-direction: column;\n position: relative;\n }\n\n [grid-span] { grid-column: span 2;\n }\n\n button { display: flex;\n align-items: center;\n gap: var(--spacing-small);\n }\n\n button,\n input[type='submit'],\n [button-in-field] { background-color: var(--button-background-color);\n border: var(--button-border);\n border-radius: var(--button-border-radius);\n padding: var(--button-padding);\n color: var(--button-color);\n font: var(--button-font);\n text-transform: var(--button-text-transform);\n\n margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);\n float: right;\n text-decoration: none;\n }\n\n button:hover,\n input[type='submit']:hover { border: var(--button-activ-border);\n box-shadow: var(--button-active-box-shadow);\n }\n\n [button-in-field] { border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;\n position: absolute;\n top: 12px;\n right: 0;\n max-height: 36px;\n }\n\n [input-hint] { font: var(--input-hint-font);\n color: var(--input-hint-color);\n }\n\n @media screen and (max-width: 480px) { [field] { grid-column: span 2;\n }\n }\n `\n ]\n\n @property({ type: Object }) application: any\n @queryAll('[clipboard-copy]') copybuttons\n private clipboard?: Clipboard\n\n get context() { return { title: { icon: 'apps',\n text: this.application.name\n }\n }\n }\n\n render() { var app = this.application \|\| {}\n\n return html`\n <div>\n <h2><md-icon>apps</md-icon> ${app.name}</h2>\n <p page-description>${app.description}</p>\n </div>\n\n <div icon>\n <img src=${app.icon} />\n </div>\n\n <form>\n <div fieldset-container>\n <fieldset>\n <legend>application</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">app name</label>\n <input id=\"name\" type=\"text\" name=\"name\" .value=${app.name} />\n </div>\n\n <div field grid-span>\n <label for=\"description\">description</label>\n <input id=\"description\" type=\"text\" name=\"description\" .value=${app.description} />\n </div>\n\n <div field grid-span>\n <label for=\"email\">contact email</label>\n <input id=\"email\" type=\"text\" name=\"email\" .value=${app.email} />\n </div>\n\n <div field grid-span>\n <label for=\"type-selector\">type</label>\n <select id=\"type-selector\" name=\"type\">\n ${APPLICATION_TYPES.map(\n type =>\n html`<option value=\"${app.type}\" ?selected=\"${type === app.type ? true : false}\">${type}</option>`\n )}\n </select>\n </div>\n\n <div field grid-span>\n <label for=\"url\">application URL</label>\n <input id=\"url\" type=\"text\" name=\"url\" .value=${app.url} />\n </div>\n\n <div field grid-span>\n <label for=\"icon\">icon</label>\n <input id=\"icon\" type=\"text\" name=\"icon\" .value=${app.icon} />\n </div>\n\n <div field grid-span>\n <label for=\"redirect-url\">redirect URL</label>\n <input id=\"redirect-url\" type=\"text\" name=\"redirectUrl\" .value=${app.redirectUrl} />\n </div>\n\n <div field grid-span>\n <label for=\"webhook\">webhook</label>\n <input id=\"webhook\" type=\"text\" name=\"webhook\" .value=${app.webhook} />\n </div>\n\n <div field grid-span>\n <label for=\"available-scopes\">available-scopes</label>\n <input id=\"available-scopes\" type=\"text\" .value=${app.availableScopes} readonly />\n </div>\n\n <div field grid-span>\n <label for=\"auth-url\">auth URL</label>\n <input id=\"auth-url\" type=\"text\" .value=${app.authUrl} readonly />\n <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n The endpoint for authorization server. This is used to get the authorization code.\n </div>\n\n <div field grid-span>\n <label for=\"access-token-url\">access token URL</label>\n <input id=\"access-token-url\" type=\"text\" .value=${app.accessTokenUrl} readonly />\n <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n The endpoint for authentication server. This is used to exchange the authorization code for an access\n token.\n </div>\n </div>\n </fieldset>\n </div>\n\n <div fieldset-container>\n <fieldset>\n <legend>credentials</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"app-key\">appKey</label>\n <input id=\"app-key\" type=\"text\" .value=${app.appKey} readonly />\n <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n </div>\n\n <div field grid-span>\n <label for=\"app-secret\">appSecret</label>\n <input id=\"app-secret\" type=\"text\" .value=${app.appSecret} readonly />\n <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n </div>\n </div>\n </fieldset>\n </div>\n\n <div class=\"button-container\">\n <button danger @click=${this.deleteApplication.bind(this)}>\n <md-icon>delete_forever</md-icon>delete this app\n </button>\n <button @click=${this.updateApplication.bind(this)}><md-icon>save</md-icon>update</button>\n <button><md-icon>passkey</md-icon>generate new secret</button>\n </div>\n </form>\n `\n }\n\n firstUpdated() { this.clipboard = new Clipboard(this.copybuttons, { target: (trigger => trigger.parentElement.querySelector('input')) as any\n })\n }\n\n async pageUpdated(changes, lifecycle, before) { if (this.active) { await this.fetchApplication()\n }\n }\n\n async fetchApplication() { const response = await client.query({ query: gql`\n query ($id: String!) { application(id: $id) { id\n name\n description\n email\n url\n icon\n redirectUrl\n authUrl\n accessTokenUrl\n webhook\n availableScopes\n appKey\n appSecret\n type\n }\n }\n `,\n variables: { id: this.lifecycle.resourceId\n }\n })\n\n this.application = response.data.application\n }\n\n async updateApplication(e) { e.preventDefault()\n\n const form = this.renderRoot.querySelector('form') as HTMLFormElement\n const formData = new FormData(form)\n\n const patch = Array.from(formData.entries()).reduce((patch, [key, value]) => { patch[key] = value\n return patch\n }, {})\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({ mutation: gql`\n mutation ($id: String!, $patch: ApplicationPatch!) { updateApplication(id: $id, patch: $patch) { id\n name\n description\n email\n url\n icon\n redirectUrl\n webhook\n appKey\n appSecret\n type\n }\n }\n `,\n variables: { id,\n patch\n }\n })\n\n if (response.errors) { console.error('update fail')\n } else { this.application = { ...this.application, ...response.data.updateApplication }\n console.log('update sucess')\n }\n }\n\n async deleteApplication(e) { e.preventDefault()\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({ mutation: gql`\n mutation ($id: String!) { deleteApplication(id: $id)\n }\n `,\n variables: { id\n }\n })\n\n const result = response.data.deleteApplication\n if (result) { console.log('delete sucess')\n navigate('applications')\n } else { console.error('delete fail')\n }\n }\n}\n"]}

package/dist-client/pages/application/applications.js CHANGED Viewed

@@ -4,65 +4,54 @@ 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';
-let Applications = class Applications extends connect(store)(PageView) {
+import { navigate, PageView } from '@operato/shell';
+let Applications = class Applications extends PageView {
     constructor() {
         super(...arguments);
         this.applications = [];
     }
     static { this.styles = [
         css `
-      :host {
-        background-color: var(--md-sys-color-background);
+      :host {         background-color: var(--md-sys-color-background);
         padding: var(--spacing-large);
         overflow: auto;
-      }
+ }
-      md-elevated-button {
-        text-transform: capitalize;
-      }
+      md-elevated-button {         text-transform: capitalize;
+ }
-      md-outlined-button {
-        float: right;
+      md-outlined-button {         float: right;
         margin-top: var(--spacing-medium);
         text-transform: capitalize;
-      }
+ }
-      h2 {
-        margin: var(--title-margin);
+      h2 {         margin: var(--title-margin);
         font: var(--title-font);
         color: var(--title-text-color);
-      }
+ }
-      [page-description] {
-        margin: var(--page-description-margin);
+      [page-description] {         margin: var(--page-description-margin);
         font: var(--page-description-font);
         color: var(--page-description-color);
-      }
+ }
-      table {
-        margin: var(--spacing-large) 0;
+      table {         margin: var(--spacing-large) 0;
         width: 100%;
         border-collapse: collapse;
-      }
+ }
-      tr {
-        background-color: var(--tr-background-color);
-      }
+      tr {         background-color: var(--tr-background-color);
+ }
-      tr:nth-child(odd) {
-        background-color: var(--tr-background-odd-color);
-      }
+      tr:nth-child(odd) {         background-color: var(--tr-background-odd-color);
+ }
-      tr:hover {
-        background-color: var(--tr-background-hover-color);
-      }
+      tr:hover {         background-color: var(--tr-background-hover-color);
+ }
-      th {
-        border-top: var(--th-border-top);
+      th {         border-top: var(--th-border-top);
         border-bottom: var(--td-border-bottom);
         padding: var(--th-padding);
@@ -70,40 +59,34 @@ let Applications = class Applications extends connect(store)(PageView) {
         color: var(--th-color);
         text-transform: var(--th-text-transform);
         text-align: left;
-      }
+ }
-      td {
-        padding: var(--td-padding);
+      td {         padding: var(--td-padding);
         border-bottom: var(--td-border-bottom);
         font: var(--td-font);
         color: var(--td-color);
-      }
+ }
-      td a {
-        font: var(--td-font);
+      td a {         font: var(--td-font);
         text-decoration: none;
         color: var(--md-sys-color-on-surface);
-      }
+ }
-      td a strong {
-        font: bold 16px var(--theme-font);
+      td a strong {         font: bold 16px var(--theme-font);
         display: block;
         text-decoration: none;
-      }
+ }
-      .text-align-center {
-        text-align: center;
-      }
+      .text-align-center {         text-align: center;
+ }
-      .text-align-right {
-        text-align: right;
-      }
+      .text-align-right {         text-align: right;
+ }
     `
     ]; }
     get context() {
-        return {
-            title: `applications`,
+        return { title: `applications`,
             help: 'auth/application'
         };
     }
@@ -152,18 +135,14 @@ let Applications = class Applications extends connect(store)(PageView) {
         }
     }
     async fetchApplications() {
-        const response = await client.query({
-            query: gql `
-        query {
-          applications {
-            items {
-              id
+        const response = await client.query({ query: gql `
+        query {           applications {             items {               id
               name
               description
-            }
+ }
             total
-          }
-        }
+ }
+ }
       `
         });
         if (!response.errors) {

package/dist-client/pages/application/applications.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"applications.js","sourceRoot":"","sources":["../../../client/pages/application/applications.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,yCAAyC,CAAA;AAEhD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,~~OAAO,EAAE,~~MAAM,~~8BAA8B,CAAA;AAEtD,OAAO,~~EAAE,MAAM,~~EAAE,MAAM,~~kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,~~KAAK,EAAE,~~MAAM,gBAAgB,CAAA;~~AAG1D~~,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,~~OAAO,CAAC,KAAK,CAAC,CAAC,~~QAAQ~~,CAAC~~;~~IAAnD~~;;~~QA2F6B~~,iBAAY,GAAU,EAAE,CAAA;~~IA8ErD~~,CAAC;~~aAxKQ~~,WAAM,GAAG;~~QACd~~,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsFF~~;KACF,~~AAxFY~~,~~CAwFZ~~;IAID,IAAI,OAAO;~~QACT~~,OAAO~~;YACL~~,KAAK,EAAE,cAAc;~~YACrB~~,IAAI,EAAE,kBAAkB;~~SACzB~~,CAAA;~~IACH~~,CAAC;~~IAED~~,MAAM;~~QACJ~~,IAAI,IAAI,GAAG,IAAI,CAAC,YAAY,IAAI,EAAE,CAAA;~~QAElC~~,OAAO,IAAI,CAAA;;;;;;;qCAOsB,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,sBAAsB,CAAC;;;;;;;;;;;;UAYhE,IAAI,CAAC,GAAG,CACR,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;;;0BAGK,eAAe,GAAG,CAAC,EAAE,EAAE;4BACrB,GAAG,CAAC,IAAI;oBAChB,GAAG,CAAC,WAAW;;;;;;;WAOxB,CACF;;;mCAG0B,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC;KAC3D,CAAA;~~IACH~~,CAAC;~~IAED~~,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;~~QAC1C~~,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;~~YAChB~~,IAAI,CAAC,YAAY,GAAG,CAAC,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,KAAK,CAAA;~~QAC5D~~,CAAC;~~IACH~~,CAAC;~~IAED~~,KAAK,CAAC,iBAAiB;~~QACrB~~,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC~~;YAClC~~,KAAK,EAAE,GAAG,CAAA~~;;;;;;;;;;;OAWT~~;~~SACF~~,CAAC,CAAA;~~QAEF~~,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;~~YACrB~~,OAAO,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAA;~~QACnC~~,CAAC;~~IACH~~,CAAC;;~~AA7E0B~~;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;kDAAyB;~~AA3F~~/C,YAAY;IADjB,aAAa,CAAC,mBAAmB,CAAC;GAC7B,YAAY,~~CAyKjB~~","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@material/web/button/outlined-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ~~connect } from 'pwa-helpers/connect-mixin.js'\n\nimport {~~ client } from '@operato/graphql'\nimport { navigate, PageView, ~~store~~ } from '@operato/shell'\n\n@customElement('applications-page')\nclass Applications extends ~~connect(store)(~~PageView) {\n static styles = [\n css`\n :host {\n background-color: var(--md-sys-color-background);\n padding: var(--spacing-large);\n\n overflow: auto;\n }\n\n md-elevated-button {\n text-transform: capitalize;\n }\n\n md-outlined-button {\n float: right;\n margin-top: var(--spacing-medium);\n text-transform: capitalize;\n }\n\n h2 {\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n\n [page-description] {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n\n table {\n margin: var(--spacing-large) 0;\n width: 100%;\n border-collapse: collapse;\n }\n\n tr {\n background-color: var(--tr-background-color);\n }\n\n tr:nth-child(odd) {\n background-color: var(--tr-background-odd-color);\n }\n\n tr:hover {\n background-color: var(--tr-background-hover-color);\n }\n\n th {\n border-top: var(--th-border-top);\n border-bottom: var(--td-border-bottom);\n padding: var(--th-padding);\n\n font: var(--th-font);\n color: var(--th-color);\n text-transform: var(--th-text-transform);\n text-align: left;\n }\n\n td {\n padding: var(--td-padding);\n border-bottom: var(--td-border-bottom);\n font: var(--td-font);\n color: var(--td-color);\n }\n\n td a {\n font: var(--td-font);\n text-decoration: none;\n color: var(--md-sys-color-on-surface);\n }\n\n td a strong {\n font: bold 16px var(--theme-font);\n\n display: block;\n text-decoration: none;\n }\n\n .text-align-center {\n text-align: center;\n }\n\n .text-align-right {\n text-align: right;\n }\n `\n ]\n\n @property({ type: Array }) applications: any[] = []\n\n get context() {\n return {\n title: `applications`,\n help: 'auth/application'\n }\n }\n\n render() {\n var apps = this.applications \|\| []\n\n return html`\n <div>\n <h2>Registered Applications</h2>\n <p page-description>\n What type of app are you building?<br />Choose the app type that best suits the audience you’re building for.\n </p>\n\n <md-elevated-button @click=${e => navigate('application-register')}\n >register new application</md-elevated-button\n >\n </div>\n\n <table>\n <tr>\n <th>app name</th>\n <th>API health</th>\n <th>Installs</th>\n <th>status</th>\n </tr>\n ${apps.map(\n app => html`\n <tr>\n <td>\n <a href=${`application/${app.id}`}>\n <strong>${app.name}</strong>\n ${app.description}\n </a>\n </td>\n <td>OK</td>\n <td class=\"text-align-center\">1</td>\n <td>draft</td>\n </tr>\n `\n )}\n </table>\n\n <md-outlined-button @click=${e => navigate('app-bindings')}>bound applications ..</md-outlined-button>\n `\n }\n\n async pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n this.applications = (await this.fetchApplications()).items\n }\n }\n\n async fetchApplications() {\n const response = await client.query({\n query: gql`\n query {\n applications {\n items {\n id\n name\n description\n }\n total\n }\n }\n `\n })\n\n if (!response.errors) {\n return response.data.applications\n }\n }\n}\n"]}
1	+ {"version":3,"file":"applications.js","sourceRoot":"","sources":["../../../client/pages/application/applications.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,yCAAyC,CAAA;AAEhD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGnD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,QAAQ;IAAnC;;QA2E6B,iBAAY,GAAU,EAAE,CAAA;IAmErD,CAAC;aA9I8C,WAAM,GAAG;QACpD,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;KACF,AAzEkD,CAyElD;IAID,IAAI,OAAO;QAAS,OAAO,EAAQ,KAAK,EAAE,cAAc;YACpD,IAAI,EAAE,kBAAkB;SAC5B,CAAA;IACD,CAAC;IAEA,MAAM;QAAS,IAAI,IAAI,GAAG,IAAI,CAAC,YAAY,IAAI,EAAE,CAAA;QAE/C,OAAO,IAAI,CAAA;;;;;;;qCAOsB,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,sBAAsB,CAAC;;;;;;;;;;;;UAYhE,IAAI,CAAC,GAAG,CACR,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;;;0BAGK,eAAe,GAAG,CAAC,EAAE,EAAE;4BACrB,GAAG,CAAC,IAAI;oBAChB,GAAG,CAAC,WAAW;;;;;;;WAOxB,CACF;;;mCAG0B,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC;KAC3D,CAAA;IACJ,CAAC;IAEA,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAAO,IAAI,CAAC,YAAY,GAAG,CAAC,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,KAAK,CAAA;QACxI,CAAC;IACD,CAAC;IAEA,KAAK,CAAC,iBAAiB;QAAS,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,EAAQ,KAAK,EAAE,GAAG,CAAA;;;;;;;;OAQjF;SACL,CAAC,CAAA;QAEC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YAAO,OAAO,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAA;QAClE,CAAC;IACD,CAAC;;AAlE2B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;kDAAyB;AA3E/C,YAAY;IADjB,aAAa,CAAC,mBAAmB,CAAC;GAC7B,YAAY,CA8IjB","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@material/web/button/outlined-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { navigate, PageView } from '@operato/shell'\n\n@customElement('applications-page')\nclass Applications extends PageView { static styles = [\n css`\n :host { background-color: var(--md-sys-color-background);\n padding: var(--spacing-large);\n\n overflow: auto;\n }\n\n md-elevated-button { text-transform: capitalize;\n }\n\n md-outlined-button { float: right;\n margin-top: var(--spacing-medium);\n text-transform: capitalize;\n }\n\n h2 { margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n\n [page-description] { margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n\n table { margin: var(--spacing-large) 0;\n width: 100%;\n border-collapse: collapse;\n }\n\n tr { background-color: var(--tr-background-color);\n }\n\n tr:nth-child(odd) { background-color: var(--tr-background-odd-color);\n }\n\n tr:hover { background-color: var(--tr-background-hover-color);\n }\n\n th { border-top: var(--th-border-top);\n border-bottom: var(--td-border-bottom);\n padding: var(--th-padding);\n\n font: var(--th-font);\n color: var(--th-color);\n text-transform: var(--th-text-transform);\n text-align: left;\n }\n\n td { padding: var(--td-padding);\n border-bottom: var(--td-border-bottom);\n font: var(--td-font);\n color: var(--td-color);\n }\n\n td a { font: var(--td-font);\n text-decoration: none;\n color: var(--md-sys-color-on-surface);\n }\n\n td a strong { font: bold 16px var(--theme-font);\n\n display: block;\n text-decoration: none;\n }\n\n .text-align-center { text-align: center;\n }\n\n .text-align-right { text-align: right;\n }\n `\n ]\n\n @property({ type: Array }) applications: any[] = []\n\n get context() { return { title: `applications`,\n help: 'auth/application'\n }\n }\n\n render() { var apps = this.applications \|\| []\n\n return html`\n <div>\n <h2>Registered Applications</h2>\n <p page-description>\n What type of app are you building?<br />Choose the app type that best suits the audience you’re building for.\n </p>\n\n <md-elevated-button @click=${e => navigate('application-register')}\n >register new application</md-elevated-button\n >\n </div>\n\n <table>\n <tr>\n <th>app name</th>\n <th>API health</th>\n <th>Installs</th>\n <th>status</th>\n </tr>\n ${apps.map(\n app => html`\n <tr>\n <td>\n <a href=${`application/${app.id}`}>\n <strong>${app.name}</strong>\n ${app.description}\n </a>\n </td>\n <td>OK</td>\n <td class=\"text-align-center\">1</td>\n <td>draft</td>\n </tr>\n `\n )}\n </table>\n\n <md-outlined-button @click=${e => navigate('app-bindings')}>bound applications ..</md-outlined-button>\n `\n }\n\n async pageUpdated(changes, lifecycle, before) { if (this.active) { this.applications = (await this.fetchApplications()).items\n }\n }\n\n async fetchApplications() { const response = await client.query({ query: gql`\n query { applications { items { id\n name\n description\n }\n total\n }\n }\n `\n })\n\n if (!response.errors) { return response.data.applications\n }\n }\n}\n"]}