[PM-2014] feat: create new dialog

apps/web/src/app/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.html

@@ -0,0 +1,11 @@
+<bit-dialog dialogSize="large">
+  <span bitDialogTitle
+    >{{ "loginWithPasskey" | i18n }}
+    <span class="tw-text-sm tw-normal-case tw-text-muted">{{ "newPasskey" | i18n }}</span>
+  </span>
+  <span bitDialogContent>Enter you master password here</span>
+  <ng-container bitDialogFooter>
+    <button type="button" bitButton buttonType="primary">Continue</button>
+    <button type="button" bitButton buttonType="secondary">Cancel</button>
+  </ng-container>
+</bit-dialog>

apps/web/src/app/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.ts

@@ -0,0 +1,29 @@
+import { DialogConfig } from "@angular/cdk/dialog";
+import { Component } from "@angular/core";
+
+import { DialogService } from "@bitwarden/components";
+
+export enum CreateCredentialDialogResult {
+  Success,
+  Canceled,
+}
+
+@Component({
+  templateUrl: "create-credential-dialog.component.html",
+})
+export class CreateCredentialDialogComponent {}
+
+/**
+ * Strongly typed helper to open a CreateCredentialDialog
+ * @param dialogService Instance of the dialog service that will be used to open the dialog
+ * @param config Configuration for the dialog
+ */
+export const openCreateCredentialDialog = (
+  dialogService: DialogService,
+  config: DialogConfig<unknown>
+) => {
+  return dialogService.open<CreateCredentialDialogResult, unknown>(
+    CreateCredentialDialogComponent,
+    config
+  );
+};

apps/web/src/app/settings/fido2-login-settings/fido2-login-settings.component.html

@@ -6,6 +6,11 @@
   <a bitLink href="???">{{ "learnMoreAboutPasswordless" | i18n }}</a>
 </p>
 
-<button type="button" bitButton [attr.aria-label]="'enableLoginWithPasskey' | i18n">
+<button
+  type="button"
+  bitButton
+  [attr.aria-label]="'enableLoginWithPasskey' | i18n"
+  (click)="createCredential()"
+>
   {{ "enable" | i18n }}
 </button>

apps/web/src/app/settings/fido2-login-settings/fido2-login-settings.component.ts

@@ -1,7 +1,27 @@
 import { Component } from "@angular/core";
+import { firstValueFrom } from "rxjs";
+
+import { DialogService } from "@bitwarden/components";
+
+import {
+  CreateCredentialDialogResult,
+  openCreateCredentialDialog,
+} from "./create-credential-dialog/create-credential-dialog.component";
 
 @Component({
   selector: "app-fido2-login-settings",
   templateUrl: "fido2-login-settings.component.html",
 })
-export class Fido2LoginSettingsComponent {}
+export class Fido2LoginSettingsComponent {
+  constructor(private dialogService: DialogService) {}
+
+  protected async createCredential() {
+    const dialogRef = openCreateCredentialDialog(this.dialogService, {});
+
+    const result = await firstValueFrom(dialogRef.closed);
+
+    if (result === CreateCredentialDialogResult.Success) {
+      /** Refresh */
+    }
+  }
+}

apps/web/src/app/settings/fido2-login-settings/fido2-login-settings.module.ts

@@ -1,12 +1,13 @@
 import { NgModule } from "@angular/core";
 
-import { SharedModule } from "../../shared";
+import { SharedModule } from "../../shared/shared.module";
 
+import { CreateCredentialDialogComponent } from "./create-credential-dialog/create-credential-dialog.component";
 import { Fido2LoginSettingsComponent } from "./fido2-login-settings.component";
 
 @NgModule({
   imports: [SharedModule],
-  declarations: [Fido2LoginSettingsComponent],
+  declarations: [Fido2LoginSettingsComponent, CreateCredentialDialogComponent],
   exports: [Fido2LoginSettingsComponent],
 })
 export class Fido2LoginSettingsModule {}

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

@@ -634,6 +634,9 @@
   "enableLoginWithPasskey": {
     "message": "Turn on log in with passkey"
   },
+  "newPasskey": {
+    "message": "New passkey"
+  },
   "learnMoreAboutPasswordless": {
     "message": "Learn more about passwordless"
   },