[PM-2014] Passkey registration (#5396)

* [PM-2014] feat: scaffold new fido2 login component and module

* [PM-1024] feat: add content to login settings component

* [PM-1024] feat: add badge and button aria label

* [PM-2014] feat: create new dialog

* feat: add ability to remove form field bottom margin

(cherry picked from commit 05925ff77ed47f3865c2aecade8271390d9e2fa6)

* [PM-2014] feat: disable dialog close button

* [PM-2014] feat: implement mocked failing wizard flow

* [PM-2014] feat: add icons and other content

* [PM-2014] feat: change wording to "creating" password

* [PM-2014] feat: add new auth and auth core modules

* [PM-2014] chore: move fido2-login-settings to auth module

* [PM-2014] chore: expose using barrel files

* [PM-2014] feat: fetch webauthn challenge

* [PM-2014] chore: refactor api logic into new api service and move ui logic into existing service

* [PM-2014] feat: add tests for new credential options

* [PM-2014] feat: return undefined when credential creation fails

* [PM-2014] feat: implement credential creation

* [PM-2014] feat: add passkey naming ui

* [PM-2014] feat: add support for creation token

* [PM-2014] feat: implement credential saving

* [PM-2014] feat: Basic list of credentials

* [PM-2014] feat: improve async data loading

* [PM-2014] feat: finish up list UI

* [PM-2014] fix: loading state not being set properly

* [PM-2014] feat: improve aria labels

* [PM-2014] feat: show toast on passkey saved

* [PM-2014] feat: add delete dialog

* [PM-2014] feat: implement deletion without user verification

* [PM-2014] feat: add user verification to delete

* [PM-2014] feat: change to danger button

* [PM-2014] feat: show `save` if passkeys already exist

* [PM-2014] feat: add passkey limit

* [PM-2014] feat: improve error on delete

* [PM-2014] feat: add support for feature flag

* [PM-2014] feat: update copy

* [PM-2014] feat: reduce remove button margin

* [PM-2014] feat: refactor submit method

* [PM-2014] feat: autofocus fields

* [PM-2014] fix: move error handling to components

After discussing it with Jake we decided that following convention was best.

* [PM-2014] feat: change toast depending on existing passkeys

* [PM-2014] chore: rename everything from `fido2` to `webauthn`

* [PM-2014] fix: `CoreAuthModule` duplicate import

* [PM-2014] feat: change to new figma design `Encryption not supported`

* [PM-2014] fix: add missing href

* [PM-2014] fix: misaligned badge

* [PM-2014] chore: remove whitespace

* [PM-2014] fix: dialog close bug

* [PM-2014] fix: badge alignment not applying properly

* [PM-2014] fix: remove redundant align class

* [PM-2014] chore: move CoreAuthModule to AuthModule

* [PM-2014] feat: create new settings module

* [PM-2014] feat: move change password component to settings module

* [PM-2014] chore: tweak loose components recommendation

* [PM-2014] fix: remove deprecated pattern

* [PM-2014] chore: rename everything to `WebauthnLogin` to follow new naming scheme

* [PM-2014] chore: document requests and responses

* [PM-2014] fix: remove `undefined`

* [PM-2014] fix: clarify webauthn login service

* [PM-2014] fix: use `getCredentials$()`

* [PM-2014] fix: badge alignment using important statement

* [PM-2014] fix: remove sm billing flag

* [PM-2014] fix: `CoreAuthModule` double import

* [PM-2014] fix: unimported component (issue due to conflict with master)

* [PM-2014] fix: unawaited promise bug

apps/web/src/app/auth/settings/change-password.component.ts

@@ -1,6 +1,6 @@
 import { Component } from "@angular/core";
 import { Router } from "@angular/router";
-import { firstValueFrom } from "rxjs";
+import { firstValueFrom, Observable } from "rxjs";
 
 import { ChangePasswordComponent as BaseChangePasswordComponent } from "@bitwarden/angular/auth/components/change-password.component";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -11,12 +11,13 @@ import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-conso
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { DeviceTrustCryptoServiceAbstraction } from "@bitwarden/common/auth/abstractions/device-trust-crypto.service.abstraction";
-import { KeyConnectorService } from "@bitwarden/common/auth/abstractions/key-connector.service";
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { EmergencyAccessStatusType } from "@bitwarden/common/auth/enums/emergency-access-status-type";
 import { EmergencyAccessUpdateRequest } from "@bitwarden/common/auth/models/request/emergency-access-update.request";
 import { PasswordRequest } from "@bitwarden/common/auth/models/request/password.request";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { UpdateKeyRequest } from "@bitwarden/common/models/request/update-key.request";
+import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
@@ -50,6 +51,8 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
   checkForBreaches = true;
   characterMinimumMessage = "";
 
+  protected showWebauthnLoginSettings$: Observable<boolean>;
+
   constructor(
     i18nService: I18nService,
     cryptoService: CryptoService,
@@ -65,13 +68,13 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
     private apiService: ApiService,
     private sendService: SendService,
     private organizationService: OrganizationService,
-    private keyConnectorService: KeyConnectorService,
     private router: Router,
     private organizationApiService: OrganizationApiServiceAbstraction,
     private organizationUserService: OrganizationUserService,
     dialogService: DialogService,
     private userVerificationService: UserVerificationService,
-    private deviceTrustCryptoService: DeviceTrustCryptoServiceAbstraction
+    private deviceTrustCryptoService: DeviceTrustCryptoServiceAbstraction,
+    private configService: ConfigServiceAbstraction
   ) {
     super(
       i18nService,
@@ -86,6 +89,10 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
   }
 
   async ngOnInit() {
+    this.showWebauthnLoginSettings$ = this.configService.getFeatureFlag$(
+      FeatureFlag.PasswordlessLogin
+    );
+
     if (!(await this.userVerificationService.hasMasterPassword())) {
       this.router.navigate(["/settings/security/two-factor"]);
     }