@things-factory/auth-ui 10.1.16 → 10.1.18

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

@@ -1,149 +1,249 @@
 import { __decorate, __metadata } from "tslib";
-import '@material/web/button/elevated-button.js';
-import '@material/web/button/outlined-button.js';
+import '@material/web/icon/icon.js';
+import '@operato/data-grist/ox-grist.js';
+import '@operato/context/ox-context-page-toolbar.js';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { client } from '@operato/graphql';
+import { customElement, property, query } from 'lit/decorators.js';
+import { client, gqlContext } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { openPopup } from '@operato/layout';
 import { navigate, PageView } from '@operato/shell';
-let AppBindings = class AppBindings extends PageView {
+import { CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles';
+import { isMobileDevice } from '@operato/utils';
+import { p13n } from '@operato/p13n';
+import '../../components/app-binding-detail.js';
+import { listOutcome, pageFromResponse } from '../../utils/list-result.js';
+/**
+ * Applications bound to this domain.
+ *
+ * A binding is a `User` row with `userType: 'application'` — the account an application signs
+ * in as. The list shows who it is and what it may do; what it signs in *with* is elsewhere.
+ *
+ * ── The server answers honestly now ──────────────────────────────────────────
+ * Until dde62cd6a1 this query paged before it filtered: the database took a page of users of
+ * every type, JavaScript kept the applications among them, and the total reported how many
+ * survived that one page. A grid told there were three when there were thirty never offered a
+ * second page. Wiring paging up was pointless until that was fixed; it works now.
+ *
+ * ── ⚠ The refresh token is not asked for, and a test holds that ──────────────
+ * AppBinding's refresh token is the application's actual credential — oauth2-server.ts writes
+ * it into the password column verbatim, not hashed — and the field carries its own
+ * privilege directive for security:query.
+ *
+ * A credential that can be exchanged for access tokens does not belong in a grid cell, where
+ * it sits in plain text beside a name for anyone who can open the screen, and in any
+ * screenshot of it. `app-binding-list-query.test.ts` fails if the word appears here.
+ */
+let AppBindings = class AppBindings extends p13n(localize(i18next)(PageView)) {
     constructor() {
         super(...arguments);
-        this.appBindings = [];
+        this.active = false;
+        this.mode = isMobileDevice() ? 'CARD' : 'GRID';
+        /** The last fetch did not answer. Distinct from answering with nothing. */
+        this.failed = false;
     }
     static { this.styles = [
+        CommonGristStyles,
+        CommonHeaderStyles,
+        ScrollbarStyles,
         css `
-      :host {         background-color: var(--md-sys-color-background);
-        padding: var(--spacing-large);
-
-        overflow: auto;
- }
-
-      md-elevated-button {         text-transform: capitalize;
- }
-
-      md-outlined-button {         float: right;
-        margin-top: var(--spacing-medium);
-        text-transform: capitalize;
- }
-
-      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);
- }
-
-      table {         width: 100%;
-        margin: var(--spacing-large) 0;
-        border-collapse: collapse;
- }
-
-      tr {         background-color: var(--tr-background-color);
- }
-
-      tr:nth-child(odd) {         background-color: var(--tr-background-odd-color);
- }
-
-      tr:hover {         background-color: var(--tr-background-hover-color);
- }
-
-      th {         border-top: var(--th-border-top);
-        border-bottom: var(--td-border-bottom);
-        padding: var(--th-padding);
-
-        font: var(--th-font);
-        color: var(--th-color);
-        text-transform: var(--th-text-transform);
-        text-align: left;
- }
-
-      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);
-        font: bold 16px var(--theme-font);
-
-        display: block;
-        text-decoration: none;
- }
-
-      .text-align-center {         text-align: center;
- }
-
-      .text-align-right {         text-align: right;
- }
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      [failed] {
+        padding: var(--spacing-medium);
+        color: var(--md-sys-color-error);
+        font: var(--label-font, inherit);
+      }
     `
     ]; }
     get context() {
-        return { title: `application bindings`,
-            help: 'auth/application'
+        return {
+            title: i18next.t('text.bound applications'),
+            help: 'auth/application',
+            search: {
+                handler: (search) => {
+                    this.grist.searchText = search;
+                },
+                value: this.grist?.searchText || ''
+            },
+            actions: [
+                {
+                    title: i18next.t('text.applications'),
+                    action: () => navigate('applications'),
+                    icon: 'apps'
+                }
+            ],
+            toolbar: false
         };
     }
     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>
+      <ox-grist
+        .mode=${this.mode}
+        .config=${this.config}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')}
+      >
+        <div slot="headroom" class="header">
+          <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
+        </div>
+      </ox-grist>
+
+      ${this.failed ? html `<div failed>${i18next.t('text.the list could not be loaded')}</div>` : ''}
     `;
     }
-    async pageUpdated(changes, lifecycle, before) {
+    async pageInitialized() {
+        this.config = {
+            rows: { appendable: false, selectable: { multiple: false } },
+            columns: [
+                { type: 'gutter', gutterName: 'sequence' },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'chevron_right',
+                    title: i18next.t('button.detail'),
+                    handlers: {
+                        click: (_columns, _data, _column, record) => {
+                            if (record?.id) {
+                                this.openDetail(record.id);
+                            }
+                        }
+                    }
+                },
+                {
+                    type: 'string',
+                    name: 'name',
+                    header: i18next.t('field.name'),
+                    record: { editable: false },
+                    sortable: true,
+                    width: 180
+                },
+                {
+                    type: 'string',
+                    name: 'applicationName',
+                    header: i18next.t('label.application'),
+                    record: { editable: false },
+                    width: 180
+                },
+                {
+                    type: 'string',
+                    name: 'email',
+                    header: i18next.t('field.email'),
+                    record: { editable: false },
+                    sortable: true,
+                    width: 220
+                },
+                {
+                    type: 'string',
+                    name: 'scope',
+                    header: i18next.t('field.scope'),
+                    record: { editable: false },
+                    width: 220
+                },
+                {
+                    type: 'string',
+                    name: 'status',
+                    header: i18next.t('field.status'),
+                    record: { align: 'center', editable: false },
+                    sortable: true,
+                    width: 130
+                },
+                {
+                    type: 'datetime',
+                    name: 'updatedAt',
+                    header: i18next.t('field.updated at'),
+                    sortable: true,
+                    width: 180
+                }
+            ]
+        };
+    }
+    /*
+     * A binding is not authored — it is what an application ends up with after the OAuth flow —
+     * so this popup shows one and offers the two things a person can do to it. `app-binding/{id}`
+     * was a route; nothing outside auth-ui linked to it.
+     */
+    openDetail(appBindingId) {
+        const popup = openPopup(html `<app-binding-detail
+        .appBindingId=${appBindingId}
+        @app-binding-changed=${() => this.grist.fetch()}
+        @close=${() => popup.close()}
+      ></app-binding-detail>`, {
+            backdrop: true,
+            size: 'medium',
+            title: i18next.t('text.bound application')
+        });
+    }
+    async pageUpdated(_changes, _lifecycle) {
         if (this.active) {
-            this.appBindings = (await this.fetchAppBindings()).items;
+            await this.updateComplete;
+            this.grist.fetch();
         }
     }
-    async fetchAppBindings() {
-        const response = await client.query({ query: gql `
-        query {           appBindings {             items {               id
+    async fetchHandler({ page, limit, sortings = [], filters = [] }) {
+        const response = await client.query({
+            query: gql `
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          appBindings(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
               name
-              application {                 id
-                name
- }
-              scope
+              email
               status
- }
+              scope
+              updatedAt
+              application {
+                id
+                name
+              }
+            }
             total
- }
- }
-      `
-        });
-        if (!response.errors) {
-            return response.data.appBindings;
+          }
         }
+      `,
+            variables: { filters, pagination: { page, limit }, sortings },
+            context: gqlContext()
+        });
+        const { items, total, failed } = listOutcome(pageFromResponse(response, 'appBindings'));
+        this.failed = failed;
+        return {
+            total,
+            records: items.map((item) => ({ ...item, applicationName: item.application?.name || '' }))
+        };
     }
 };
 __decorate([
-    property({ type: Array }),
-    __metadata("design:type", Array)
-], AppBindings.prototype, "appBindings", void 0);
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], AppBindings.prototype, "active", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], AppBindings.prototype, "config", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], AppBindings.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], AppBindings.prototype, "failed", void 0);
+__decorate([
+    query('ox-grist'),
+    __metadata("design:type", Function)
+], AppBindings.prototype, "grist", void 0);
 AppBindings = __decorate([
     customElement('app-bindings-page')
 ], AppBindings);
+export { AppBindings };
 //# sourceMappingURL=app-bindings.js.map

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

@@ -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,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"]}
+{"version":3,"file":"app-bindings.js","sourceRoot":"","sources":["../../../client/pages/app-binding/app-bindings.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,iCAAiC,CAAA;AACxC,OAAO,6CAA6C,CAAA;AAEpD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGlE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACnD,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACxF,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEpC,OAAO,wCAAwC,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAE1E;;;;;;;;;;;;;;;;;;;;GAoBG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC;IAA3D;;QAyBwB,WAAM,GAAY,KAAK,CAAA;QAExB,SAAI,GAA6B,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAA;QAE/F,2EAA2E;QAC9C,WAAM,GAAY,KAAK,CAAA;IA0KtD,CAAC;aAvMQ,WAAM,GAAG;QACd,iBAAiB;QACjB,kBAAkB;QAClB,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBF;KACF,AAtBY,CAsBZ;IAWD,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC;YAC3C,IAAI,EAAE,kBAAkB;YACxB,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC,MAAc,EAAE,EAAE;oBAC1B,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAA;gBAChC,CAAC;gBACD,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,IAAI,EAAE;aACpC;YACD,OAAO,EAAE;gBACP;oBACE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACrC,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC;oBACtC,IAAI,EAAE,MAAM;iBACb;aACF;YACD,OAAO,EAAE,KAAK;SACf,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,IAAI;kBACP,IAAI,CAAC,MAAM;wBACL,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;kCAClB,IAAI,CAAC,yBAAyB,CAAC,UAAU,CAAE;;;8DAGf,IAAI,CAAC,OAAO;;;;QAIlE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,OAAO,CAAC,CAAC,CAAC,mCAAmC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;KAC/F,CAAA;IACH,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,IAAI,CAAC,MAAM,GAAG;YACZ,IAAI,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;YAC5D,OAAO,EAAE;gBACP,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE;gBAC1C;oBACE,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,QAAQ;oBACpB,IAAI,EAAE,eAAe;oBACrB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;oBACjC,QAAQ,EAAE;wBACR,KAAK,EAAE,CAAC,QAAa,EAAE,KAAU,EAAE,OAAY,EAAE,MAAW,EAAE,EAAE;4BAC9D,IAAI,MAAM,EAAE,EAAE,EAAE,CAAC;gCACf,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;4BAC5B,CAAC;wBACH,CAAC;qBACF;iBACF;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,iBAAiB;oBACvB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,OAAO;oBACb,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;oBAChC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,OAAO;oBACb,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;oBAChC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,QAAQ;oBACd,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;oBACjC,MAAM,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC5C,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,UAAU;oBAChB,IAAI,EAAE,WAAW;oBACjB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC;oBACrC,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBACX;aACF;SACF,CAAA;IACH,CAAC;IAED;;;;OAIG;IACK,UAAU,CAAC,YAAoB;QACrC,MAAM,KAAK,GAAG,SAAS,CACrB,IAAI,CAAA;wBACc,YAAY;+BACL,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;iBACtC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE;6BACP,EACvB;YACE,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC;SAC3C,CACF,CAAA;IACH,CAAC;IAED,KAAK,CAAC,WAAW,CAAC,QAAa,EAAE,UAAe;QAC9C,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,MAAM,IAAI,CAAC,cAAc,CAAA;YACzB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QACpB,CAAC;IACH,CAAC;IAED,KAAK,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAe;QAC1E,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;OAkBT;YACD,SAAS,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE;YAC7D,OAAO,EAAE,UAAU,EAAE;SACtB,CAAC,CAAA;QAEF,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAA;QAEvF,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QAEpB,OAAO;YACL,KAAK;YACL,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAS,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,eAAe,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,EAAE,EAAE,CAAC,CAAC;SAChG,CAAA;IACH,CAAC;;AA9K4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;2CAAwB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yCAAoE;AAGlE;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;2CAAwB;AAEzB;IAA1B,KAAK,CAAC,UAAU,CAAC;;0CAA0B;AAhCjC,WAAW;IADvB,aAAa,CAAC,mBAAmB,CAAC;GACtB,WAAW,CAwMvB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport '@operato/data-grist/ox-grist.js'\nimport '@operato/context/ox-context-page-toolbar.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport type { DataGrist, FetchOption } from '@operato/data-grist'\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\nimport { navigate, PageView } from '@operato/shell'\nimport { CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\nimport { p13n } from '@operato/p13n'\n\nimport '../../components/app-binding-detail.js'\nimport { listOutcome, pageFromResponse } from '../../utils/list-result.js'\n\n/**\n * Applications bound to this domain.\n *\n * A binding is a `User` row with `userType: 'application'` — the account an application signs\n * in as. The list shows who it is and what it may do; what it signs in *with* is elsewhere.\n *\n * ── The server answers honestly now ──────────────────────────────────────────\n * Until dde62cd6a1 this query paged before it filtered: the database took a page of users of\n * every type, JavaScript kept the applications among them, and the total reported how many\n * survived that one page. A grid told there were three when there were thirty never offered a\n * second page. Wiring paging up was pointless until that was fixed; it works now.\n *\n * ── ⚠ The refresh token is not asked for, and a test holds that ──────────────\n * AppBinding's refresh token is the application's actual credential — oauth2-server.ts writes\n * it into the password column verbatim, not hashed — and the field carries its own\n * privilege directive for security:query.\n *\n * A credential that can be exchanged for access tokens does not belong in a grid cell, where\n * it sits in plain text beside a name for anyone who can open the screen, and in any\n * screenshot of it. `app-binding-list-query.test.ts` fails if the word appears here.\n */\n@customElement('app-bindings-page')\nexport class AppBindings extends p13n(localize(i18next)(PageView)) {\n  static styles = [\n    CommonGristStyles,\n    CommonHeaderStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n      }\n\n      ox-grist {\n        overflow-y: auto;\n        flex: 1;\n      }\n\n      [failed] {\n        padding: var(--spacing-medium);\n        color: var(--md-sys-color-error);\n        font: var(--label-font, inherit);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) active: boolean = false\n  @property({ type: Object }) config: any\n  @property({ type: String }) mode: 'CARD' | 'LIST' | 'GRID' = isMobileDevice() ? 'CARD' : 'GRID'\n\n  /** The last fetch did not answer. Distinct from answering with nothing. */\n  @property({ type: Boolean }) failed: boolean = false\n\n  @query('ox-grist') private grist!: DataGrist\n\n  get context() {\n    return {\n      title: i18next.t('text.bound applications'),\n      help: 'auth/application',\n      search: {\n        handler: (search: string) => {\n          this.grist.searchText = search\n        },\n        value: this.grist?.searchText || ''\n      },\n      actions: [\n        {\n          title: i18next.t('text.applications'),\n          action: () => navigate('applications'),\n          icon: 'apps'\n        }\n      ],\n      toolbar: false\n    }\n  }\n\n  render() {\n    return html`\n      <ox-grist\n        .mode=${this.mode}\n        .config=${this.config}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}\n      >\n        <div slot=\"headroom\" class=\"header\">\n          <ox-context-page-toolbar class=\"actions\" .context=${this.context}></ox-context-page-toolbar>\n        </div>\n      </ox-grist>\n\n      ${this.failed ? html`<div failed>${i18next.t('text.the list could not be loaded')}</div>` : ''}\n    `\n  }\n\n  async pageInitialized() {\n    this.config = {\n      rows: { appendable: false, selectable: { multiple: false } },\n      columns: [\n        { type: 'gutter', gutterName: 'sequence' },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'chevron_right',\n          title: i18next.t('button.detail'),\n          handlers: {\n            click: (_columns: any, _data: any, _column: any, record: any) => {\n              if (record?.id) {\n                this.openDetail(record.id)\n              }\n            }\n          }\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: i18next.t('field.name'),\n          record: { editable: false },\n          sortable: true,\n          width: 180\n        },\n        {\n          type: 'string',\n          name: 'applicationName',\n          header: i18next.t('label.application'),\n          record: { editable: false },\n          width: 180\n        },\n        {\n          type: 'string',\n          name: 'email',\n          header: i18next.t('field.email'),\n          record: { editable: false },\n          sortable: true,\n          width: 220\n        },\n        {\n          type: 'string',\n          name: 'scope',\n          header: i18next.t('field.scope'),\n          record: { editable: false },\n          width: 220\n        },\n        {\n          type: 'string',\n          name: 'status',\n          header: i18next.t('field.status'),\n          record: { align: 'center', editable: false },\n          sortable: true,\n          width: 130\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: i18next.t('field.updated at'),\n          sortable: true,\n          width: 180\n        }\n      ]\n    }\n  }\n\n  /*\n   * A binding is not authored — it is what an application ends up with after the OAuth flow —\n   * so this popup shows one and offers the two things a person can do to it. `app-binding/{id}`\n   * was a route; nothing outside auth-ui linked to it.\n   */\n  private openDetail(appBindingId: string) {\n    const popup = openPopup(\n      html`<app-binding-detail\n        .appBindingId=${appBindingId}\n        @app-binding-changed=${() => this.grist.fetch()}\n        @close=${() => popup.close()}\n      ></app-binding-detail>`,\n      {\n        backdrop: true,\n        size: 'medium',\n        title: i18next.t('text.bound application')\n      }\n    )\n  }\n\n  async pageUpdated(_changes: any, _lifecycle: any) {\n    if (this.active) {\n      await this.updateComplete\n      this.grist.fetch()\n    }\n  }\n\n  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {\n    const response = await client.query({\n      query: gql`\n        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n          appBindings(filters: $filters, pagination: $pagination, sortings: $sortings) {\n            items {\n              id\n              name\n              email\n              status\n              scope\n              updatedAt\n              application {\n                id\n                name\n              }\n            }\n            total\n          }\n        }\n      `,\n      variables: { filters, pagination: { page, limit }, sortings },\n      context: gqlContext()\n    })\n\n    const { items, total, failed } = listOutcome(pageFromResponse(response, 'appBindings'))\n\n    this.failed = failed\n\n    return {\n      total,\n      records: items.map((item: any) => ({ ...item, applicationName: item.application?.name || '' }))\n    }\n  }\n}\n"]}

package/dist-client/pages/appliance/appliance-list-query.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-client/pages/appliance/appliance-list-query.test.js

@@ -0,0 +1,58 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+/**
+ * A list query must not ask for a field that carries its own privilege gate.
+ *
+ * `Appliance.accessToken` is declared with
+ * `@privilege(category: "security", privilege: "query", domainOwnerGranted: true)` on the
+ * field. A viewer without that privilege who asks for it gets the rows **and** an error
+ * about the one field.
+ *
+ * ⚠ An earlier version of this comment said that would black the whole list out. It would
+ * have, until `pageFromResponse` learned to read the error's path and keep a page whose only
+ * complaint points at a value inside it. That reasoning is gone; the rule stands on its own
+ * ground instead:
+ *
+ * A token in a list is a token shown to everyone who may open the list, sitting in a grid
+ * cell, in plain text, next to a name. Nothing about the appliance list needs it, and the
+ * screens that do need it ask for it one record at a time. It is one word in a query and
+ * nothing else in the build objects to it, which is why a test holds it rather than a
+ * comment.
+ *
+ * ⚠ The comments are stripped before searching. The doc comment above names `accessToken`
+ * three times; searching the raw file would find the prose and pass over a query that
+ * really does ask for it. That is the defect this repository produced eight times in one
+ * day — a measurement that reads the same words as the thing it measures.
+ */
+function source(name) {
+    const text = readFileSync(join(__dirname, name), 'utf-8');
+    return text.replace(/\/\*[\s\S]*?\*\//g, '').replace(/^[ \t]*\/\/.*$/gm, '');
+}
+/** The fields Appliance declares with no gate of their own. */
+const UNGATED = ['name', 'serialNo', 'brand', 'model', 'netmask', 'description', 'updatedAt'];
+describe('the appliance list query', () => {
+    it('does not ask for the access token', () => {
+        expect(source('./home.ts')).not.toContain('accessToken');
+    });
+    it('asks for the fields the columns render', () => {
+        /*
+         * The other half. A column whose field is not requested renders empty for every row,
+         * which reads as "this appliance has no serial number" rather than "nobody asked".
+         */
+        const text = source('./home.ts');
+        for (const field of UNGATED) {
+            expect(text).toContain(field);
+        }
+    });
+    it('passes the grist options through, so paging and sorting reach the server', () => {
+        /*
+         * The screen this replaced fetched everything on every visit and sorted nothing. The
+         * server takes ListParam; forgetting to pass it is invisible until the table is long.
+         */
+        const text = source('./home.ts');
+        expect(text).toContain('$pagination: Pagination');
+        expect(text).toContain('$sortings: [Sorting!]');
+        expect(text).toContain('$filters: [Filter!]');
+    });
+});
+//# sourceMappingURL=appliance-list-query.test.js.map

package/dist-client/pages/appliance/appliance-list-query.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appliance-list-query.test.js","sourceRoot":"","sources":["../../../client/pages/appliance/appliance-list-query.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,IAAI,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAE3B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,SAAS,MAAM,CAAC,IAAY;IAC1B,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,CAAA;IAEzD,OAAO,IAAI,CAAC,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAA;AAC9E,CAAC;AAED,+DAA+D;AAC/D,MAAM,OAAO,GAAG,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,CAAC,CAAA;AAE7F,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACxC,EAAE,CAAC,mCAAmC,EAAE,GAAG,EAAE;QAC3C,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,CAAA;IAC1D,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QAChD;;;WAGG;QACH,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;QAEhC,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;YAC5B,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;QAC/B,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,0EAA0E,EAAE,GAAG,EAAE;QAClF;;;WAGG;QACH,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;QAEhC,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAAA;QACjD,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAA;QAC/C,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAA;IAC/C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { readFileSync } from 'fs'\nimport { join } from 'path'\n\n/**\n * A list query must not ask for a field that carries its own privilege gate.\n *\n * `Appliance.accessToken` is declared with\n * `@privilege(category: \"security\", privilege: \"query\", domainOwnerGranted: true)` on the\n * field. A viewer without that privilege who asks for it gets the rows **and** an error\n * about the one field.\n *\n * ⚠ An earlier version of this comment said that would black the whole list out. It would\n * have, until `pageFromResponse` learned to read the error's path and keep a page whose only\n * complaint points at a value inside it. That reasoning is gone; the rule stands on its own\n * ground instead:\n *\n * A token in a list is a token shown to everyone who may open the list, sitting in a grid\n * cell, in plain text, next to a name. Nothing about the appliance list needs it, and the\n * screens that do need it ask for it one record at a time. It is one word in a query and\n * nothing else in the build objects to it, which is why a test holds it rather than a\n * comment.\n *\n * ⚠ The comments are stripped before searching. The doc comment above names `accessToken`\n * three times; searching the raw file would find the prose and pass over a query that\n * really does ask for it. That is the defect this repository produced eight times in one\n * day — a measurement that reads the same words as the thing it measures.\n */\nfunction source(name: string): string {\n  const text = readFileSync(join(__dirname, name), 'utf-8')\n\n  return text.replace(/\\/\\*[\\s\\S]*?\\*\\//g, '').replace(/^[ \\t]*\\/\\/.*$/gm, '')\n}\n\n/** The fields Appliance declares with no gate of their own. */\nconst UNGATED = ['name', 'serialNo', 'brand', 'model', 'netmask', 'description', 'updatedAt']\n\ndescribe('the appliance list query', () => {\n  it('does not ask for the access token', () => {\n    expect(source('./home.ts')).not.toContain('accessToken')\n  })\n\n  it('asks for the fields the columns render', () => {\n    /*\n     * The other half. A column whose field is not requested renders empty for every row,\n     * which reads as \"this appliance has no serial number\" rather than \"nobody asked\".\n     */\n    const text = source('./home.ts')\n\n    for (const field of UNGATED) {\n      expect(text).toContain(field)\n    }\n  })\n\n  it('passes the grist options through, so paging and sorting reach the server', () => {\n    /*\n     * The screen this replaced fetched everything on every visit and sorted nothing. The\n     * server takes ListParam; forgetting to pass it is invisible until the table is long.\n     */\n    const text = source('./home.ts')\n\n    expect(text).toContain('$pagination: Pagination')\n    expect(text).toContain('$sortings: [Sorting!]')\n    expect(text).toContain('$filters: [Filter!]')\n  })\n})\n"]}

package/dist-client/pages/appliance/home.d.ts

@@ -1,2 +1,63 @@
-import '@material/web/button/elevated-button.js';
-import '@material/web/button/outlined-button.js';
+import '@material/web/icon/icon.js';
+import '@operato/data-grist/ox-grist.js';
+import '@operato/context/ox-context-page-toolbar.js';
+import type { FetchOption } from '@operato/data-grist';
+import { PageView } from '@operato/shell';
+import '../../components/appliance-editor.js';
+declare const Appliances_base: (new (...args: any[]) => {
+    __preferenceProviders: {
+        [element: string]: import("@operato/p13n").PagePreferenceProvider;
+    };
+    getPagePreferenceProvider(element: string): import("@operato/p13n").PagePreferenceProvider | undefined;
+}) & (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
+/**
+ * Registered appliances.
+ *
+ * ── What this screen looked like before ──────────────────────────────────────
+ * A hand-written table with no paging, sorting or search, and three columns that were not
+ * data: "API health" printed OK, "Installs" printed 1, "status" printed draft, identical on
+ * every row. An appliance that had never checked in read exactly like one reporting fine.
+ * Those are gone — Appliance declares none of the three — and the columns here are the
+ * fields it does declare.
+ *
+ * ── ⚠ The access token is not asked for, and a test holds that ──────────────
+ * `Appliance.accessToken` carries its own
+ * `@privilege(category: "security", privilege: "query", domainOwnerGranted: true)`. A list
+ * is the wrong place for it regardless of who may read it: a token in a grid cell is a token
+ * in plain text beside a name, visible to everyone who can open the screen and to anyone
+ * looking over their shoulder. The screens that genuinely need it ask one record at a time.
+ *
+ * `appliance-list-query.test.ts` fails if the word reappears here.
+ */
+export declare class Appliances extends Appliances_base {
+    static styles: import("lit").CSSResult[];
+    active: boolean;
+    config: any;
+    mode: 'CARD' | 'LIST' | 'GRID';
+    /** The last fetch did not answer. Distinct from answering with nothing. */
+    failed: boolean;
+    private grist;
+    get context(): {
+        title: string;
+        help: string;
+        search: {
+            handler: (search: string) => void;
+            value: string;
+        };
+        actions: {
+            title: string;
+            action: () => void;
+            icon: string;
+        }[];
+        toolbar: boolean;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    pageInitialized(): Promise<void>;
+    private openEditor;
+    pageUpdated(_changes: any, _lifecycle: any): Promise<void>;
+    fetchHandler({ page, limit, sortings, filters }: FetchOption): Promise<{
+        total: number;
+        records: any[];
+    }>;
+}
+export {};