From 42e56d0bd333c8812a11a3d0d0559baa11718f7b Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Wed, 14 May 2025 03:46:54 -0700
Subject: [PATCH] [Account Recovery][PM-18721] disable button during submit
 process

---
 .../account-recovery-dialog.component.html    | 19 +++++++++--
 .../account-recovery-dialog.component.ts      | 32 ++++++++++++++++---
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/members/components/account-recovery/account-recovery-dialog.component.html b/apps/web/src/app/admin-console/organizations/members/components/account-recovery/account-recovery-dialog.component.html
index be19c8244bc..854ff814262 100644
--- a/apps/web/src/app/admin-console/organizations/members/components/account-recovery/account-recovery-dialog.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/components/account-recovery/account-recovery-dialog.component.html
@@ -13,8 +13,23 @@
   </ng-container>
 
   <ng-container bitDialogFooter>
-    <button type="button" bitButton buttonType="primary" (click)="submit()">
-      {{ "save" | i18n }}
+    <button
+      class="tw-relative"
+      type="button"
+      bitButton
+      buttonType="primary"
+      [disabled]="submitting"
+      (click)="handlePrimaryButtonClick()"
+    >
+      <span
+        [ngClass]="{ 'tw-invisible': !submitting }"
+        class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center"
+      >
+        <i class="bwi bwi-spinner bwi-lg bwi-spin" aria-hidden="true"></i>
+      </span>
+      <span [ngClass]="{ 'tw-invisible': submitting }">
+        {{ "save" | i18n }}
+      </span>
     </button>
     <button type="button" bitButton buttonType="secondary" bitDialogClose>
       {{ "cancel" | i18n }}
diff --git a/apps/web/src/app/admin-console/organizations/members/components/account-recovery/account-recovery-dialog.component.ts b/apps/web/src/app/admin-console/organizations/members/components/account-recovery/account-recovery-dialog.component.ts
index b01e142ffc0..6baebbc507b 100644
--- a/apps/web/src/app/admin-console/organizations/members/components/account-recovery/account-recovery-dialog.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/components/account-recovery/account-recovery-dialog.component.ts
@@ -1,3 +1,4 @@
+import { CommonModule } from "@angular/common";
 import { Component, Inject, OnInit, ViewChild } from "@angular/core";
 import { firstValueFrom } from "rxjs";
 
@@ -68,14 +69,23 @@ type AccountRecoveryDialogResultType =
   standalone: true,
   selector: "app-account-recovery-dialog",
   templateUrl: "account-recovery-dialog.component.html",
-  imports: [ButtonModule, CalloutModule, DialogModule, I18nPipe, InputPasswordComponent],
+  imports: [
+    ButtonModule,
+    CalloutModule,
+    CommonModule,
+    DialogModule,
+    I18nPipe,
+    InputPasswordComponent,
+  ],
 })
 export class AccountRecoveryDialogComponent implements OnInit {
   @ViewChild(InputPasswordComponent)
-  inputPasswordComponent: InputPasswordComponent;
+  inputPasswordComponent!: InputPasswordComponent;
 
   inputPasswordFlow = InputPasswordFlow.ChangePasswordDelegation;
   masterPasswordPolicyOptions?: MasterPasswordPolicyOptions;
+  receivedPasswordInputResult = false;
+  submitting = false;
 
   get loggedOutWarningName() {
     return this.dialogData.name != null ? this.dialogData.name : this.i18nService.t("thisUser");
@@ -100,11 +110,25 @@ export class AccountRecoveryDialogComponent implements OnInit {
     );
   }
 
-  submit = async () => {
-    await this.inputPasswordComponent.submit();
+  handlePrimaryButtonClick = async () => {
+    try {
+      this.submitting = true;
+      await this.inputPasswordComponent.submit();
+    } catch {
+      // Flip to false if submit() throws an error
+      this.submitting = false;
+    }
+
+    // Flip to false if submit() returns early without a PasswordInputResult
+    // emission due to form validation errors or new password doesn't meet org policy reqs.
+    if (!this.receivedPasswordInputResult) {
+      this.submitting = false;
+    }
   };
 
   async handlePasswordFormSubmit(passwordInputResult: PasswordInputResult) {
+    this.receivedPasswordInputResult = Boolean(passwordInputResult);
+
     try {
       await this.resetPasswordService.resetMasterPassword(
         passwordInputResult.newPassword,