[PM-5884] Allow deletion of passkey from edit view - clients (#8500)

* add remove button for passkeys during edit

* added live region to announce when a passkey is removed

* removed announce passkey removed by SR

* removed unused variable

apps/browser/src/_locales/en/messages.json

@@ -2999,5 +2999,11 @@
   "saveCipherAttemptFailed": {
     "message": "Error saving credentials. Check console for details.",
     "description": "Notification message for when saving credentials has failed."
+  },
+  "removePasskey": {
+    "message": "Remove passkey"
+  },
+  "passkeyRemoved": {
+    "message": "Passkey removed"
   }
 }

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

@@ -138,10 +138,20 @@
             attr.aria-label="{{ 'typePasskey' | i18n }} {{ fido2CredentialCreationDateValue }}"
           >
             <div class="box-content">
-              <div class="box-content-row text-muted">
+              <div class="box-content-row box-content-row-multi text-muted" appBoxRow>
-                <span class="row-label">{{ "typePasskey" | i18n }}</span>
+                <button
-                {{ "dateCreated" | i18n }}
+                  type="button"
-                {{ cipher.login.fido2Credentials[0].creationDate | date: "short" }}
+                  appStopClick
+                  (click)="removePasskey()"
+                  appA11yTitle="{{ 'removePasskey' | i18n }}"
+                >
+                  <i class="bwi bwi-fw bwi-minus-circle bwi-lg" aria-hidden="true"></i>
+                </button>
+                <div class="row-main">
+                  <span class="row-label">{{ "typePasskey" | i18n }}</span>
+                  {{ "dateCreated" | i18n }}
+                  {{ cipher.login.fido2Credentials[0].creationDate | date: "short" }}
+                </div>
               </div>
             </div>
           </div>

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

@@ -2696,5 +2696,11 @@
   },
   "enableHardwareAccelerationRestart": {
     "message": "Enable hardware acceleration and restart"
+  },
+  "removePasskey": {
+    "message": "Remove passkey"
+  },
+  "passkeyRemoved": {
+    "message": "Passkey removed"
   }
 }

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

@@ -116,14 +116,25 @@
             </div>
             <!--Passkey-->
             <div
-              class="box-content-row text-muted"
+              class="box-content-row box-content-row-multi text-muted"
               *ngIf="cipher.login.hasFido2Credentials && !cloneMode"
               appBoxRow
               tabindex="0"
               attr.aria-label="{{ 'typePasskey' | i18n }} {{ fido2CredentialCreationDateValue }}"
             >
-              <span class="row-label">{{ "typePasskey" | i18n }}</span>
+              <button
-              {{ fido2CredentialCreationDateValue }}
+                type="button"
+                appStopClick
+                (click)="removePasskey()"
+                appA11yTitle="{{ 'removePasskey' | i18n }}"
+                [disabled]="!cipher.edit && editMode"
+              >
+                <i class="bwi bwi-fw bwi-minus-circle bwi-lg" aria-hidden="true"></i>
+              </button>
+              <div class="row-main">
+                <span class="row-label">{{ "typePasskey" | i18n }}</span>
+                {{ fido2CredentialCreationDateValue }}
+              </div>
             </div>
 
             <div class="box-content-row" appBoxRow>

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

@@ -192,11 +192,11 @@
             </div>
           </div>
           <ng-container *ngIf="cipher.login.hasFido2Credentials">
-            <div class="row">
+            <div class="tw-flex tw-flex-row">
-              <div class="col-6 form-group">
+              <div class="tw-mb-4 tw-w-1/2">
                 <label for="loginFido2credential">{{ "typePasskey" | i18n }}</label>
                 <div
-                  class="input-group"
+                  class="tw-flex tw-flex-row"
                   tabindex="0"
                   attr.aria-label="{{ 'typePasskey' | i18n }} {{
                     fido2CredentialCreationDateValue
@@ -212,6 +212,15 @@
                     disabled
                     readonly
                   />
+                  <button
+                    type="button"
+                    class="tw-items-center tw-border-none tw-bg-transparent tw-text-danger tw-ml-3"
+                    appA11yTitle="{{ 'removePasskey' | i18n }}"
+                    (click)="removePasskey()"
+                    *ngIf="!cipher.isDeleted && !viewOnly"
+                  >
+                    <i class="bwi bwi-lg bwi-minus-circle"></i>
+                  </button>
                 </div>
               </div>
             </div>

libs/angular/src/vault/components/add-edit.component.ts

@@ -402,6 +402,14 @@ export class AddEditComponent implements OnInit, OnDestroy {
     }
   }
 
+  removePasskey() {
+    if (this.cipher.type !== CipherType.Login || this.cipher.login.fido2Credentials == null) {
+      return;
+    }
+
+    this.cipher.login.fido2Credentials = null;
+  }
+
   onCardNumberChange(): void {
     this.cipher.card.brand = CardView.getCardBrandByPatterns(this.cipher.card.number);
   }