From e626233121d66397239a7185fcee0edd2f36a7e5 Mon Sep 17 00:00:00 2001
From: Jared Snider <jsnider@bitwarden.com>
Date: Thu, 23 Jan 2025 17:49:23 -0500
Subject: [PATCH] PM-8113 - TwoFactorAuth - build submitting loading logic

---
 .../two-factor-auth.component.html            | 81 +++++++++----------
 .../two-factor-auth.component.ts              |  4 +
 2 files changed, 43 insertions(+), 42 deletions(-)

diff --git a/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.html b/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.html
index e9717f7a0e..7bae5cc159 100644
--- a/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.html
+++ b/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.html
@@ -1,11 +1,11 @@
-<ng-container *ngIf="loading">
-  <div class="tw-flex tw-items-center tw-justify-center" *ngIf="loading">
-    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
-  </div>
-</ng-container>
+<form [bitSubmit]="submitForm" [formGroup]="form" autocomplete="off">
+  <ng-container *ngIf="loading">
+    <div class="tw-flex tw-items-center tw-justify-center tw-mb-6">
+      <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+    </div>
+  </ng-container>
 
-<ng-container *ngIf="!loading">
-  <form [bitSubmit]="submitForm" [formGroup]="form" autocomplete="off">
+  <ng-container *ngIf="!loading">
     <app-two-factor-auth-email
       (token)="token = $event"
       *ngIf="selectedProviderType === providerType.Email"
@@ -31,46 +31,43 @@
       "
       #duoComponent
     />
+
     <bit-form-control>
       <bit-label>{{ "rememberMe" | i18n }}</bit-label>
-      <input type="checkbox" bitCheckbox formControlName="remember" />
+      <input type="checkbox" bitCheckbox formControlName="remember" [disabled]="loading" />
     </bit-form-control>
     <ng-container *ngIf="selectedProviderType == null">
       <p bitTypography="body1">{{ "noTwoStepProviders" | i18n }}</p>
       <p bitTypography="body1">{{ "noTwoStepProviders2" | i18n }}</p>
     </ng-container>
-    <!-- Buttons -->
-    <div class="tw-flex tw-flex-col tw-space-y-2.5 tw-mb-3">
-      <button
-        type="submit"
-        buttonType="primary"
-        bitButton
-        bitFormButton
-        *ngIf="showContinueButton()"
-      >
-        <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }} </span>
-      </button>
-      <button
-        type="button"
-        buttonType="primary"
-        bitButton
-        (click)="launchDuo()"
-        *ngIf="
-          selectedProviderType === providerType.Duo ||
-          selectedProviderType === providerType.OrganizationDuo
-        "
-      >
-        <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "launchDuo" | i18n }}</span>
-      </button>
+  </ng-container>
 
-      <a routerLink="/login" bitButton buttonType="secondary">
-        {{ "cancel" | i18n }}
-      </a>
-    </div>
-    <div class="text-center">
-      <a bitLink href="#" appStopClick (click)="selectOtherTwofactorMethod()">{{
-        "useAnotherTwoStepMethod" | i18n
-      }}</a>
-    </div>
-  </form>
-</ng-container>
+  <!-- Buttons -->
+  <div class="tw-flex tw-flex-col tw-space-y-2.5 tw-mb-3">
+    <button type="submit" buttonType="primary" bitButton bitFormButton *ngIf="showContinueButton()">
+      <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }} </span>
+    </button>
+    <button
+      type="button"
+      buttonType="primary"
+      bitButton
+      [disabled]="loading"
+      (click)="launchDuo()"
+      *ngIf="
+        selectedProviderType === providerType.Duo ||
+        selectedProviderType === providerType.OrganizationDuo
+      "
+    >
+      <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "launchDuo" | i18n }}</span>
+    </button>
+
+    <a routerLink="/login" bitButton buttonType="secondary">
+      {{ "cancel" | i18n }}
+    </a>
+  </div>
+  <div class="text-center">
+    <a bitLink href="#" appStopClick (click)="selectOtherTwofactorMethod()">{{
+      "useAnotherTwoStepMethod" | i18n
+    }}</a>
+  </div>
+</form>
diff --git a/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.ts b/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.ts
index 6dfcde224c..47fbe77f33 100644
--- a/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.ts
+++ b/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.ts
@@ -220,12 +220,14 @@ export class TwoFactorAuthComponent implements OnInit, OnDestroy {
   }
 
   async submit() {
+    this.loading = true;
     if (this.token == null || this.token === "") {
       this.toastService.showToast({
         variant: "error",
         title: this.i18nService.t("errorOccurred"),
         message: this.i18nService.t("verificationCodeRequired"),
       });
+      this.loading = false;
       return;
     }
 
@@ -243,6 +245,8 @@ export class TwoFactorAuthComponent implements OnInit, OnDestroy {
         title: this.i18nService.t("errorOccurred"),
         message: this.i18nService.t("invalidVerificationCode"),
       });
+    } finally {
+      this.loading = false;
     }
   }