@things-factory/auth-ui 10.1.17 → 10.1.18

package/dist-client/components/app-binding-detail.d.ts

@@ -0,0 +1,46 @@
+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 AppBindingDetail_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * One application binding, in a popup.
+ *
+ * ── Read-only, and that is the point ────────────────────────────────────────
+ * A binding is not authored here. It is what an application ends up with after it walks the
+ * OAuth flow, so there is no create and no edit — only two things a person can do to one:
+ * renew its access token, or revoke it by deleting the binding. Everything else on this
+ * screen is the record saying what it is.
+ *
+ * ── Two defects the page this replaced carried ──────────────────────────────
+ * 1. **The expiry line said 1970.** A JWT `exp` is in seconds; the page passed it straight to
+ *    `new Date(...)`, which reads milliseconds. So `new Date(1760000000)` — three weeks after
+ *    the epoch — was printed as the moment a token expires, beside a countdown computed in
+ *    seconds that was right. Two numbers for the same instant, disagreeing by half a century.
+ * 2. **A field was labelled `name` and showed the email.** `<input .value=${binding.email}>`
+ *    under `<label>name</label>`.
+ *
+ * ── Why the access token starts empty ───────────────────────────────────────
+ * `AppBinding` stores a refresh token; an access token is minted, handed over, and not kept.
+ * So the access-token field has nothing in it until this screen mints a fresh one, and that
+ * is the honest state rather than a gap to fill.
+ */
+export declare class AppBindingDetail extends AppBindingDetail_base {
+    static styles: import("lit").CSSResult[];
+    appBindingId?: string;
+    private binding;
+    /** Minted by `renew`, never stored on the record. Empty until someone presses it. */
+    private accessToken?;
+    private failed;
+    private loadFailed;
+    render(): import("lit-html").TemplateResult<1>;
+    private expiry;
+    connectedCallback(): Promise<void>;
+    fetchBinding(): Promise<void>;
+    private renewAccessToken;
+    private deleteBinding;
+    private close;
+    private expTimer;
+}
+export {};

package/dist-client/components/app-binding-detail.js

@@ -0,0 +1,384 @@
+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, 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';
+/**
+ * One application binding, in a popup.
+ *
+ * ── Read-only, and that is the point ────────────────────────────────────────
+ * A binding is not authored here. It is what an application ends up with after it walks the
+ * OAuth flow, so there is no create and no edit — only two things a person can do to one:
+ * renew its access token, or revoke it by deleting the binding. Everything else on this
+ * screen is the record saying what it is.
+ *
+ * ── Two defects the page this replaced carried ──────────────────────────────
+ * 1. **The expiry line said 1970.** A JWT `exp` is in seconds; the page passed it straight to
+ *    `new Date(...)`, which reads milliseconds. So `new Date(1760000000)` — three weeks after
+ *    the epoch — was printed as the moment a token expires, beside a countdown computed in
+ *    seconds that was right. Two numbers for the same instant, disagreeing by half a century.
+ * 2. **A field was labelled `name` and showed the email.** `<input .value=${binding.email}>`
+ *    under `<label>name</label>`.
+ *
+ * ── Why the access token starts empty ───────────────────────────────────────
+ * `AppBinding` stores a refresh token; an access token is minted, handed over, and not kept.
+ * So the access-token field has nothing in it until this screen mints a fresh one, and that
+ * is the honest state rather than a gap to fill.
+ */
+let AppBindingDetail = class AppBindingDetail extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.binding = null;
+        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;
+      }
+
+      [body] {
+        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);
+
+        opacity: 0.7;
+      }
+
+      input:focus {
+        outline: none;
+      }
+
+      [input-hint] {
+        font-size: var(--popup-font-size-small);
+        color: var(--input-hint-color);
+      }
+
+      .buttons .left {
+        margin-right: auto;
+      }
+
+      @media screen and (max-width: 480px) {
+        [field] {
+          grid-column: span 2;
+        }
+      }
+    `
+    ]; }
+    render() {
+        if (this.loadFailed) {
+            return html `<div class="failure">${i18next.t('text.the binding could not be loaded')}</div>`;
+        }
+        const binding = this.binding || {};
+        const app = binding.application || {};
+        return html `
+      <div body>
+        <fieldset>
+          <legend>${i18next.t('text.application')}</legend>
+          <div field-2column>
+            <div field grid-span>
+              <label for="app-name">${i18next.t('field.name')}</label>
+              <input id="app-name" type="text" .value=${app.name || ''} readonly />
+            </div>
+
+            <div field grid-span>
+              <label for="app-description">${i18next.t('field.description')}</label>
+              <input id="app-description" type="text" .value=${app.description || ''} readonly />
+            </div>
+
+            <div field grid-span>
+              <label for="app-email">${i18next.t('field.contact email')}</label>
+              <input id="app-email" type="text" .value=${app.email || ''} readonly />
+            </div>
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend>${i18next.t('text.binding')}</legend>
+          <div field-2column>
+            <div field grid-span>
+              <label for="binding-name">${i18next.t('field.name')}</label>
+              <input id="binding-name" type="text" .value=${binding.name || ''} readonly />
+            </div>
+
+            <div field grid-span>
+              <label for="binding-email">${i18next.t('field.email')}</label>
+              <input id="binding-email" type="text" .value=${binding.email || ''} readonly />
+            </div>
+
+            <div field>
+              <label for="binding-status">${i18next.t('field.status')}</label>
+              <input id="binding-status" type="text" .value=${binding.status || ''} readonly />
+            </div>
+
+            <div field>
+              <label for="binding-scope">${i18next.t('field.scope')}</label>
+              <input id="binding-scope" type="text" .value=${binding.scope || ''} readonly />
+            </div>
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend>${i18next.t('text.binding credential')}</legend>
+          <div field-2column>
+            <div field grid-span>
+              <label for="access-token">${i18next.t('label.access token')}</label>
+              <secret-field id="access-token" .value=${this.accessToken || ''}></secret-field>
+              ${this.expiry(this.accessToken)}
+            </div>
+
+            <div field grid-span>
+              <label for="refresh-token">${i18next.t('label.refresh token')}</label>
+              <secret-field id="refresh-token" .value=${binding.refreshToken || ''}></secret-field>
+              ${this.expiry(binding.refreshToken)}
+            </div>
+          </div>
+        </fieldset>
+
+        ${this.failed ? html `<div class="failure">${i18next.t('text.could not be saved')}</div>` : ''}
+      </div>
+
+      <div class="buttons">
+        <md-text-button class="left" @click=${this.deleteBinding.bind(this)}>
+          ${i18next.t('button.delete')}
+        </md-text-button>
+        <md-text-button @click=${this.close.bind(this)}>${i18next.t('button.close')}</md-text-button>
+        <md-filled-button @click=${this.renewAccessToken.bind(this)}>
+          ${i18next.t('button.renew access token')}
+        </md-filled-button>
+      </div>
+    `;
+    }
+    /*
+     * ⚠ A JWT `exp` is **seconds** since the epoch. The page this replaced handed it to
+     * `new Date()` unchanged, which reads milliseconds, and printed a date in 1970 next to a
+     * countdown that was computed correctly in seconds.
+     */
+    expiry(token) {
+        const exp = token ? parseJwt(token)?.exp : undefined;
+        if (!exp) {
+            return '';
+        }
+        return html `<div input-hint>
+      ${i18next.t('text.expires at x', { x: new Date(exp * 1000).toLocaleString() })} ·
+      ${asyncReplace(this.expTimer(exp))}
+    </div>`;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        await this.fetchBinding();
+    }
+    async fetchBinding() {
+        const response = await client.query({
+            query: gql `
+        query ($id: String!) {
+          appBinding(id: $id) {
+            id
+            name
+            description
+            email
+            scope
+            status
+            application {
+              id
+              name
+              description
+              email
+              icon
+            }
+            refreshToken
+          }
+        }
+      `,
+            variables: { id: this.appBindingId }
+        });
+        /*
+         * `AppBinding.refreshToken` carries its own privilege gate, so a reader without it gets
+         * the record and an error pointing at that one field. That is not a failed read — the
+         * rest of the binding is there and worth showing. Only a refusal of the record itself,
+         * which arrives with no data, blanks the popup.
+         */
+        if (!response.data?.appBinding) {
+            this.loadFailed = true;
+            return;
+        }
+        this.loadFailed = false;
+        this.binding = response.data.appBinding;
+    }
+    async renewAccessToken(e) {
+        e.preventDefault();
+        const confirmed = await OxPrompt.open({
+            type: 'warning',
+            title: i18next.t('button.renew 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!) {
+          renewApplicationAccessToken(id: $id) {
+            accessToken
+            refreshToken
+          }
+        }
+      `,
+            variables: { id: this.appBindingId }
+        });
+        if (response.errors) {
+            this.failed = true;
+            return;
+        }
+        /*
+         * Stays open. The access token is minted here and stored nowhere — if this popup closed,
+         * the value would be gone for good.
+         */
+        const { accessToken, refreshToken } = response.data.renewApplicationAccessToken;
+        this.failed = false;
+        this.accessToken = accessToken;
+        this.binding = { ...this.binding, refreshToken };
+        this.dispatchEvent(new CustomEvent('app-binding-changed', { bubbles: true, composed: true }));
+    }
+    async deleteBinding(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.binding?.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!) {
+          deleteAppBinding(id: $id)
+        }
+      `,
+            variables: { id: this.appBindingId }
+        });
+        if (response.errors) {
+            this.failed = true;
+            return;
+        }
+        this.failed = false;
+        this.dispatchEvent(new CustomEvent('app-binding-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)
+], AppBindingDetail.prototype, "appBindingId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AppBindingDetail.prototype, "binding", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], AppBindingDetail.prototype, "accessToken", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], AppBindingDetail.prototype, "failed", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], AppBindingDetail.prototype, "loadFailed", void 0);
+AppBindingDetail = __decorate([
+    customElement('app-binding-detail')
+], AppBindingDetail);
+export { AppBindingDetail };
+//# sourceMappingURL=app-binding-detail.js.map

package/dist-client/components/app-binding-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-binding-detail.js","sourceRoot":"","sources":["../../client/components/app-binding-detail.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, 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'\n\n/**\n * One application binding, in a popup.\n *\n * ── Read-only, and that is the point ────────────────────────────────────────\n * A binding is not authored here. It is what an application ends up with after it walks the\n * OAuth flow, so there is no create and no edit — only two things a person can do to one:\n * renew its access token, or revoke it by deleting the binding. Everything else on this\n * screen is the record saying what it is.\n *\n * ── Two defects the page this replaced carried ──────────────────────────────\n * 1. **The expiry line said 1970.** A JWT `exp` is in seconds; the page passed it straight to\n *    `new Date(...)`, which reads milliseconds. So `new Date(1760000000)` — three weeks after\n *    the epoch — was printed as the moment a token expires, beside a countdown computed in\n *    seconds that was right. Two numbers for the same instant, disagreeing by half a century.\n * 2. **A field was labelled `name` and showed the email.** `<input .value=${binding.email}>`\n *    under `<label>name</label>`.\n *\n * ── Why the access token starts empty ───────────────────────────────────────\n * `AppBinding` stores a refresh token; an access token is minted, handed over, and not kept.\n * So the access-token field has nothing in it until this screen mints a fresh one, and that\n * is the honest state rather than a gap to fill.\n */\n@customElement('app-binding-detail')\nexport class AppBindingDetail 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      [body] {\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        opacity: 0.7;\n      }\n\n      input:focus {\n        outline: none;\n      }\n\n      [input-hint] {\n        font-size: var(--popup-font-size-small);\n        color: var(--input-hint-color);\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  @property({ type: String }) appBindingId?: string\n\n  @state() private binding: any = null\n\n  /** Minted by `renew`, never stored on the record. Empty until someone presses it. */\n  @state() private accessToken?: string\n\n  @state() private failed: boolean = false\n\n  @state() private loadFailed: boolean = false\n\n  render() {\n    if (this.loadFailed) {\n      return html`<div class=\"failure\">${i18next.t('text.the binding could not be loaded')}</div>`\n    }\n\n    const binding = this.binding || {}\n    const app = binding.application || {}\n\n    return html`\n      <div body>\n        <fieldset>\n          <legend>${i18next.t('text.application')}</legend>\n          <div field-2column>\n            <div field grid-span>\n              <label for=\"app-name\">${i18next.t('field.name')}</label>\n              <input id=\"app-name\" type=\"text\" .value=${app.name || ''} readonly />\n            </div>\n\n            <div field grid-span>\n              <label for=\"app-description\">${i18next.t('field.description')}</label>\n              <input id=\"app-description\" type=\"text\" .value=${app.description || ''} readonly />\n            </div>\n\n            <div field grid-span>\n              <label for=\"app-email\">${i18next.t('field.contact email')}</label>\n              <input id=\"app-email\" type=\"text\" .value=${app.email || ''} readonly />\n            </div>\n          </div>\n        </fieldset>\n\n        <fieldset>\n          <legend>${i18next.t('text.binding')}</legend>\n          <div field-2column>\n            <div field grid-span>\n              <label for=\"binding-name\">${i18next.t('field.name')}</label>\n              <input id=\"binding-name\" type=\"text\" .value=${binding.name || ''} readonly />\n            </div>\n\n            <div field grid-span>\n              <label for=\"binding-email\">${i18next.t('field.email')}</label>\n              <input id=\"binding-email\" type=\"text\" .value=${binding.email || ''} readonly />\n            </div>\n\n            <div field>\n              <label for=\"binding-status\">${i18next.t('field.status')}</label>\n              <input id=\"binding-status\" type=\"text\" .value=${binding.status || ''} readonly />\n            </div>\n\n            <div field>\n              <label for=\"binding-scope\">${i18next.t('field.scope')}</label>\n              <input id=\"binding-scope\" type=\"text\" .value=${binding.scope || ''} readonly />\n            </div>\n          </div>\n        </fieldset>\n\n        <fieldset>\n          <legend>${i18next.t('text.binding credential')}</legend>\n          <div field-2column>\n            <div field grid-span>\n              <label for=\"access-token\">${i18next.t('label.access token')}</label>\n              <secret-field id=\"access-token\" .value=${this.accessToken || ''}></secret-field>\n              ${this.expiry(this.accessToken)}\n            </div>\n\n            <div field grid-span>\n              <label for=\"refresh-token\">${i18next.t('label.refresh token')}</label>\n              <secret-field id=\"refresh-token\" .value=${binding.refreshToken || ''}></secret-field>\n              ${this.expiry(binding.refreshToken)}\n            </div>\n          </div>\n        </fieldset>\n\n        ${this.failed ? html`<div class=\"failure\">${i18next.t('text.could not be saved')}</div>` : ''}\n      </div>\n\n      <div class=\"buttons\">\n        <md-text-button class=\"left\" @click=${this.deleteBinding.bind(this)}>\n          ${i18next.t('button.delete')}\n        </md-text-button>\n        <md-text-button @click=${this.close.bind(this)}>${i18next.t('button.close')}</md-text-button>\n        <md-filled-button @click=${this.renewAccessToken.bind(this)}>\n          ${i18next.t('button.renew access token')}\n        </md-filled-button>\n      </div>\n    `\n  }\n\n  /*\n   * ⚠ A JWT `exp` is **seconds** since the epoch. The page this replaced handed it to\n   * `new Date()` unchanged, which reads milliseconds, and printed a date in 1970 next to a\n   * countdown that was computed correctly in seconds.\n   */\n  private expiry(token?: string) {\n    const exp = token ? parseJwt(token)?.exp : undefined\n\n    if (!exp) {\n      return ''\n    }\n\n    return html`<div input-hint>\n      ${i18next.t('text.expires at x', { x: new Date(exp * 1000).toLocaleString() })} ·\n      ${asyncReplace(this.expTimer(exp))}\n    </div>`\n  }\n\n  async connectedCallback() {\n    super.connectedCallback()\n\n    await this.fetchBinding()\n  }\n\n  async fetchBinding() {\n    const response = await client.query({\n      query: gql`\n        query ($id: String!) {\n          appBinding(id: $id) {\n            id\n            name\n            description\n            email\n            scope\n            status\n            application {\n              id\n              name\n              description\n              email\n              icon\n            }\n            refreshToken\n          }\n        }\n      `,\n      variables: { id: this.appBindingId }\n    })\n\n    /*\n     * `AppBinding.refreshToken` carries its own privilege gate, so a reader without it gets\n     * the record and an error pointing at that one field. That is not a failed read — the\n     * rest of the binding is there and worth showing. Only a refusal of the record itself,\n     * which arrives with no data, blanks the popup.\n     */\n    if (!response.data?.appBinding) {\n      this.loadFailed = true\n      return\n    }\n\n    this.loadFailed = false\n    this.binding = response.data.appBinding\n  }\n\n  private async renewAccessToken(e: Event) {\n    e.preventDefault()\n\n    const confirmed = await OxPrompt.open({\n      type: 'warning',\n      title: i18next.t('button.renew 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          renewApplicationAccessToken(id: $id) {\n            accessToken\n            refreshToken\n          }\n        }\n      `,\n      variables: { id: this.appBindingId }\n    })\n\n    if (response.errors) {\n      this.failed = true\n      return\n    }\n\n    /*\n     * Stays open. The access token is minted here and stored nowhere — if this popup closed,\n     * the value would be gone for good.\n     */\n    const { accessToken, refreshToken } = response.data.renewApplicationAccessToken\n\n    this.failed = false\n    this.accessToken = accessToken\n    this.binding = { ...this.binding, refreshToken }\n    this.dispatchEvent(new CustomEvent('app-binding-changed', { bubbles: true, composed: true }))\n  }\n\n  private async deleteBinding(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.binding?.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          deleteAppBinding(id: $id)\n        }\n      `,\n      variables: { id: this.appBindingId }\n    })\n\n    if (response.errors) {\n      this.failed = true\n      return\n    }\n\n    this.failed = false\n    this.dispatchEvent(new CustomEvent('app-binding-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/appliance-editor.d.ts

@@ -0,0 +1,37 @@
+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 ApplianceEditor_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class ApplianceEditor extends ApplianceEditor_base {
+    static styles: import("lit").CSSResult[];
+    /** The appliance to edit. Absent means this popup is registering a new one. */
+    applianceId?: string;
+    form: HTMLFormElement;
+    /** The loaded record. The patch is a diff against this, so it is never rebuilt from the form. */
+    private appliance;
+    /** Required fields still empty. Filled in when the person presses save, not while typing. */
+    private missing;
+    /** The mutation was refused. The shared link already said why; this says the press landed. */
+    private failed;
+    /** The single-record read did not answer. Distinct from answering with nothing. */
+    private loadFailed;
+    private get editing();
+    render(): import("lit-html").TemplateResult<1>;
+    private renderCredential;
+    private fieldError;
+    connectedCallback(): Promise<void>;
+    fetchAppliance(): Promise<void>;
+    private cancel;
+    save(e: Event): Promise<void>;
+    private createAppliance;
+    private updateAppliance;
+    private generateSecret;
+    private deleteAppliance;
+    /** The list has to refetch, and the popup is done. */
+    private saved;
+    private close;
+    private expTimer;
+}
+export {};