Convert ha-long-lived-access-tokens-card (#6917)

Co-authored-by: Zack Barett <arnett.zackary@gmail.com>
Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/data/refresh_token.ts

@@ -0,0 +1,17 @@
+declare global {
+  interface HASSDomEvents {
+    "hass-refresh-tokens": undefined;
+  }
+}
+
+export interface RefreshToken {
+  client_icon?: string;
+  client_id: string;
+  client_name?: string;
+  created_at: string;
+  id: string;
+  is_current: boolean;
+  last_used_at?: string;
+  last_used_ip?: string;
+  type: "normal" | "long_lived_access_token";
+}

src/dialogs/generic/dialog-box.ts

@@ -57,7 +57,8 @@ class DialogBox extends LitElement {
         open
         ?scrimClickAction=${this._params.prompt}
         ?escapeKeyAction=${this._params.prompt}
-        @closed=${this._dismiss}
+        @closed=${this._dialogClosed}
+        defaultAction="ignore"
         .heading=${this._params.title
           ? this._params.title
           : this._params.confirmation &&
@@ -78,10 +79,10 @@ class DialogBox extends LitElement {
           ${this._params.prompt
             ? html`
                 <paper-input
-                  autofocus
+                  dialogInitialFocus
                   .value=${this._value}
-                  @value-changed=${this._valueChanged}
                   @keyup=${this._handleKeyUp}
+                  @value-changed=${this._valueChanged}
                   .label=${this._params.inputLabel
                     ? this._params.inputLabel
                     : ""}
@@ -100,7 +101,11 @@ class DialogBox extends LitElement {
               : this.hass.localize("ui.dialogs.generic.cancel")}
           </mwc-button>
         `}
-        <mwc-button @click=${this._confirm} slot="primaryAction">
+        <mwc-button
+          @click=${this._confirm}
+          ?dialogInitialFocus=${!this._params.prompt}
+          slot="primaryAction"
+        >
           ${this._params.confirmText
             ? this._params.confirmText
             : this.hass.localize("ui.dialogs.generic.ok")}
@@ -133,7 +138,17 @@ class DialogBox extends LitElement {
     this._close();
   }
 
+  private _dialogClosed(ev) {
+    if (ev.detail.action === "ignore") {
+      return;
+    }
+    this.closeDialog();
+  }
+
   private _close(): void {
+    if (!this._params) {
+      return;
+    }
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }

src/panels/profile/ha-long-lived-access-tokens-card.js

@@ -1,171 +0,0 @@
-import "@material/mwc-button";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { formatDateTime } from "../../common/datetime/format_date_time";
-import "../../components/ha-card";
-import "../../components/ha-icon-button";
-import {
-  showAlertDialog,
-  showPromptDialog,
-  showConfirmationDialog,
-} from "../../dialogs/generic/show-dialog-box";
-import { EventsMixin } from "../../mixins/events-mixin";
-import LocalizeMixin from "../../mixins/localize-mixin";
-import "../../styles/polymer-ha-style";
-import "../../components/ha-settings-row";
-
-/*
- * @appliesMixin EventsMixin
- * @appliesMixin LocalizeMixin
- */
-class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
-  static get template() {
-    return html`
-      <style include="ha-style">
-        .card-content {
-          margin: -1em 0;
-        }
-        a {
-          color: var(--primary-color);
-        }
-        ha-icon-button {
-          color: var(--primary-text-color);
-        }
-      </style>
-      <ha-card
-        header="[[localize('ui.panel.profile.long_lived_access_tokens.header')]]"
-      >
-        <div class="card-content">
-          <p>
-            [[localize('ui.panel.profile.long_lived_access_tokens.description')]]
-            <a
-              href="https://developers.home-assistant.io/docs/en/auth_api.html#making-authenticated-requests"
-              target="_blank"
-              rel="noreferrer"
-            >
-              [[localize('ui.panel.profile.long_lived_access_tokens.learn_auth_requests')]]
-            </a>
-          </p>
-          <template is="dom-if" if="[[!_tokens.length]]">
-            <p>
-              [[localize('ui.panel.profile.long_lived_access_tokens.empty_state')]]
-            </p>
-          </template>
-        </div>
-        <template is="dom-repeat" items="[[_tokens]]">
-          <ha-settings-row two-line>
-            <span slot="heading">[[item.client_name]]</span>
-            <div slot="description">[[_formatCreatedAt(item.created_at)]]</div>
-            <ha-icon-button
-              icon="hass:delete"
-              on-click="_handleDelete"
-            ></ha-icon-button>
-          </ha-settings-row>
-        </template>
-        <div class="card-actions">
-          <mwc-button on-click="_handleCreate">
-            [[localize('ui.panel.profile.long_lived_access_tokens.create')]]
-          </mwc-button>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      refreshTokens: Array,
-      _tokens: {
-        type: Array,
-        computed: "_computeTokens(refreshTokens)",
-      },
-    };
-  }
-
-  _computeTokens(refreshTokens) {
-    return refreshTokens
-      .filter((tkn) => tkn.type === "long_lived_access_token")
-      .reverse();
-  }
-
-  _formatTitle(name) {
-    return this.localize(
-      "ui.panel.profile.long_lived_access_tokens.token_title",
-      "name",
-      name
-    );
-  }
-
-  _formatCreatedAt(created) {
-    return this.localize(
-      "ui.panel.profile.long_lived_access_tokens.created_at",
-      "date",
-      formatDateTime(new Date(created), this.hass.language)
-    );
-  }
-
-  async _handleCreate() {
-    const name = await showPromptDialog(this, {
-      text: this.localize(
-        "ui.panel.profile.long_lived_access_tokens.prompt_name"
-      ),
-    });
-    if (!name) return;
-    try {
-      const token = await this.hass.callWS({
-        type: "auth/long_lived_access_token",
-        lifespan: 3650,
-        client_name: name,
-      });
-      await showPromptDialog(this, {
-        title: name,
-        text: this.localize(
-          "ui.panel.profile.long_lived_access_tokens.prompt_copy_token"
-        ),
-        defaultValue: token,
-      });
-      this.fire("hass-refresh-tokens");
-    } catch (err) {
-      // eslint-disable-next-line
-      console.error(err);
-      showAlertDialog(this, {
-        text: this.localize(
-          "ui.panel.profile.long_lived_access_tokens.create_failed"
-        ),
-      });
-    }
-  }
-
-  async _handleDelete(ev) {
-    const token = ev.model.item;
-    if (
-      !(await showConfirmationDialog(this, {
-        text: this.localize(
-          "ui.panel.profile.long_lived_access_tokens.confirm_delete",
-          "name",
-          token.client_name
-        ),
-      }))
-    ) {
-      return;
-    }
-    try {
-      await this.hass.callWS({
-        type: "auth/delete_refresh_token",
-        refresh_token_id: token.id,
-      });
-      this.fire("hass-refresh-tokens");
-    } catch (err) {
-      // eslint-disable-next-line
-      console.error(err);
-      showAlertDialog(this, {
-        text: this.localize(
-          "ui.panel.profile.long_lived_access_tokens.delete_failed"
-        ),
-      });
-    }
-  }
-}
-
-customElements.define("ha-long-lived-access-tokens-card", HaLongLivedTokens);

src/panels/profile/ha-long-lived-access-tokens-card.ts

@@ -0,0 +1,193 @@
+import "@material/mwc-button";
+import {
+  css,
+  CSSResultArray,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import memoizeOne from "memoize-one";
+import relativeTime from "../../common/datetime/relative_time";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-card";
+import "../../components/ha-icon-button";
+import "../../components/ha-settings-row";
+import { RefreshToken } from "../../data/refresh_token";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+  showPromptDialog,
+} from "../../dialogs/generic/show-dialog-box";
+import { haStyle } from "../../resources/styles";
+import "../../styles/polymer-ha-style";
+import { HomeAssistant } from "../../types";
+
+@customElement("ha-long-lived-access-tokens-card")
+class HaLongLivedTokens extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public refreshTokens?: RefreshToken[];
+
+  private _accessTokens = memoizeOne(
+    (refreshTokens: RefreshToken[]): RefreshToken[] =>
+      refreshTokens
+        ?.filter((token) => token.type === "long_lived_access_token")
+        .reverse()
+  );
+
+  protected render(): TemplateResult {
+    const accessTokens = this._accessTokens(this.refreshTokens!);
+
+    return html`
+      <ha-card
+        .header=${this.hass.localize(
+          "ui.panel.profile.long_lived_access_tokens.header"
+        )}
+      >
+        <div class="card-content">
+          ${this.hass.localize(
+            "ui.panel.profile.long_lived_access_tokens.description"
+          )}
+
+          <a
+            href="https://developers.home-assistant.io/docs/en/auth_api.html#making-authenticated-requests"
+            target="_blank"
+            rel="noreferrer"
+          >
+            ${this.hass.localize(
+              "ui.panel.profile.long_lived_access_tokens.learn_auth_requests"
+            )}
+          </a>
+          ${!accessTokens?.length
+            ? html`<p>
+                ${this.hass.localize(
+                  "ui.panel.profile.long_lived_access_tokens.empty_state"
+                )}
+              </p>`
+            : accessTokens!.map(
+                (token) => html`<ha-settings-row two-line>
+                  <span slot="heading">${token.client_name}</span>
+                  <div slot="description">
+                    ${this.hass.localize(
+                      "ui.panel.profile.long_lived_access_tokens.created",
+                      "date",
+                      relativeTime(
+                        new Date(token.created_at),
+                        this.hass.localize
+                      )
+                    )}
+                  </div>
+                  <ha-icon-button
+                    .token=${token}
+                    icon="hass:delete"
+                    @click=${this._deleteToken}
+                  ></ha-icon-button>
+                </ha-settings-row>`
+              )}
+        </div>
+
+        <div class="card-actions">
+          <mwc-button @click=${this._createToken}>
+            ${this.hass.localize(
+              "ui.panel.profile.long_lived_access_tokens.create"
+            )}
+          </mwc-button>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private async _createToken(): Promise<void> {
+    const name = await showPromptDialog(this, {
+      text: this.hass.localize(
+        "ui.panel.profile.long_lived_access_tokens.prompt_name"
+      ),
+      inputLabel: this.hass.localize(
+        "ui.panel.profile.long_lived_access_tokens.name"
+      ),
+    });
+
+    if (!name) {
+      return;
+    }
+
+    try {
+      const token = await this.hass.callWS<string>({
+        type: "auth/long_lived_access_token",
+        lifespan: 3650,
+        client_name: name,
+      });
+
+      showPromptDialog(this, {
+        title: name,
+        text: this.hass.localize(
+          "ui.panel.profile.long_lived_access_tokens.prompt_copy_token"
+        ),
+        defaultValue: token,
+      });
+
+      fireEvent(this, "hass-refresh-tokens");
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.profile.long_lived_access_tokens.create_failed"
+        ),
+        text: err.message,
+      });
+    }
+  }
+
+  private async _deleteToken(ev: Event): Promise<void> {
+    const token = (ev.currentTarget as any).token;
+    if (
+      !(await showConfirmationDialog(this, {
+        text: this.hass.localize(
+          "ui.panel.profile.long_lived_access_tokens.confirm_delete",
+          "name",
+          token.client_name
+        ),
+      }))
+    ) {
+      return;
+    }
+    try {
+      await this.hass.callWS({
+        type: "auth/delete_refresh_token",
+        refresh_token_id: token.id,
+      });
+      fireEvent(this, "hass-refresh-tokens");
+    } catch (err) {
+      await showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.profile.long_lived_access_tokens.delete_failed"
+        ),
+        text: err.message,
+      });
+    }
+  }
+
+  static get styles(): CSSResultArray {
+    return [
+      haStyle,
+      css`
+        ha-settings-row {
+          padding: 0;
+        }
+        a {
+          color: var(--primary-color);
+        }
+        ha-icon-button {
+          color: var(--primary-text-color);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-long-lived-access-tokens-card": HaLongLivedTokens;
+  }
+}

src/panels/profile/ha-panel-profile.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "../../layouts/ha-app-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-item/paper-item";
@@ -9,9 +8,9 @@ import {
   css,
   CSSResultArray,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -22,7 +21,9 @@ import {
   CoreFrontendUserData,
   getOptimisticFrontendUserDataCollection,
 } from "../../data/frontend";
+import { RefreshToken } from "../../data/refresh_token";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
+import "../../layouts/ha-app-layout";
 import { haStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import "./ha-advanced-mode-row";
@@ -35,15 +36,15 @@ import "./ha-pick-language-row";
 import "./ha-pick-theme-row";
 import "./ha-push-notifications-row";
 import "./ha-refresh-tokens-card";
-import "./ha-set-vibrate-row";
 import "./ha-set-suspend-row";
+import "./ha-set-vibrate-row";
 
 class HaPanelProfile extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow!: boolean;
 
-  @internalProperty() private _refreshTokens?: unknown[];
+  @internalProperty() private _refreshTokens?: RefreshToken[];
 
   @internalProperty() private _coreUserData?: CoreFrontendUserData | null;
 

src/translations/en.json

@@ -2512,14 +2512,13 @@
           "header": "Long-Lived Access Tokens",
           "description": "Create long-lived access tokens to allow your scripts to interact with your Home Assistant instance. Each token will be valid for 10 years from creation. The following long-lived access tokens are currently active.",
           "learn_auth_requests": "Learn how to make authenticated requests.",
-          "created_at": "Created at {date}",
-          "last_used": "Last used at {date} from {location}",
-          "not_used": "Has never been used",
+          "created": "Created {date}",
           "confirm_delete": "Are you sure you want to delete the access token for {name}?",
           "delete_failed": "Failed to delete the access token.",
           "create": "Create Token",
           "create_failed": "Failed to create the access token.",
-          "prompt_name": "Name?",
+          "name": "Name",
+          "prompt_name": "Give the token a name",
           "prompt_copy_token": "Copy your access token. It will not be shown again.",
           "empty_state": "You have no long-lived access tokens yet."
         }