From 2042b3a26c04c0abf9b5862a4f925164f4f8d947 Mon Sep 17 00:00:00 2001
From: Ike <137194738+ike-kottlowski@users.noreply.github.com>
Date: Thu, 27 Jun 2024 12:38:10 -0700
Subject: [PATCH] [PM-8938] two factor settings authenticator validation
 (#9857)

* add validation

* minor adjustments

* better useability on submit button

* removed img

* fixed formatting
---
 .../two-factor-authenticator.component.html   | 21 +++++++++++--------
 .../two-factor-authenticator.component.ts     | 14 ++++++++++---
 .../settings/two-factor-base.component.ts     |  1 +
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/app/auth/settings/two-factor-authenticator.component.html b/apps/web/src/app/auth/settings/two-factor-authenticator.component.html
index e796fd39a8e..f7ea36e02d4 100644
--- a/apps/web/src/app/auth/settings/two-factor-authenticator.component.html
+++ b/apps/web/src/app/auth/settings/two-factor-authenticator.component.html
@@ -10,7 +10,6 @@
           <p bitTypography="body1">{{ "twoStepLoginProviderEnabled" | i18n }}</p>
           {{ "twoStepAuthenticatorReaddDesc" | i18n }}
         </bit-callout>
-        <img class="float-right mfaType0" alt="Authenticator app logo" />
         <p bitTypography="body1">{{ "twoStepAuthenticatorNeedApp" | i18n }}</p>
       </ng-container>
       <ng-container *ngIf="!enabled">
@@ -72,19 +71,23 @@
         {{ "twoStepAuthenticatorScanCodeV2" | i18n }}
       </ng-container>
       <hr *ngIf="enabled" />
-      <p class="text-center" [ngClass]="{ 'mb-0': enabled }">
+      <p class="tw-text-center tw-mb-0">
         <canvas id="qr"></canvas><br />
         <code appA11yTitle="{{ 'key' | i18n }}">{{ key }}</code>
       </p>
-      <ng-container *ngIf="!enabled">
-        <bit-form-field>
-          <bit-label>{{ "twoStepAuthenticatorEnterCodeV2" | i18n }}</bit-label>
-          <input bitInput type="text" formControlName="token" appInputVerbatim />
-        </bit-form-field>
-      </ng-container>
+      <bit-form-field *ngIf="!enabled" [disableMargin]="true">
+        <bit-label>{{ "twoStepAuthenticatorEnterCodeV2" | i18n }}</bit-label>
+        <input bitInput type="text" formControlName="token" appInputVerbatim />
+      </bit-form-field>
     </ng-container>
     <ng-container bitDialogFooter>
-      <button bitButton bitFormButton type="submit" buttonType="primary">
+      <button
+        bitButton
+        bitFormButton
+        type="submit"
+        buttonType="primary"
+        (click)="validateTokenControl()"
+      >
         {{ (enabled ? "disable" : "enable") | i18n }}
       </button>
       <button bitButton bitFormButton type="button" buttonType="secondary" [bitAction]="close">
diff --git a/apps/web/src/app/auth/settings/two-factor-authenticator.component.ts b/apps/web/src/app/auth/settings/two-factor-authenticator.component.ts
index 0a53f0f3c6a..68706105313 100644
--- a/apps/web/src/app/auth/settings/two-factor-authenticator.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-authenticator.component.ts
@@ -1,6 +1,6 @@
 import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
 import { Component, EventEmitter, Inject, OnDestroy, OnInit, Output } from "@angular/core";
-import { FormControl, FormGroup, Validators } from "@angular/forms";
+import { FormBuilder, FormControl, Validators } from "@angular/forms";
 import { firstValueFrom, map } from "rxjs";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -48,8 +48,8 @@ export class TwoFactorAuthenticatorComponent
   override componentName = "app-two-factor-authenticator";
   private qrScript: HTMLScriptElement;
 
-  protected formGroup = new FormGroup({
-    token: new FormControl(null, [Validators.required]),
+  formGroup = this.formBuilder.group({
+    token: new FormControl(null, [Validators.required, Validators.minLength(6)]),
   });
 
   constructor(
@@ -58,6 +58,7 @@ export class TwoFactorAuthenticatorComponent
     apiService: ApiService,
     i18nService: I18nService,
     userVerificationService: UserVerificationService,
+    private formBuilder: FormBuilder,
     platformUtilsService: PlatformUtilsService,
     logService: LogService,
     private accountService: AccountService,
@@ -85,12 +86,19 @@ export class TwoFactorAuthenticatorComponent
     window.document.body.removeChild(this.qrScript);
   }
 
+  validateTokenControl() {
+    this.formGroup.controls.token.markAsTouched();
+  }
+
   auth(authResponse: AuthResponse<TwoFactorAuthenticatorResponse>) {
     super.auth(authResponse);
     return this.processResponse(authResponse.response);
   }
 
   submit = async () => {
+    if (this.formGroup.invalid && !this.enabled) {
+      return;
+    }
     if (this.enabled) {
       await this.disableAuthentication(this.formPromise);
       this.onChangeStatus.emit(this.enabled);
diff --git a/apps/web/src/app/auth/settings/two-factor-base.component.ts b/apps/web/src/app/auth/settings/two-factor-base.component.ts
index ac8906641dd..f909f83e78a 100644
--- a/apps/web/src/app/auth/settings/two-factor-base.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-base.component.ts
@@ -48,6 +48,7 @@ export abstract class TwoFactorBaseComponent {
       this.onUpdated.emit(true);
     } catch (e) {
       this.logService.error(e);
+      throw e;
     }
   }