npm - @things-factory/auth-ui - Versions diffs - 9.0.0-beta.76 → 9.0.0 - Mend

@things-factory/auth-ui 9.0.0-beta.76 → 9.0.0

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 (91) hide show

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

@@ -1,4 +1,4 @@
-import { __asyncGenerator, __await, __decorate, __metadata } from "tslib";
+import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
 import Clipboard from 'clipboard';
 import gql from 'graphql-tag';
@@ -10,6 +10,149 @@ import { client } from '@operato/graphql';
 import { navigate, PageView, store } from '@operato/shell';
 import { parseJwt, sleep } from '@operato/utils';
 let AppBinding = class AppBinding extends connect(store)(PageView) {
+    static { this.styles = [
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        position: relative;
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
+      }
+      h2 {
+        margin: var(--title-margin);
+        font: var(--title-font);
+        color: var(--title-text-color);
+      }
+      [page-description] {
+        margin: var(--page-description-margin);
+        font: var(--page-description-font);
+        color: var(--page-description-color);
+      }
+      [icon] {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        max-width: 80px;
+      }
+      [icon] img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+      [fieldset-container] {
+        background-color: var(--md-sys-color-surface);
+        margin: var(--spacing-large) 0 var(--spacing-medium) 0;
+        padding: var(--spacing-medium);
+        border-radius: var(--border-radius);
+        box-shadow: var(--box-shadow);
+        label {
+          font: var(--label-font);
+          color: var(--label-color, var(--md-sys-color-on-surface));
+          text-transform: var(--label-text-transform);
+        }
+        input {
+          border: var(--border-dim-color);
+          border-radius: var(--border-radius);
+          margin: var(--input-margin);
+          padding: var(--input-padding);
+          font: var(--input-font);
+          flex: 1;
+        }
+        select:focus,
+        input:focus,
+        button {
+          outline: none;
+        }
+        form {
+          max-width: var(--content-container-max-width);
+        }
+      }
+      [fieldset-container] fieldset {
+        margin: 0;
+        margin-top: -15px;
+      }
+      fieldset {
+        border-radius: var(--border-radius);
+        border: var(--border-dim-color);
+        margin: var(--fieldset-margin);
+        padding: var(--fieldset-padding);
+      }
+      legend {
+        padding: var(--legend-padding);
+        font-weight: bold;
+        color: var(--legend-color);
+      }
+      [field-2column] {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 15px;
+      }
+      [field] {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+      }
+      [grid-span] {
+        grid-column: span 2;
+      }
+      button,
+      [button-in-field] {
+        background-color: var(--button-background-color);
+        border: var(--button-border);
+        border-radius: var(--button-border-radius);
+        padding: var(--button-padding);
+        color: var(--button-color);
+        font: var(--button-font);
+        text-transform: var(--button-text-transform);
+        margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
+        float: right;
+        text-decoration: none;
+      }
+      button:hover {
+        border: var(--button-activ-border);
+        box-shadow: var(--button-active-box-shadow);
+      }
+      [button-in-field] {
+        border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
+        position: absolute;
+        top: 12px;
+        right: 0;
+        max-height: 36px;
+      }
+      [input-hint] {
+        font: var(--input-hint-font);
+        color: var(--input-hint-color);
+      }
+      @media screen and (max-width: 480px) {
+        [field] {
+          grid-column: span 2;
+        }
+      }
+    `
+    ]; }
     get context() {
         return {
             title: {
@@ -19,11 +162,10 @@ let AppBinding = class AppBinding extends connect(store)(PageView) {
         };
     }
     render() {
-        var _a, _b, _c;
         var binding = this.appbinding || {};
-        var app = ((_a = this.appbinding) === null || _a === void 0 ? void 0 : _a.application) || {};
-        var refreshTokenExp = (_b = this._refreshTokenInfo) === null || _b === void 0 ? void 0 : _b.exp;
-        var accessTokenExp = (_c = this._accessTokenInfo) === null || _c === void 0 ? void 0 : _c.exp;
+        var app = this.appbinding?.application || {};
+        var refreshTokenExp = this._refreshTokenInfo?.exp;
+        var accessTokenExp = this._accessTokenInfo?.exp;
         return html `
       <div>
         <h2><md-icon>link</md-icon>&nbsp;${app.name}</h2>
@@ -124,23 +266,21 @@ let AppBinding = class AppBinding extends connect(store)(PageView) {
       </form>
     `;
     }
-    expTimer(exp) {
-        return __asyncGenerator(this, arguments, function* expTimer_1() {
-            const DAY = 24 * 60 * 60;
-            const HOUR = 60 * 60;
-            const MIN = 60;
-            while (this.active) {
-                var remain = Math.floor(Number(exp) - Date.now() / 1000);
-                const days = Math.floor(remain / DAY);
-                remain -= days * DAY;
-                const hours = Math.floor(remain / HOUR);
-                remain -= hours * HOUR;
-                const mins = Math.floor(remain / MIN);
-                const secs = remain - mins * MIN;
-                yield yield __await(`${days} days ${hours} hours ${mins} mins ${secs} seconds remain`);
-                yield __await(sleep(1000));
-            }
-        });
+    async *expTimer(exp) {
+        const DAY = 24 * 60 * 60;
+        const HOUR = 60 * 60;
+        const MIN = 60;
+        while (this.active) {
+            var remain = Math.floor(Number(exp) - Date.now() / 1000);
+            const days = Math.floor(remain / DAY);
+            remain -= days * DAY;
+            const hours = Math.floor(remain / HOUR);
+            remain -= hours * HOUR;
+            const mins = Math.floor(remain / MIN);
+            const secs = remain - mins * MIN;
+            yield `${days} days ${hours} hours ${mins} mins ${secs} seconds remain`;
+            await sleep(1000);
+        }
     }
     firstUpdated() {
         const copybuttons = this.renderRoot.querySelectorAll('[clipboard-copy]');
@@ -244,153 +384,13 @@ let AppBinding = class AppBinding extends connect(store)(PageView) {
         else {
             const { accessToken, refreshToken } = response.data.renewApplicationAccessToken;
             this.accessToken = accessToken;
-            this.appbinding = Object.assign(Object.assign({}, this.appbinding), { refreshToken });
+            this.appbinding = {
+                ...this.appbinding,
+                refreshToken
+            };
         }
     }
 };
-AppBinding.styles = [
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        overflow-y: auto;
-        position: relative;
-        background-color: var(--md-sys-color-background);
-        padding: var(--spacing-large);
-      }
-      h2 {
-        margin: var(--title-margin);
-        font: var(--title-font);
-        color: var(--title-text-color);
-      }
-      [page-description] {
-        margin: var(--page-description-margin);
-        font: var(--page-description-font);
-        color: var(--page-description-color);
-      }
-      [icon] {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        max-width: 80px;
-      }
-      [icon] img {
-        max-width: 100%;
-        max-height: 100%;
-      }
-      [fieldset-container] {
-        background-color: var(--md-sys-color-surface);
-        margin: var(--spacing-large) 0 var(--spacing-medium) 0;
-        padding: var(--spacing-medium);
-        border-radius: var(--border-radius);
-        box-shadow: var(--box-shadow);
-        label {
-          font: var(--label-font);
-          color: var(--label-color, var(--md-sys-color-on-surface));
-          text-transform: var(--label-text-transform);
-        }
-        input {
-          border: var(--border-dim-color);
-          border-radius: var(--border-radius);
-          margin: var(--input-margin);
-          padding: var(--input-padding);
-          font: var(--input-font);
-          flex: 1;
-        }
-        select:focus,
-        input:focus,
-        button {
-          outline: none;
-        }
-        form {
-          max-width: var(--content-container-max-width);
-        }
-      }
-      [fieldset-container] fieldset {
-        margin: 0;
-        margin-top: -15px;
-      }
-      fieldset {
-        border-radius: var(--border-radius);
-        border: var(--border-dim-color);
-        margin: var(--fieldset-margin);
-        padding: var(--fieldset-padding);
-      }
-      legend {
-        padding: var(--legend-padding);
-        font-weight: bold;
-        color: var(--legend-color);
-      }
-      [field-2column] {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-gap: 15px;
-      }
-      [field] {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-      }
-      [grid-span] {
-        grid-column: span 2;
-      }
-      button,
-      [button-in-field] {
-        background-color: var(--button-background-color);
-        border: var(--button-border);
-        border-radius: var(--button-border-radius);
-        padding: var(--button-padding);
-        color: var(--button-color);
-        font: var(--button-font);
-        text-transform: var(--button-text-transform);
-        margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
-        float: right;
-        text-decoration: none;
-      }
-      button:hover {
-        border: var(--button-activ-border);
-        box-shadow: var(--button-active-box-shadow);
-      }
-      [button-in-field] {
-        border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
-        position: absolute;
-        top: 12px;
-        right: 0;
-        max-height: 36px;
-      }
-      [input-hint] {
-        font: var(--input-hint-font);
-        color: var(--input-hint-color);
-      }
-      @media screen and (max-width: 480px) {
-        [field] {
-          grid-column: span 2;
-        }
-      }
-    `
-];
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)

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 { 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"]}

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

@@ -12,72 +12,8 @@ let AppBindings = class AppBindings extends connect(store)(PageView) {
         super(...arguments);
         this.appBindings = [];
     }
-    get context() {
-        return {
-            title: `application bindings`,
-            help: 'auth/application'
-        };
-    }
-    render() {
-        var appBindings = this.appBindings || [];
-        return html `
-      <div>
-        <h2>Bound Applications</h2>
-        <p page-description>Bound Applications goes here</p>
-      </div>
-      <table>
-        <tr>
-          <th>app name</th>
-          <th>Scope</th>
-          <th>status</th>
-        </tr>
-        ${appBindings.map(appBinding => html `
-            <tr>
-              <td>
-                <a href=${`app-binding/${appBinding.id}`}>${appBinding.name}</a>
-                ${appBinding.description}
-              </td>
-              <td>${appBinding.scope}</td>
-              <td>${appBinding.status}</td>
-            </tr>
-          `)}
-      </table>
-      <md-elevated-button @click=${e => navigate('applications')}>registered applications ..</md-elevated-button>
-    `;
-    }
-    async pageUpdated(changes, lifecycle, before) {
-        if (this.active) {
-            this.appBindings = (await this.fetchAppBindings()).items;
-        }
-    }
-    async fetchAppBindings() {
-        const response = await client.query({
-            query: gql `
-        query {
-          appBindings {
-            items {
-              id
-              name
-              application {
-                id
-                name
-              }
-              scope
-              status
-            }
-            total
-          }
-        }
-      `
-        });
-        if (!response.errors) {
-            return response.data.appBindings;
-        }
-    }
-};
-AppBindings.styles = [
-    css `
+    static { this.styles = [
+        css `
       :host {
         background-color: var(--md-sys-color-background);
         padding: var(--spacing-large);
@@ -159,7 +95,71 @@ AppBindings.styles = [
         text-align: right;
       }
     `
-];
+    ]; }
+    get context() {
+        return {
+            title: `application bindings`,
+            help: 'auth/application'
+        };
+    }
+    render() {
+        var appBindings = this.appBindings || [];
+        return html `
+      <div>
+        <h2>Bound Applications</h2>
+        <p page-description>Bound Applications goes here</p>
+      </div>
+      <table>
+        <tr>
+          <th>app name</th>
+          <th>Scope</th>
+          <th>status</th>
+        </tr>
+        ${appBindings.map(appBinding => html `
+            <tr>
+              <td>
+                <a href=${`app-binding/${appBinding.id}`}>${appBinding.name}</a>
+                ${appBinding.description}
+              </td>
+              <td>${appBinding.scope}</td>
+              <td>${appBinding.status}</td>
+            </tr>
+          `)}
+      </table>
+      <md-elevated-button @click=${e => navigate('applications')}>registered applications ..</md-elevated-button>
+    `;
+    }
+    async pageUpdated(changes, lifecycle, before) {
+        if (this.active) {
+            this.appBindings = (await this.fetchAppBindings()).items;
+        }
+    }
+    async fetchAppBindings() {
+        const response = await client.query({
+            query: gql `
+        query {
+          appBindings {
+            items {
+              id
+              name
+              application {
+                id
+                name
+              }
+              scope
+              status
+            }
+            total
+          }
+        }
+      `
+        });
+        if (!response.errors) {
+            return response.data.appBindings;
+        }
+    }
+};
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)

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;~~IAtEC~~,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;;~~AA5JM,kBAAM,GAAG~~;~~IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiFF;CACF,AAnFY,CAmFZ;AAE0B;~~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,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"]}