npm - @things-factory/auth-ui - Versions diffs - 9.1.19 → 10.0.0-beta.2 - Mend

@things-factory/auth-ui 9.1.19 → 10.0.0-beta.2

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/app-binding/app-binding.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"app-binding.js","sourceRoot":"","sources":["../../../client/pages/app-binding/app-binding.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, state } from 'lit/decorators.js'\nimport { asyncReplace } from 'lit/directives/async-replace.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\nimport { parseJwt, sleep } from '@operato/utils'\n\n@customElement('app-binding-page')\nclass AppBinding extends connect(store)(PageView) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\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\n max-width: 80px;\n }\n\n [icon] img {\n max-width: 100%;\n max-height: 100%;\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 input {\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 select:focus,\n input:focus,\n button {\n outline: none;\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 [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 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 }) appbinding: any\n @property({ type: String }) accessToken?: string\n\n @state() _refreshTokenInfo: any\n @state() _accessTokenInfo: any\n\n private clipboard?: Clipboard\n\n get context() {\n return {\n title: {\n icon: 'link',\n text: this.appbinding.name\n }\n }\n }\n\n render() {\n var binding = this.appbinding \|\| {}\n var app = this.appbinding?.application \|\| {}\n var refreshTokenExp = this._refreshTokenInfo?.exp\n var accessTokenExp = this._accessTokenInfo?.exp\n\n return html`\n <div>\n <h2><md-icon>link</md-icon> ${app.name}</h2>\n <p page-description>${app.description}</p>\n </div>\n\n ${app.icon\n ? html`\n <div icon>\n <img src=${app.icon} />\n </div>\n `\n : html``}\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=\"app-name\">app name</label>\n <input id=\"app-name\" type=\"text\" .value=${app.name} readonly />\n </div>\n\n <div field grid-span>\n <label for=\"app-description\">description</label>\n <input id=\"app-description\" type=\"text\" .value=${app.description} readonly />\n </div>\n\n <div field>\n <label for=\"contact-email\">contact email</label>\n <input id=\"contact-email\" type=\"text\" .value=${app.email} readonly />\n </div>\n </div>\n </fieldset>\n </div>\n\n <div fieldset-container>\n <fieldset>\n <legend>binding</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"id\">id</label>\n <input id=\"id\" type=\"text\" .value=${binding.id} readonly />\n </div>\n\n <div field grid-span>\n <label for=\"name\">name</label>\n <input id=\"name\" type=\"text\" .value=${binding.email} readonly />\n </div>\n\n <div field>\n <label for=\"status\">status</label>\n <input id=\"status\" type=\"text\" .value=${binding.status} readonly />\n </div>\n\n <div field>\n <label for=\"scope\">scope</label>\n <input id=\"scope\" type=\"text\" .value=${binding.scope} readonly />\n </div>\n </div>\n </fieldset>\n </div>\n\n <div fieldset-container>\n <fieldset>\n <legend>binding credential</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"access-token\">access token</label>\n <input id=\"access-token\" type=\"text\" .value=${this.accessToken \|\| ''} readonly />\n <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n ${accessTokenExp\n ? html`<div input-hint>\n expired in ${new Date(accessTokenExp).toLocaleString()} :\n ${asyncReplace(this.expTimer(accessTokenExp))}\n </div>`\n : html``}\n </div>\n\n <div field grid-span>\n <label for=\"refresh-token\">refresh token</label>\n <input id=\"refresh-token\" type=\"text\" .value=${binding.refreshToken \|\| ''} readonly />\n <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n ${refreshTokenExp\n ? html`<div input-hint>\n expired in ${new Date(refreshTokenExp).toLocaleString()} :\n ${asyncReplace(this.expTimer(refreshTokenExp))}\n </div>`\n : html``}\n </div>\n </div>\n </fieldset>\n </div>\n\n <button @click=${this.deleteAppBinding.bind(this)}>delete this application binding</button>\n <button @click=${this.renewApplicationAccessToken.bind(this)}>renew access token</button>\n </form>\n `\n }\n\n async expTimer(exp) {\n const DAY = 24 60 * 60\n const HOUR = 60 * 60\n const MIN = 60\n\n while (this.active) {\n var remain = Math.floor(Number(exp) - Date.now() / 1000)\n const days = Math.floor(remain / DAY)\n remain -= days * DAY\n const hours = Math.floor(remain / HOUR)\n remain -= hours * HOUR\n const mins = Math.floor(remain / MIN)\n const secs = remain - mins * MIN\n\n yield `${days} days ${hours} hours ${mins} mins ${secs} seconds remain`\n\n await sleep(1000)\n }\n }\n\n firstUpdated() {\n const copybuttons = this.renderRoot.querySelectorAll('[clipboard-copy]')\n\n this.clipboard = new Clipboard(copybuttons, {\n target: (trigger => trigger.parentElement.querySelector('input')) as any\n })\n }\n\n updated(changes) {\n /\n If this page properties are changed, this callback will be invoked.\n * This callback will be called back only when this page is activated.\n /\n if (changes.has('appbinding')) {\n const { refreshToken } = this.appbinding \|\| {}\n this._refreshTokenInfo = refreshToken ? parseJwt(refreshToken) : {}\n }\n\n if (changes.has('accessToken')) {\n this._accessTokenInfo = this.accessToken ? parseJwt(this.accessToken) : {}\n }\n }\n\n async pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n /\n * this page is activated\n /\n await this.fetchAppBinding()\n } else {\n / this page is deactivated */\n }\n }\n\n async fetchAppBinding() {\n const response = await client.query({\n query: gql`\n query ($id: String!) {\n appBinding(id: $id) {\n id\n name\n description\n email\n scope\n status\n application {\n id\n name\n description\n email\n icon\n }\n refreshToken\n }\n }\n `,\n variables: {\n id: this.lifecycle.resourceId\n }\n })\n\n this.appbinding = response.data.appBinding\n }\n\n async deleteAppBinding(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 deleteAppBinding(id: $id)\n }\n `,\n variables: {\n id\n }\n })\n\n const result = response.data.deleteAppBinding\n if (result) {\n console.log('delete sucess')\n navigate(`app-bindings`)\n } else {\n console.error('delete fail')\n }\n }\n\n async renewApplicationAccessToken(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 renewApplicationAccessToken(id: $id) {\n accessToken\n refreshToken\n }\n }\n `,\n variables: {\n id\n }\n })\n\n if (response.errors) {\n console.error('renew application access token fail')\n } else {\n const { accessToken, refreshToken } = response.data.renewApplicationAccessToken\n this.accessToken = accessToken\n this.appbinding = {\n ...this.appbinding,\n refreshToken\n }\n }\n }\n}\n"]}
1	+ {"version":3,"file":"app-binding.js","sourceRoot":"","sources":["../../../client/pages/app-binding/app-binding.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, state } from 'lit/decorators.js'\nimport { asyncReplace } from 'lit/directives/async-replace.js'\nimport { client } from '@operato/graphql'\nimport { navigate, PageView } from '@operato/shell'\nimport { parseJwt, sleep } from '@operato/utils'\n\n@customElement('app-binding-page')\nclass AppBinding extends PageView { static styles = [\n css`\n :host { display: flex;\n flex-direction: column;\n overflow-y: auto;\n\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\n max-width: 80px;\n }\n\n [icon] img { max-width: 100%;\n max-height: 100%;\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 input { 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 select:focus,\n input:focus,\n button { outline: none;\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,\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 { 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 }) appbinding: any\n @property({ type: String }) accessToken?: string\n\n @state() _refreshTokenInfo: any\n @state() _accessTokenInfo: any\n\n private clipboard?: Clipboard\n\n get context() { return { title: { icon: 'link',\n text: this.appbinding.name\n }\n }\n }\n\n render() { var binding = this.appbinding \|\| {}\n var app = this.appbinding?.application \|\| {}\n var refreshTokenExp = this._refreshTokenInfo?.exp\n var accessTokenExp = this._accessTokenInfo?.exp\n\n return html`\n <div>\n <h2><md-icon>link</md-icon> ${app.name}</h2>\n <p page-description>${app.description}</p>\n </div>\n\n ${app.icon\n ? html`\n <div icon>\n <img src=${app.icon} />\n </div>\n `\n : html``}\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=\"app-name\">app name</label>\n <input id=\"app-name\" type=\"text\" .value=${app.name} readonly />\n </div>\n\n <div field grid-span>\n <label for=\"app-description\">description</label>\n <input id=\"app-description\" type=\"text\" .value=${app.description} readonly />\n </div>\n\n <div field>\n <label for=\"contact-email\">contact email</label>\n <input id=\"contact-email\" type=\"text\" .value=${app.email} readonly />\n </div>\n </div>\n </fieldset>\n </div>\n\n <div fieldset-container>\n <fieldset>\n <legend>binding</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"id\">id</label>\n <input id=\"id\" type=\"text\" .value=${binding.id} readonly />\n </div>\n\n <div field grid-span>\n <label for=\"name\">name</label>\n <input id=\"name\" type=\"text\" .value=${binding.email} readonly />\n </div>\n\n <div field>\n <label for=\"status\">status</label>\n <input id=\"status\" type=\"text\" .value=${binding.status} readonly />\n </div>\n\n <div field>\n <label for=\"scope\">scope</label>\n <input id=\"scope\" type=\"text\" .value=${binding.scope} readonly />\n </div>\n </div>\n </fieldset>\n </div>\n\n <div fieldset-container>\n <fieldset>\n <legend>binding credential</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"access-token\">access token</label>\n <input id=\"access-token\" type=\"text\" .value=${this.accessToken \|\| ''} readonly />\n <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n ${accessTokenExp\n ? html`<div input-hint>\n expired in ${new Date(accessTokenExp).toLocaleString()} :\n ${asyncReplace(this.expTimer(accessTokenExp))}\n </div>`\n : html``}\n </div>\n\n <div field grid-span>\n <label for=\"refresh-token\">refresh token</label>\n <input id=\"refresh-token\" type=\"text\" .value=${binding.refreshToken \|\| ''} readonly />\n <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n ${refreshTokenExp\n ? html`<div input-hint>\n expired in ${new Date(refreshTokenExp).toLocaleString()} :\n ${asyncReplace(this.expTimer(refreshTokenExp))}\n </div>`\n : html``}\n </div>\n </div>\n </fieldset>\n </div>\n\n <button @click=${this.deleteAppBinding.bind(this)}>delete this application binding</button>\n <button @click=${this.renewApplicationAccessToken.bind(this)}>renew access token</button>\n </form>\n `\n }\n\n async expTimer(exp) { const DAY = 24 60 * 60\n const HOUR = 60 * 60\n const MIN = 60\n\n while (this.active) { var remain = Math.floor(Number(exp) - Date.now() / 1000)\n const days = Math.floor(remain / DAY)\n remain -= days * DAY\n const hours = Math.floor(remain / HOUR)\n remain -= hours * HOUR\n const mins = Math.floor(remain / MIN)\n const secs = remain - mins * MIN\n\n yield `${days} days ${hours} hours ${mins} mins ${secs} seconds remain`\n\n await sleep(1000)\n }\n }\n\n firstUpdated() { const copybuttons = this.renderRoot.querySelectorAll('[clipboard-copy]')\n\n this.clipboard = new Clipboard(copybuttons, { target: (trigger => trigger.parentElement.querySelector('input')) as any\n })\n }\n\n updated(changes) { /\n If this page properties are changed, this callback will be invoked.\n * This callback will be called back only when this page is activated.\n /\n if (changes.has('appbinding')) { const { refreshToken } = this.appbinding \|\| {}\n this._refreshTokenInfo = refreshToken ? parseJwt(refreshToken) : {}\n }\n\n if (changes.has('accessToken')) { this._accessTokenInfo = this.accessToken ? parseJwt(this.accessToken) : {}\n }\n }\n\n async pageUpdated(changes, lifecycle, before) { if (this.active) { /\n * this page is activated\n /\n await this.fetchAppBinding()\n } else { / this page is deactivated */\n }\n }\n\n async fetchAppBinding() { const response = await client.query({ query: gql`\n query ($id: String!) { appBinding(id: $id) { id\n name\n description\n email\n scope\n status\n application { id\n name\n description\n email\n icon\n }\n refreshToken\n }\n }\n `,\n variables: { id: this.lifecycle.resourceId\n }\n })\n\n this.appbinding = response.data.appBinding\n }\n\n async deleteAppBinding(e) { e.preventDefault()\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({ mutation: gql`\n mutation ($id: String!) { deleteAppBinding(id: $id)\n }\n `,\n variables: { id\n }\n })\n\n const result = response.data.deleteAppBinding\n if (result) { console.log('delete sucess')\n navigate(`app-bindings`)\n } else { console.error('delete fail')\n }\n }\n\n async renewApplicationAccessToken(e) { e.preventDefault()\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({ mutation: gql`\n mutation ($id: String!) { renewApplicationAccessToken(id: $id) { accessToken\n refreshToken\n }\n }\n `,\n variables: { id\n }\n })\n\n if (response.errors) { console.error('renew application access token fail')\n } else { const { accessToken, refreshToken } = response.data.renewApplicationAccessToken\n this.accessToken = accessToken\n this.appbinding = { ...this.appbinding,\n refreshToken\n }\n }\n }\n}\n"]}

package/dist-client/pages/app-binding/app-bindings.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 AppBindings = class AppBindings extends connect(store)(PageView) {
+import { navigate, PageView } from '@operato/shell';
+let AppBindings = class AppBindings extends PageView {
     constructor() {
         super(...arguments);
         this.appBindings = [];
     }
     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 {
-        width: 100%;
+      table {         width: 100%;
         margin: var(--spacing-large) 0;
         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,35 +59,30 @@ let AppBindings = class AppBindings 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 {
-        color: var(--md-sys-color-primary);
+      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-center {         text-align: center;
+ }
-      .text-align-right {
-        text-align: right;
-      }
+      .text-align-right {         text-align: right;
+ }
     `
     ]; }
     get context() {
-        return {
-            title: `application bindings`,
+        return { title: `application bindings`,
             help: 'auth/application'
         };
     }
@@ -136,23 +120,18 @@ let AppBindings = class AppBindings extends connect(store)(PageView) {
         }
     }
     async fetchAppBindings() {
-        const response = await client.query({
-            query: gql `
-        query {
-          appBindings {
-            items {
-              id
+        const response = await client.query({ query: gql `
+        query {           appBindings {             items {               id
               name
-              application {
-                id
+              application {                 id
                 name
-              }
+ }
               scope
               status
-            }
+ }
             total
-          }
-        }
+ }
+ }
       `
         });
         if (!response.errors) {

package/dist-client/pages/app-binding/app-bindings.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"app-bindings.js","sourceRoot":"","sources":["../../../client/pages/app-binding/app-bindings.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,WAAW,GAAjB,MAAM,WAAY,SAAQ,~~OAAO,CAAC,KAAK,CAAC,CAAC,~~QAAQ~~,CAAC~~;~~IAAlD~~;;~~QAsF6B~~,gBAAW,GAAU,EAAE,CAAA;~~IAwEpD~~,CAAC;~~aA7JQ~~,WAAM,GAAG;~~QACd~~,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiFF~~;KACF,~~AAnFY~~,~~CAmFZ~~;IAID,IAAI,OAAO;~~QACT~~,OAAO~~;YACL~~,KAAK,EAAE,sBAAsB;~~YAC7B~~,IAAI,EAAE,kBAAkB;~~SACzB~~,CAAA;~~IACH~~,CAAC;~~IAED~~,MAAM;~~QACJ~~,IAAI,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,EAAE,CAAA;~~QAExC~~,OAAO,IAAI,CAAA;;;;;;;;;;;;UAYL,WAAW,CAAC,GAAG,CACf,UAAU,CAAC,EAAE,CAAC,IAAI,CAAA;;;0BAGF,eAAe,UAAU,CAAC,EAAE,EAAE,IAAI,UAAU,CAAC,IAAI;kBACzD,UAAU,CAAC,WAAW;;oBAEpB,UAAU,CAAC,KAAK;oBAChB,UAAU,CAAC,MAAM;;WAE1B,CACF;;mCAE0B,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,WAAW,GAAG,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,KAAK,CAAA;~~QAC1D~~,CAAC;~~IACH~~,CAAC;~~IAED~~,KAAK,CAAC,gBAAgB;~~QACpB~~,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC~~;YAClC~~,KAAK,EAAE,GAAG,CAAA~~;;;;;;;;;;;;;;;;OAgBT~~;~~SACF~~,CAAC,CAAA;~~QAEF~~,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;~~YACrB~~,OAAO,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAA;~~QAClC~~,CAAC;~~IACH~~,CAAC;;~~AAvE0B~~;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;gDAAwB;~~AAtF9C~~,WAAW;IADhB,aAAa,CAAC,mBAAmB,CAAC;GAC7B,WAAW,~~CA8JhB~~","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('app-bindings-page')\nclass AppBindings 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 width: 100%;\n margin: var(--spacing-large) 0;\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 color: var(--md-sys-color-primary);\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 }) appBindings: any[] = []\n\n get context() {\n return {\n title: `application bindings`,\n help: 'auth/application'\n }\n }\n\n render() {\n var appBindings = this.appBindings \|\| []\n\n return html`\n <div>\n <h2>Bound Applications</h2>\n <p page-description>Bound Applications goes here</p>\n </div>\n\n <table>\n <tr>\n <th>app name</th>\n <th>Scope</th>\n <th>status</th>\n </tr>\n ${appBindings.map(\n appBinding => html`\n <tr>\n <td>\n <a href=${`app-binding/${appBinding.id}`}>${appBinding.name}</a>\n ${appBinding.description}\n </td>\n <td>${appBinding.scope}</td>\n <td>${appBinding.status}</td>\n </tr>\n `\n )}\n </table>\n <md-elevated-button @click=${e => navigate('applications')}>registered applications ..</md-elevated-button>\n `\n }\n\n async pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n this.appBindings = (await this.fetchAppBindings()).items\n }\n }\n\n async fetchAppBindings() {\n const response = await client.query({\n query: gql`\n query {\n appBindings {\n items {\n id\n name\n application {\n id\n name\n }\n scope\n status\n }\n total\n }\n }\n `\n })\n\n if (!response.errors) {\n return response.data.appBindings\n }\n }\n}\n"]}
1	+ {"version":3,"file":"app-bindings.js","sourceRoot":"","sources":["../../../client/pages/app-binding/app-bindings.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,WAAW,GAAjB,MAAM,WAAY,SAAQ,QAAQ;IAAlC;;QAuE6B,gBAAW,GAAU,EAAE,CAAA;IA4DpD,CAAC;aAnI6C,WAAM,GAAG;QACnD,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmEF;KACF,AArEiD,CAqEjD;IAID,IAAI,OAAO;QAAS,OAAO,EAAQ,KAAK,EAAE,sBAAsB;YAC5D,IAAI,EAAE,kBAAkB;SAC5B,CAAA;IACD,CAAC;IAEA,MAAM;QAAS,IAAI,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,EAAE,CAAA;QAErD,OAAO,IAAI,CAAA;;;;;;;;;;;;UAYL,WAAW,CAAC,GAAG,CACf,UAAU,CAAC,EAAE,CAAC,IAAI,CAAA;;;0BAGF,eAAe,UAAU,CAAC,EAAE,EAAE,IAAI,UAAU,CAAC,IAAI;kBACzD,UAAU,CAAC,WAAW;;oBAEpB,UAAU,CAAC,KAAK;oBAChB,UAAU,CAAC,MAAM;;WAE1B,CACF;;mCAE0B,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,WAAW,GAAG,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,KAAK,CAAA;QACtI,CAAC;IACD,CAAC;IAEA,KAAK,CAAC,gBAAgB;QAAS,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,EAAQ,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;OAYhF;SACL,CAAC,CAAA;QAEC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YAAO,OAAO,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAA;QACjE,CAAC;IACD,CAAC;;AA3D2B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;gDAAwB;AAvE9C,WAAW;IADhB,aAAa,CAAC,mBAAmB,CAAC;GAC7B,WAAW,CAmIhB","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('app-bindings-page')\nclass AppBindings 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 { width: 100%;\n margin: var(--spacing-large) 0;\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 { color: var(--md-sys-color-primary);\n 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 }) appBindings: any[] = []\n\n get context() { return { title: `application bindings`,\n help: 'auth/application'\n }\n }\n\n render() { var appBindings = this.appBindings \|\| []\n\n return html`\n <div>\n <h2>Bound Applications</h2>\n <p page-description>Bound Applications goes here</p>\n </div>\n\n <table>\n <tr>\n <th>app name</th>\n <th>Scope</th>\n <th>status</th>\n </tr>\n ${appBindings.map(\n appBinding => html`\n <tr>\n <td>\n <a href=${`app-binding/${appBinding.id}`}>${appBinding.name}</a>\n ${appBinding.description}\n </td>\n <td>${appBinding.scope}</td>\n <td>${appBinding.status}</td>\n </tr>\n `\n )}\n </table>\n <md-elevated-button @click=${e => navigate('applications')}>registered applications ..</md-elevated-button>\n `\n }\n\n async pageUpdated(changes, lifecycle, before) { if (this.active) { this.appBindings = (await this.fetchAppBindings()).items\n }\n }\n\n async fetchAppBindings() { const response = await client.query({ query: gql`\n query { appBindings { items { id\n name\n application { id\n name\n }\n scope\n status\n }\n total\n }\n }\n `\n })\n\n if (!response.errors) { return response.data.appBindings\n }\n }\n}\n"]}

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

@@ -5,50 +5,43 @@ import gql from 'graphql-tag';
 import { css, html } from 'lit';
 import { customElement, property, queryAll } from 'lit/decorators.js';
 import { asyncReplace } from 'lit/directives/async-replace.js';
-import { connect } from 'pwa-helpers/connect-mixin.js';
 import { client } from '@operato/graphql';
-import { navigate, PageView, store } from '@operato/shell';
+import { navigate, PageView } from '@operato/shell';
 import { parseJwt, sleep } from '@operato/utils';
 import { i18next } from '@operato/i18n';
-let Appliance = class Appliance extends connect(store)(PageView) {
+let Appliance = class Appliance 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);
@@ -58,92 +51,78 @@ let Appliance = class Appliance 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);
@@ -154,38 +133,31 @@ let Appliance = class Appliance 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: 'devices',
+        return { title: { icon: 'devices',
                 text: this.appliance.name
             }
         };
@@ -267,15 +239,10 @@ let Appliance = class Appliance 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'))
         });
     }
     updated(changes) {
-        /*
-         * If this page properties are changed, this callback will be invoked.
-         * This callback will be called back only when this page is activated.
-         */
         if (changes.has('appliance')) {
             const { accessToken } = this.appliance || {};
             this.accessToken = accessToken;
@@ -290,11 +257,8 @@ let Appliance = class Appliance extends connect(store)(PageView) {
         }
     }
     async fetchAppliance() {
-        const response = await client.query({
-            query: gql `
-        query ($id: String!) {
-          appliance(id: $id) {
-            id
+        const response = await client.query({ query: gql `
+        query ($id: String!) {           appliance(id: $id) {             id
             name
             description
             serialNo
@@ -302,11 +266,10 @@ let Appliance = class Appliance extends connect(store)(PageView) {
             model
             netmask
             accessToken
-          }
-        }
+ }
+ }
       `,
-            variables: {
-                id: this.lifecycle.resourceId
+            variables: { id: this.lifecycle.resourceId
             }
         });
         this.appliance = response.data.appliance;
@@ -320,11 +283,8 @@ let Appliance = class Appliance extends connect(store)(PageView) {
             return patch;
         }, {});
         const id = this.lifecycle.resourceId;
-        const response = await client.mutate({
-            mutation: gql `
-        mutation ($id: String!, $patch: AppliancePatch!) {
-          updateAppliance(id: $id, patch: $patch) {
-            id
+        const response = await client.mutate({ mutation: gql `
+        mutation ($id: String!, $patch: AppliancePatch!) {           updateAppliance(id: $id, patch: $patch) {             id
             name
             description
             serialNo
@@ -332,11 +292,10 @@ let Appliance = class Appliance extends connect(store)(PageView) {
             model
             netmask
             accessToken
-          }
-        }
+ }
+ }
       `,
-            variables: {
-                id,
+            variables: { id,
                 patch
             }
         });
@@ -351,14 +310,11 @@ let Appliance = class Appliance extends connect(store)(PageView) {
     async deleteAppliance(e) {
         e.preventDefault();
         const id = this.lifecycle.resourceId;
-        const response = await client.mutate({
-            mutation: gql `
-        mutation ($id: String!) {
-          deleteAppliance(id: $id)
-        }
+        const response = await client.mutate({ mutation: gql `
+        mutation ($id: String!) {           deleteAppliance(id: $id)
+ }
       `,
-            variables: {
-                id
+            variables: { id
             }
         });
         if (response.errors) {
@@ -371,11 +327,8 @@ let Appliance = class Appliance extends connect(store)(PageView) {
     async generateApplianceSecret(e) {
         e.preventDefault();
         const id = this.lifecycle.resourceId;
-        const response = await client.mutate({
-            mutation: gql `
-        mutation ($id: String!) {
-          generateApplianceSecret(id: $id) {
-            id
+        const response = await client.mutate({ mutation: gql `
+        mutation ($id: String!) {           generateApplianceSecret(id: $id) {             id
             name
             description
             serialNo
@@ -383,11 +336,10 @@ let Appliance = class Appliance extends connect(store)(PageView) {
             model
             netmask
             accessToken
-          }
-        }
+ }
+ }
       `,
-            variables: {
-                id
+            variables: { id
             }
         });
         if (response.errors) {