[PM-4690] Setting in the browser extension that turns off passkeys (#6929)

* use passkeys setting

* check state service on isFido2FeatureEnabled

* fix broken json

* update description text

* make setting global

* invert logic to positive state

* fix and add to fido2 client service tests

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

@@ -657,6 +657,12 @@
   "changedPasswordNotificationDescAlt": {
     "message": "Ask to update a login's password when a change is detected on a website. Applies to all logged in accounts."
   },
+  "enableUsePasskeys": {
+    "message": "Ask to save and use passkeys"
+  },
+  "usePasskeysDesc": {
+    "message": "Ask to save new passkeys or log in with passkeys stored in your vault. Applies to all logged in accounts."
+  },
   "notificationChangeDesc": {
     "message": "Do you want to update this password in Bitwarden?"
   },

apps/browser/src/popup/settings/options.component.html

@@ -104,6 +104,23 @@
         }}
       </div>
     </div>
+    <div class="box">
+      <div class="box-content">
+        <div class="box-content-row box-content-row-checkbox" appBoxRow>
+          <label for="use-passkeys">{{ "enableUsePasskeys" | i18n }}</label>
+          <input
+            id="use-passkeys"
+            type="checkbox"
+            aria-describedby="use-passkeysHelp"
+            (change)="updateEnablePasskeys()"
+            [(ngModel)]="enablePasskeys"
+          />
+        </div>
+      </div>
+      <div id="use-passkeysHelp" class="box-footer">
+        {{ "usePasskeysDesc" | i18n }}
+      </div>
+    </div>
     <div class="box">
       <div class="box-content">
         <div class="box-content-row box-content-row-checkbox" appBoxRow>

apps/browser/src/popup/settings/options.component.ts

@@ -24,6 +24,7 @@ export class OptionsComponent implements OnInit {
   enableContextMenuItem = false;
   enableAddLoginNotification = false;
   enableChangedPasswordNotification = false;
+  enablePasskeys = true;
   showCardsCurrentTab = false;
   showIdentitiesCurrentTab = false;
   showClearClipboard = true;
@@ -100,6 +101,8 @@ export class OptionsComponent implements OnInit {
 
     this.enableBadgeCounter = !(await this.stateService.getDisableBadgeCounter());
 
+    this.enablePasskeys = await this.stateService.getEnablePasskeys();
+
     this.theme = await this.stateService.getTheme();
 
     const defaultUriMatch = await this.stateService.getDefaultUriMatch();
@@ -118,6 +121,10 @@ export class OptionsComponent implements OnInit {
     );
   }
 
+  async updateEnablePasskeys() {
+    await this.stateService.setEnablePasskeys(this.enablePasskeys);
+  }
+
   async updateContextMenuItem() {
     await this.stateService.setDisableContextMenuItem(!this.enableContextMenuItem);
     this.messagingService.send("bgUpdateContextMenu");