@things-factory/auth-ui 10.1.17 → 10.1.18

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

@@ -0,0 +1,489 @@
+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 { asyncReplace } from 'lit/directives/async-replace.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 { parseJwt, sleep } from '@operato/utils';
+import './secret-field.js';
+import { changedValues, filledValues, missingRequired } from '../utils/form-values.js';
+/**
+ * Registering and editing an appliance, in a popup.
+ *
+ * ── Why this replaced two pages ─────────────────────────────────────────────
+ * `appliance-register` and `appliance/{id}` were full routes. Nothing outside auth-ui linked
+ * to either, and every other resource in this package — role, user, domain, domain owner,
+ * auth provider, attribute set — is a grist list with a popup over it. The two pages were not
+ * a different kind of resource, only older code.
+ *
+ * ── The defect that came with them ──────────────────────────────────────────
+ * Both pages sent the whole form. On the register page that meant `serialNo: ''`, and
+ * `createAppliance` has no validation at all — it saves `{ domain, creator, updater,
+ * ...appliance }` — so `''` passed GraphQL's non-null check (an empty string is a String) and
+ * an appliance with no serial number, brand or model was created **and the screen navigated
+ * away as if it had worked.** On the edit page the same habit cleared fields nobody touched.
+ *
+ * `NewAppliance` is the source of the required list below. `AppliancePatch` is spread over the
+ * loaded row, so the update sends a diff — see `utils/form-values.ts` for why those are two
+ * different rules rather than one.
+ */
+/** Fields `NewAppliance` declares non-null. Not a house rule — the schema's own list. */
+const REQUIRED = ['serialNo', 'name', 'brand', 'model'];
+const APPLIANCE_FIELDS = `
+  id
+  name
+  description
+  serialNo
+  brand
+  model
+  netmask
+  accessToken
+`;
+let ApplianceEditor = class ApplianceEditor extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** The loaded record. The patch is a diff against this, so it is never rebuilt from the form. */
+        this.appliance = null;
+        /** Required fields still empty. Filled in when the person presses save, not while typing. */
+        this.missing = [];
+        /** The mutation was refused. The shared link already said why; this says the press landed. */
+        this.failed = false;
+        /** The single-record read did not answer. Distinct from answering with nothing. */
+        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 {
+        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 {
+        outline: none;
+      }
+
+      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);
+      }
+
+      [input-hint] {
+        font-size: var(--popup-font-size-small);
+        color: var(--input-hint-color);
+      }
+
+      /* The one reverting action goes left, away from the ones that commit. */
+      .buttons .left {
+        margin-right: auto;
+      }
+
+      @media screen and (max-width: 480px) {
+        [field] {
+          grid-column: span 2;
+        }
+      }
+    `
+    ]; }
+    get editing() {
+        return !!this.applianceId;
+    }
+    render() {
+        const appliance = this.appliance || {};
+        const exp = appliance.accessToken ? parseJwt(appliance.accessToken)?.exp : undefined;
+        if (this.editing && this.loadFailed) {
+            return html `<div class="failure">${i18next.t('text.the appliance could not be loaded')}</div>`;
+        }
+        return html `
+      <form @submit=${(e) => e.preventDefault()}>
+        <fieldset>
+          <legend>${i18next.t('text.appliance')}</legend>
+          <div field-2column>
+            <div field grid-span>
+              <label for="name">${i18next.t('field.name')}</label>
+              <input
+                id="name"
+                type="text"
+                name="name"
+                .value=${appliance.name || ''}
+                required
+                autofocus
+                ?invalid=${this.missing.includes('name')}
+              />
+              ${this.fieldError('name')}
+            </div>
+
+            <div field grid-span>
+              <label for="description">${i18next.t('field.description')}</label>
+              <input id="description" type="text" name="description" .value=${appliance.description || ''} />
+            </div>
+
+            <div field>
+              <label for="serial-no">${i18next.t('field.serial-no')}</label>
+              <input
+                id="serial-no"
+                type="text"
+                name="serialNo"
+                .value=${appliance.serialNo || ''}
+                required
+                ?invalid=${this.missing.includes('serialNo')}
+              />
+              ${this.fieldError('serialNo')}
+            </div>
+
+            <div field>
+              <label for="brand">${i18next.t('field.brand')}</label>
+              <input
+                id="brand"
+                type="text"
+                name="brand"
+                .value=${appliance.brand || ''}
+                required
+                ?invalid=${this.missing.includes('brand')}
+              />
+              ${this.fieldError('brand')}
+            </div>
+
+            <div field>
+              <label for="model">${i18next.t('field.model')}</label>
+              <input
+                id="model"
+                type="text"
+                name="model"
+                .value=${appliance.model || ''}
+                required
+                ?invalid=${this.missing.includes('model')}
+              />
+              ${this.fieldError('model')}
+            </div>
+
+            <div field>
+              <label for="netmask">${i18next.t('field.netmask')}</label>
+              <input id="netmask" type="text" name="netmask" .value=${appliance.netmask || ''} />
+            </div>
+          </div>
+        </fieldset>
+
+        ${this.editing ? this.renderCredential(appliance, exp) : ''}
+        ${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.deleteAppliance.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>
+    `;
+    }
+    /*
+     * The credential panel only exists once the appliance does — there is no token to show
+     * before it is created, and the list query deliberately never asks for one.
+     */
+    renderCredential(appliance, exp) {
+        return html `
+      <fieldset>
+        <legend>${i18next.t('text.appliance credential')}</legend>
+        <div field grid-span>
+          <label for="access-token">${i18next.t('label.access token')}</label>
+          <secret-field id="access-token" .value=${appliance.accessToken || ''}></secret-field>
+          ${exp
+            ? html `<div input-hint>
+                  ${i18next.t('text.token expiry time')} ${new Date(exp * 1000).toLocaleString()} :
+                  ${asyncReplace(this.expTimer(exp))}
+                </div>`
+            : ''}
+          <div class="row">
+            <md-text-button @click=${this.generateSecret.bind(this)}>
+              ${i18next.t('button.generate new access token')}
+            </md-text-button>
+          </div>
+        </div>
+      </fieldset>
+    `;
+    }
+    fieldError(name) {
+        return this.missing.includes(name) ? html `<div field-error>${i18next.t('text.this field is required')}</div>` : '';
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        if (this.editing) {
+            await this.fetchAppliance();
+        }
+    }
+    async fetchAppliance() {
+        const response = await client.query({
+            query: gql `
+        query ($id: String!) {
+          appliance(id: $id) { ${APPLIANCE_FIELDS} }
+        }
+      `,
+            variables: { id: this.applianceId }
+        });
+        /*
+         * `errorPolicy: 'all'` means a refusal arrives here rather than throwing. Reading
+         * `data.appliance` without checking would show an empty form that looks like a record
+         * with every field blank — and saving it would then write those blanks.
+         */
+        if (response.errors || !response.data?.appliance) {
+            this.loadFailed = true;
+            return;
+        }
+        this.loadFailed = false;
+        this.appliance = response.data.appliance;
+    }
+    cancel(e) {
+        e.preventDefault();
+        this.close();
+    }
+    async save(e) {
+        e.preventDefault();
+        const formData = new FormData(this.form);
+        /*
+         * The same four fields are required on both paths. They come from `NewAppliance`, and an
+         * update is held to them too: the patch is spread over the row, so `name: ''` would clear
+         * a field the product will not let you create without.
+         */
+        const missing = missingRequired(formData, REQUIRED);
+        if (missing.length) {
+            this.missing = missing;
+            return;
+        }
+        this.missing = [];
+        return this.editing ? this.updateAppliance(formData) : this.createAppliance(formData);
+    }
+    async createAppliance(formData) {
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ($appliance: NewAppliance!) {
+          createAppliance(appliance: $appliance) {
+            id
+          }
+        }
+      `,
+            variables: { appliance: filledValues(formData) }
+        });
+        if (response.errors) {
+            this.failed = true;
+            return;
+        }
+        this.saved();
+    }
+    async updateAppliance(formData) {
+        const patch = changedValues(formData, this.appliance);
+        /*
+         * Nothing moved. Sending an empty patch would still stamp `updater` and `updatedAt`,
+         * which makes an untouched record look edited to whoever reads the list next.
+         */
+        if (!Object.keys(patch).length) {
+            this.close();
+            return;
+        }
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ($id: String!, $patch: AppliancePatch!) {
+          updateAppliance(id: $id, patch: $patch) { ${APPLIANCE_FIELDS} }
+        }
+      `,
+            variables: { id: this.applianceId, 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 access token'),
+            text: i18next.t('text.the current access token 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!) {
+          generateApplianceSecret(id: $id) { ${APPLIANCE_FIELDS} }
+        }
+      `,
+            variables: { id: this.applianceId }
+        });
+        if (response.errors) {
+            this.failed = true;
+            return;
+        }
+        /*
+         * Stays open on purpose. A new token is the one value on this screen the reader has to
+         * copy before it is out of reach — closing here would hand it to them and take it away.
+         */
+        this.failed = false;
+        this.appliance = response.data.generateApplianceSecret;
+        this.dispatchEvent(new CustomEvent('appliance-changed', { bubbles: true, composed: true }));
+    }
+    async deleteAppliance(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.appliance?.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!) {
+          deleteAppliance(id: $id)
+        }
+      `,
+            variables: { id: this.applianceId }
+        });
+        if (response.errors) {
+            this.failed = true;
+            return;
+        }
+        this.saved();
+    }
+    /** The list has to refetch, and the popup is done. */
+    saved() {
+        this.failed = false;
+        this.dispatchEvent(new CustomEvent('appliance-changed', { bubbles: true, composed: true }));
+        this.close();
+    }
+    close() {
+        this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+    }
+    async *expTimer(exp) {
+        const DAY = 24 * 60 * 60;
+        const HOUR = 60 * 60;
+        const MIN = 60;
+        while (this.isConnected) {
+            let remain = Math.floor(Number(exp) - Date.now() / 1000);
+            /*
+             * Past the expiry the arithmetic below produces "-5 days -3 hours", which reads as a
+             * duration rather than as the token being dead. Say it plainly and stop counting.
+             */
+            if (remain <= 0) {
+                yield i18next.t('text.expired');
+                return;
+            }
+            const days = Math.floor(remain / DAY);
+            remain -= days * DAY;
+            const hours = Math.floor(remain / HOUR);
+            remain -= hours * HOUR;
+            const mins = Math.floor(remain / MIN);
+            const secs = remain - mins * MIN;
+            yield i18next.t('text.remaining time', { days, hours, mins, secs });
+            await sleep(1000);
+        }
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], ApplianceEditor.prototype, "applianceId", void 0);
+__decorate([
+    query('form'),
+    __metadata("design:type", HTMLFormElement
+    /** The loaded record. The patch is a diff against this, so it is never rebuilt from the form. */
+    )
+], ApplianceEditor.prototype, "form", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ApplianceEditor.prototype, "appliance", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], ApplianceEditor.prototype, "missing", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], ApplianceEditor.prototype, "failed", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], ApplianceEditor.prototype, "loadFailed", void 0);
+ApplianceEditor = __decorate([
+    customElement('appliance-editor')
+], ApplianceEditor);
+export { ApplianceEditor };
+//# sourceMappingURL=appliance-editor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"appliance-editor.js","sourceRoot":"","sources":["../../client/components/appliance-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'\nimport { asyncReplace } from 'lit/directives/async-replace.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'\nimport { parseJwt, sleep } from '@operato/utils'\n\nimport './secret-field.js'\nimport { changedValues, filledValues, missingRequired } from '../utils/form-values.js'\n\n/**\n * Registering and editing an appliance, in a popup.\n *\n * ── Why this replaced two pages ─────────────────────────────────────────────\n * `appliance-register` and `appliance/{id}` were full routes. Nothing outside auth-ui linked\n * to either, and every other resource in this package — role, user, domain, domain owner,\n * auth provider, attribute set — is a grist list with a popup over it. The two pages were not\n * a different kind of resource, only older code.\n *\n * ── The defect that came with them ──────────────────────────────────────────\n * Both pages sent the whole form. On the register page that meant `serialNo: ''`, and\n * `createAppliance` has no validation at all — it saves `{ domain, creator, updater,\n * ...appliance }` — so `''` passed GraphQL's non-null check (an empty string is a String) and\n * an appliance with no serial number, brand or model was created **and the screen navigated\n * away as if it had worked.** On the edit page the same habit cleared fields nobody touched.\n *\n * `NewAppliance` is the source of the required list below. `AppliancePatch` is spread over the\n * loaded row, so the update sends a diff — see `utils/form-values.ts` for why those are two\n * different rules rather than one.\n */\n\n/** Fields `NewAppliance` declares non-null. Not a house rule — the schema's own list. */\nconst REQUIRED = ['serialNo', 'name', 'brand', 'model']\n\nconst APPLIANCE_FIELDS = `\n  id\n  name\n  description\n  serialNo\n  brand\n  model\n  netmask\n  accessToken\n`\n\n@customElement('appliance-editor')\nexport class ApplianceEditor 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        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        outline: none;\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      [input-hint] {\n        font-size: var(--popup-font-size-small);\n        color: var(--input-hint-color);\n      }\n\n      /* The one reverting action goes left, away from the ones that commit. */\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 appliance to edit. Absent means this popup is registering a new one. */\n  @property({ type: String }) applianceId?: string\n\n  @query('form') form!: HTMLFormElement\n\n  /** The loaded record. The patch is a diff against this, so it is never rebuilt from the form. */\n  @state() private appliance: any = null\n\n  /** Required fields still empty. Filled in when the person presses save, not while typing. */\n  @state() private missing: string[] = []\n\n  /** The mutation was refused. The shared link already said why; this says the press landed. */\n  @state() private failed: boolean = false\n\n  /** The single-record read did not answer. Distinct from answering with nothing. */\n  @state() private loadFailed: boolean = false\n\n  private get editing(): boolean {\n    return !!this.applianceId\n  }\n\n  render() {\n    const appliance = this.appliance || {}\n    const exp = appliance.accessToken ? parseJwt(appliance.accessToken)?.exp : undefined\n\n    if (this.editing && this.loadFailed) {\n      return html`<div class=\"failure\">${i18next.t('text.the appliance could not be loaded')}</div>`\n    }\n\n    return html`\n      <form @submit=${(e: Event) => e.preventDefault()}>\n        <fieldset>\n          <legend>${i18next.t('text.appliance')}</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=${appliance.name || ''}\n                required\n                autofocus\n                ?invalid=${this.missing.includes('name')}\n              />\n              ${this.fieldError('name')}\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=${appliance.description || ''} />\n            </div>\n\n            <div field>\n              <label for=\"serial-no\">${i18next.t('field.serial-no')}</label>\n              <input\n                id=\"serial-no\"\n                type=\"text\"\n                name=\"serialNo\"\n                .value=${appliance.serialNo || ''}\n                required\n                ?invalid=${this.missing.includes('serialNo')}\n              />\n              ${this.fieldError('serialNo')}\n            </div>\n\n            <div field>\n              <label for=\"brand\">${i18next.t('field.brand')}</label>\n              <input\n                id=\"brand\"\n                type=\"text\"\n                name=\"brand\"\n                .value=${appliance.brand || ''}\n                required\n                ?invalid=${this.missing.includes('brand')}\n              />\n              ${this.fieldError('brand')}\n            </div>\n\n            <div field>\n              <label for=\"model\">${i18next.t('field.model')}</label>\n              <input\n                id=\"model\"\n                type=\"text\"\n                name=\"model\"\n                .value=${appliance.model || ''}\n                required\n                ?invalid=${this.missing.includes('model')}\n              />\n              ${this.fieldError('model')}\n            </div>\n\n            <div field>\n              <label for=\"netmask\">${i18next.t('field.netmask')}</label>\n              <input id=\"netmask\" type=\"text\" name=\"netmask\" .value=${appliance.netmask || ''} />\n            </div>\n          </div>\n        </fieldset>\n\n        ${this.editing ? this.renderCredential(appliance, exp) : ''}\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.deleteAppliance.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   * The credential panel only exists once the appliance does — there is no token to show\n   * before it is created, and the list query deliberately never asks for one.\n   */\n  private renderCredential(appliance: any, exp?: number) {\n    return html`\n      <fieldset>\n        <legend>${i18next.t('text.appliance credential')}</legend>\n        <div field grid-span>\n          <label for=\"access-token\">${i18next.t('label.access token')}</label>\n          <secret-field id=\"access-token\" .value=${appliance.accessToken || ''}></secret-field>\n          ${\n            exp\n              ? html`<div input-hint>\n                  ${i18next.t('text.token expiry time')} ${new Date(exp * 1000).toLocaleString()} :\n                  ${asyncReplace(this.expTimer(exp))}\n                </div>`\n              : ''\n          }\n          <div class=\"row\">\n            <md-text-button @click=${this.generateSecret.bind(this)}>\n              ${i18next.t('button.generate new access token')}\n            </md-text-button>\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  private fieldError(name: string) {\n    return this.missing.includes(name) ? html`<div field-error>${i18next.t('text.this field is required')}</div>` : ''\n  }\n\n  async connectedCallback() {\n    super.connectedCallback()\n\n    if (this.editing) {\n      await this.fetchAppliance()\n    }\n  }\n\n  async fetchAppliance() {\n    const response = await client.query({\n      query: gql`\n        query ($id: String!) {\n          appliance(id: $id) { ${APPLIANCE_FIELDS} }\n        }\n      `,\n      variables: { id: this.applianceId }\n    })\n\n    /*\n     * `errorPolicy: 'all'` means a refusal arrives here rather than throwing. Reading\n     * `data.appliance` without checking would show an empty form that looks like a record\n     * with every field blank — and saving it would then write those blanks.\n     */\n    if (response.errors || !response.data?.appliance) {\n      this.loadFailed = true\n      return\n    }\n\n    this.loadFailed = false\n    this.appliance = response.data.appliance\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    /*\n     * The same four fields are required on both paths. They come from `NewAppliance`, and an\n     * update is held to them too: the patch is spread over the row, so `name: ''` would clear\n     * a field the product will not let you create without.\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.updateAppliance(formData) : this.createAppliance(formData)\n  }\n\n  private async createAppliance(formData: FormData) {\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($appliance: NewAppliance!) {\n          createAppliance(appliance: $appliance) {\n            id\n          }\n        }\n      `,\n      variables: { appliance: filledValues(formData) }\n    })\n\n    if (response.errors) {\n      this.failed = true\n      return\n    }\n\n    this.saved()\n  }\n\n  private async updateAppliance(formData: FormData) {\n    const patch = changedValues(formData, this.appliance)\n\n    /*\n     * Nothing moved. Sending an empty patch would still stamp `updater` and `updatedAt`,\n     * which makes an untouched record look edited to whoever reads the list next.\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: AppliancePatch!) {\n          updateAppliance(id: $id, patch: $patch) { ${APPLIANCE_FIELDS} }\n        }\n      `,\n      variables: { id: this.applianceId, 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 access token'),\n      text: i18next.t('text.the current access token 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          generateApplianceSecret(id: $id) { ${APPLIANCE_FIELDS} }\n        }\n      `,\n      variables: { id: this.applianceId }\n    })\n\n    if (response.errors) {\n      this.failed = true\n      return\n    }\n\n    /*\n     * Stays open on purpose. A new token is the one value on this screen the reader has to\n     * copy before it is out of reach — closing here would hand it to them and take it away.\n     */\n    this.failed = false\n    this.appliance = response.data.generateApplianceSecret\n    this.dispatchEvent(new CustomEvent('appliance-changed', { bubbles: true, composed: true }))\n  }\n\n  private async deleteAppliance(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.appliance?.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          deleteAppliance(id: $id)\n        }\n      `,\n      variables: { id: this.applianceId }\n    })\n\n    if (response.errors) {\n      this.failed = true\n      return\n    }\n\n    this.saved()\n  }\n\n  /** The list has to refetch, and the popup is done. */\n  private saved() {\n    this.failed = false\n    this.dispatchEvent(new CustomEvent('appliance-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  private async *expTimer(exp: number) {\n    const DAY = 24 * 60 * 60\n    const HOUR = 60 * 60\n    const MIN = 60\n\n    while (this.isConnected) {\n      let remain = Math.floor(Number(exp) - Date.now() / 1000)\n\n      /*\n       * Past the expiry the arithmetic below produces \"-5 days -3 hours\", which reads as a\n       * duration rather than as the token being dead. Say it plainly and stop counting.\n       */\n      if (remain <= 0) {\n        yield i18next.t('text.expired')\n        return\n      }\n\n      const days = Math.floor(remain / DAY)\n      remain -= days * DAY\n      const hours = Math.floor(remain / HOUR)\n      remain -= hours * HOUR\n      const mins = Math.floor(remain / MIN)\n      const secs = remain - mins * MIN\n\n      yield i18next.t('text.remaining time', { days, hours, mins, secs })\n\n      await sleep(1000)\n    }\n  }\n}\n"]}

package/dist-client/components/application-editor.d.ts

@@ -0,0 +1,31 @@
+import '@material/web/icon/icon.js';
+import '@material/web/button/text-button.js';
+import '@material/web/button/filled-button.js';
+import { LitElement } from 'lit';
+import './secret-field.js';
+declare const ApplicationEditor_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class ApplicationEditor extends ApplicationEditor_base {
+    static styles: import("lit").CSSResult[];
+    /** The application to edit. Absent means this popup is registering a new one. */
+    applicationId?: string;
+    form: HTMLFormElement;
+    private application;
+    private missing;
+    private failed;
+    private loadFailed;
+    private get editing();
+    render(): import("lit-html").TemplateResult<1>;
+    private renderEndpoints;
+    private renderCredential;
+    connectedCallback(): Promise<void>;
+    fetchApplication(): Promise<void>;
+    private cancel;
+    save(e: Event): Promise<void>;
+    private createApplication;
+    private updateApplication;
+    private generateSecret;
+    private deleteApplication;
+    private saved;
+    private close;
+}
+export {};