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

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

@@ -1,11 +1,40 @@
-<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>
+<form [formGroup]="formGroup" [bitSubmit]="submit">
+  <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>
+      <ng-container *ngIf="currentStep === 'userVerification'">
+        <p bitTypography="body1">
+          {{ "passkeyEnterMasterPassword" | i18n }}
+        </p>
+        <bit-form-field disableMargin formGroupName="userVerification">
+          <bit-label>{{ "masterPassword" | i18n }}</bit-label>
+          <input type="password" bitInput formControlName="masterPassword" />
+          <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
+          <bit-hint>{{ "confirmIdentity" | i18n }}</bit-hint>
+        </bit-form-field>
+      </ng-container>
+    </span>
+    <ng-container bitDialogFooter>
+      <button type="submit" bitButton bitFormButton buttonType="primary">
+        <ng-container *ngIf="currentStep === 'userVerification'">
+          {{ "continue" | i18n }}
+        </ng-container>
+        <ng-container *ngIf="currentStep === 'credentialCreation'">
+          {{ "continue" | i18n }}
+        </ng-container>
+        <ng-container *ngIf="currentStep === 'credentialCreationFailed'">
+          {{ "tryAgain" | i18n }}
+        </ng-container>
+        <ng-container *ngIf="currentStep === 'credentialNaming'">
+          {{ "turnOn" | i18n }}
+        </ng-container>
+      </button>
+      <button type="button" bitButton bitFormButton buttonType="secondary">
+        {{ "cancel" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>

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

@@ -1,5 +1,6 @@
-import { DialogConfig } from "@angular/cdk/dialog";
+import { DialogConfig, DialogRef } from "@angular/cdk/dialog";
 import { Component } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
 
 import { DialogService } from "@bitwarden/components";
 
@@ -8,10 +9,66 @@ export enum CreateCredentialDialogResult {
   Canceled,
 }
 
+type Step =
+  | "userVerification"
+  | "credentialCreation"
+  | "credentialCreationFailed"
+  | "credentialNaming";
+
 @Component({
   templateUrl: "create-credential-dialog.component.html",
 })
-export class CreateCredentialDialogComponent {}
+export class CreateCredentialDialogComponent {
+  protected currentStep: Step = "userVerification";
+  protected formGroup = this.formBuilder.group({
+    userVerification: this.formBuilder.group({
+      masterPassword: ["", [Validators.required]],
+    }),
+    credentialNaming: this.formBuilder.group({
+      name: ["", Validators.maxLength(50)],
+    }),
+  });
+
+  constructor(private formBuilder: FormBuilder, private dialogRef: DialogRef) {}
+
+  protected submit = async () => {
+    this.dialogRef.disableClose = true;
+
+    try {
+      if (this.currentStep === "userVerification") {
+        this.formGroup.controls.userVerification.markAllAsTouched();
+        if (this.formGroup.controls.userVerification.invalid) {
+          return;
+        }
+        await this.verifyUser();
+        this.currentStep = "credentialCreation";
+      }
+
+      if (this.currentStep === "credentialCreationFailed") {
+        this.currentStep = "credentialCreation";
+      }
+
+      if (this.currentStep === "credentialCreation") {
+        try {
+          await this.createCredential();
+        } catch {
+          this.currentStep = "credentialCreationFailed";
+        }
+      }
+    } finally {
+      this.dialogRef.disableClose = false;
+    }
+  };
+
+  private async verifyUser() {
+    // Mocked
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+  }
+
+  private async createCredential() {
+    await new Promise((_, reject) => setTimeout(() => reject(new Error("Not implemented")), 1000));
+  }
+}
 
 /**
  * Strongly typed helper to open a CreateCredentialDialog

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

@@ -1,4 +1,5 @@
 import { NgModule } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 
 import { SharedModule } from "../../shared/shared.module";
 
@@ -6,7 +7,7 @@ import { CreateCredentialDialogComponent } from "./create-credential-dialog/crea
 import { Fido2LoginSettingsComponent } from "./fido2-login-settings.component";
 
 @NgModule({
-  imports: [SharedModule],
+  imports: [SharedModule, FormsModule, ReactiveFormsModule],
   declarations: [Fido2LoginSettingsComponent, CreateCredentialDialogComponent],
   exports: [Fido2LoginSettingsComponent],
 })

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

@@ -640,6 +640,12 @@
   "learnMoreAboutPasswordless": {
     "message": "Learn more about passwordless"
   },
+  "passkeyEnterMasterPassword": {
+    "message": "Enter your master password to modify log in with passkey settings."
+  },
+  "tryAgain": {
+    "message": "Try again"
+  },
   "createAccount": {
     "message": "Create account"
   },