[PM-1574] Display passkeys on web

apps/web/src/app/vault/components/vault-items/vault-cipher-row.component.html

@@ -103,6 +103,20 @@
         {{ "launch" | i18n }}
       </a>
     </ng-container>
+    <!-- Fido2Key -->
+    <ng-container *ngIf="cipher.type === CipherType.Fido2Key && !cipher.isDeleted">
+      <a
+        bitMenuItem
+        *ngIf="cipher.fido2Key.canLaunch"
+        type="button"
+        [href]="cipher.fido2Key.launchUri"
+        target="_blank"
+      >
+        <i class="bwi bwi-fw bwi-share-square" aria-hidden="true"></i>
+        {{ "launch" | i18n }}
+      </a>
+    </ng-container>
+
     <button bitMenuItem type="button" (click)="attachments()">
       <i class="bwi bwi-fw bwi-paperclip" aria-hidden="true"></i>
       {{ "attachments" | i18n }}

apps/web/src/app/vault/components/vault-items/vault-items.component.html

@@ -89,10 +89,7 @@
           [showGroups]="showGroups"
           [showPremiumFeatures]="showPremiumFeatures"
           [useEvents]="useEvents"
-          [cloneable]="
-            (item.cipher.organizationId && cloneableOrganizationCiphers) ||
-            item.cipher.organizationId == null
-          "
+          [cloneable]="canClone(item)"
           [organizations]="allOrganizations"
           [collections]="allCollections"
           [checked]="selection.isSelected(item)"

apps/web/src/app/vault/components/vault-items/vault-items.component.ts

@@ -164,6 +164,14 @@ export class VaultItemsComponent {
     });
   }
 
+  protected canClone(vaultItem: VaultItem) {
+    return (
+      ((vaultItem.cipher.organizationId && this.cloneableOrganizationCiphers) ||
+        vaultItem.cipher.organizationId == null) &&
+      vaultItem.cipher.fido2Key == null
+    );
+  }
+
   private refreshItems() {
     const collections: VaultItem[] = this.collections.map((collection) => ({ collection }));
     const ciphers: VaultItem[] = this.ciphers.map((cipher) => ({ cipher }));

apps/web/src/app/vault/individual-vault/add-edit.component.html

@@ -191,6 +191,24 @@ <h1 class="modal-title" id="cipherAddEditTitle">{{ title }}</h1>
               </button>
             </div>
           </div>
+          <ng-container *ngIf="cipher.login.fido2Key"></ng-container>
+          <div class="row">
+            <div class="col-6 form-group">
+              <label for="loginFido2key">{{ "typePasskey" | i18n }}</label>
+              <div class="input-group">
+                <input
+                  id="loginFido2key"
+                  class="form-control"
+                  type="text"
+                  name="Login.Fido2key"
+                  [value]="'passkeyTwoStepLogin' | i18n"
+                  appInputVerbatim
+                  disabled
+                  readonly
+                />
+              </div>
+            </div>
+          </div>
           <div class="tw-flex tw-flex-row">
             <div class="tw-mb-4 tw-w-1/2">
               <label for="loginTotp">{{ "authenticatorKeyTotp" | i18n }}</label>
@@ -813,6 +831,89 @@ <h1 class="modal-title" id="cipherAddEditTitle">{{ title }}</h1>
             </div>
           </div>
         </ng-container>
+        <!-- Fido2Key -->
+        <ng-container *ngIf="cipher.type === cipherType.Fido2Key">
+          <div class="row">
+            <div class="col-6 form-group">
+              <label for="fido2keyUsername">{{ "username" | i18n }}</label>
+              <div class="input-group">
+                <input
+                  id="fido2keyUsername"
+                  class="form-control"
+                  type="text"
+                  name="Fido2key.Username"
+                  [(ngModel)]="cipher.fido2Key.userName"
+                  appInputVerbatim
+                  [disabled]="cipher.isDeleted || viewOnly"
+                  [readonly]="!cipher.edit && editMode"
+                />
+                <div class="input-group-append" *ngIf="!cipher.isDeleted">
+                  <button
+                    type="button"
+                    class="btn btn-outline-secondary"
+                    appA11yTitle="{{ 'copyUsername' | i18n }}"
+                    (click)="copy(cipher.fido2Key.userName, 'username', 'Username')"
+                  >
+                    <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-6 form-group">
+              <label for="fido2keyCreationDate">{{ "typePasskey" | i18n }}</label>
+              <div class="input-group">
+                <input
+                  id="fido2keyCreationDate"
+                  class="form-control"
+                  type="text"
+                  name="Fido2key.CreationDate"
+                  [value]="('dateCreated' | i18n) + ' ' + (cipher.creationDate | date : 'MM/dd/y')"
+                  appInputVerbatim
+                  disabled
+                  readonly
+                />
+              </div>
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-12 form-group">
+              <label for="fido2keyApplication">{{ "application" | i18n }}</label>
+              <div class="input-group">
+                <input
+                  class="form-control"
+                  id="fido2keyApplication"
+                  type="text"
+                  name="Fido2key.Application"
+                  [value]="cipher.fido2Key.rpId"
+                  disabled
+                  readonly
+                  appInputVerbatim
+                />
+                <div class="input-group-append">
+                  <button
+                    type="button"
+                    class="btn btn-outline-secondary"
+                    appA11yTitle="{{ 'launch' | i18n }}"
+                    (click)="launch(cipher.fido2Key)"
+                  >
+                    <i class="bwi bwi-lg bwi-share-square" aria-hidden="true"></i>
+                  </button>
+                  <button
+                    type="button"
+                    class="btn btn-outline-secondary"
+                    appA11yTitle="{{ 'copyUri' | i18n }}"
+                    (click)="copy(cipher.fido2Key.launchUri, 'uri', 'URI')"
+                  >
+                    <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
+                  </button>
+                </div>
+              </div>
+              <small class="form-text text-muted">{{ "passkeyEditInformation" | i18n }}</small>
+            </div>
+          </div>
+        </ng-container>
         <div class="form-group">
           <label for="notes">{{ "notes" | i18n }}</label>
           <textarea

apps/web/src/app/vault/individual-vault/add-edit.component.ts

@@ -20,7 +20,7 @@ import { CollectionService } from "@bitwarden/common/vault/abstractions/collecti
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
 import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
-import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";
+import { Launchable } from "@bitwarden/common/vault/interfaces/launchable";
 
 @Component({
   selector: "app-vault-add-edit",
@@ -131,7 +131,7 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit, On
     }
   }
 
-  launch(uri: LoginUriView) {
+  launch(uri: Launchable) {
     if (!uri.canLaunch) {
       return;
     }

apps/web/src/app/vault/individual-vault/vault-filter/shared/models/filter-function.spec.ts

@@ -211,6 +211,17 @@ describe("createFilter", () => {
       expect(result).toBe(true);
     });
   });
+
+  describe("given a cipher with Fido2Key type", () => {
+    it("should return true when filter is login", () => {
+      const cipher = createCipher({ type: CipherType.Fido2Key });
+      const filterFunction = createFilterFunction({ type: "login" });
+
+      const result = filterFunction(cipher);
+
+      expect(result).toBe(true);
+    });
+  });
 });
 
 function createCipher(options: Partial<CipherView> = {}) {

apps/web/src/app/vault/individual-vault/vault-filter/shared/models/filter-function.ts

@@ -16,7 +16,12 @@ export function createFilterFunction(filter: RoutedVaultFilterModel): FilterFunc
     if (filter.type === "identity" && cipher.type !== CipherType.Identity) {
       return false;
     }
-    if (filter.type === "login" && cipher.type !== CipherType.Login) {
+    // Login and Fido2Key are both login types
+    if (
+      filter.type === "login" &&
+      cipher.type !== CipherType.Login &&
+      cipher.type !== CipherType.Fido2Key
+    ) {
       return false;
     }
     if (filter.type === "note" && cipher.type !== CipherType.SecureNote) {

apps/web/src/app/vault/individual-vault/vault-filter/shared/models/vault-filter.model.spec.ts

@@ -42,6 +42,15 @@ describe("VaultFilter", () => {
       },
       null
     );
+    const loginCiphersFilter = new TreeNode<CipherTypeFilter>(
+      {
+        id: "login",
+        name: "login",
+        type: CipherType.Login,
+        icon: "bwi-globe",
+      },
+      null
+    );
     const trashFilter = new TreeNode<CipherTypeFilter>(
       {
         id: "trash",
@@ -279,6 +288,19 @@ describe("VaultFilter", () => {
         expect(result).toBe(true);
       });
     });
+
+    describe("given a cipher with Fido2Key type", () => {
+      it("should return true when filter is login", () => {
+        const cipher = createCipher({ type: CipherType.Fido2Key });
+        const filterFunction = createFilterFunction({
+          selectedCipherTypeNode: loginCiphersFilter,
+        });
+
+        const result = filterFunction(cipher);
+
+        expect(result).toBe(true);
+      });
+    });
   });
 });
 

apps/web/src/app/vault/individual-vault/vault-filter/shared/models/vault-filter.model.ts

@@ -120,7 +120,13 @@ export class VaultFilter {
         cipherPassesFilter = cipher.isDeleted;
       }
       if (this.cipherType && cipherPassesFilter) {
-        cipherPassesFilter = cipher.type === this.cipherType;
+        //Fido2Key's should also be included in the Login type
+        if (this.cipherType === CipherType.Login) {
+          cipherPassesFilter =
+            cipher.type === this.cipherType || cipher.type === CipherType.Fido2Key;
+        } else {
+          cipherPassesFilter = cipher.type === this.cipherType;
+        }
       }
       if (this.selectedFolderNode) {
         // No folder

apps/web/src/locales/en/messages.json

@@ -6844,5 +6844,20 @@
   },
   "updatedTempPassword": {
     "message": "User updated a password issued through account recovery."
+  },
+  "typePasskey": {
+    "message": "Passkey"
+  },
+  "application": {
+    "message": "Application"
+  },
+  "passkeyEditInformation": {
+    "message": "You cannot edit passkey application because it would invalidate the passkey."
+  },
+  "duplicatePasskey": {
+    "message": "A passkey with this ID already exists in this organization."
+  },
+  "passkeyTwoStepLogin": {
+    "message": "Available for two-step login"
   }
 }

libs/angular/src/vault/components/view.component.ts

@@ -30,11 +30,10 @@ import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folde
 import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/password-reprompt.service";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 import { CipherType } from "@bitwarden/common/vault/enums/cipher-type";
+import { Launchable } from "@bitwarden/common/vault/interfaces/launchable";
 import { AttachmentView } from "@bitwarden/common/vault/models/view/attachment.view";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { Fido2KeyView } from "@bitwarden/common/vault/models/view/fido2-key.view";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
-import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";
 
 import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
 
@@ -305,7 +304,7 @@ export class ViewComponent implements OnDestroy, OnInit {
     }
   }
 
-  launch(uri: LoginUriView | Fido2KeyView, cipherId?: string) {
+  launch(uri: Launchable, cipherId?: string) {
     if (!uri.canLaunch) {
       return;
     }

libs/common/src/vault/interfaces/launchable.ts

@@ -0,0 +1,4 @@
+export interface Launchable {
+  launchUri: string;
+  canLaunch: boolean;
+}