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 <[email protected]>

* Fixed double code and added comment

* Added changeDetection: ChangeDetectionStrategy.OnPush as per review

---------

Co-authored-by: SmithThe4th <[email protected]>

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