PM-10982 add passkey field in login view. add testid for qa (#10634)

libs/vault/src/cipher-view/autofill-options/autofill-options-view.component.html

@@ -8,12 +8,20 @@
         <bit-label>
           {{ "website" | i18n }}
         </bit-label>
-        <input readonly bitInput type="text" [value]="login.hostOrUri" aria-readonly="true" />
+        <input
+          readonly
+          bitInput
+          type="text"
+          [value]="login.hostOrUri"
+          aria-readonly="true"
+          data-testid="login-website"
+        />
         <button
           bitIconButton="bwi-external-link"
           bitSuffix
           type="button"
           (click)="openWebsite(login.launchUri)"
+          data-testid="launch-website"
         ></button>
         <button
           bitIconButton="bwi-clone"
@@ -23,6 +31,7 @@
           [valueLabel]="'website' | i18n"
           showToast
           [appA11yTitle]="'copyValue' | i18n"
+          data-testid="copy-website"
         ></button>
       </bit-form-field>
     </ng-container>

libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html

@@ -23,7 +23,7 @@
         [valueLabel]="'username' | i18n"
         showToast
         [appA11yTitle]="'copyValue' | i18n"
-        data-testid="toggle-username"
+        data-testid="copy-username"
       ></button>
     </bit-form-field>
     <bit-form-field *ngIf="cipher.login.password">
@@ -74,6 +74,17 @@
         [showCount]="true"
       ></bit-color-password>
     </div>
+    <bit-form-field *ngIf="cipher.login?.fido2Credentials?.length > 0">
+      <bit-label>{{ "typePasskey" | i18n }} </bit-label>
+      <input
+        readonly
+        bitInput
+        type="text"
+        [value]="fido2CredentialCreationDateValue"
+        aria-readonly="true"
+        data-testid="login-passkey"
+      />
+    </bit-form-field>
     <bit-form-field *ngIf="cipher.login.totp">
       <bit-label
         >{{ "verificationCodeTotp" | i18n }}

libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts

@@ -1,10 +1,11 @@
-import { CommonModule } from "@angular/common";
+import { CommonModule, DatePipe } from "@angular/common";
-import { Component, Input } from "@angular/core";
+import { Component, inject, Input } from "@angular/core";
 import { Router } from "@angular/router";
 import { Observable, shareReplay } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import {
   CardComponent,
@@ -47,12 +48,23 @@ export class LoginCredentialsViewComponent {
   showPasswordCount: boolean = false;
   passwordRevealed: boolean = false;
   totpCopyCode: string;
+  private datePipe = inject(DatePipe);
 
   constructor(
     private billingAccountProfileStateService: BillingAccountProfileStateService,
     private router: Router,
+    private i18nService: I18nService,
   ) {}
 
+  get fido2CredentialCreationDateValue(): string {
+    const dateCreated = this.i18nService.t("dateCreated");
+    const creationDate = this.datePipe.transform(
+      this.cipher.login.fido2Credentials[0]?.creationDate,
+      "short",
+    );
+    return `${dateCreated} ${creationDate}`;
+  }
+
   async getPremium() {
     await this.router.navigate(["/premium"]);
   }