[PM-8938] two factor settings authenticator validation (#9857)

* add validation

* minor adjustments

* better useability on submit button

* removed img

* fixed formatting

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">

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);

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;
     }
   }