@things-factory/auth-ui 10.1.17 → 10.1.18

package/dist-client/components/application-editor.js

@@ -0,0 +1,491 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/button/text-button.js';
+import '@material/web/button/filled-button.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { OxPrompt } from '@operato/popup/ox-prompt.js';
+import { CommonHeaderStyles, CommonPopupStyles } from '@operato/styles';
+import './secret-field.js';
+import { APPLICATION_TYPES } from '../constants/application.js';
+import { changedValues, filledValues, missingRequired } from '../utils/form-values.js';
+/**
+ * Registering and editing an application, in a popup.
+ *
+ * ── Why this replaced two pages ─────────────────────────────────────────────
+ * Same reason as `appliance-editor`: `application-register` and `application/{id}` were the
+ * only routes of their kind left in a package where every other resource is a list with a
+ * popup over it, and nothing outside auth-ui linked to either.
+ *
+ * ── Three defects the old detail page carried ───────────────────────────────
+ * 1. **The type could not be changed.** Every option in the dropdown was written as
+ *    `<option value="${app.type}">`, so all six options submitted the *current* value. The
+ *    label differed, the value did not.
+ * 2. **`generate new secret` did nothing.** The button had no handler, while
+ *    `generateApplicationSecret` had been on the server the whole time.
+ * 3. **Saving with an empty contact email was refused.** The page sent every box, so an
+ *    untouched `email` went as `''`, and `ApplicationPatch.email` is a GraphQLEmailAddress —
+ *    `''` is not "no email" to it, it is an invalid one. The screen printed `update fail` to
+ *    the console.
+ *
+ * The type list itself had drifted too: the client constant named five types, the server enum
+ * declares six. `application-type-parity.test.ts` now fails when they part again.
+ */
+/** The one field `NewApplication` declares non-null. The schema's list, not a house rule. */
+const REQUIRED = ['name'];
+/*
+ * What a new application is when nobody chooses. A `<select>` always has a value, so leaving
+ * this out would not mean "unset" — it would mean whichever option happens to be listed
+ * first. `Application.type` declares `default: ApplicationType.OTHERS`, so that is the one to
+ * preselect; anything else would quietly disagree with the server about untouched records.
+ */
+const DEFAULT_TYPE = 'OTHERS';
+const APPLICATION_FIELDS = `
+  id
+  name
+  description
+  email
+  url
+  icon
+  redirectUrl
+  authUrl
+  accessTokenUrl
+  webhook
+  availableScopes
+  appKey
+  appSecret
+  type
+`;
+let ApplicationEditor = class ApplicationEditor extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.application = null;
+        this.missing = [];
+        this.failed = false;
+        this.loadFailed = false;
+    }
+    static { this.styles = [
+        CommonHeaderStyles,
+        CommonPopupStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+        overflow: auto;
+      }
+
+      form {
+        flex: 1;
+        padding: var(--popup-padding);
+      }
+
+      fieldset {
+        border-radius: var(--border-radius);
+        border: var(--border-dim-color);
+        margin: 0 0 var(--popup-gap) 0;
+        padding: var(--popup-padding);
+      }
+
+      legend {
+        padding: var(--legend-padding);
+        font-weight: bold;
+        color: var(--legend-color);
+      }
+
+      [field-2column] {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: var(--popup-gap);
+      }
+
+      [field] {
+        display: flex;
+        flex-direction: column;
+      }
+
+      [grid-span] {
+        grid-column: span 2;
+      }
+
+      label {
+        font: var(--label-font);
+        color: var(--label-color, var(--md-sys-color-on-surface));
+        text-transform: var(--label-text-transform);
+      }
+
+      input,
+      select {
+        background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
+        color: var(--input-field-color, var(--md-sys-color-on-surface));
+        border: var(--border-dim-color);
+        border-radius: var(--border-radius);
+        margin: var(--input-margin);
+        padding: var(--input-padding);
+        font: var(--input-font);
+      }
+
+      input:focus,
+      select:focus {
+        outline: none;
+      }
+
+      input[readonly] {
+        opacity: 0.7;
+      }
+
+      input[invalid] {
+        border-color: var(--md-sys-color-error);
+      }
+
+      [field-error] {
+        color: var(--md-sys-color-error);
+        font-size: var(--popup-font-size-small);
+        margin-top: var(--spacing-tiny, 2px);
+      }
+
+      [field] .note {
+        margin-top: var(--spacing-tiny, 2px);
+      }
+
+      .buttons .left {
+        margin-right: auto;
+      }
+
+      @media screen and (max-width: 480px) {
+        [field] {
+          grid-column: span 2;
+        }
+      }
+    `
+    ]; }
+    get editing() {
+        return !!this.applicationId;
+    }
+    /*
+     * ⚠ The type dropdown: each option carries its OWN value. The page this replaced wrote the
+     * current type as the value of every option, so all six submitted the same thing and the
+     * type could not be changed from this screen at all.
+     */
+    render() {
+        const app = this.application || {};
+        if (this.editing && this.loadFailed) {
+            return html `<div class="failure">${i18next.t('text.the application could not be loaded')}</div>`;
+        }
+        return html `
+      <form @submit=${(e) => e.preventDefault()}>
+        <fieldset>
+          <legend>${i18next.t('text.application')}</legend>
+          <div field-2column>
+            <div field grid-span>
+              <label for="name">${i18next.t('field.name')}</label>
+              <input
+                id="name"
+                type="text"
+                name="name"
+                .value=${app.name || ''}
+                required
+                autofocus
+                ?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">${i18next.t('field.description')}</label>
+              <input id="description" type="text" name="description" .value=${app.description || ''} />
+            </div>
+
+            <!-- type=email so the browser checks the shape the server's scalar will check. -->
+            <div field grid-span>
+              <label for="email">${i18next.t('field.contact email')}</label>
+              <input id="email" type="email" name="email" .value=${app.email || ''} />
+            </div>
+
+            <div field grid-span>
+              <label for="type">${i18next.t('field.type')}</label>
+              <select id="type" name="type">
+                ${APPLICATION_TYPES.map(type => html `<option value=${type} ?selected=${type === (app.type || DEFAULT_TYPE)}>${type}</option>`)}
+              </select>
+            </div>
+
+            <div field grid-span>
+              <label for="url">${i18next.t('field.application url')}</label>
+              <input id="url" type="url" name="url" .value=${app.url || ''} />
+            </div>
+
+            <div field grid-span>
+              <label for="redirect-url">${i18next.t('field.redirect url')}</label>
+              <input id="redirect-url" type="url" name="redirectUrl" .value=${app.redirectUrl || ''} />
+            </div>
+
+            <div field grid-span>
+              <label for="icon">${i18next.t('field.application icon')}</label>
+              <input id="icon" type="url" name="icon" .value=${app.icon || ''} />
+            </div>
+
+            <div field grid-span>
+              <label for="webhook">${i18next.t('field.webhook')}</label>
+              <input id="webhook" type="url" name="webhook" .value=${app.webhook || ''} />
+            </div>
+          </div>
+        </fieldset>
+
+        ${this.editing ? this.renderEndpoints(app) : ''} ${this.editing ? this.renderCredential(app) : ''}
+        ${this.failed ? html `<div class="failure">${i18next.t('text.could not be saved')}</div>` : ''}
+      </form>
+
+      <div class="buttons">
+        ${this.editing
+            ? html `
+                <md-text-button class="left" @click=${this.deleteApplication.bind(this)}>
+                  ${i18next.t('button.delete')}
+                </md-text-button>
+              `
+            : ''}
+        <md-text-button @click=${this.cancel.bind(this)}>${i18next.t('button.cancel')}</md-text-button>
+        <md-filled-button @click=${this.save.bind(this)}>
+          ${this.editing ? i18next.t('button.update') : i18next.t('button.register')}
+        </md-filled-button>
+      </div>
+    `;
+    }
+    /*
+     * What the server hands back rather than what the person types: the OAuth endpoints and the
+     * scopes this application may ask for. Read-only and outside the form's named inputs, so
+     * they are never part of a patch.
+     */
+    renderEndpoints(app) {
+        return html `
+      <fieldset>
+        <legend>${i18next.t('text.endpoints')}</legend>
+        <div field-2column>
+          <div field grid-span>
+            <label for="auth-url">${i18next.t('field.auth url')}</label>
+            <input id="auth-url" type="text" .value=${app.authUrl || ''} readonly />
+            <div class="note">${i18next.t('text.where an integration asks for an authorization code')}</div>
+          </div>
+
+          <div field grid-span>
+            <label for="access-token-url">${i18next.t('field.access token url')}</label>
+            <input id="access-token-url" type="text" .value=${app.accessTokenUrl || ''} readonly />
+            <div class="note">${i18next.t('text.where that code is exchanged for an access token')}</div>
+          </div>
+
+          <div field grid-span>
+            <label for="available-scopes">${i18next.t('field.available scopes')}</label>
+            <input id="available-scopes" type="text" .value=${app.availableScopes || ''} readonly />
+          </div>
+        </div>
+      </fieldset>
+    `;
+    }
+    /*
+     * appKey stays a plain field: it is the client identifier, meant to be read and quoted.
+     * appSecret is the other half — it carries its own @privilege for security:query, and it is
+     * the value an integration signs with.
+     */
+    renderCredential(app) {
+        return html `
+      <fieldset>
+        <legend>${i18next.t('text.credentials')}</legend>
+        <div field-2column>
+          <div field grid-span>
+            <label for="app-key">${i18next.t('field.app key')}</label>
+            <input id="app-key" type="text" .value=${app.appKey || ''} readonly />
+          </div>
+
+          <div field grid-span>
+            <label for="app-secret">${i18next.t('field.client-secret')}</label>
+            <secret-field id="app-secret" .value=${app.appSecret || ''}></secret-field>
+            <div class="row">
+              <md-text-button @click=${this.generateSecret.bind(this)}>
+                ${i18next.t('button.generate new secret')}
+              </md-text-button>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    `;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        if (this.editing) {
+            await this.fetchApplication();
+        }
+    }
+    async fetchApplication() {
+        const response = await client.query({
+            query: gql `
+        query ($id: String!) {
+          application(id: $id) { ${APPLICATION_FIELDS} }
+        }
+      `,
+            variables: { id: this.applicationId }
+        });
+        /*
+         * A refusal arrives in `errors` rather than throwing. An unchecked read would render an
+         * empty form that looks like a record with every field blank, and saving it would write
+         * those blanks.
+         */
+        if (response.errors || !response.data?.application) {
+            this.loadFailed = true;
+            return;
+        }
+        this.loadFailed = false;
+        this.application = response.data.application;
+    }
+    cancel(e) {
+        e.preventDefault();
+        this.close();
+    }
+    async save(e) {
+        e.preventDefault();
+        const formData = new FormData(this.form);
+        const missing = missingRequired(formData, REQUIRED);
+        if (missing.length) {
+            this.missing = missing;
+            return;
+        }
+        this.missing = [];
+        return this.editing ? this.updateApplication(formData) : this.createApplication(formData);
+    }
+    async createApplication(formData) {
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ($application: NewApplication!) {
+          createApplication(application: $application) {
+            id
+          }
+        }
+      `,
+            variables: { application: filledValues(formData) }
+        });
+        if (response.errors) {
+            this.failed = true;
+            return;
+        }
+        this.saved();
+    }
+    async updateApplication(formData) {
+        const patch = changedValues(formData, this.application);
+        if (!Object.keys(patch).length) {
+            this.close();
+            return;
+        }
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ($id: String!, $patch: ApplicationPatch!) {
+          updateApplication(id: $id, patch: $patch) { ${APPLICATION_FIELDS} }
+        }
+      `,
+            variables: { id: this.applicationId, patch }
+        });
+        if (response.errors) {
+            this.failed = true;
+            return;
+        }
+        this.saved();
+    }
+    async generateSecret(e) {
+        e.preventDefault();
+        const confirmed = await OxPrompt.open({
+            type: 'warning',
+            title: i18next.t('button.generate new secret'),
+            text: i18next.t('text.the current secret stops working immediately'),
+            confirmButton: { text: i18next.t('button.confirm') },
+            cancelButton: { text: i18next.t('button.cancel') }
+        });
+        if (!confirmed) {
+            return;
+        }
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ($id: String!) {
+          generateApplicationSecret(id: $id) { ${APPLICATION_FIELDS} }
+        }
+      `,
+            variables: { id: this.applicationId }
+        });
+        if (response.errors) {
+            this.failed = true;
+            return;
+        }
+        /*
+         * Stays open on purpose — a fresh secret is shown once and has to be copied before it is
+         * out of reach.
+         */
+        this.failed = false;
+        this.application = response.data.generateApplicationSecret;
+        this.dispatchEvent(new CustomEvent('application-changed', { bubbles: true, composed: true }));
+    }
+    async deleteApplication(e) {
+        e.preventDefault();
+        const confirmed = await OxPrompt.open({
+            type: 'warning',
+            title: i18next.t('button.delete'),
+            text: i18next.t('text.are you sure you want to delete x', { x: this.application?.name || '' }),
+            confirmButton: { text: i18next.t('button.delete') },
+            cancelButton: { text: i18next.t('button.cancel') }
+        });
+        if (!confirmed) {
+            return;
+        }
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ($id: String!) {
+          deleteApplication(id: $id)
+        }
+      `,
+            variables: { id: this.applicationId }
+        });
+        if (response.errors) {
+            this.failed = true;
+            return;
+        }
+        this.saved();
+    }
+    saved() {
+        this.failed = false;
+        this.dispatchEvent(new CustomEvent('application-changed', { bubbles: true, composed: true }));
+        this.close();
+    }
+    close() {
+        this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], ApplicationEditor.prototype, "applicationId", void 0);
+__decorate([
+    query('form'),
+    __metadata("design:type", HTMLFormElement)
+], ApplicationEditor.prototype, "form", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ApplicationEditor.prototype, "application", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], ApplicationEditor.prototype, "missing", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], ApplicationEditor.prototype, "failed", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], ApplicationEditor.prototype, "loadFailed", void 0);
+ApplicationEditor = __decorate([
+    customElement('application-editor')
+], ApplicationEditor);
+export { ApplicationEditor };
+//# sourceMappingURL=application-editor.js.map

package/dist-client/components/application-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"application-editor.js","sourceRoot":"","sources":["../../client/components/application-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/button/filled-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { CommonHeaderStyles, CommonPopupStyles } from '@operato/styles'\n\nimport './secret-field.js'\nimport { APPLICATION_TYPES } from '../constants/application.js'\nimport { changedValues, filledValues, missingRequired } from '../utils/form-values.js'\n\n/**\n * Registering and editing an application, in a popup.\n *\n * ── Why this replaced two pages ─────────────────────────────────────────────\n * Same reason as `appliance-editor`: `application-register` and `application/{id}` were the\n * only routes of their kind left in a package where every other resource is a list with a\n * popup over it, and nothing outside auth-ui linked to either.\n *\n * ── Three defects the old detail page carried ───────────────────────────────\n * 1. **The type could not be changed.** Every option in the dropdown was written as\n *    `<option value=\"${app.type}\">`, so all six options submitted the *current* value. The\n *    label differed, the value did not.\n * 2. **`generate new secret` did nothing.** The button had no handler, while\n *    `generateApplicationSecret` had been on the server the whole time.\n * 3. **Saving with an empty contact email was refused.** The page sent every box, so an\n *    untouched `email` went as `''`, and `ApplicationPatch.email` is a GraphQLEmailAddress —\n *    `''` is not \"no email\" to it, it is an invalid one. The screen printed `update fail` to\n *    the console.\n *\n * The type list itself had drifted too: the client constant named five types, the server enum\n * declares six. `application-type-parity.test.ts` now fails when they part again.\n */\n\n/** The one field `NewApplication` declares non-null. The schema's list, not a house rule. */\nconst REQUIRED = ['name']\n\n/*\n * What a new application is when nobody chooses. A `<select>` always has a value, so leaving\n * this out would not mean \"unset\" — it would mean whichever option happens to be listed\n * first. `Application.type` declares `default: ApplicationType.OTHERS`, so that is the one to\n * preselect; anything else would quietly disagree with the server about untouched records.\n */\nconst DEFAULT_TYPE = 'OTHERS'\n\nconst APPLICATION_FIELDS = `\n  id\n  name\n  description\n  email\n  url\n  icon\n  redirectUrl\n  authUrl\n  accessTokenUrl\n  webhook\n  availableScopes\n  appKey\n  appSecret\n  type\n`\n\n@customElement('application-editor')\nexport class ApplicationEditor extends localize(i18next)(LitElement) {\n  static styles = [\n    CommonHeaderStyles,\n    CommonPopupStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n        overflow: auto;\n      }\n\n      form {\n        flex: 1;\n        padding: var(--popup-padding);\n      }\n\n      fieldset {\n        border-radius: var(--border-radius);\n        border: var(--border-dim-color);\n        margin: 0 0 var(--popup-gap) 0;\n        padding: var(--popup-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: var(--popup-gap);\n      }\n\n      [field] {\n        display: flex;\n        flex-direction: column;\n      }\n\n      [grid-span] {\n        grid-column: span 2;\n      }\n\n      label {\n        font: var(--label-font);\n        color: var(--label-color, var(--md-sys-color-on-surface));\n        text-transform: var(--label-text-transform);\n      }\n\n      input,\n      select {\n        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\n      input:focus,\n      select:focus {\n        outline: none;\n      }\n\n      input[readonly] {\n        opacity: 0.7;\n      }\n\n      input[invalid] {\n        border-color: var(--md-sys-color-error);\n      }\n\n      [field-error] {\n        color: var(--md-sys-color-error);\n        font-size: var(--popup-font-size-small);\n        margin-top: var(--spacing-tiny, 2px);\n      }\n\n      [field] .note {\n        margin-top: var(--spacing-tiny, 2px);\n      }\n\n      .buttons .left {\n        margin-right: auto;\n      }\n\n      @media screen and (max-width: 480px) {\n        [field] {\n          grid-column: span 2;\n        }\n      }\n    `\n  ]\n\n  /** The application to edit. Absent means this popup is registering a new one. */\n  @property({ type: String }) applicationId?: string\n\n  @query('form') form!: HTMLFormElement\n\n  @state() private application: any = null\n\n  @state() private missing: string[] = []\n\n  @state() private failed: boolean = false\n\n  @state() private loadFailed: boolean = false\n\n  private get editing(): boolean {\n    return !!this.applicationId\n  }\n\n  /*\n   * ⚠ The type dropdown: each option carries its OWN value. The page this replaced wrote the\n   * current type as the value of every option, so all six submitted the same thing and the\n   * type could not be changed from this screen at all.\n   */\n  render() {\n    const app = this.application || {}\n\n    if (this.editing && this.loadFailed) {\n      return html`<div class=\"failure\">${i18next.t('text.the application could not be loaded')}</div>`\n    }\n\n    return html`\n      <form @submit=${(e: Event) => e.preventDefault()}>\n        <fieldset>\n          <legend>${i18next.t('text.application')}</legend>\n          <div field-2column>\n            <div field grid-span>\n              <label for=\"name\">${i18next.t('field.name')}</label>\n              <input\n                id=\"name\"\n                type=\"text\"\n                name=\"name\"\n                .value=${app.name || ''}\n                required\n                autofocus\n                ?invalid=${this.missing.includes('name')}\n              />\n              ${\n                this.missing.includes('name')\n                  ? html`<div field-error>${i18next.t('text.this field is required')}</div>`\n                  : ''\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\" .value=${app.description || ''} />\n            </div>\n\n            <!-- type=email so the browser checks the shape the server's scalar will check. -->\n            <div field grid-span>\n              <label for=\"email\">${i18next.t('field.contact email')}</label>\n              <input id=\"email\" type=\"email\" name=\"email\" .value=${app.email || ''} />\n            </div>\n\n            <div field grid-span>\n              <label for=\"type\">${i18next.t('field.type')}</label>\n              <select id=\"type\" name=\"type\">\n                ${APPLICATION_TYPES.map(\n                  type => html`<option value=${type} ?selected=${type === (app.type || DEFAULT_TYPE)}>${type}</option>`\n                )}\n              </select>\n            </div>\n\n            <div field grid-span>\n              <label for=\"url\">${i18next.t('field.application url')}</label>\n              <input id=\"url\" type=\"url\" name=\"url\" .value=${app.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\" .value=${app.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\" .value=${app.icon || ''} />\n            </div>\n\n            <div field grid-span>\n              <label for=\"webhook\">${i18next.t('field.webhook')}</label>\n              <input id=\"webhook\" type=\"url\" name=\"webhook\" .value=${app.webhook || ''} />\n            </div>\n          </div>\n        </fieldset>\n\n        ${this.editing ? this.renderEndpoints(app) : ''} ${this.editing ? this.renderCredential(app) : ''}\n        ${this.failed ? html`<div class=\"failure\">${i18next.t('text.could not be saved')}</div>` : ''}\n      </form>\n\n      <div class=\"buttons\">\n        ${\n          this.editing\n            ? html`\n                <md-text-button class=\"left\" @click=${this.deleteApplication.bind(this)}>\n                  ${i18next.t('button.delete')}\n                </md-text-button>\n              `\n            : ''\n        }\n        <md-text-button @click=${this.cancel.bind(this)}>${i18next.t('button.cancel')}</md-text-button>\n        <md-filled-button @click=${this.save.bind(this)}>\n          ${this.editing ? i18next.t('button.update') : i18next.t('button.register')}\n        </md-filled-button>\n      </div>\n    `\n  }\n\n  /*\n   * What the server hands back rather than what the person types: the OAuth endpoints and the\n   * scopes this application may ask for. Read-only and outside the form's named inputs, so\n   * they are never part of a patch.\n   */\n  private renderEndpoints(app: any) {\n    return html`\n      <fieldset>\n        <legend>${i18next.t('text.endpoints')}</legend>\n        <div field-2column>\n          <div field grid-span>\n            <label for=\"auth-url\">${i18next.t('field.auth url')}</label>\n            <input id=\"auth-url\" type=\"text\" .value=${app.authUrl || ''} readonly />\n            <div class=\"note\">${i18next.t('text.where an integration asks for an authorization code')}</div>\n          </div>\n\n          <div field grid-span>\n            <label for=\"access-token-url\">${i18next.t('field.access token url')}</label>\n            <input id=\"access-token-url\" type=\"text\" .value=${app.accessTokenUrl || ''} readonly />\n            <div class=\"note\">${i18next.t('text.where that code is exchanged for an access token')}</div>\n          </div>\n\n          <div field grid-span>\n            <label for=\"available-scopes\">${i18next.t('field.available scopes')}</label>\n            <input id=\"available-scopes\" type=\"text\" .value=${app.availableScopes || ''} readonly />\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  /*\n   * appKey stays a plain field: it is the client identifier, meant to be read and quoted.\n   * appSecret is the other half — it carries its own @privilege for security:query, and it is\n   * the value an integration signs with.\n   */\n  private renderCredential(app: any) {\n    return html`\n      <fieldset>\n        <legend>${i18next.t('text.credentials')}</legend>\n        <div field-2column>\n          <div field grid-span>\n            <label for=\"app-key\">${i18next.t('field.app key')}</label>\n            <input id=\"app-key\" type=\"text\" .value=${app.appKey || ''} readonly />\n          </div>\n\n          <div field grid-span>\n            <label for=\"app-secret\">${i18next.t('field.client-secret')}</label>\n            <secret-field id=\"app-secret\" .value=${app.appSecret || ''}></secret-field>\n            <div class=\"row\">\n              <md-text-button @click=${this.generateSecret.bind(this)}>\n                ${i18next.t('button.generate new secret')}\n              </md-text-button>\n            </div>\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  async connectedCallback() {\n    super.connectedCallback()\n\n    if (this.editing) {\n      await this.fetchApplication()\n    }\n  }\n\n  async fetchApplication() {\n    const response = await client.query({\n      query: gql`\n        query ($id: String!) {\n          application(id: $id) { ${APPLICATION_FIELDS} }\n        }\n      `,\n      variables: { id: this.applicationId }\n    })\n\n    /*\n     * A refusal arrives in `errors` rather than throwing. An unchecked read would render an\n     * empty form that looks like a record with every field blank, and saving it would write\n     * those blanks.\n     */\n    if (response.errors || !response.data?.application) {\n      this.loadFailed = true\n      return\n    }\n\n    this.loadFailed = false\n    this.application = response.data.application\n  }\n\n  private cancel(e: Event) {\n    e.preventDefault()\n    this.close()\n  }\n\n  async save(e: Event) {\n    e.preventDefault()\n\n    const formData = new FormData(this.form)\n\n    const missing = missingRequired(formData, REQUIRED)\n\n    if (missing.length) {\n      this.missing = missing\n      return\n    }\n\n    this.missing = []\n\n    return this.editing ? this.updateApplication(formData) : this.createApplication(formData)\n  }\n\n  private async createApplication(formData: FormData) {\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($application: NewApplication!) {\n          createApplication(application: $application) {\n            id\n          }\n        }\n      `,\n      variables: { application: filledValues(formData) }\n    })\n\n    if (response.errors) {\n      this.failed = true\n      return\n    }\n\n    this.saved()\n  }\n\n  private async updateApplication(formData: FormData) {\n    const patch = changedValues(formData, this.application)\n\n    if (!Object.keys(patch).length) {\n      this.close()\n      return\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($id: String!, $patch: ApplicationPatch!) {\n          updateApplication(id: $id, patch: $patch) { ${APPLICATION_FIELDS} }\n        }\n      `,\n      variables: { id: this.applicationId, patch }\n    })\n\n    if (response.errors) {\n      this.failed = true\n      return\n    }\n\n    this.saved()\n  }\n\n  private async generateSecret(e: Event) {\n    e.preventDefault()\n\n    const confirmed = await OxPrompt.open({\n      type: 'warning',\n      title: i18next.t('button.generate new secret'),\n      text: i18next.t('text.the current secret stops working immediately'),\n      confirmButton: { text: i18next.t('button.confirm') },\n      cancelButton: { text: i18next.t('button.cancel') }\n    })\n\n    if (!confirmed) {\n      return\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($id: String!) {\n          generateApplicationSecret(id: $id) { ${APPLICATION_FIELDS} }\n        }\n      `,\n      variables: { id: this.applicationId }\n    })\n\n    if (response.errors) {\n      this.failed = true\n      return\n    }\n\n    /*\n     * Stays open on purpose — a fresh secret is shown once and has to be copied before it is\n     * out of reach.\n     */\n    this.failed = false\n    this.application = response.data.generateApplicationSecret\n    this.dispatchEvent(new CustomEvent('application-changed', { bubbles: true, composed: true }))\n  }\n\n  private async deleteApplication(e: Event) {\n    e.preventDefault()\n\n    const confirmed = await OxPrompt.open({\n      type: 'warning',\n      title: i18next.t('button.delete'),\n      text: i18next.t('text.are you sure you want to delete x', { x: this.application?.name || '' }),\n      confirmButton: { text: i18next.t('button.delete') },\n      cancelButton: { text: i18next.t('button.cancel') }\n    })\n\n    if (!confirmed) {\n      return\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($id: String!) {\n          deleteApplication(id: $id)\n        }\n      `,\n      variables: { id: this.applicationId }\n    })\n\n    if (response.errors) {\n      this.failed = true\n      return\n    }\n\n    this.saved()\n  }\n\n  private saved() {\n    this.failed = false\n    this.dispatchEvent(new CustomEvent('application-changed', { bubbles: true, composed: true }))\n    this.close()\n  }\n\n  private close() {\n    this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist-client/components/profile-component.js

@@ -13,6 +13,7 @@ import { i18next, localize } from '@operato/i18n';
 import { notify, openPopup } from '@operato/layout';
 import { FormFieldStyles } from '@operato/styles';
 import { auth, getLanguages } from '@things-factory/auth-base/dist-client';
+import { readVerification } from '../utils/webauthn-verification.js';
 const isAvailableWebauthn = 'PublicKeyCredential' in window;
 let ProfileComponent = class ProfileComponent extends localize(i18next)(LitElement) {
     constructor() {
@@ -316,35 +317,51 @@ let ProfileComponent = class ProfileComponent extends localize(i18next)(LitEleme
             title: i18next.t('label.delete account')
         });
     }
+    /*
+     * ⚠ The three endings here are not interchangeable, and the screen used to give the same one
+     * for all of them.
+     *
+     *   registered  the server confirmed it
+     *   refused     the server said no — usually this credential is already registered
+     *   failed      we never got an answer: the browser refused, the device was cancelled,
+     *               the network dropped
+     *
+     * `await verification.text()` on an already-parsed body threw a TypeError that the catch
+     * below swallowed, so **refused arrived as failed** and the refusal message was unreachable
+     * code. `readVerification` works out which ending it is without being able to throw; see
+     * `utils/webauthn-verification.ts`.
+     */
     async registerUser() {
         try {
             const options = await fetch('/auth/register-webauthn/challenge').then(res => res.json());
             const attResp = await startRegistration(options);
-            const verification = await fetch('/auth/verify-registration', {
+            const verification = await readVerification(await fetch('/auth/verify-registration', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json'
                 },
                 body: JSON.stringify(attResp)
-            }).then(res => res.json());
-            if (verification.verified) {
+            }));
+            if (verification.outcome === 'registered') {
                 notify({
                     level: 'info',
                     message: i18next.t('text.user credential registered successfully')
                 });
+                return;
             }
-            else {
-                console.error(await verification.text());
-                notify({
-                    level: 'error',
-                    message: i18next.t('error.user credential registeration not allowed')
-                });
-            }
+            /* The server's own words, in English, for whoever reads the console — not for the screen. */
+            console.error('passkey registration refused:', verification.reason);
+            notify({
+                level: 'error',
+                message: i18next.t('error.user credential registration not allowed')
+            });
         }
         catch (error) {
+            /* Never reached the server, or never got past the device. A different thing to say. */
+            console.error('passkey registration failed:', error);
             notify({
                 level: 'error',
-                message: i18next.t('error.user credential registeration failed')
+                message: i18next.t('error.user credential registration failed')
             });
         }
     }