Merge f1d195605c into b4c8bdf468

apps/web/src/app/auth/settings/two-factor-setup.component.ts

@@ -42,8 +42,6 @@ export class TwoFactorSetupComponent implements OnInit, OnDestroy {
   @ViewChild("duoTemplate", { read: ViewContainerRef, static: true }) duoModalRef: ViewContainerRef;
   @ViewChild("emailTemplate", { read: ViewContainerRef, static: true })
   emailModalRef: ViewContainerRef;
-  @ViewChild("webAuthnTemplate", { read: ViewContainerRef, static: true })
-  webAuthnModalRef: ViewContainerRef;
 
   organizationId: string;
   organization: Organization;
@@ -193,14 +191,11 @@ export class TwoFactorSetupComponent implements OnInit, OnDestroy {
         if (!result) {
           return;
         }
-        const webAuthnComp = await this.openModal(
-          this.webAuthnModalRef,
-          TwoFactorWebAuthnComponent,
-        );
-        webAuthnComp.auth(result);
-        webAuthnComp.onUpdated.pipe(takeUntil(this.destroy$)).subscribe((enabled: boolean) => {
-          this.updateStatus(enabled, TwoFactorProviderType.WebAuthn);
-        });
+        const webAuthnComp = TwoFactorWebAuthnComponent.open(this.dialogService, { data: result });
+        const response: boolean = await lastValueFrom(webAuthnComp.closed);
+        if (response !== null) {
+          this.updateStatus(response, TwoFactorProviderType.WebAuthn);
+        }
         break;
       }
       default:

apps/web/src/app/auth/settings/two-factor-webauthn.component.html

@@ -1,152 +1,118 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="2faU2fTitle">
-  <div class="modal-dialog modal-lg" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h1 class="modal-title" id="2faU2fTitle">
-          {{ "twoStepLogin" | i18n }}
-          <small>{{ "webAuthnTitle" | i18n }}</small>
-        </h1>
-        <button
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          appA11yTitle="{{ 'close' | i18n }}"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <form
-        #form
-        (ngSubmit)="submit()"
-        [appApiAction]="formPromise"
-        ngNativeValidate
-        *ngIf="authed"
+<form *ngIf="authed" [formGroup]="formGroup" [bitSubmit]="submit">
+  <bit-dialog dialogSize="large">
+    <span bitDialogTitle>
+      {{ "twoStepLogin" | i18n }}
+      <span bitTypography="body1">{{ "webAuthnTitle" | i18n }}</span>
+    </span>
+    <ng-container bitDialogContent>
+      <app-callout
+        type="success"
+        title="{{ 'enabled' | i18n }}"
+        icon="bwi bwi-check-circle"
+        *ngIf="enabled"
       >
-        <div class="modal-body">
-          <app-callout
-            type="success"
-            title="{{ 'enabled' | i18n }}"
-            icon="bwi bwi-check-circle"
-            *ngIf="enabled"
-          >
-            {{ "twoStepLoginProviderEnabled" | i18n }}
-          </app-callout>
-          <app-callout type="warning">
-            <p>{{ "twoFactorWebAuthnWarning" | i18n }}</p>
-            <ul class="mb-0">
-              <li>{{ "twoFactorWebAuthnSupportWeb" | i18n }}</li>
-            </ul>
-          </app-callout>
-          <img class="float-right ml-5 mfaType7" alt="FIDO2 WebAuthn logo'" />
-          <ul class="bwi-ul">
-            <li
-              *ngFor="let k of keys; let i = index"
-              #removeKeyBtn
-              [appApiAction]="k.removePromise"
-            >
-              <i class="bwi bwi-li bwi-key"></i>
-              <strong *ngIf="!k.configured || !k.name">{{ "webAuthnkeyX" | i18n: i + 1 }}</strong>
-              <strong *ngIf="k.configured && k.name">{{ k.name }}</strong>
-              <ng-container *ngIf="k.configured && !$any(removeKeyBtn).loading">
-                <ng-container *ngIf="k.migrated">
-                  <span>{{ "webAuthnMigrated" | i18n }}</span>
-                </ng-container>
-              </ng-container>
-              <ng-container *ngIf="keysConfiguredCount > 1 && k.configured">
-                <i
-                  class="bwi bwi-spin bwi-spinner text-muted bwi-fw"
-                  title="{{ 'loading' | i18n }}"
-                  *ngIf="$any(removeKeyBtn).loading"
-                  aria-hidden="true"
-                ></i>
-                -
-                <a href="#" appStopClick (click)="remove(k)">{{ "remove" | i18n }}</a>
-              </ng-container>
-            </li>
-          </ul>
-          <hr />
-          <p>{{ "twoFactorWebAuthnAdd" | i18n }}:</p>
-          <ol>
-            <li>{{ "twoFactorU2fGiveName" | i18n }}</li>
-            <li>{{ "twoFactorU2fPlugInReadKey" | i18n }}</li>
-            <li>{{ "twoFactorU2fTouchButton" | i18n }}</li>
-            <li>{{ "twoFactorU2fSaveForm" | i18n }}</li>
-          </ol>
-          <div class="row">
-            <div class="form-group col-6">
-              <label for="name">{{ "name" | i18n }}</label>
-              <input
-                id="name"
-                type="text"
-                name="Name"
-                class="form-control"
-                [(ngModel)]="name"
-                [disabled]="!keyIdAvailable"
-              />
-            </div>
-          </div>
-          <button
-            type="button"
-            (click)="readKey()"
-            class="btn btn-outline-secondary mr-2"
-            [disabled]="$any(readKeyBtn).loading || webAuthnListening || !keyIdAvailable"
-            #readKeyBtn
-            [appApiAction]="challengePromise"
-          >
-            {{ "readKey" | i18n }}
-          </button>
-          <ng-container *ngIf="$any(readKeyBtn).loading">
-            <i class="bwi bwi-spinner bwi-spin text-muted" aria-hidden="true"></i>
-          </ng-container>
-          <ng-container *ngIf="!$any(readKeyBtn).loading">
-            <ng-container *ngIf="webAuthnListening">
-              <i class="bwi bwi-spinner bwi-spin text-muted" aria-hidden="true"></i>
-              {{ "twoFactorU2fWaiting" | i18n }}...
-            </ng-container>
-            <ng-container *ngIf="webAuthnResponse">
-              <i class="bwi bwi-check-circle text-success" aria-hidden="true"></i>
-              {{ "twoFactorU2fClickSave" | i18n }}
-            </ng-container>
-            <ng-container *ngIf="webAuthnError">
-              <i class="bwi bwi-exclamation-triangle text-danger" aria-hidden="true"></i>
-              {{ "twoFactorU2fProblemReadingTryAgain" | i18n }}
+        {{ "twoStepLoginProviderEnabled" | i18n }}
+      </app-callout>
+      <app-callout type="warning">
+        <p bitTypography="body1">{{ "twoFactorWebAuthnWarning" | i18n }}</p>
+        <ul class="tw-mb-0">
+          <li>{{ "twoFactorWebAuthnSupportWeb" | i18n }}</li>
+        </ul>
+      </app-callout>
+      <img class="tw-float-right tw-ml-5 mfaType7" alt="FIDO2 WebAuthn logo'" />
+      <ul class="bwi-ul">
+        <li *ngFor="let k of keys; let i = index" #removeKeyBtn [appApiAction]="k.removePromise">
+          <i class="bwi bwi-li bwi-key"></i>
+          <p *ngIf="!k.configured || !k.name" bitTypography="body1" class="tw-font-bold">
+            {{ "webAuthnkeyX" | i18n: i + 1 }}
+          </p>
+          <p *ngIf="k.configured && k.name" bitTypography="body1" class="tw-font-bold">
+            {{ k.name }}
+          </p>
+          <ng-container *ngIf="k.configured && !$any(removeKeyBtn).loading">
+            <ng-container *ngIf="k.migrated">
+              <span>{{ "webAuthnMigrated" | i18n }}</span>
             </ng-container>
           </ng-container>
-        </div>
-        <div class="modal-footer">
-          <button
-            type="submit"
-            class="btn btn-primary"
-            [disabled]="form.loading || !webAuthnResponse"
-          >
+          <ng-container *ngIf="keysConfiguredCount > 1 && k.configured">
             <i
-              class="bwi bwi-spinner bwi-spin"
-              *ngIf="form.loading"
+              class="bwi bwi-spin bwi-spinner text-muted bwi-fw"
               title="{{ 'loading' | i18n }}"
+              *ngIf="$any(removeKeyBtn).loading"
               aria-hidden="true"
             ></i>
-            <span *ngIf="!form.loading">{{ "save" | i18n }}</span>
-          </button>
-          <button
-            #disableBtn
-            type="button"
-            class="btn btn-outline-secondary btn-submit"
-            [disabled]="$any(disableBtn).loading"
-            (click)="disable()"
-            *ngIf="enabled"
-          >
-            <i
-              class="bwi bwi-spinner bwi-spin"
-              title="{{ 'loading' | i18n }}"
-              aria-hidden="true"
-            ></i>
-            <span>{{ "disableAllKeys" | i18n }}</span>
-          </button>
-          <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-            {{ "close" | i18n }}
-          </button>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
+            -
+            <a href="#" appStopClick (click)="remove(k)">{{ "remove" | i18n }}</a>
+          </ng-container>
+        </li>
+      </ul>
+      <hr />
+      <p bitTypography="body1">{{ "twoFactorWebAuthnAdd" | i18n }}:</p>
+      <ol bitTypography="body1">
+        <li>{{ "twoFactorU2fGiveName" | i18n }}</li>
+        <li>{{ "twoFactorU2fPlugInReadKey" | i18n }}</li>
+        <li>{{ "twoFactorU2fTouchButton" | i18n }}</li>
+        <li>{{ "twoFactorU2fSaveForm" | i18n }}</li>
+      </ol>
+      <div class="tw-flex tw-flex-row">
+        <bit-form-field class="tw-basis-1/2">
+          <bit-label>{{ "name" | i18n }}</bit-label>
+          <input bitInput type="text" formControlName="name" />
+        </bit-form-field>
+      </div>
+      <button
+        bitButton
+        bitFornButton
+        type="button"
+        [bitAction]="readKey"
+        buttonType="secondary"
+        [disabled]="$any(readKeyBtn).loading || webAuthnListening || !keyIdAvailable"
+        #readKeyBtn
+      >
+        {{ "readKey" | i18n }}
+      </button>
+      <ng-container *ngIf="$any(readKeyBtn).loading">
+        <i class="bwi bwi-spinner bwi-spin tw-text-muted" aria-hidden="true"></i>
+      </ng-container>
+      <ng-container *ngIf="!$any(readKeyBtn).loading">
+        <ng-container *ngIf="webAuthnListening">
+          <i class="bwi bwi-spinner bwi-spin tw-text-muted" aria-hidden="true"></i>
+          {{ "twoFactorU2fWaiting" | i18n }}...
+        </ng-container>
+        <ng-container *ngIf="webAuthnResponse">
+          <i class="bwi bwi-check-circle tw-text-success" aria-hidden="true"></i>
+          {{ "twoFactorU2fClickSave" | i18n }}
+        </ng-container>
+        <ng-container *ngIf="webAuthnError">
+          <i class="bwi bwi-exclamation-triangle tw-text-danger" aria-hidden="true"></i>
+          {{ "twoFactorU2fProblemReadingTryAgain" | i18n }}
+        </ng-container>
+      </ng-container>
+    </ng-container>
+    <ng-container bitDialogFooter>
+      <button
+        bitButton
+        bitFormButton
+        type="submit"
+        buttonType="primary"
+        [disabled]="!webAuthnResponse"
+      >
+        {{ "save" | i18n }}
+      </button>
+      <button
+        #disableBtn
+        bitButton
+        bitFormButton
+        *ngIf="enabled"
+        type="button"
+        buttonType="secondary"
+        [bitAction]="disable"
+      >
+        {{ "disableAllKeys" | i18n }}
+      </button>
+      <button bitButton bitFormButton type="button" buttonType="secondary" (click)="onClose()">
+        {{ "close" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>

apps/web/src/app/auth/settings/two-factor-webauthn.component.ts

@@ -1,4 +1,6 @@
-import { Component, NgZone } from "@angular/core";
+import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
+import { Component, Inject, NgZone } from "@angular/core";
+import { FormControl, FormGroup } from "@angular/forms";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
@@ -44,7 +46,13 @@ export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent {
 
   override componentName = "app-two-factor-webauthn";
 
+  protected formGroup = new FormGroup({
+    name: new FormControl({ value: "", disabled: !this.keyIdAvailable }),
+  });
+
   constructor(
+    @Inject(DIALOG_DATA) protected data: AuthResponse<TwoFactorWebAuthnResponse>,
+    private dialogRef: DialogRef,
     apiService: ApiService,
     i18nService: I18nService,
     platformUtilsService: PlatformUtilsService,
@@ -61,6 +69,7 @@ export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent {
       userVerificationService,
       dialogService,
     );
+    this.auth(data);
   }
 
   auth(authResponse: AuthResponse<TwoFactorWebAuthnResponse>) {
@@ -76,16 +85,24 @@ export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent {
     const request = await this.buildRequestModel(UpdateTwoFactorWebAuthnRequest);
     request.deviceResponse = this.webAuthnResponse;
     request.id = this.keyIdAvailable;
-    request.name = this.name;
+    request.name = this.formGroup.value.name;
 
+    return this.enableWebAuth(request);
+  }
+
+  private enableWebAuth(request: any) {
     return super.enable(async () => {
       this.formPromise = this.apiService.putTwoFactorWebAuthn(request);
       const response = await this.formPromise;
-      await this.processResponse(response);
+      this.processResponse(response);
     });
   }
 
-  disable() {
+  disable = () => {
+    return this.disableWebAuth();
+  };
+
+  private disableWebAuth() {
     return super.disable(this.formPromise);
   }
 
@@ -116,19 +133,15 @@ export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent {
     }
   }
 
-  async readKey() {
+  readKey = async () => {
     if (this.keyIdAvailable == null) {
       return;
     }
     const request = await this.buildRequestModel(SecretVerificationRequest);
-    try {
-      this.challengePromise = this.apiService.getTwoFactorWebAuthnChallenge(request);
-      const challenge = await this.challengePromise;
-      this.readDevice(challenge);
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
+    this.challengePromise = this.apiService.getTwoFactorWebAuthnChallenge(request);
+    const challenge = await this.challengePromise;
+    this.readDevice(challenge);
+  };
 
   private readDevice(webAuthnChallenge: ChallengeResponse) {
     // eslint-disable-next-line
@@ -164,7 +177,8 @@ export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent {
     this.resetWebAuthn();
     this.keys = [];
     this.keyIdAvailable = null;
-    this.name = null;
+    this.formGroup.get("name").enable();
+    this.formGroup.get("name").setValue(null);
     this.keysConfiguredCount = 0;
     for (let i = 1; i <= 5; i++) {
       if (response.keys != null) {
@@ -188,4 +202,15 @@ export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent {
     }
     this.enabled = response.enabled;
   }
+
+  onClose() {
+    this.dialogRef.close(this.enabled);
+  }
+
+  static open(
+    dialogService: DialogService,
+    config: DialogConfig<AuthResponse<TwoFactorWebAuthnResponse>>,
+  ) {
+    return dialogService.open<boolean>(TwoFactorWebAuthnComponent, config);
+  }
 }