From 0d19432f1482f9fc4f99343a06aa55270ea6271c Mon Sep 17 00:00:00 2001
From: sportshead <32637656+sportshead@users.noreply.github.com>
Date: Thu, 15 May 2025 20:54:41 +0100
Subject: [PATCH] fix(browser): use appCopyField instead of appCopyClick for
 singleCopiableLogin (#14692)

Fixes #14167

Co-authored-by: Daniel James Smith <2670567+djsmith85@users.noreply.github.com>
---
 .../item-copy-actions.component.html          |  9 +++----
 .../item-copy-actions.component.ts            | 27 ++++++++++++-------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.html b/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.html
index bb3a7b12096..576f6b7def6 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.html
@@ -40,12 +40,9 @@
         type="button"
         bitIconButton="bwi-clone"
         size="small"
-        [appA11yTitle]="
-          'copyFieldValue' | i18n: singleCopiableLogin.key : singleCopiableLogin.value
-        "
-        [appCopyClick]="singleCopiableLogin.value"
-        [valueLabel]="singleCopiableLogin.key"
-        showToast
+        [appA11yTitle]="singleCopiableLogin.key"
+        [appCopyField]="$any(singleCopiableLogin.field)"
+        [cipher]="cipher"
       ></button>
       <ng-container *ngIf="!singleCopiableLogin">
         <button
diff --git a/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.ts b/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.ts
index a51e5f5406a..053d87c6485 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.ts
@@ -15,6 +15,7 @@ import { VaultPopupCopyButtonsService } from "../../../services/vault-popup-copy
 type CipherItem = {
   value: string;
   key: string;
+  field?: string;
 };
 
 @Component({
@@ -43,15 +44,23 @@ export class ItemCopyActionsComponent {
     );
   }
 
+  /*
+   * singleCopiableLogin uses appCopyField instead of appCopyClick. This allows for the TOTP
+   * code to be copied correctly. See #14167
+   */
   get singleCopiableLogin() {
     const loginItems: CipherItem[] = [
-      { value: this.cipher.login.username, key: "username" },
-      { value: this.cipher.login.password, key: "password" },
-      { value: this.cipher.login.totp, key: "totp" },
+      { value: this.cipher.login.username, key: "copyUsername", field: "username" },
+      { value: this.cipher.login.password, key: "copyPassword", field: "password" },
+      { value: this.cipher.login.totp, key: "copyVerificationCode", field: "totp" },
     ];
     // If both the password and username are visible but the password is hidden, return the username
     if (!this.cipher.viewPassword && this.cipher.login.username && this.cipher.login.password) {
-      return { value: this.cipher.login.username, key: this.i18nService.t("username") };
+      return {
+        value: this.cipher.login.username,
+        key: this.i18nService.t("copyUsername"),
+        field: "username",
+      };
     }
     return this.findSingleCopiableItem(loginItems);
   }
@@ -78,12 +87,10 @@ export class ItemCopyActionsComponent {
    * Given a list of CipherItems, if there is only one item with a value,
    * return it with the translated key. Otherwise return null
    */
-  findSingleCopiableItem(items: { value: string; key: string }[]): CipherItem | null {
-    const singleItemWithValue = items.find(
-      (key) => key.value && items.every((f) => f === key || !f.value),
-    );
-    return singleItemWithValue
-      ? { value: singleItemWithValue.value, key: this.i18nService.t(singleItemWithValue.key) }
+  findSingleCopiableItem(items: CipherItem[]): CipherItem | null {
+    const itemsWithValue = items.filter(({ value }) => !!value);
+    return itemsWithValue.length === 1
+      ? { ...itemsWithValue[0], key: this.i18nService.t(itemsWithValue[0].key) }
       : null;
   }