convert ha-refresh-tokens-card (#6962)

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

@@ -1,4 +1,5 @@
-import "@material/mwc-button";
+import "@material/mwc-button/mwc-button";
+import { mdiDelete } from "@mdi/js";
 import {
   css,
   CSSResultArray,
@@ -12,8 +13,8 @@ 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 "../../components/ha-svg-icon";
 import { RefreshToken } from "../../data/refresh_token";
 import {
   showAlertDialog,
@@ -79,11 +80,14 @@ class HaLongLivedTokens extends LitElement {
                       )
                     )}
                   </div>
-                  <ha-icon-button
+                  <mwc-button
                     .token=${token}
-                    icon="hass:delete"
+                    .disabled=${token.is_current}
+                    .title=${this.hass.localize(`ui.common.delete`)}
                     @click=${this._deleteToken}
-                  ></ha-icon-button>
+                  >
+                    <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
+                  </mwc-button>
                 </ha-settings-row>`
               )}
         </div>
@@ -178,8 +182,8 @@ class HaLongLivedTokens extends LitElement {
         a {
           color: var(--primary-color);
         }
-        ha-icon-button {
+        mwc-button {
-          color: var(--primary-text-color);
+          --mdc-theme-primary: var(--primary-color);
         }
       `,
     ];

src/panels/profile/ha-refresh-tokens-card.js

@@ -1,126 +0,0 @@
-import "@polymer/paper-tooltip/paper-tooltip";
-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 "../../components/ha-settings-row";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../dialogs/generic/show-dialog-box";
-import { EventsMixin } from "../../mixins/events-mixin";
-import LocalizeMixin from "../../mixins/localize-mixin";
-
-/*
- * @appliesMixin EventsMixin
- * @appliesMixin LocalizeMixin
- */
-class HaRefreshTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
-  static get template() {
-    return html`
-      <style>
-        ha-icon-button {
-          color: var(--primary-text-color);
-        }
-        ha-icon-button[disabled] {
-          color: var(--disabled-text-color);
-        }
-      </style>
-      <ha-card header="[[localize('ui.panel.profile.refresh_tokens.header')]]">
-        <div class="card-content">
-          [[localize('ui.panel.profile.refresh_tokens.description')]]
-        </div>
-        <template is="dom-repeat" items="[[_computeTokens(refreshTokens)]]">
-          <ha-settings-row three-line>
-            <span slot="heading">[[_formatTitle(item.client_id)]]</span>
-            <div slot="description">[[_formatCreatedAt(item.created_at)]]</div>
-            <div slot="description">[[_formatLastUsed(item)]]</div>
-            <div>
-              <template is="dom-if" if="[[item.is_current]]">
-                <paper-tooltip animation-delay="0" position="left"
-                  >[[localize('ui.panel.profile.refresh_tokens.current_token_tooltip')]]</paper-tooltip
-                >
-              </template>
-              <ha-icon-button
-                icon="hass:delete"
-                on-click="_handleDelete"
-                disabled="[[item.is_current]]"
-              ></ha-icon-button>
-            </div>
-          </ha-settings-row>
-        </template>
-      </ha-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      refreshTokens: Array,
-    };
-  }
-
-  _computeTokens(refreshTokens) {
-    return refreshTokens.filter((tkn) => tkn.type === "normal").reverse();
-  }
-
-  _formatTitle(clientId) {
-    return this.localize(
-      "ui.panel.profile.refresh_tokens.token_title",
-      "clientId",
-      clientId
-    );
-  }
-
-  _formatCreatedAt(created) {
-    return this.localize(
-      "ui.panel.profile.refresh_tokens.created_at",
-      "date",
-      formatDateTime(new Date(created), this.hass.language)
-    );
-  }
-
-  _formatLastUsed(item) {
-    return item.last_used_at
-      ? this.localize(
-          "ui.panel.profile.refresh_tokens.last_used",
-          "date",
-          formatDateTime(new Date(item.last_used_at), this.hass.language),
-          "location",
-          item.last_used_ip
-        )
-      : this.localize("ui.panel.profile.refresh_tokens.not_used");
-  }
-
-  async _handleDelete(ev) {
-    const token = ev.model.item;
-    if (
-      !(await showConfirmationDialog(this, {
-        text: this.localize(
-          "ui.panel.profile.refresh_tokens.confirm_delete",
-          "name",
-          token.client_id
-        ),
-      }))
-    ) {
-      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.refresh_tokens.delete_failed"),
-      });
-    }
-  }
-}
-
-customElements.define("ha-refresh-tokens-card", HaRefreshTokens);

src/panels/profile/ha-refresh-tokens-card.ts

@@ -0,0 +1,150 @@
+import "@material/mwc-button/mwc-button";
+import { mdiDelete } from "@mdi/js";
+import "@polymer/paper-tooltip/paper-tooltip";
+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-settings-row";
+import "../../components/ha-svg-icon";
+import { RefreshToken } from "../../data/refresh_token";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../dialogs/generic/show-dialog-box";
+import { haStyle } from "../../resources/styles";
+import { HomeAssistant } from "../../types";
+
+@customElement("ha-refresh-tokens-card")
+class HaRefreshTokens extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public refreshTokens?: RefreshToken[];
+
+  private _refreshTokens = memoizeOne(
+    (refreshTokens: RefreshToken[]): RefreshToken[] =>
+      refreshTokens?.filter((token) => token.type === "normal").reverse()
+  );
+
+  protected render(): TemplateResult {
+    const refreshTokens = this._refreshTokens(this.refreshTokens!);
+    return html`<ha-card
+      .header=${this.hass.localize("ui.panel.profile.refresh_tokens.header")}
+    >
+      <div class="card-content">
+        ${this.hass.localize("ui.panel.profile.refresh_tokens.description")}
+        ${refreshTokens?.length
+          ? refreshTokens!.map(
+              (token) => html`<ha-settings-row three-line>
+                <span slot="heading"
+                  >${this.hass.localize(
+                    "ui.panel.profile.refresh_tokens.token_title",
+                    "clientId",
+                    token.client_id
+                  )}
+                </span>
+                <div slot="description">
+                  ${this.hass.localize(
+                    "ui.panel.profile.refresh_tokens.created_at",
+                    "date",
+                    relativeTime(new Date(token.created_at), this.hass.localize)
+                  )}
+                </div>
+                <div slot="description">
+                  ${token.last_used_at
+                    ? this.hass.localize(
+                        "ui.panel.profile.refresh_tokens.last_used",
+                        "date",
+                        relativeTime(
+                          new Date(token.last_used_at),
+                          this.hass.localize
+                        ),
+                        "location",
+                        token.last_used_ip
+                      )
+                    : this.hass.localize(
+                        "ui.panel.profile.refresh_tokens.not_used"
+                      )}
+                </div>
+                <div>
+                  ${token.is_current
+                    ? html`<paper-tooltip animation-delay="0" position="left">
+                        ${this.hass.localize(
+                          "ui.panel.profile.refresh_tokens.current_token_tooltip"
+                        )}
+                      </paper-tooltip>`
+                    : ""}
+                  <mwc-button
+                    .token=${token}
+                    .disabled=${token.is_current}
+                    .title=${this.hass.localize(`ui.common.delete`)}
+                    @click=${this._deleteToken}
+                  >
+                    <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
+                  </mwc-button>
+                </div>
+              </ha-settings-row>`
+            )
+          : ""}
+      </div>
+    </ha-card>`;
+  }
+
+  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.refresh_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.refresh_tokens.delete_failed"
+        ),
+        text: err.message,
+      });
+    }
+  }
+
+  static get styles(): CSSResultArray {
+    return [
+      haStyle,
+      css`
+        ha-settings-row {
+          padding: 0;
+        }
+        mwc-button {
+          --mdc-theme-primary: var(--primary-color);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-refresh-tokens-card": HaRefreshTokens;
+  }
+}