[PM-1976] Display passkeys properly on the browser (#5616)

* Removed passkeys from the vault types filter and added fucntion to get the count of Fido2keys and Login types

* Updated build filter to take Fido2key type as a Login type

* Updated icon font files

* Updated vault items and view to handle changes with fido2keys

* Updated add edit view for fido2keys

* Prevent moving passkeys to an organization where it exists

* Prevent moving passkeys to an organization where it exists

* Added view for non-discoverable passkeys

* Added diaglog to inform user that passkey won't be copied when cloning a non discoverable key

* Muted text that shows cipher item is available for 2fa

* Changed conditional to check if an organization already has the same passkey item

* Muted text to align with figma designs and used rpId for the application input value

* Modified checkFido2KeyExistsInOrg function to workk with discoverable and non discoverable keys

* Differentiate between non-discoverable and discoverable keys when moving to an organization

* Added suggested changes from PR review

* Updated font files css changes

* Fixed bug preventing launch bitton from working for Login types (#5639)

* [PM-1574] Display passkeys on web (#5651)

* Allowed discoverable Fido2key type to be displayed alongside Login type

* Added view during edit for discoverable and non-discoverable passkeys

* Fixed PR comments, added relvant tests to domain changes

* Fixed imports and updated the launch function to use the Launchable interface

* Added launch on vault filter for fido2key types

* Added missing passkey text field in edit view (#5800)

* [PM-1977] Display passkeys properly on the desktop (#5763)

* Allowed discoverable Fido2key type to be displayed alongside Login type

* Added view during edit for discoverable and non-discoverable passkeys

* Fixed PR comments, added relvant tests to domain changes

* Fixed imports and updated the launch function to use the Launchable interface

* Added fido2key to login filter and added view display for fido2key

* Added passkeys view for non discoverable passkeys and edit view for passkeys

* Fixed PR comments

* switched date format to short

* [PM-3046] [PM-3047] Defects for discoverable and non-discoverable passkeys on desktop and web (#5847)

* Added missing passkey text field in edit view (#5800)

* Added dialog to clone no discoverable passkeys on web and desktop.Also, removed clone on the desktop for discoverable passkeys and added passkey view to non- discoverable passkeys on desktop during edit

* Prevent cloning dialog on non fido2key ciphers

* Made fido2key use website favicon if avaialble instead of the passkey icon

* Do not display passkey view on clone edit for dekstop

* Do not display passkey view on clone edit for browser

* Prevented movement of passkeys ND or D to an organization once one exists and also made it possible for org memebers with user roles to move passkeys to an organization. (#5868)

* two step passkey view was outside the conditional (#5872)

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

@@ -2268,5 +2268,26 @@
   },
   "accessDenied": {
     "message": "Access denied. You do not have permission to view this page."
+  },
+  "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"
+  },
+  "passkeyNotCopied": {
+    "message": "Passkey will not be copied"
+  },
+  "passkeyNotCopiedAlert": {
+    "message": "The passkey will not be copied to the cloned item. Do you want to continue cloning this item?"
   }
 }

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

@@ -114,6 +114,16 @@
                 </button>
               </div>
             </div>
+            <!--Passkey-->
+            <div
+              class="box-content-row text-muted"
+              *ngIf="cipher.login.fido2Key && !cloneMode"
+              appBoxRow
+            >
+              <span class="row-label">{{ "typePasskey" | i18n }}</span>
+              {{ "passkeyTwoStepLogin" | i18n }}
+            </div>
+
             <div class="box-content-row" appBoxRow>
               <label for="loginTotp">{{ "authenticatorKeyTotp" | i18n }}</label>
               <input
@@ -448,6 +458,24 @@
               />
             </div>
           </div>
+          <!-- Fido2Key -->
+          <div *ngIf="cipher.type === cipherType.Fido2Key">
+            <div class="box-content-row" appBoxRow>
+              <label for="fido2KeyUsername">{{ "username" | i18n }}</label>
+              <input
+                id="fido2KeyUsername"
+                type="text"
+                name="Fido2Key.Username"
+                [(ngModel)]="cipher.fido2Key.userName"
+                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">
@@ -528,6 +556,24 @@
           </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

@@ -288,7 +288,7 @@ export class VaultComponent implements OnInit, OnDestroy {
             this.editCipher(cipher);
           }),
       });
-      if (!cipher.organizationId) {
+      if (!cipher.organizationId && !cipher.fido2Key?.rpId) {
         menu.push({
           label: this.i18nService.t("clone"),
           click: () =>
@@ -359,6 +359,14 @@ export class VaultComponent implements OnInit, OnDestroy {
           });
         }
         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;
     }

apps/desktop/src/vault/app/vault/view.component.html

@@ -118,6 +118,11 @@
               </button>
             </div>
           </div>
+          <!--Passkey-->
+          <div class="box-content-row text-muted" *ngIf="cipher.login.fido2Key">
+            <span class="row-label">{{ "typePasskey" | i18n }}</span>
+            {{ "passkeyTwoStepLogin" | i18n }}
+          </div>
           <div
             class="box-content-row box-content-row-flex totp"
             [ngClass]="{ low: totpLow }"
@@ -389,6 +394,19 @@
             <div *ngIf="cipher.identity.country">{{ cipher.identity.country }}</div>
           </div>
         </div>
+        <!-- Fido2Key -->
+        <div *ngIf="cipher.type == cipherType.Fido2Key">
+          <div class="box-content-row">
+            <div class="row-main">
+              <span class="row-label">{{ "username" | i18n }}</span>
+              {{ cipher.fido2Key.userName }}
+            </div>
+          </div>
+          <div class="box-content-row">
+            <span class="row-label">{{ "typePasskey" | i18n }}</span>
+            {{ "dateCreated" | i18n }} {{ cipher.creationDate | date : "short" }}
+          </div>
+        </div>
       </div>
     </div>
     <div class="box" *ngIf="cipher.login && cipher.login.hasUris">
@@ -465,6 +483,43 @@
         <div class="box-content-row pre-wrap">{{ cipher.notes }}</div>
       </div>
     </div>
+    <div class="box" *ngIf="cipher.type == cipherType.Fido2Key && 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)"
+              [appA11yTitle]="'launch' | i18n"
+            >
+              <i class="bwi bwi-lg bwi-share-square" aria-hidden="true"></i>
+            </button>
+            <button
+              type="button"
+              class="row-btn"
+              appStopClick
+              [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>
     <app-vault-view-custom-fields
       *ngIf="cipher.hasFields"
       [cipher]="cipher"
@@ -550,7 +605,7 @@
   <button
     type="button"
     class="primary"
-    *ngIf="!cipher?.organizationId && !cipher.isDeleted"
+    *ngIf="!cipher?.organizationId && !cipher.isDeleted && !cipher.fido2Key?.rpId"
     (click)="clone()"
     appA11yTitle="{{ 'clone' | i18n }}"
   >