Add copy-to-clipboard button for long-lived tokens (#16956)

src/components/ha-textfield.ts

@@ -99,6 +99,10 @@ export class HaTextField extends TextFieldBase {
         direction: var(--direction);
       }
 
+      .mdc-text-field__icon--trailing {
+        padding: var(--textfield-icon-trailing-padding, 12px);
+      }
+
       .mdc-floating-label:not(.mdc-floating-label--float-above) {
         text-overflow: ellipsis;
         width: inherit;

src/panels/profile/ha-long-lived-access-token-dialog.ts

@@ -1,4 +1,5 @@
 import "@material/mwc-button";
+import { mdiContentCopy } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -11,9 +12,13 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-textfield";
+import "../../components/ha-icon-button";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { LongLivedAccessTokenDialogParams } from "./show-long-lived-access-token-dialog";
+import type { HaTextField } from "../../components/ha-textfield";
+import { copyToClipboard } from "../../common/util/copy-clipboard";
+import { showToast } from "../../util/toast";
 
 const QR_LOGO_URL = "/static/icons/favicon-192x192.png";
 
@@ -55,8 +60,15 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
               "ui.panel.profile.long_lived_access_tokens.prompt_copy_token"
             )}
             type="text"
+            iconTrailing
             readOnly
-          ></ha-textfield>
+          >
+            <ha-icon-button
+              @click=${this._copyToken}
+              slot="trailingIcon"
+              .path=${mdiContentCopy}
+            ></ha-icon-button>
+          </ha-textfield>
           <div id="qr">
             ${this._qrCode
               ? this._qrCode
@@ -71,6 +83,14 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
     `;
   }
 
+  private async _copyToken(ev): Promise<void> {
+    const textField = ev.target.parentElement as HaTextField;
+    await copyToClipboard(textField.value);
+    showToast(this, {
+      message: this.hass.localize("ui.common.copied_clipboard"),
+    });
+  }
+
   private async _generateQR() {
     const qrcode = await import("qrcode");
     const canvas = await qrcode.toCanvas(this._params!.token, {
@@ -111,6 +131,17 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
         }
         ha-textfield {
           display: block;
+          --textfield-icon-trailing-padding: 0;
+        }
+        ha-textfield > ha-icon-button {
+          position: relative;
+          right: -8px;
+          --mdc-icon-button-size: 36px;
+          --mdc-icon-size: 20px;
+          color: var(--secondary-text-color);
+          inset-inline-start: initial;
+          inset-inline-end: -8px;
+          direction: var(--direction);
         }
       `,
     ];