[EC-598] feat: show user name as sub title

apps/browser/src/popup/fido2/fido2.component.ts

@@ -33,9 +33,10 @@ export class Fido2Component implements OnInit, OnDestroy {
 
           if (this.data?.type === "ConfirmNewCredentialRequest") {
             const cipher = new CipherView();
-            cipher.name = this.data.name;
+            cipher.name = this.data.credentialName;
             cipher.type = CipherType.Fido2Key;
             cipher.fido2Key = new Fido2KeyView();
+            cipher.fido2Key.userName = this.data.userName;
             this.ciphers = [cipher];
           } else if (this.data?.type === "ConfirmCredentialRequest") {
             const cipher = await this.cipherService.get(this.data.cipherId);

apps/browser/src/services/fido2/browser-fido2-user-interface.service.ts

@@ -30,7 +30,8 @@ export type BrowserFido2Message = { requestId: string } & (
     }
   | {
       type: "ConfirmNewCredentialRequest";
-      name: string;
+      credentialName: string;
+      userName: string;
     }
   | {
       type: "ConfirmNewCredentialResponse";
@@ -115,9 +116,14 @@ export class BrowserFido2UserInterfaceService implements Fido2UserInterfaceServi
     return response.cipherId;
   }
 
-  async confirmNewCredential({ name }: NewCredentialParams): Promise<boolean> {
+  async confirmNewCredential({ credentialName, userName }: NewCredentialParams): Promise<boolean> {
     const requestId = Utils.newGuid();
-    const data: BrowserFido2Message = { type: "ConfirmNewCredentialRequest", requestId, name };
+    const data: BrowserFido2Message = {
+      type: "ConfirmNewCredentialRequest",
+      requestId,
+      credentialName,
+      userName,
+    };
     const queryParams = new URLSearchParams({ data: JSON.stringify(data) }).toString();
     this.popupUtilsService.popOut(
       null,

libs/common/src/abstractions/fido2/fido2-user-interface.service.abstraction.ts

@@ -1,5 +1,6 @@
 export interface NewCredentialParams {
-  name: string;
+  credentialName: string;
+  userName: string;
 }
 
 export abstract class Fido2UserInterfaceService {

libs/common/src/models/request/cipher.request.ts

@@ -137,6 +137,8 @@ export class CipherRequest {
           cipher.fido2Key.keyValue != null ? cipher.fido2Key.keyValue.encryptedString : null;
         this.fido2Key.rpId =
           cipher.fido2Key.rpId != null ? cipher.fido2Key.rpId.encryptedString : null;
+        this.fido2Key.rpName =
+          cipher.fido2Key.rpName != null ? cipher.fido2Key.rpName.encryptedString : null;
         this.fido2Key.userHandle =
           cipher.fido2Key.userHandle != null ? cipher.fido2Key.userHandle.encryptedString : null;
         this.fido2Key.userName =

libs/common/src/models/view/cipher.view.ts

@@ -174,6 +174,9 @@ export class CipherView implements View, InitializerMetadata {
       case CipherType.SecureNote:
         view.secureNote = SecureNoteView.fromJSON(obj.secureNote);
         break;
+      case CipherType.Fido2Key:
+        view.fido2Key = Fido2KeyView.fromJSON(obj.fido2Key);
+        break;
       default:
         break;
     }

libs/common/src/models/view/fido2-key.view.ts

@@ -1,3 +1,5 @@
+import { Jsonify } from "type-fest";
+
 import { ItemView } from "./item.view";
 
 export class Fido2KeyView extends ItemView {
@@ -11,6 +13,10 @@ export class Fido2KeyView extends ItemView {
   origin: string;
 
   get subTitle(): string {
-    return null;
+    return this.userName;
+  }
+
+  static fromJSON(obj: Partial<Jsonify<Fido2KeyView>>): Fido2KeyView {
+    return Object.assign(new Fido2KeyView(), obj);
   }
 }

libs/common/src/services/cipher.service.ts

@@ -1251,10 +1251,14 @@ export class CipherService implements CipherServiceAbstraction {
           model.fido2Key,
           cipher.fido2Key,
           {
-            key: null,
+            keyType: null,
+            keyCurve: null,
+            keyValue: null,
             rpId: null,
-            origin: null,
+            rpName: null,
             userHandle: null,
+            userName: null,
+            origin: null,
           },
           key
         );

libs/common/src/services/fido2/fido2.service.ts

@@ -47,7 +47,8 @@ export class Fido2Service implements Fido2ServiceAbstraction {
     params: CredentialRegistrationParams
   ): Promise<CredentialRegistrationResult> {
     const presence = await this.fido2UserInterfaceService.confirmNewCredential({
-      name: params.origin,
+      credentialName: params.rp.name,
+      userName: params.user.displayName,
     });
     // eslint-disable-next-line no-console
     console.log("Fido2Service.createCredential", params);
@@ -212,10 +213,10 @@ export class Fido2Service implements Fido2ServiceAbstraction {
 
     const view = new CipherView();
     view.type = CipherType.Fido2Key;
-    view.name = credential.origin;
+    view.name = credential.rpName;
+
     view.fido2Key = new Fido2KeyView();
     view.fido2Key.origin = credential.origin;
-
     view.fido2Key.keyType = credential.keyType;
     view.fido2Key.keyCurve = credential.keyCurve;
     view.fido2Key.keyValue = Fido2Utils.bufferToString(pcks8Key);