From e12e817d2266d61c3a7b89076cf6133bdc1c56c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20=C3=85berg?= <anders@andersaberg.com>
Date: Sun, 30 Jun 2024 00:50:18 +0200
Subject: [PATCH] PM-4878: Add passkey information to items when signing in
 (#9835)

* Added username to subtitle

* Added subName to cipher

* Moved subName to component

* Update apps/browser/src/vault/popup/components/fido2/fido2-cipher-row.component.ts

Co-authored-by: SmithThe4th <gsmith@bitwarden.com>

* Fixed double code and added comment

* Added changeDetection: ChangeDetectionStrategy.OnPush as per review

---------

Co-authored-by: SmithThe4th <gsmith@bitwarden.com>
---
 .../fido2/fido2-cipher-row.component.html     |  1 +
 .../fido2/fido2-cipher-row.component.ts       | 21 ++++++++++++++++++-
 .../src/vault/models/view/login.view.ts       |  5 +++++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/apps/browser/src/vault/popup/components/fido2/fido2-cipher-row.component.html b/apps/browser/src/vault/popup/components/fido2/fido2-cipher-row.component.html
index edf20d3e9c3..852fd4a0e81 100644
--- a/apps/browser/src/vault/popup/components/fido2/fido2-cipher-row.component.html
+++ b/apps/browser/src/vault/popup/components/fido2/fido2-cipher-row.component.html
@@ -28,6 +28,7 @@
             </ng-container>
           </span>
         </span>
+        <span class="detail" *ngIf="getSubName(cipher)">{{ getSubName(cipher) }}</span>
         <span class="detail" *ngIf="cipher.subTitle">{{ cipher.subTitle }}</span>
       </div>
     </button>
diff --git a/apps/browser/src/vault/popup/components/fido2/fido2-cipher-row.component.ts b/apps/browser/src/vault/popup/components/fido2/fido2-cipher-row.component.ts
index c07d2ef8860..25d623b1692 100644
--- a/apps/browser/src/vault/popup/components/fido2/fido2-cipher-row.component.ts
+++ b/apps/browser/src/vault/popup/components/fido2/fido2-cipher-row.component.ts
@@ -1,10 +1,11 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from "@angular/core";
 
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 
 @Component({
   selector: "app-fido2-cipher-row",
   templateUrl: "fido2-cipher-row.component.html",
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Fido2CipherRowComponent {
   @Output() onSelected = new EventEmitter<CipherView>();
@@ -17,4 +18,22 @@ export class Fido2CipherRowComponent {
   protected selectCipher(c: CipherView) {
     this.onSelected.emit(c);
   }
+
+  /**
+   * Returns a subname for the cipher.
+   * If this has a FIDO2 credential, and the cipher.name is different from the FIDO2 credential's rpId, return the rpId.
+   * @param c Cipher
+   * @returns
+   */
+  protected getSubName(c: CipherView): string | null {
+    const fido2Credentials = c.login?.fido2Credentials;
+
+    if (!fido2Credentials || fido2Credentials.length === 0) {
+      return null;
+    }
+
+    const [fido2Credential] = fido2Credentials;
+
+    return c.name !== fido2Credential.rpId ? fido2Credential.rpId : null;
+  }
 }
diff --git a/libs/common/src/vault/models/view/login.view.ts b/libs/common/src/vault/models/view/login.view.ts
index 53bbc220225..1236e047b69 100644
--- a/libs/common/src/vault/models/view/login.view.ts
+++ b/libs/common/src/vault/models/view/login.view.ts
@@ -40,6 +40,11 @@ export class LoginView extends ItemView {
   }
 
   get subTitle(): string {
+    // if there's a passkey available, use that as a fallback
+    if (Utils.isNullOrEmpty(this.username) && this.fido2Credentials?.length > 0) {
+      return this.fido2Credentials[0].userName;
+    }
+
     return this.username;
   }