wip - copy button overhaul

bitwarden · Feb 21, 2025 · 6acd671 · 6acd671
1 parent 657902c
commit 6acd671
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 18 deletions.
diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
@@ -4175,6 +4175,20 @@
       }
     }
   },
+  "copyFieldValue": {
+    "message": "Copy $FIELD$, $VALUE$",
+    "description": "Title for a button that copies a field value to the clipboard.",
+    "placeholders": {
+      "field": {
+        "content": "$1",
+        "example": "Username"
+      },
+      "value": {
+        "content": "$2",
+        "example": "Foo"
+      }
+    }
+  },
   "noValuesToCopy": {
     "message": "No values to copy"
   },

diff --git a/...ser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.html b/...ser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.html
@@ -40,28 +40,41 @@
         bitIconButton="bwi-clone"
         size="small"
         [appA11yTitle]="
-          hasLoginValues ? ('copyInfoTitle' | i18n: cipher.name) : ('noValuesToCopy' | i18n)
+          'copyFieldValue' | i18n: singleCopiableLogin.field : singleCopiableLogin.value
         "
-        [disabled]="!hasLoginValues"
-        [bitMenuTriggerFor]="loginOptions"
+        [appCopyClick]="singleCopiableLogin.value"
+        [valueLabel]="singleCopiableLogin.field"
+        *ngIf="singleCopiableLogin"
       ></button>
-      <bit-menu #loginOptions>
-        <button type="button" bitMenuItem appCopyField="username" [cipher]="cipher">
-          {{ "copyUsername" | i18n }}
-        </button>
+      <ng-container *ngIf="!singleCopiableLogin">
         <button
-          *ngIf="cipher.viewPassword"
           type="button"
-          bitMenuItem
-          appCopyField="password"
-          [cipher]="cipher"
-        >
-          {{ "copyPassword" | i18n }}
-        </button>
-        <button type="button" bitMenuItem appCopyField="totp" [cipher]="cipher">
-          {{ "copyVerificationCode" | i18n }}
-        </button>
-      </bit-menu>
+          bitIconButton="bwi-clone"
+          size="small"
+          [appA11yTitle]="
+            hasLoginValues ? ('copyInfoTitle' | i18n: cipher.name) : ('noValuesToCopy' | i18n)
+          "
+          [disabled]="!hasLoginValues"
+          [bitMenuTriggerFor]="loginOptions"
+        ></button>
+        <bit-menu #loginOptions>
+          <button type="button" bitMenuItem appCopyField="username" [cipher]="cipher">
+            {{ "copyUsername" | i18n }}
+          </button>
+          <button
+            *ngIf="cipher.viewPassword"
+            type="button"
+            bitMenuItem
+            appCopyField="password"
+            [cipher]="cipher"
+          >
+            {{ "copyPassword" | i18n }}
+          </button>
+          <button type="button" bitMenuItem appCopyField="totp" [cipher]="cipher">
+            {{ "copyVerificationCode" | i18n }}
+          </button>
+        </bit-menu>
+      </ng-container>
     </bit-item-action>
   </ng-template>
 </ng-container>

diff --git a/...owser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.ts b/...owser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.ts
@@ -37,6 +37,64 @@ export class ItemCopyActionsComponent {
     );
   }
 
+  get singleCopiableLogin() {
+    const { username, password, hasTotp, totp } = this.cipher.login;
+    // If there is both a username and password but the password is not viewable, then the username is the only copiable value
+    if (username && password && !this.cipher.viewPassword) {
+      return {
+        value: username,
+        field: "username",
+      };
+    }
+    if (username && !password && !hasTotp) {
+      return {
+        value: username,
+        field: "username",
+      };
+    }
+    if (!username && password && !hasTotp) {
+      return {
+        value: password,
+        field: "password",
+      };
+    }
+    if (!username && !password && hasTotp) {
+      return {
+        value: totp,
+        field: "totp",
+      };
+    }
+    return null;
+  }
+
+  get singleCopiableCardValue() {
+    const { code, number } = this.cipher.card;
+    if (code && !number) {
+      return code;
+    }
+    if (!code && number) {
+      return number;
+    }
+    return null;
+  }
+
+  get singleCopiableIdentityValue() {
+    const { fullAddressForCopy, email, username, phone } = this.cipher.identity;
+    if (fullAddressForCopy && !email && !username && !phone) {
+      return fullAddressForCopy;
+    }
+    if (!fullAddressForCopy && email && !username && !phone) {
+      return email;
+    }
+    if (!fullAddressForCopy && !email && username && !phone) {
+      return username;
+    }
+    if (!fullAddressForCopy && !email && !username && phone) {
+      return phone;
+    }
+    return null;
+  }
+
   get hasCardValues() {
     return !!this.cipher.card.code || !!this.cipher.card.number;
   }