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>

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>

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;
+  }
 }

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;
   }