npm - @things-factory/auth-ui - Versions diffs - 10.1.13 → 10.1.17 - Mend

@things-factory/auth-ui 10.1.13 → 10.1.17

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

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

@@ -1,160 +1,225 @@
 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 { navigate, PageView } from '@operato/shell';
-let Applications = class Applications extends PageView {
+import { CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles';
+import { isMobileDevice } from '@operato/utils';
+import { p13n } from '@operato/p13n';
+import { applicationStatusLabel } from '../../utils/application-status.js';
+import { listOutcome, pageFromResponse } from '../../utils/list-result.js';
+/**
+ * Registered applications.
+ *
+ * ── What this screen looked like before ──────────────────────────────────────
+ * A hand-written `<table>` with no paging, no sort and no search, and three columns that
+ * were not data at all: "API health" printed OK, "Installs" printed 1, "status" printed
+ * draft — written into the markup, identical on every row. The previous commit removed the
+ * two the server cannot answer and made status real. This one gives the list the same shape
+ * as every other list in the product.
+ *
+ * The server was already ready for it: `applications` takes ListParam and declares
+ * `searchables: ['name', 'description']`, so paging, sorting and the header's search box all
+ * work by passing the grist's own options through.
+ *
+ * ── Why the row does not carry health or install counts ──────────────────────
+ * Because Application does not declare them. If they arrive one day, they are columns; until
+ * then the screen says what it knows. See `utils/application-status.ts` for the matching rule
+ * on values the screen has no word for.
+ */
+let Applications = class Applications extends p13n(localize(i18next)(PageView)) {
     constructor() {
         super(...arguments);
-        this.applications = [];
+        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 {         margin: var(--spacing-large) 0;
-        width: 100%;
-        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 {         font: var(--td-font);
-        text-decoration: none;
-        color: var(--md-sys-color-on-surface);
- }
-      td a strong {         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: `applications`,
-            help: 'auth/application'
+        return {
+            title: i18next.t('text.applications'),
+            help: 'auth/application',
+            search: {
+                handler: (search) => {
+                    this.grist.searchText = search;
+                },
+                value: this.grist?.searchText || ''
+            },
+            actions: [
+                {
+                    title: i18next.t('button.register'),
+                    action: () => navigate('application-register'),
+                    icon: 'add'
+                }
+            ],
+            toolbar: false
         };
     }
     render() {
-        var apps = this.applications || [];
         return html `
-      <div>
-        <h2>Registered Applications</h2>
-        <p page-description>
-          What type of app are you building?<br />Choose the app type that best suits the audience you’re building for.
-        </p>
-        <md-elevated-button @click=${e => navigate('application-register')}
-          >register new application</md-elevated-button
-        >
-      </div>
-      <table>
-        <tr>
-          <th>app name</th>
-          <th>API health</th>
-          <th>Installs</th>
-          <th>status</th>
-        </tr>
-        ${apps.map(app => html `
-            <tr>
-              <td>
-                <a href=${`application/${app.id}`}>
-                  <strong>${app.name}</strong>
-                  ${app.description}
-                </a>
-              </td>
-              <td>OK</td>
-              <td class="text-align-center">1</td>
-              <td>draft</td>
-            </tr>
-          `)}
-      </table>
-      <md-outlined-button @click=${e => navigate('app-bindings')}>bound applications ..</md-outlined-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) {
+                                navigate(`application/${record.id}`);
+                            }
+                        }
+                    }
+                },
+                {
+                    type: 'string',
+                    name: 'name',
+                    header: i18next.t('field.name'),
+                    record: { editable: false },
+                    sortable: true,
+                    width: 200
+                },
+                {
+                    type: 'string',
+                    name: 'description',
+                    header: i18next.t('field.description'),
+                    record: { editable: false },
+                    width: 260
+                },
+                {
+                    type: 'string',
+                    name: 'type',
+                    header: i18next.t('field.type'),
+                    record: { align: 'center', editable: false },
+                    sortable: true,
+                    width: 120
+                },
+                {
+                    type: 'string',
+                    name: 'statusLabel',
+                    header: i18next.t('field.status'),
+                    record: { align: 'center', editable: false },
+                    width: 120
+                },
+                {
+                    type: 'datetime',
+                    name: 'updatedAt',
+                    header: i18next.t('field.updated at'),
+                    sortable: true,
+                    width: 180
+                }
+            ]
+        };
+    }
+    async pageUpdated(_changes, _lifecycle) {
         if (this.active) {
-            this.applications = (await this.fetchApplications()).items;
+            await this.updateComplete;
+            this.grist.fetch();
         }
     }
-    async fetchApplications() {
-        const response = await client.query({ query: gql `
-        query {           applications {             items {               id
+    async fetchHandler({ page, limit, sortings = [], filters = [] }) {
+        const response = await client.query({
+            query: gql `
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          applications(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
               name
               description
- }
+              type
+              status
+              updatedAt
+            }
             total
- }
- }
-      `
-        });
-        if (!response.errors) {
-            return response.data.applications;
+          }
         }
+      `,
+            variables: { filters, pagination: { page, limit }, sortings },
+            context: gqlContext()
+        });
+        const { items, total, failed } = listOutcome(pageFromResponse(response, 'applications'));
+        this.failed = failed;
+        /*
+         * The status is turned into words here rather than in a cell renderer so the rule lives
+         * in one tested place — a value this screen has no word for is printed as it arrived.
+         */
+        return {
+            total,
+            records: items.map((item) => ({
+                ...item,
+                statusLabel: applicationStatusLabel(item.status, (key) => i18next.t(key))
+            }))
+        };
     }
 };
 __decorate([
-    property({ type: Array }),
-    __metadata("design:type", Array)
-], Applications.prototype, "applications", void 0);
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], Applications.prototype, "active", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], Applications.prototype, "config", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Applications.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], Applications.prototype, "failed", void 0);
+__decorate([
+    query('ox-grist'),
+    __metadata("design:type", Function)
+], Applications.prototype, "grist", void 0);
 Applications = __decorate([
     customElement('applications-page')
 ], Applications);
+export { Applications };
 //# sourceMappingURL=applications.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"applications.js","sourceRoot":"","sources":["../../../client/pages/application/applications.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,yCAAyC,CAAA;AAEhD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGnD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,QAAQ;IAAnC;;QA2E6B,iBAAY,GAAU,EAAE,CAAA;IAmErD,CAAC;aA9I8C,WAAM,GAAG;QACpD,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;KACF,AAzEkD,CAyElD;IAID,IAAI,OAAO;QAAS,OAAO,EAAQ,KAAK,EAAE,cAAc;YACpD,IAAI,EAAE,kBAAkB;SAC5B,CAAA;IACD,CAAC;IAEA,MAAM;QAAS,IAAI,IAAI,GAAG,IAAI,CAAC,YAAY,IAAI,EAAE,CAAA;QAE/C,OAAO,IAAI,CAAA;;;;;;;qCAOsB,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,sBAAsB,CAAC;;;;;;;;;;;;UAYhE,IAAI,CAAC,GAAG,CACR,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;;;0BAGK,eAAe,GAAG,CAAC,EAAE,EAAE;4BACrB,GAAG,CAAC,IAAI;oBAChB,GAAG,CAAC,WAAW;;;;;;;WAOxB,CACF;;;mCAG0B,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC;KAC3D,CAAA;IACJ,CAAC;IAEA,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAAO,IAAI,CAAC,YAAY,GAAG,CAAC,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,KAAK,CAAA;QACxI,CAAC;IACD,CAAC;IAEA,KAAK,CAAC,iBAAiB;QAAS,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,EAAQ,KAAK,EAAE,GAAG,CAAA;;;;;;;;OAQjF;SACL,CAAC,CAAA;QAEC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YAAO,OAAO,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAA;QAClE,CAAC;IACD,CAAC;;AAlE2B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;kDAAyB;AA3E/C,YAAY;IADjB,aAAa,CAAC,mBAAmB,CAAC;GAC7B,YAAY,CA8IjB","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@material/web/button/outlined-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { navigate, PageView } from '@operato/shell'\n\n@customElement('applications-page')\nclass Applications extends PageView { static styles = [\n css`\n :host { background-color: var(--md-sys-color-background);\n padding: var(--spacing-large);\n\n overflow: auto;\n }\n\n md-elevated-button { text-transform: capitalize;\n }\n\n md-outlined-button { float: right;\n margin-top: var(--spacing-medium);\n text-transform: capitalize;\n }\n\n h2 { margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n\n [page-description] { margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n\n table { margin: var(--spacing-large) 0;\n width: 100%;\n border-collapse: collapse;\n }\n\n tr { background-color: var(--tr-background-color);\n }\n\n tr:nth-child(odd) { background-color: var(--tr-background-odd-color);\n }\n\n tr:hover { background-color: var(--tr-background-hover-color);\n }\n\n th { border-top: var(--th-border-top);\n border-bottom: var(--td-border-bottom);\n padding: var(--th-padding);\n\n font: var(--th-font);\n color: var(--th-color);\n text-transform: var(--th-text-transform);\n text-align: left;\n }\n\n td { padding: var(--td-padding);\n border-bottom: var(--td-border-bottom);\n font: var(--td-font);\n color: var(--td-color);\n }\n\n td a { font: var(--td-font);\n text-decoration: none;\n color: var(--md-sys-color-on-surface);\n }\n\n td a strong { font: bold 16px var(--theme-font);\n\n display: block;\n text-decoration: none;\n }\n\n .text-align-center { text-align: center;\n }\n\n .text-align-right { text-align: right;\n }\n `\n ]\n\n @property({ type: Array }) applications: any[] = []\n\n get context() { return { title: `applications`,\n help: 'auth/application'\n }\n }\n\n render() { var apps = this.applications \|\| []\n\n return html`\n <div>\n <h2>Registered Applications</h2>\n <p page-description>\n What type of app are you building?<br />Choose the app type that best suits the audience you’re building for.\n </p>\n\n <md-elevated-button @click=${e => navigate('application-register')}\n >register new application</md-elevated-button\n >\n </div>\n\n <table>\n <tr>\n <th>app name</th>\n <th>API health</th>\n <th>Installs</th>\n <th>status</th>\n </tr>\n ${apps.map(\n app => html`\n <tr>\n <td>\n <a href=${`application/${app.id}`}>\n <strong>${app.name}</strong>\n ${app.description}\n </a>\n </td>\n <td>OK</td>\n <td class=\"text-align-center\">1</td>\n <td>draft</td>\n </tr>\n `\n )}\n </table>\n\n <md-outlined-button @click=${e => navigate('app-bindings')}>bound applications ..</md-outlined-button>\n `\n }\n\n async pageUpdated(changes, lifecycle, before) { if (this.active) { this.applications = (await this.fetchApplications()).items\n }\n }\n\n async fetchApplications() { const response = await client.query({ query: gql`\n query { applications { items { id\n name\n description\n }\n total\n }\n }\n `\n })\n\n if (!response.errors) { return response.data.applications\n }\n }\n}\n"]}
1	+ {"version":3,"file":"applications.js","sourceRoot":"","sources":["../../../client/pages/application/applications.ts"],"names":[],"mappings":"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","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 { navigate, PageView } from '@operato/shell'\nimport { CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\nimport { p13n } from '@operato/p13n'\n\nimport { applicationStatusLabel } from '../../utils/application-status.js'\nimport { listOutcome, pageFromResponse } from '../../utils/list-result.js'\n\n/*\n Registered applications.\n \n ── What this screen looked like before ──────────────────────────────────────\n * A hand-written `<table>` with no paging, no sort and no search, and three columns that\n * were not data at all: \"API health\" printed OK, \"Installs\" printed 1, \"status\" printed\n * draft — written into the markup, identical on every row. The previous commit removed the\n * two the server cannot answer and made status real. This one gives the list the same shape\n * as every other list in the product.\n \n The server was already ready for it: `applications` takes ListParam and declares\n * `searchables: ['name', 'description']`, so paging, sorting and the header's search box all\n * work by passing the grist's own options through.\n \n ── Why the row does not carry health or install counts ──────────────────────\n * Because Application does not declare them. If they arrive one day, they are columns; until\n * then the screen says what it knows. See `utils/application-status.ts` for the matching rule\n * on values the screen has no word for.\n /\n@customElement('applications-page')\nexport class Applications 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.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('button.register'),\n action: () => navigate('application-register'),\n icon: 'add'\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 navigate(`application/${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: 200\n },\n {\n type: 'string',\n name: 'description',\n header: i18next.t('field.description'),\n record: { editable: false },\n width: 260\n },\n {\n type: 'string',\n name: 'type',\n header: i18next.t('field.type'),\n record: { align: 'center', editable: false },\n sortable: true,\n width: 120\n },\n {\n type: 'string',\n name: 'statusLabel',\n header: i18next.t('field.status'),\n record: { align: 'center', editable: false },\n width: 120\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 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 applications(filters: $filters, pagination: $pagination, sortings: $sortings) {\n items {\n id\n name\n description\n type\n status\n updatedAt\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, 'applications'))\n\n this.failed = failed\n\n /\n * The status is turned into words here rather than in a cell renderer so the rule lives\n * in one tested place — a value this screen has no word for is printed as it arrived.\n */\n return {\n total,\n records: items.map((item: any) => ({\n ...item,\n statusLabel: applicationStatusLabel(item.status, (key: string) => i18next.t(key))\n }))\n }\n }\n}\n"]}

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

@@ -3,9 +3,20 @@ import gql from 'graphql-tag';
 import { css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
 import { navigate, PageView } from '@operato/shell';
-let ApplicationRegister = class ApplicationRegister extends PageView {
+import { FormFieldStyles } from '@operato/styles';
+import { filledValues, missingRequired } from '../../utils/form-values.js';
+let ApplicationRegister = class ApplicationRegister extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        /** Required fields the person has not filled in yet. Empty until they press register. */
+        this.missing = [];
+        /** The mutation was refused. The link already said why; this says the press landed. */
+        this.failed = false;
+    }
     static { this.styles = [
+        FormFieldStyles,
         css `
       :host {         background-color: var(--md-sys-color-background);
         padding: var(--spacing-large);
@@ -22,6 +33,15 @@ let ApplicationRegister = class ApplicationRegister extends PageView {
         font: var(--page-description-font);
         color: var(--page-description-color);
  }
+      [field-error],
+      [form-error] {         color: var(--md-sys-color-error);
+        font: var(--input-hint-font, inherit);
+        margin-top: var(--spacing-tiny, 2px);
+ }
+      input[invalid] {         border-color: var(--md-sys-color-error);
+ }
       [icon] {         position: absolute;
         top: 10px;
         right: 10px;
@@ -92,11 +112,8 @@ let ApplicationRegister = class ApplicationRegister extends PageView {
     render() {
         return html `
       <img src="/assets/images/image-api.png" pagedeco />
-      <h2>Register new application</h2>
-      <p page-description>
-        You can register new application here.<br />
-        What type of app are you building? Choose the app type that best suits the audience you’re building for.
-      </p>
+      <h2>${i18next.t('text.register new application')}</h2>
+      <p page-description>${i18next.t('text.an application signs in on its own behalf')}</p>
       ${this._icon
             ? html `
@@ -110,36 +127,44 @@ let ApplicationRegister = class ApplicationRegister extends PageView {
         <form>
           <div field-2column>
             <div field grid-span>
-              <label for="name">name</label>
-              <input id="name" type="text" name="name" />
+              <label for="name">${i18next.t('field.name')}</label>
+              <input id="name" type="text" name="name" required ?invalid=${this.missing.includes('name')} />
+              ${this.missing.includes('name')
+            ? html `<div field-error>${i18next.t('text.this field is required')}</div>`
+            : ''}
             </div>
             <div field grid-span>
-              <label for="description">description</label>
+              <label for="description">${i18next.t('field.description')}</label>
               <input id="description" type="text" name="description" />
             </div>
             <div field grid-span>
-              <label for="app-url">application url</label>
-              <input id="app-url" type="text" name="url" />
+              <label for="app-url">${i18next.t('field.application url')}</label>
+              <input id="app-url" type="url" name="url" />
             </div>
             <div field grid-span>
-              <label for="redirect-url">redirectUrl</label>
-              <input id="redirect-url" type="text" name="redirectUrl" />
+              <label for="redirect-url">${i18next.t('field.redirect url')}</label>
+              <input id="redirect-url" type="url" name="redirectUrl" />
             </div>
             <div field grid-span>
-              <label for="icon">application icon</label>
-              <input id="icon" type="text" name="icon" @change=${e => (this._icon = e.target.value)} />
+              <label for="icon">${i18next.t('field.application icon')}</label>
+              <input id="icon" type="url" name="icon" @change=${e => (this._icon = e.target.value)} />
             </div>
             <div field grid-span>
-              <label for="email">contact email</label>
-              <input id="email" type="text" name="email" />
+              <!-- type=email so the browser checks the shape the server's scalar will check. -->
+              <label for="email">${i18next.t('field.contact email')}</label>
+              <input id="email" type="email" name="email" />
             </div>
-            <md-elevated-button grid-span @click=${this.createApplication.bind(this)}>register</md-elevated-button>
+            ${this.failed ? html `<div form-error grid-span>${i18next.t('text.could not register')}</div>` : ''}
+            <button grid-span type="submit" @click=${this.createApplication.bind(this)}>
+              ${i18next.t('button.register')}
+            </button>
           </div>
         </form>
       </div>
@@ -148,10 +173,27 @@ let ApplicationRegister = class ApplicationRegister extends PageView {
     async createApplication(e) {
         e.preventDefault();
         const formData = new FormData(this.form);
-        const application = Array.from(formData.entries()).reduce((application, [key, value]) => {
-            application[key] = value;
-            return application;
-        }, {});
+        /*
+          `name` is the only field NewApplication declares non-null. The list comes from the
+          schema rather than from taste — requiring more here would invent a rule the product
+          does not have, and the person would be stopped by this screen alone.
+        */
+        const missing = missingRequired(formData, ['name']);
+        if (missing.length) {
+            this.missing = missing;
+            return;
+        }
+        this.missing = [];
+        /*
+          This used to send every input, including the untouched ones, each as an empty string.
+          `NewApplication.email` is a GraphQLEmailAddress and rejects '' — so registering without
+          a contact email failed, on a field the schema marks optional, and the screen printed
+          "creation fail." to the console where nobody would see it.
+          `filledValues` leaves an empty field out instead, which is what optional means on the
+          wire.
+        */
+        const application = filledValues(formData);
         const response = await client.mutate({ mutation: gql `
         mutation ($application: NewApplication!) {           createApplication(application: $application) {             id
  }
@@ -161,12 +203,16 @@ let ApplicationRegister = class ApplicationRegister extends PageView {
             }
         });
         if (response.errors) {
-            console.log('creation fail.');
-        }
-        else {
-            const id = response.data.createApplication.id;
-            navigate(`application/${id}`);
+            /*
+              The shared client link already raises a notify event carrying the server's reason, so
+              the person sees what went wrong. What was missing is that the screen stayed silent
+              and looked idle — the form is still filled in, and nothing said the press had landed.
+            */
+            this.failed = true;
+            return;
         }
+        this.failed = false;
+        navigate(`application/${response.data.createApplication.id}`);
     }
     pageUpdated(changes, lifecycle, before) {
         if (this.active) {
@@ -186,6 +232,14 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], ApplicationRegister.prototype, "_icon", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], ApplicationRegister.prototype, "missing", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], ApplicationRegister.prototype, "failed", void 0);
 ApplicationRegister = __decorate([
     customElement('application-register')
 ], ApplicationRegister);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"register.js","sourceRoot":"","sources":["../../../client/pages/application/register.ts"],"names":[],"mappings":";AAAA,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,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGnD,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,QAAQ;aAAY,WAAM,GAAG;QAC3D,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4EF;KACF,AA9EyD,CA8EzD;IAQD,IAAI,OAAO;QAAS,OAAO,EAAQ,KAAK,EAAE,0BAA0B;YAChE,IAAI,EAAE,kBAAkB;SAC5B,CAAA;IACD,CAAC;IAEA,MAAM;QAAS,OAAO,IAAI,CAAA;;;;;;;;QAQpB,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;;yBAEW,IAAI,CAAC,KAAK;;WAExB;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;iEA2BiD,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;;;;;;;mDAQhD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;;;;KAI/E,CAAA;IACJ,CAAC;IAEA,KAAK,CAAC,iBAAiB,CAAC,CAAC;QAAQ,CAAC,CAAC,cAAc,EAAE,CAAA;QAEjD,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAExC,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YAAS,WAAW,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YACvH,OAAO,WAAW,CAAA;QACvB,CAAC,EAAE,EAAE,CAAC,CAAA;QAEH,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,EAAQ,QAAQ,EAAE,GAAG,CAAA;;;;OAIvD;YACD,SAAS,EAAE,EAAU,WAAW;aACpC;SACA,CAAC,CAAA;QAEC,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;YAAO,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;QAC7D,CAAC;aAAM,CAAC;YAAO,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAA;YACvD,QAAQ,CAAC,eAAe,EAAE,EAAE,CAAC,CAAA;QAClC,CAAC;IACD,CAAC;IAEA,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAAO,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;QACzF,CAAC;IACD,CAAC;;AA5F4B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wDAAiB;AAE7B;IAAd,KAAK,CAAC,MAAM,CAAC;8BAAQ,eAAe;iDAAA;AAE5B;IAAR,KAAK,EAAE;;kDAAe;AApFnB,mBAAmB;IADxB,aAAa,CAAC,sBAAsB,CAAC;GAChC,mBAAmB,CA6KxB","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { navigate, PageView } from '@operato/shell'\n\n@customElement('application-register')\nclass ApplicationRegister extends PageView { static styles = [\n css`\n :host { background-color: var(--md-sys-color-background);\n padding: var(--spacing-large);\n\n position: relative;\n\n overflow: auto;\n }\n h2 { margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n [page-description] { margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n [icon] { position: absolute;\n top: 10px;\n right: 10px;\n\n max-width: 80px;\n }\n [icon] img { max-width: 100%;\n max-height: 100%;\n }\n\n img[pagedeco] { width: 150px;\n margin: 0 var(--spacing-large);\n float: left;\n position: relative;\n top: -20px;\n }\n\n [form-container] { background-color: var(--md-sys-color-surface);\n padding: var(--spacing-large);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n max-width: var(--input-container-max-width);\n position: relative;\n top: -50px;\n clear: both;\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 {\n background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n color: var(--input-field-color, var(--md-sys-color-on-surface));\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 { outline: none;\n }\n [field-2column] { display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n }\n [field] { display: flex;\n flex-direction: column;\n }\n [grid-span] { grid-column: span 2;\n }\n @media screen and (max-width: 480px) { img[pagedeco] { display: none;\n }\n [form-container] { position: initial;\n }\n [field] { grid-column: span 2;\n }\n }\n `\n ]\n\n @property({ type: Object }) application: any\n\n @query('form') form!: HTMLFormElement\n\n @state() _icon?: string\n\n get context() { return { title: `application registration`,\n help: 'auth/application'\n }\n }\n\n render() { return html`\n <img src=\"/assets/images/image-api.png\" pagedeco />\n <h2>Register new application</h2>\n <p page-description>\n You can register new application here.<br />\n What type of app are you building? Choose the app type that best suits the audience you’re building for.\n </p>\n\n ${this._icon\n ? html`\n <div icon>\n <img src=${this._icon} />\n </div>\n `\n : html``}\n\n <div form-container>\n <form>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">name</label>\n <input id=\"name\" type=\"text\" name=\"name\" />\n </div>\n\n <div field grid-span>\n <label for=\"description\">description</label>\n <input id=\"description\" type=\"text\" name=\"description\" />\n </div>\n\n <div field grid-span>\n <label for=\"app-url\">application url</label>\n <input id=\"app-url\" type=\"text\" name=\"url\" />\n </div>\n\n <div field grid-span>\n <label for=\"redirect-url\">redirectUrl</label>\n <input id=\"redirect-url\" type=\"text\" name=\"redirectUrl\" />\n </div>\n\n <div field grid-span>\n <label for=\"icon\">application icon</label>\n <input id=\"icon\" type=\"text\" name=\"icon\" @change=${e => (this._icon = e.target.value)} />\n </div>\n\n <div field grid-span>\n <label for=\"email\">contact email</label>\n <input id=\"email\" type=\"text\" name=\"email\" />\n </div>\n\n <md-elevated-button grid-span @click=${this.createApplication.bind(this)}>register</md-elevated-button>\n </div>\n </form>\n </div>\n `\n }\n\n async createApplication(e) { e.preventDefault()\n\n const formData = new FormData(this.form)\n\n const application = Array.from(formData.entries()).reduce((application, [key, value]) => { application[key] = value\n return application\n }, {})\n\n const response = await client.mutate({ mutation: gql`\n mutation ($application: NewApplication!) { createApplication(application: $application) { id\n }\n }\n `,\n variables: { application\n }\n })\n\n if (response.errors) { console.log('creation fail.')\n } else { const id = response.data.createApplication.id\n navigate(`application/${id}`)\n }\n }\n\n pageUpdated(changes, lifecycle, before) { if (this.active) { this.form.reset()\n }\n }\n}\n"]}
1	+ {"version":3,"file":"register.js","sourceRoot":"","sources":["../../../client/pages/application/register.ts"],"names":[],"mappings":"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","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { navigate, PageView } from '@operato/shell'\nimport { FormFieldStyles } from '@operato/styles'\n\nimport { filledValues, missingRequired } from '../../utils/form-values.js'\n\n@customElement('application-register')\nclass ApplicationRegister extends localize(i18next)(PageView) { static styles = [\n FormFieldStyles,\n css`\n :host { background-color: var(--md-sys-color-background);\n padding: var(--spacing-large);\n\n position: relative;\n\n overflow: auto;\n }\n h2 { margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n [page-description] { margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n [field-error],\n [form-error] { color: var(--md-sys-color-error);\n font: var(--input-hint-font, inherit);\n margin-top: var(--spacing-tiny, 2px);\n }\n\n input[invalid] { border-color: var(--md-sys-color-error);\n }\n\n [icon] { position: absolute;\n top: 10px;\n right: 10px;\n\n max-width: 80px;\n }\n [icon] img { max-width: 100%;\n max-height: 100%;\n }\n\n img[pagedeco] { width: 150px;\n margin: 0 var(--spacing-large);\n float: left;\n position: relative;\n top: -20px;\n }\n\n [form-container] { background-color: var(--md-sys-color-surface);\n padding: var(--spacing-large);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n max-width: var(--input-container-max-width);\n position: relative;\n top: -50px;\n clear: both;\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 {\n background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n color: var(--input-field-color, var(--md-sys-color-on-surface));\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 { outline: none;\n }\n [field-2column] { display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n }\n [field] { display: flex;\n flex-direction: column;\n }\n [grid-span] { grid-column: span 2;\n }\n @media screen and (max-width: 480px) { img[pagedeco] { display: none;\n }\n [form-container] { position: initial;\n }\n [field] { grid-column: span 2;\n }\n }\n `\n ]\n\n @property({ type: Object }) application: any\n\n @query('form') form!: HTMLFormElement\n\n @state() _icon?: string\n\n /** Required fields the person has not filled in yet. Empty until they press register. /\n @state() missing: string[] = []\n\n /* The mutation was refused. The link already said why; this says the press landed. /\n @state() failed: boolean = false\n\n get context() { return { title: `application registration`,\n help: 'auth/application'\n }\n }\n\n render() { return html`\n <img src=\"/assets/images/image-api.png\" pagedeco />\n <h2>${i18next.t('text.register new application')}</h2>\n <p page-description>${i18next.t('text.an application signs in on its own behalf')}</p>\n\n ${this._icon\n ? html`\n <div icon>\n <img src=${this._icon} />\n </div>\n `\n : html``}\n\n <div form-container>\n <form>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">${i18next.t('field.name')}</label>\n <input id=\"name\" type=\"text\" name=\"name\" required ?invalid=${this.missing.includes('name')} />\n ${this.missing.includes('name')\n ? html`<div field-error>${i18next.t('text.this field is required')}</div>`\n : ''}\n </div>\n\n <div field grid-span>\n <label for=\"description\">${i18next.t('field.description')}</label>\n <input id=\"description\" type=\"text\" name=\"description\" />\n </div>\n\n <div field grid-span>\n <label for=\"app-url\">${i18next.t('field.application url')}</label>\n <input id=\"app-url\" type=\"url\" name=\"url\" />\n </div>\n\n <div field grid-span>\n <label for=\"redirect-url\">${i18next.t('field.redirect url')}</label>\n <input id=\"redirect-url\" type=\"url\" name=\"redirectUrl\" />\n </div>\n\n <div field grid-span>\n <label for=\"icon\">${i18next.t('field.application icon')}</label>\n <input id=\"icon\" type=\"url\" name=\"icon\" @change=${e => (this._icon = e.target.value)} />\n </div>\n\n <div field grid-span>\n <!-- type=email so the browser checks the shape the server's scalar will check. -->\n <label for=\"email\">${i18next.t('field.contact email')}</label>\n <input id=\"email\" type=\"email\" name=\"email\" />\n </div>\n\n ${this.failed ? html`<div form-error grid-span>${i18next.t('text.could not register')}</div>` : ''}\n\n <button grid-span type=\"submit\" @click=${this.createApplication.bind(this)}>\n ${i18next.t('button.register')}\n </button>\n </div>\n </form>\n </div>\n `\n }\n\n async createApplication(e) { e.preventDefault()\n\n const formData = new FormData(this.form)\n\n /\n `name` is the only field NewApplication declares non-null. The list comes from the\n schema rather than from taste — requiring more here would invent a rule the product\n does not have, and the person would be stopped by this screen alone.\n /\n const missing = missingRequired(formData, ['name'])\n\n if (missing.length) {\n this.missing = missing\n return\n }\n\n this.missing = []\n\n /\n This used to send every input, including the untouched ones, each as an empty string.\n `NewApplication.email` is a GraphQLEmailAddress and rejects '' — so registering without\n a contact email failed, on a field the schema marks optional, and the screen printed\n \"creation fail.\" to the console where nobody would see it.\n\n `filledValues` leaves an empty field out instead, which is what optional means on the\n wire.\n /\n const application = filledValues(formData)\n\n const response = await client.mutate({ mutation: gql`\n mutation ($application: NewApplication!) { createApplication(application: $application) { id\n }\n }\n `,\n variables: { application\n }\n })\n\n if (response.errors) {\n /\n The shared client link already raises a notify event carrying the server's reason, so\n the person sees what went wrong. What was missing is that the screen stayed silent\n and looked idle — the form is still filled in, and nothing said the press had landed.\n */\n this.failed = true\n return\n }\n\n this.failed = false\n navigate(`application/${response.data.createApplication.id}`)\n }\n\n pageUpdated(changes, lifecycle, before) { if (this.active) { this.form.reset()\n }\n }\n}\n"]}

package/dist-client/pages/auth-provider/auth-provider-management.d.ts CHANGED Viewed

@@ -13,6 +13,8 @@ export declare class AuthProviderManagementPage extends AuthProviderManagementPa
     static styles: import("lit").CSSResult[];
     gristConfig: any;
     mode: 'CARD' | 'GRID' | 'LIST';
+    /** The last fetch did not answer. Distinct from answering with nothing. */
+    failed: boolean;
     authProviderTypes: {
         type: string;
         description?: string;
@@ -47,8 +49,8 @@ export declare class AuthProviderManagementPage extends AuthProviderManagementPa
     render(): import("lit-html").TemplateResult<1>;
     pageInitialized(lifecycle: any): Promise<void>;
     fetchHandler({ page, limit, sortings, filters }: FetchOption): Promise<{
-        total: any;
-        records: any;
+        total: number;
+        records: any[];
     }>;
     private deleteAuthProvider;
     private updateAuthProvider;