@things-factory/auth-ui 10.1.29 → 10.1.33

package/dist-client/components/accept-invitation.d.ts

@@ -0,0 +1,48 @@
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import '@material/web/textfield/filled-text-field.js';
+import '@operato/i18n/ox-i18n.js';
+import '@operato/i18n/ox-i18n-selector.js';
+import '@operato/layout/ox-snack-bar.js';
+import { AbstractAuthPage } from './abstract-auth-page.js';
+/**
+ * Accepting an invitation.
+ *
+ * ── Why the token is not in the address ─────────────────────────────────────
+ * The link is `…/accept-invitation#<token>`, and a browser does not send what follows the `#`.
+ * So the request that loads this page carries nothing, and the token stays out of server access
+ * logs, proxy logs and `Referer`. This page reads it from the fragment and then clears it from
+ * the address bar, so it does not sit in the browser's history either.
+ *
+ * The one place it can still travel is the mail being forwarded, and nothing about where the
+ * token sits can prevent that. So the address it was sent to is asked for as well: holding the
+ * link is not enough on its own.
+ *
+ * ── Why the password fields only appear after a try ─────────────────────────
+ * Whether an address already has an account is not this page's to announce. It sends what it
+ * has, and the server answers `invitation-needs-a-password` when it needs one — so the extra
+ * fields appear for the person who is actually creating an account, and nobody learns anything
+ * by loading the page.
+ */
+export declare class AcceptInvitation extends AbstractAuthPage {
+    static styles: import("lit").CSSResult[];
+    get pageName(): string;
+    get actionUrl(): string;
+    get title(): string;
+    /** Read from the fragment on connect. Empty when the link was opened without one. */
+    token?: string;
+    /** The server asked for a password, so this person is creating an account. */
+    needsPassword?: boolean;
+    /** Joined. The page stops being a form and says where to go. */
+    joined?: boolean;
+    busy?: boolean;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private renderDone;
+    private renderForm;
+    private renderNewAccount;
+    private fieldValue;
+    submit(): Promise<void>;
+    private accept;
+    updated(changed: any): void;
+}

package/dist-client/components/accept-invitation.js

@@ -0,0 +1,265 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import '@material/web/textfield/filled-text-field.js';
+import '@operato/i18n/ox-i18n.js';
+import '@operato/i18n/ox-i18n-selector.js';
+import '@operato/layout/ox-snack-bar.js';
+import { css, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { AUTH_STYLE_SIGN } from '../auth-style-sign.js';
+import { EntryControlSizeStyles } from '../entry-control-size-styles.js';
+import { AbstractAuthPage } from './abstract-auth-page.js';
+import { readInvitationToken } from '../utils/invitation-token.js';
+/**
+ * Accepting an invitation.
+ *
+ * ── Why the token is not in the address ─────────────────────────────────────
+ * The link is `…/accept-invitation#<token>`, and a browser does not send what follows the `#`.
+ * So the request that loads this page carries nothing, and the token stays out of server access
+ * logs, proxy logs and `Referer`. This page reads it from the fragment and then clears it from
+ * the address bar, so it does not sit in the browser's history either.
+ *
+ * The one place it can still travel is the mail being forwarded, and nothing about where the
+ * token sits can prevent that. So the address it was sent to is asked for as well: holding the
+ * link is not enough on its own.
+ *
+ * ── Why the password fields only appear after a try ─────────────────────────
+ * Whether an address already has an account is not this page's to announce. It sends what it
+ * has, and the server answers `invitation-needs-a-password` when it needs one — so the extra
+ * fields appear for the person who is actually creating an account, and nobody learns anything
+ * by loading the page.
+ */
+export class AcceptInvitation extends AbstractAuthPage {
+    static { this.styles = [
+        EntryControlSizeStyles,
+        css `
+      :host {
+        position: relative;
+        overflow: hidden;
+
+        display: flex;
+        flex-direction: row;
+
+        width: 100vw;
+        height: 100vh;
+        height: 100dvh;
+      }
+
+      .note {
+        margin: 0 0 var(--spacing-medium) 0;
+        font-size: 0.85rem;
+        line-height: 1.5;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+    `,
+        AUTH_STYLE_SIGN
+    ]; }
+    get pageName() {
+        return 'accept invitation';
+    }
+    get actionUrl() {
+        return '/accept-invitation';
+    }
+    get title() {
+        return 'accept invitation';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const { token, clean } = readInvitationToken(window.location.href);
+        this.token = token;
+        /*
+         * Taken out of the address bar and out of this history entry. `replaceState` rather than
+         * `pushState`: going back should not put the token back on screen.
+         */
+        if (clean && clean !== window.location.href) {
+            window.history.replaceState(null, '', clean);
+        }
+    }
+    render() {
+        const { icon, title, description } = this.applicationMeta;
+        const { disableUserFavoredLanguage, languages } = this.data || {};
+        return html `
+      <div class="wrap">
+        <div class="auth-brand">
+          <img src=${icon} />
+          <strong class="name">${title}</strong>
+          <span class="welcome-msg">${description}</span>
+        </div>
+
+        <div class="auth-form">
+          <h3><ox-i18n msgid="title.accept invitation"></ox-i18n></h3>
+
+          ${this.joined ? this.renderDone() : this.renderForm(disableUserFavoredLanguage, languages)}
+        </div>
+      </div>
+
+      <ox-snack-bar id="snackbar" level="error" .message=${this.message}></ox-snack-bar>
+    `;
+    }
+    renderDone() {
+        return html `
+      <p class="note">${i18next.t('text.you have joined. sign in to continue')}</p>
+      <md-elevated-button @click=${() => (window.location.href = '/auth/signin')}>
+        <ox-i18n msgid="button.sign in"></ox-i18n>
+      </md-elevated-button>
+    `;
+    }
+    renderForm(disableUserFavoredLanguage, languages) {
+        return html `
+      <form id="form" @keypress=${(e) => e.key === 'Enter' && this.accept()}>
+        <p class="note">${i18next.t('text.confirm the address this invitation was sent to')}</p>
+
+        <div class="field">
+          <md-filled-text-field
+            name="email"
+            type="email"
+            label=${String(i18next.t('field.email'))}
+            autocomplete="email"
+            required
+            ><md-icon slot="leading-icon">mail</md-icon></md-filled-text-field
+          >
+        </div>
+
+        ${this.token
+            ? nothing
+            : html `
+              <div class="field">
+                <md-filled-text-field
+                  name="token"
+                  label=${String(i18next.t('label.invitation code'))}
+                  supporting-text=${String(i18next.t('text.the code is printed in the invitation email'))}
+                  autocomplete="off"
+                  required
+                  ><md-icon slot="leading-icon">key</md-icon></md-filled-text-field
+                >
+              </div>
+            `}
+        ${this.needsPassword ? this.renderNewAccount() : nothing}
+
+        <md-elevated-button id="submit-button" type="button" ?disabled=${this.busy} @click=${() => this.accept()}>
+          <ox-i18n msgid="button.accept invitation"></ox-i18n>
+        </md-elevated-button>
+
+        ${!disableUserFavoredLanguage
+            ? html `<div id="locale-area">
+              <label for="locale-selector"><md-icon>language</md-icon></label>
+              <ox-i18n-selector
+                id="locale-selector"
+                value=${i18next.language || 'en-US'}
+                .languages=${languages}
+                @change=${(e) => e.detail && i18next.changeLanguage(e.detail)}
+              ></ox-i18n-selector>
+            </div>`
+            : nothing}
+      </form>
+    `;
+    }
+    renderNewAccount() {
+        return html `
+      <p class="note">${i18next.t('text.choose a password to finish joining')}</p>
+
+      <div class="field">
+        <md-filled-text-field name="name" label=${String(i18next.t('field.name'))} autocomplete="name"
+          ><md-icon slot="leading-icon">person</md-icon></md-filled-text-field
+        >
+      </div>
+
+      <div class="field">
+        <md-filled-text-field
+          name="password"
+          type="password"
+          label=${String(i18next.t('label.password'))}
+          autocomplete="new-password"
+          required
+          ><md-icon slot="leading-icon">password</md-icon></md-filled-text-field
+        >
+      </div>
+    `;
+    }
+    /*
+     * ⚠ Not called `valueOf`. Overriding `Object.prototype.valueOf` with a different signature
+     * makes the class type unassignable to `Object`, and every `@property` decorator on it then
+     * fails to resolve — with an error that talks about decorators and never mentions the method.
+     */
+    fieldValue(name) {
+        return this.renderRoot.querySelector(`[name="${name}"]`)?.value?.trim() || '';
+    }
+    /*
+     * The base class calls this to commit the page. It does not submit the form element: the
+     * answer here is read rather than navigated to, because a refusal can mean "now ask for a
+     * password" instead of "stop".
+     */
+    async submit() {
+        await this.accept();
+    }
+    async accept() {
+        if (this.busy) {
+            return;
+        }
+        this.busy = true;
+        this.message = '';
+        try {
+            const response = await fetch('/accept-invitation', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    token: this.token || this.fieldValue('token'),
+                    email: this.fieldValue('email'),
+                    name: this.fieldValue('name'),
+                    password: this.fieldValue('password')
+                })
+            });
+            if (response.ok) {
+                this.joined = true;
+                return;
+            }
+            const refusal = await response.json().catch(() => ({}));
+            /*
+             * The one refusal that is not the end of the attempt — it means this person has no account
+             * yet, which is exactly who this page is for.
+             */
+            if (refusal?.refusal?.code === 'invitation-needs-a-password' || refusal?.code === 'invitation-needs-a-password') {
+                this.needsPassword = true;
+                this.message = String(i18next.t('text.choose a password to finish joining'));
+                return;
+            }
+            this.message = refusal?.message || String(i18next.t('text.this invitation cannot be used'));
+        }
+        catch (e) {
+            this.message = String(i18next.t('text.this invitation cannot be used'));
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('message')) {
+            if (!this.message) {
+                this.hideSnackbar();
+            }
+            else {
+                this.showSnackbar({ timer: -1 });
+            }
+        }
+    }
+}
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], AcceptInvitation.prototype, "token", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], AcceptInvitation.prototype, "needsPassword", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], AcceptInvitation.prototype, "joined", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], AcceptInvitation.prototype, "busy", void 0);
+//# sourceMappingURL=accept-invitation.js.map

package/dist-client/components/accept-invitation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accept-invitation.js","sourceRoot":"","sources":["../../client/components/accept-invitation.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/textfield/filled-text-field.js'\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport '@operato/layout/ox-snack-bar.js'\n\nimport { css, html, nothing } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { AUTH_STYLE_SIGN } from '../auth-style-sign.js'\nimport { EntryControlSizeStyles } from '../entry-control-size-styles.js'\nimport { AbstractAuthPage } from './abstract-auth-page.js'\nimport { readInvitationToken } from '../utils/invitation-token.js'\n\n/**\n * Accepting an invitation.\n *\n * ── Why the token is not in the address ─────────────────────────────────────\n * The link is `…/accept-invitation#<token>`, and a browser does not send what follows the `#`.\n * So the request that loads this page carries nothing, and the token stays out of server access\n * logs, proxy logs and `Referer`. This page reads it from the fragment and then clears it from\n * the address bar, so it does not sit in the browser's history either.\n *\n * The one place it can still travel is the mail being forwarded, and nothing about where the\n * token sits can prevent that. So the address it was sent to is asked for as well: holding the\n * link is not enough on its own.\n *\n * ── Why the password fields only appear after a try ─────────────────────────\n * Whether an address already has an account is not this page's to announce. It sends what it\n * has, and the server answers `invitation-needs-a-password` when it needs one — so the extra\n * fields appear for the person who is actually creating an account, and nobody learns anything\n * by loading the page.\n */\nexport class AcceptInvitation extends AbstractAuthPage {\n  static styles = [\n    EntryControlSizeStyles,\n    css`\n      :host {\n        position: relative;\n        overflow: hidden;\n\n        display: flex;\n        flex-direction: row;\n\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n      }\n\n      .note {\n        margin: 0 0 var(--spacing-medium) 0;\n        font-size: 0.85rem;\n        line-height: 1.5;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n    `,\n    AUTH_STYLE_SIGN\n  ]\n\n  get pageName() {\n    return 'accept invitation'\n  }\n\n  get actionUrl() {\n    return '/accept-invitation'\n  }\n\n  get title() {\n    return 'accept invitation'\n  }\n\n  /** Read from the fragment on connect. Empty when the link was opened without one. */\n  @property({ type: String }) token?: string\n\n  /** The server asked for a password, so this person is creating an account. */\n  @property({ type: Boolean }) needsPassword?: boolean\n\n  /** Joined. The page stops being a form and says where to go. */\n  @property({ type: Boolean }) joined?: boolean\n\n  @property({ type: Boolean }) busy?: boolean\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const { token, clean } = readInvitationToken(window.location.href)\n\n    this.token = token\n\n    /*\n     * Taken out of the address bar and out of this history entry. `replaceState` rather than\n     * `pushState`: going back should not put the token back on screen.\n     */\n    if (clean && clean !== window.location.href) {\n      window.history.replaceState(null, '', clean)\n    }\n  }\n\n  render() {\n    const { icon, title, description } = this.applicationMeta\n    const { disableUserFavoredLanguage, languages } = this.data || {}\n\n    return html`\n      <div class=\"wrap\">\n        <div class=\"auth-brand\">\n          <img src=${icon} />\n          <strong class=\"name\">${title}</strong>\n          <span class=\"welcome-msg\">${description}</span>\n        </div>\n\n        <div class=\"auth-form\">\n          <h3><ox-i18n msgid=\"title.accept invitation\"></ox-i18n></h3>\n\n          ${this.joined ? this.renderDone() : this.renderForm(disableUserFavoredLanguage, languages)}\n        </div>\n      </div>\n\n      <ox-snack-bar id=\"snackbar\" level=\"error\" .message=${this.message}></ox-snack-bar>\n    `\n  }\n\n  private renderDone() {\n    return html`\n      <p class=\"note\">${i18next.t('text.you have joined. sign in to continue')}</p>\n      <md-elevated-button @click=${() => (window.location.href = '/auth/signin')}>\n        <ox-i18n msgid=\"button.sign in\"></ox-i18n>\n      </md-elevated-button>\n    `\n  }\n\n  private renderForm(disableUserFavoredLanguage: boolean, languages: any) {\n    return html`\n      <form id=\"form\" @keypress=${(e: KeyboardEvent) => e.key === 'Enter' && this.accept()}>\n        <p class=\"note\">${i18next.t('text.confirm the address this invitation was sent to')}</p>\n\n        <div class=\"field\">\n          <md-filled-text-field\n            name=\"email\"\n            type=\"email\"\n            label=${String(i18next.t('field.email'))}\n            autocomplete=\"email\"\n            required\n            ><md-icon slot=\"leading-icon\">mail</md-icon></md-filled-text-field\n          >\n        </div>\n\n        ${this.token\n          ? nothing\n          : html`\n              <div class=\"field\">\n                <md-filled-text-field\n                  name=\"token\"\n                  label=${String(i18next.t('label.invitation code'))}\n                  supporting-text=${String(i18next.t('text.the code is printed in the invitation email'))}\n                  autocomplete=\"off\"\n                  required\n                  ><md-icon slot=\"leading-icon\">key</md-icon></md-filled-text-field\n                >\n              </div>\n            `}\n        ${this.needsPassword ? this.renderNewAccount() : nothing}\n\n        <md-elevated-button id=\"submit-button\" type=\"button\" ?disabled=${this.busy} @click=${() => this.accept()}>\n          <ox-i18n msgid=\"button.accept invitation\"></ox-i18n>\n        </md-elevated-button>\n\n        ${!disableUserFavoredLanguage\n          ? html`<div id=\"locale-area\">\n              <label for=\"locale-selector\"><md-icon>language</md-icon></label>\n              <ox-i18n-selector\n                id=\"locale-selector\"\n                value=${i18next.language || 'en-US'}\n                .languages=${languages}\n                @change=${(e: CustomEvent) => e.detail && i18next.changeLanguage(e.detail as any)}\n              ></ox-i18n-selector>\n            </div>`\n          : nothing}\n      </form>\n    `\n  }\n\n  private renderNewAccount() {\n    return html`\n      <p class=\"note\">${i18next.t('text.choose a password to finish joining')}</p>\n\n      <div class=\"field\">\n        <md-filled-text-field name=\"name\" label=${String(i18next.t('field.name'))} autocomplete=\"name\"\n          ><md-icon slot=\"leading-icon\">person</md-icon></md-filled-text-field\n        >\n      </div>\n\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"password\"\n          type=\"password\"\n          label=${String(i18next.t('label.password'))}\n          autocomplete=\"new-password\"\n          required\n          ><md-icon slot=\"leading-icon\">password</md-icon></md-filled-text-field\n        >\n      </div>\n    `\n  }\n\n  /*\n   * ⚠ Not called `valueOf`. Overriding `Object.prototype.valueOf` with a different signature\n   * makes the class type unassignable to `Object`, and every `@property` decorator on it then\n   * fails to resolve — with an error that talks about decorators and never mentions the method.\n   */\n  private fieldValue(name: string): string {\n    return (this.renderRoot.querySelector(`[name=\"${name}\"]`) as any)?.value?.trim() || ''\n  }\n\n  /*\n   * The base class calls this to commit the page. It does not submit the form element: the\n   * answer here is read rather than navigated to, because a refusal can mean \"now ask for a\n   * password\" instead of \"stop\".\n   */\n  async submit() {\n    await this.accept()\n  }\n\n  private async accept() {\n    if (this.busy) {\n      return\n    }\n\n    this.busy = true\n    this.message = ''\n\n    try {\n      const response = await fetch('/accept-invitation', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({\n          token: this.token || this.fieldValue('token'),\n          email: this.fieldValue('email'),\n          name: this.fieldValue('name'),\n          password: this.fieldValue('password')\n        })\n      })\n\n      if (response.ok) {\n        this.joined = true\n        return\n      }\n\n      const refusal = await response.json().catch(() => ({}))\n\n      /*\n       * The one refusal that is not the end of the attempt — it means this person has no account\n       * yet, which is exactly who this page is for.\n       */\n      if (refusal?.refusal?.code === 'invitation-needs-a-password' || refusal?.code === 'invitation-needs-a-password') {\n        this.needsPassword = true\n        this.message = String(i18next.t('text.choose a password to finish joining'))\n        return\n      }\n\n      this.message = refusal?.message || String(i18next.t('text.this invitation cannot be used'))\n    } catch (e) {\n      this.message = String(i18next.t('text.this invitation cannot be used'))\n    } finally {\n      this.busy = false\n    }\n  }\n\n  updated(changed: any) {\n    super.updated(changed)\n\n    if (changed.has('message')) {\n      if (!this.message) {\n        this.hideSnackbar()\n      } else {\n        this.showSnackbar({ timer: -1 })\n      }\n    }\n  }\n}\n"]}

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

@@ -17,17 +17,20 @@ export declare class ApplianceEditor extends ApplianceEditor_base {
     private failed;
     /** The single-record read did not answer. Distinct from answering with nothing. */
     private loadFailed;
+    private revocable;
     private get editing();
     render(): import("lit-html").TemplateResult<1>;
     private renderCredential;
     private fieldError;
     connectedCallback(): Promise<void>;
+    private fetchRevocable;
     fetchAppliance(): Promise<void>;
     private cancel;
     save(e: Event): Promise<void>;
     private createAppliance;
     private updateAppliance;
     private generateSecret;
+    private revokeCredential;
     private deleteAppliance;
     /** The list has to refetch, and the popup is done. */
     private saved;

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

@@ -12,6 +12,7 @@ import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { CommonHeaderStyles, CommonPopupStyles, ScrollbarStyles } from '@operato/styles';
 import { parseJwt, sleep } from '@operato/utils';
 import './secret-field.js';
+import { readRevocable, showsRevokeButton, showsRevokedNote } from '../utils/credential-panel-state.js';
 import { changedValues, filledValues, missingRequired } from '../utils/form-values.js';
 /**
  * Registering and editing an appliance, in a popup.
@@ -44,6 +45,7 @@ const APPLIANCE_FIELDS = `
   model
   netmask
   accessToken
+  credentialRevoked
 `;
 let ApplianceEditor = class ApplianceEditor extends localize(i18next)(LitElement) {
     constructor() {
@@ -56,6 +58,15 @@ let ApplianceEditor = class ApplianceEditor extends localize(i18next)(LitElement
         this.failed = false;
         /** The single-record read did not answer. Distinct from answering with nothing. */
         this.loadFailed = false;
+        /*
+         * Does revoking work on this installation, for this reader?
+         *
+         * Revocation is behind a configuration switch, and the server answers one question that folds
+         * the switch and the reader's privilege together — see `applianceCredentialRevocable`. False
+         * until that answer comes back, so a slow or refused read shows no button rather than one that
+         * refuses when pressed.
+         */
+        this.revocable = false;
     }
     /*
      * ── Where the scrolling happens ─────────────────────────────────────────
@@ -164,6 +175,15 @@ let ApplianceEditor = class ApplianceEditor extends localize(i18next)(LitElement
         margin-right: auto;
       }
 
+      /* taking a credential away is not the same kind of act as issuing one. */
+      md-text-button.danger {
+        --md-text-button-label-text-color: var(--md-sys-color-error);
+      }
+
+      .note.revoked {
+        color: var(--md-sys-color-error);
+      }
+
       @media screen and (max-width: 480px) {
         [field] {
           grid-column: span 2;
@@ -274,6 +294,15 @@ let ApplianceEditor = class ApplianceEditor extends localize(i18next)(LitElement
     /*
      * 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.
+     *
+     * ── Why a revoked appliance says so ─────────────────────────────────────
+     * Revoking clears the token, so without a word for it the panel looks exactly like one whose
+     * credential was never issued. Those are opposite situations: one is waiting to be set up,
+     * the other has been deliberately shut off, and only one of them wants somebody to act.
+     *
+     * ── Why the revoke button is not always here ────────────────────────────
+     * It appears only where the installation turned revocation on and the reader may use it. See
+     * the note on `revocable`.
      */
     renderCredential(appliance, exp) {
         return html `
@@ -282,6 +311,9 @@ let ApplianceEditor = class ApplianceEditor extends localize(i18next)(LitElement
         <div field>
           <label for="access-token">${i18next.t('label.access token')}</label>
           <secret-field id="access-token" .value=${appliance.accessToken || ''}></secret-field>
+          ${showsRevokedNote(appliance)
+            ? html `<div class="note revoked">${i18next.t('text.this credential has been revoked')}</div>`
+            : ''}
           ${exp
             ? html `<div class="note">
                   ${i18next.t('text.token expiry time')} ${new Date(exp * 1000).toLocaleString()} :
@@ -292,6 +324,13 @@ let ApplianceEditor = class ApplianceEditor extends localize(i18next)(LitElement
             <md-text-button @click=${this.generateSecret.bind(this)}>
               ${i18next.t('button.generate new access token')}
             </md-text-button>
+            ${showsRevokeButton(this.revocable, appliance)
+            ? html `
+                    <md-text-button class="danger" @click=${this.revokeCredential.bind(this)}>
+                      ${i18next.t('button.revoke credential')}
+                    </md-text-button>
+                  `
+            : ''}
           </div>
         </div>
       </fieldset>
@@ -303,9 +342,26 @@ let ApplianceEditor = class ApplianceEditor extends localize(i18next)(LitElement
     async connectedCallback() {
         super.connectedCallback();
         if (this.editing) {
-            await this.fetchAppliance();
+            await Promise.all([this.fetchAppliance(), this.fetchRevocable()]);
         }
     }
+    /*
+     * Whether the revoke button exists at all.
+     *
+     * A refusal arrives as `response.errors` rather than a throw, and both a refusal and a `false`
+     * mean the same thing to this screen: no button. So there is nothing to report here — the
+     * absence of the button is the whole answer.
+     */
+    async fetchRevocable() {
+        const response = await client.query({
+            query: gql `
+        query {
+          applianceCredentialRevocable
+        }
+      `
+        });
+        this.revocable = readRevocable(response);
+    }
     async fetchAppliance() {
         const response = await client.query({
             query: gql `
@@ -420,6 +476,47 @@ let ApplianceEditor = class ApplianceEditor extends localize(i18next)(LitElement
         this.appliance = response.data.generateApplianceSecret;
         this.dispatchEvent(new CustomEvent('appliance-changed', { bubbles: true, composed: true }));
     }
+    /*
+     * Take the credential away and leave the appliance where it is.
+     *
+     * ── Why this is not the delete button ───────────────────────────────────
+     * Deleting takes the appliance and its history with it. This is for a device that is lost,
+     * decommissioned or suspect and whose record still has to stand — the row keeps pointing at
+     * the same identity, and issuing a new secret later picks that identity back up.
+     *
+     * ── Why the popup stays open ────────────────────────────────────────────
+     * The panel has to show the result: the token is gone and the appliance now says it was
+     * revoked. Closing would leave the reader guessing whether the press landed, and the list
+     * behind it is refetched either way by the event below.
+     */
+    async revokeCredential(e) {
+        e.preventDefault();
+        const confirmed = await OxPrompt.open({
+            type: 'warning',
+            title: i18next.t('button.revoke credential'),
+            text: i18next.t('text.revoking stops every token this appliance holds'),
+            confirmButton: { text: i18next.t('button.revoke credential') },
+            cancelButton: { text: i18next.t('button.cancel') }
+        });
+        if (!confirmed) {
+            return;
+        }
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ($id: String!) {
+          revokeApplianceCredential(id: $id) { ${APPLIANCE_FIELDS} }
+        }
+      `,
+            variables: { id: this.applianceId }
+        });
+        if (response.errors) {
+            this.failed = true;
+            return;
+        }
+        this.failed = false;
+        this.appliance = response.data.revokeApplianceCredential;
+        this.dispatchEvent(new CustomEvent('appliance-changed', { bubbles: true, composed: true }));
+    }
     async deleteAppliance(e) {
         e.preventDefault();
         const confirmed = await OxPrompt.open({
@@ -506,6 +603,10 @@ __decorate([
     state(),
     __metadata("design:type", Boolean)
 ], ApplianceEditor.prototype, "loadFailed", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], ApplianceEditor.prototype, "revocable", void 0);
 ApplianceEditor = __decorate([
     customElement('appliance-editor')
 ], ApplianceEditor);