[PM-3810] Unify Passkeys view

apps/browser/src/vault/popup/components/action-buttons.component.html

@@ -100,41 +100,3 @@
     <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
   </button>
 </ng-container>
-<ng-container *ngIf="cipher.type === cipherType.Fido2Key">
-  <button
-    type="button"
-    class="row-btn"
-    appStopClick
-    appStopProp
-    appA11yTitle="{{ 'launch' | i18n }}"
-    (click)="launchCipher()"
-    *ngIf="!showView"
-    [ngClass]="{ disabled: !cipher.fido2Key.canLaunch }"
-    [attr.disabled]="!cipher.fido2Key.canLaunch ? '' : null"
-  >
-    <i class="bwi bwi-lg bwi-share-square" aria-hidden="true"></i>
-  </button>
-  <button
-    type="button"
-    class="row-btn"
-    appStopClick
-    appStopProp
-    appA11yTitle="{{ 'copyUsername' | i18n }}"
-    (click)="copy(cipher, cipher.fido2Key.userDisplayName, 'username', 'Username')"
-    [ngClass]="{ disabled: !cipher.fido2Key.userDisplayName }"
-    [attr.disabled]="!cipher.fido2Key.userDisplayName ? '' : null"
-  >
-    <i class="bwi bwi-lg bwi-user" aria-hidden="true"></i>
-  </button>
-  <button
-    type="button"
-    class="row-btn"
-    appStopClick
-    appStopProp
-    appA11yTitle="{{ 'loginPasskey' | i18n }}"
-    [ngClass]="{ disabled: true }"
-    disabled
-  >
-    <i class="bwi bwi-lg bwi-passkey" aria-hidden="true"></i>
-  </button>
-</ng-container>

apps/browser/src/vault/popup/components/vault/add-edit.component.html

@@ -138,7 +138,8 @@ <h2 class="box-header">
             <div class="box-content">
               <div class="box-content-row text-muted">
                 <span class="row-label">{{ "typePasskey" | i18n }}</span>
-                {{ "passkeyTwoStepLogin" | i18n }}
+                {{ "dateCreated" | i18n }}
+                {{ cipher.login.fido2Keys[0].creationDate | date : "short" }}
               </div>
             </div>
           </div>
@@ -475,39 +476,6 @@ <h2 class="box-header">
             />
           </div>
         </div>
-        <!-- Fido2Key -->
-        <div *ngIf="cipher.type === cipherType.Fido2Key">
-          <div class="box-content-row" appBoxRow>
-            <label for="fido2KeyUserDisplayName">{{ "username" | i18n }}</label>
-            <input
-              id="fido2KeyUserDisplayName"
-              type="text"
-              name="Fido2Key.UserDisplayName"
-              [(ngModel)]="cipher.fido2Key.userDisplayName"
-              appInputVerbatim
-              [readonly]="!cipher.edit && editMode"
-            />
-          </div>
-          <div class="box-content-row text-muted" appBoxRow>
-            <span class="row-label">{{ "typePasskey" | i18n }}</span>
-            {{ "dateCreated" | i18n }} {{ cipher.creationDate | date : "short" }}
-          </div>
-
-          <div class="box" *ngIf="cipher.fido2Key.canLaunch">
-            <div class="box-content">
-              <div class="box-content-row" appBoxRow>
-                <label for="fido2KeyApplication">{{ "application" | i18n }}</label>
-                <input
-                  class="text-muted"
-                  id="fido2KeyApplication"
-                  type="text"
-                  [value]="cipher.fido2Key.rpId"
-                  readonly
-                />
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
     <div class="box" *ngIf="cipher.type === cipherType.Login">

apps/browser/src/vault/popup/components/vault/vault-filter.component.html

@@ -70,9 +70,9 @@ <h2 class="box-header">
             <div class="icon"><i class="bwi bwi-fw bwi-lg bwi-globe"></i></div>
             <span class="text">{{ "typeLogin" | i18n }}</span>
           </div>
-          <span class="row-sub-label">{{
-            getTypeCountsSum(typeCounts, cipherType.Login, cipherType.Fido2Key)
-          }}</span>
+          <span class="row-sub-label">
+            {{ typeCounts.get(cipherType.Login) || 0 }}
+          </span>
           <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon"></i></span>
         </button>
         <button

apps/browser/src/vault/popup/components/vault/vault-filter.component.ts

@@ -255,14 +255,7 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
   }
 
   async launchCipher(cipher: CipherView) {
-    let launchUri: string;
-    if (cipher.type === CipherType.Login && cipher.login.canLaunch) {
-      launchUri = cipher.login.launchUri;
-    } else if (cipher.type === CipherType.Fido2Key && cipher.fido2Key.canLaunch) {
-      launchUri = cipher.fido2Key.launchUri;
-    }
-
-    if (!launchUri) {
+    if (cipher.type !== CipherType.Login || !cipher.login.canLaunch) {
       return;
     }
 
@@ -271,7 +264,7 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
     }
     this.preventSelected = true;
     await this.cipherService.updateLastLaunchedDate(cipher.id);
-    BrowserApi.createNewTab(launchUri);
+    BrowserApi.createNewTab(cipher.login.launchUri);
     if (this.popupUtils.inPopup(window)) {
       BrowserApi.closePopup(window);
     }
@@ -362,10 +355,6 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
     this.collectionCounts = collectionCounts;
   }
 
-  getTypeCountsSum(typeCounts: Map<CipherType, number>, ...types: CipherType[]): number {
-    return types.reduce((sum, type) => sum + (typeCounts.get(type) || 0), 0);
-  }
-
   showSearching() {
     return (
       this.hasSearched || (!this.searchPending && this.searchService.isSearchable(this.searchText))

apps/browser/src/vault/popup/components/vault/vault-items.component.ts

@@ -1,4 +1,4 @@
 import { Location } from "@angular/common";
 import { ChangeDetectorRef, Component, NgZone, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
@@ -98,8 +98,7 @@
         this.searchPlaceholder = this.i18nService.t("searchType");
         this.type = parseInt(params.type, null);
         switch (this.type) {
           case CipherType.Login:
-          case CipherType.Fido2Key:
             this.groupingTitle = this.i18nService.t("logins");
             break;
           case CipherType.Card:
@@ -210,15 +209,7 @@
   }
 
   async launchCipher(cipher: CipherView) {
-    let launchUri: string;
-
-    if (cipher.type === CipherType.Login && cipher.login.canLaunch) {
-      launchUri = cipher.login.launchUri;
-    } else if (cipher.type === CipherType.Fido2Key && cipher.fido2Key.canLaunch) {
-      launchUri = cipher.fido2Key.launchUri;
-    }
-
-    if (!launchUri) {
+    if (cipher.type !== CipherType.Login || !cipher.login.canLaunch) {
       return;
     }
 
@@ -227,7 +218,7 @@
     }
     this.preventSelected = true;
     await this.cipherService.updateLastLaunchedDate(cipher.id);
-    BrowserApi.createNewTab(launchUri);
+    BrowserApi.createNewTab(cipher.login.launchUri);
     if (this.popupUtils.inPopup(window)) {
       BrowserApi.closePopup(window);
     }
@@ -273,12 +264,7 @@
         cipherPassesFilter = cipher.isDeleted;
       }
       if (this.type != null && cipherPassesFilter) {
-        //Fido2Key's should also be included in the Login type
-        if (this.type === CipherType.Login) {
-          cipherPassesFilter = cipher.type === this.type || cipher.type === CipherType.Fido2Key;
-        } else {
-          cipherPassesFilter = cipher.type === this.type;
-        }
+        cipherPassesFilter = cipher.type === this.type;
       }
       if (this.folderId != null && this.folderId != "none" && cipherPassesFilter) {
         cipherPassesFilter = cipher.folderId === this.folderId;

apps/browser/src/vault/popup/components/vault/view.component.html

@@ -207,7 +207,8 @@ <h2 class="box-header">
           <div class="box-content">
             <div class="box-content-row text-muted">
               <span class="row-label">{{ "typePasskey" | i18n }}</span>
-              {{ "passkeyTwoStepLogin" | i18n }}
+              {{ "dateCreated" | i18n }}
+              {{ cipher.login.fido2Keys[0].creationDate | date : "short" }}
             </div>
           </div>
         </div>
@@ -424,57 +425,6 @@ <h2 class="box-header">
           <div *ngIf="cipher.identity.country">{{ cipher.identity.country }}</div>
         </div>
       </div>
-      <!-- Fido2Key -->
-      <div *ngIf="cipher.type == cipherType.Fido2Key">
-        <div class="box-content-row">
-          <span class="row-label">{{ "username" | i18n }}</span>
-          {{ cipher.fido2Key.userDisplayName }}
-        </div>
-        <div class="box-content-row">
-          <span class="row-label">{{ "typePasskey" | i18n }}</span>
-          {{ "dateCreated" | i18n }} {{ cipher.creationDate | date : "short" }}
-        </div>
-
-        <div class="box" *ngIf="cipher.fido2Key.canLaunch">
-          <div class="box-content">
-            <div class="box-content-row box-content-row-flex">
-              <div class="row-main">
-                <label
-                  class="row-label draggable"
-                  draggable="true"
-                  (dragstart)="setTextDataOnDrag($event, cipher.fido2Key.launchUri)"
-                  >{{ "application" | i18n }}</label
-                >
-                <span title="{{ cipher.fido2Key.launchUri }}">
-                  <input type="text" [value]="cipher.fido2Key.rpId" readonly aria-readonly="true" />
-                </span>
-              </div>
-              <div class="action-buttons">
-                <button
-                  type="button"
-                  class="row-btn"
-                  appStopClick
-                  (click)="launch(cipher.fido2Key)"
-                  attr.aria-label="{{ 'launch' | i18n }} {{ cipher.fido2Key.launchUri }}"
-                  [appA11yTitle]="'launch' | i18n"
-                >
-                  <i class="bwi bwi-lg bwi-share-square" aria-hidden="true"></i>
-                </button>
-                <button
-                  type="button"
-                  class="row-btn"
-                  appStopClick
-                  attr.aria-label="{{ 'copyUri' | i18n }} {{ cipher.fido2Key.launchUri }}"
-                  [appA11yTitle]="'copyUri' | i18n"
-                  (click)="copy(cipher.fido2Key.launchUri, 'uri', 'URI')"
-                >
-                  <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
   <div class="box" *ngIf="cipher.login && cipher.login.hasUris">

apps/desktop/src/vault/app/vault/add-edit.component.html

@@ -121,7 +121,8 @@ <h2 class="box-header">
               appBoxRow
             >
               <span class="row-label">{{ "typePasskey" | i18n }}</span>
-              {{ "passkeyTwoStepLogin" | i18n }}
+              {{ "dateCreated" | i18n }}
+              {{ cipher.login.fido2Keys[0].creationDate | date : "short" }}
             </div>
 
             <div class="box-content-row" appBoxRow>
@@ -458,24 +459,6 @@ <h2 class="box-header">
               />
             </div>
           </div>
-          <!-- Fido2Key -->
-          <div *ngIf="cipher.type === cipherType.Fido2Key">
-            <div class="box-content-row" appBoxRow>
-              <label for="fido2KeyUserDisplayName">{{ "username" | i18n }}</label>
-              <input
-                id="fido2KeyUserDisplayName"
-                type="text"
-                name="Fido2Key.UserDisplayName"
-                [(ngModel)]="cipher.fido2Key.userDisplayName"
-                appInputVerbatim
-                [readonly]="!cipher.edit && editMode"
-              />
-            </div>
-            <div class="box-content-row text-muted" appBoxRow>
-              <span class="row-label">{{ "typePasskey" | i18n }}</span>
-              {{ "dateCreated" | i18n }} {{ cipher.creationDate | date : "short" }}
-            </div>
-          </div>
         </div>
       </div>
       <div class="box" *ngIf="cipher.type === cipherType.Login">
@@ -556,24 +539,6 @@ <h2 class="box-header">
           </button>
         </div>
       </div>
-      <!-- Fido2Key Application -->
-      <div class="box" *ngIf="cipher.type === cipherType.Fido2Key && cipher.fido2Key.canLaunch">
-        <div class="box-content">
-          <div class="box-content-row" appBoxRow>
-            <label for="fido2KeyApplication">{{ "application" | i18n }}</label>
-            <input
-              class="text-muted"
-              id="fido2KeyApplication"
-              type="text"
-              [value]="cipher.fido2Key.rpId"
-              readonly
-            />
-          </div>
-        </div>
-        <div class="box-footer">
-          {{ "passkeyEditInformation" | i18n }}
-        </div>
-      </div>
       <div class="box">
         <div class="box-content">
           <div class="box-content-row" appBoxRow>

apps/desktop/src/vault/app/vault/vault.component.ts

@@ -1,4 +1,4 @@
 import {
   ChangeDetectorRef,
   Component,
   NgZone,
@@ -286,85 +286,77 @@
             this.editCipher(cipher);
           }),
       });
-      if (!cipher.organizationId && !cipher.fido2Key?.rpId) {
+      if (!cipher.organizationId) {
         menu.push({
           label: this.i18nService.t("clone"),
           click: () =>
             this.functionWithChangeDetection(() => {
               this.cloneCipher(cipher);
             }),
         });
       }
     }
 
     switch (cipher.type) {
       case CipherType.Login:
         if (
           cipher.login.canLaunch ||
           cipher.login.username != null ||
           cipher.login.password != null
         ) {
           menu.push({ type: "separator" });
         }
         if (cipher.login.canLaunch) {
           menu.push({
             label: this.i18nService.t("launch"),
             click: () => this.platformUtilsService.launchUri(cipher.login.launchUri),
           });
         }
         if (cipher.login.username != null) {
           menu.push({
             label: this.i18nService.t("copyUsername"),
             click: () => this.copyValue(cipher, cipher.login.username, "username", "Username"),
           });
         }
         if (cipher.login.password != null && cipher.viewPassword) {
           menu.push({
             label: this.i18nService.t("copyPassword"),
             click: () => {
               this.copyValue(cipher, cipher.login.password, "password", "Password");
               this.eventCollectionService.collect(EventType.Cipher_ClientCopiedPassword, cipher.id);
             },
           });
         }
         if (cipher.login.hasTotp && (cipher.organizationUseTotp || this.userHasPremiumAccess)) {
           menu.push({
             label: this.i18nService.t("copyVerificationCodeTotp"),
             click: async () => {
               const value = await this.totpService.getCode(cipher.login.totp);
               this.copyValue(cipher, value, "verificationCodeTotp", "TOTP");
             },
           });
         }
         break;
       case CipherType.Card:
         if (cipher.card.number != null || cipher.card.code != null) {
           menu.push({ type: "separator" });
         }
         if (cipher.card.number != null) {
           menu.push({
             label: this.i18nService.t("copyNumber"),
             click: () => this.copyValue(cipher, cipher.card.number, "number", "Card Number"),
           });
         }
         if (cipher.card.code != null) {
           menu.push({
             label: this.i18nService.t("copySecurityCode"),
             click: () => {
               this.copyValue(cipher, cipher.card.code, "securityCode", "Security Code");
               this.eventCollectionService.collect(EventType.Cipher_ClientCopiedCardCode, cipher.id);
             },
           });
         }
         break;
-      case CipherType.Fido2Key:
-        if (cipher.fido2Key.canLaunch) {
-          menu.push({
-            label: this.i18nService.t("launch"),
-            click: () => this.platformUtilsService.launchUri(cipher.fido2Key.launchUri),
-          });
-        }
-        break;
       default:
         break;
     }