[PM-18721] handle cross-component submit states

Author: rr-bw

apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.html

@@ -23,6 +23,7 @@
         [flow]="inputPasswordFlow"
         [masterPasswordPolicyOptions]="masterPasswordPolicyOptions"
         (onPasswordFormSubmit)="handlePasswordFormSubmit($event)"
+        (isSubmitting)="handleIsSubmittingChange($event)"
       ></auth-input-password>
     }
   </div>

apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from "@angular/common";
 import { Component, Inject, OnInit, ViewChild } from "@angular/core";
-import { BehaviorSubject, firstValueFrom } from "rxjs";
+import { BehaviorSubject, combineLatest, firstValueFrom, map } from "rxjs";
 
 import {
   InputPasswordComponent,
@@ -65,8 +65,15 @@ export class EmergencyAccessTakeoverDialogComponent implements OnInit {
   @ViewChild(InputPasswordComponent)
   inputPasswordComponent: InputPasswordComponent | undefined = undefined;
 
-  private submittingBehaviorSubject = new BehaviorSubject(false);
-  submitting$ = this.submittingBehaviorSubject.asObservable();
+  private parentSubmittingBehaviorSubject = new BehaviorSubject(false);
+  parentSubmitting$ = this.parentSubmittingBehaviorSubject.asObservable();
+
+  private childSubmittingBehaviorSubject = new BehaviorSubject(false);
+  childSubmitting$ = this.childSubmittingBehaviorSubject.asObservable();
+
+  submitting$ = combineLatest([this.parentSubmitting$, this.childSubmitting$]).pipe(
+    map(([parentIsSubmitting, childIsSubmitting]) => parentIsSubmitting || childIsSubmitting),
+  );
 
   initializing = true;
   inputPasswordFlow = InputPasswordFlow.ChangePasswordDelegation;
@@ -105,7 +112,7 @@ export class EmergencyAccessTakeoverDialogComponent implements OnInit {
   };
 
   protected async handlePasswordFormSubmit(passwordInputResult: PasswordInputResult) {
-    this.submittingBehaviorSubject.next(true);
+    this.parentSubmittingBehaviorSubject.next(true);
 
     try {
       await this.emergencyAccessService.takeover(
@@ -122,12 +129,16 @@ export class EmergencyAccessTakeoverDialogComponent implements OnInit {
         message: this.i18nService.t("unexpectedError"),
       });
     } finally {
-      this.submittingBehaviorSubject.next(false);
+      this.parentSubmittingBehaviorSubject.next(false);
     }
 
     this.dialogRef.close(EmergencyAccessTakeoverDialogResultTypes.Done);
   }
 
+  protected handleIsSubmittingChange(isSubmitting: boolean) {
+    this.childSubmittingBehaviorSubject.next(isSubmitting);
+  }
+
   /**
    * Strongly typed helper to open an EmergencyAccessTakeoverDialogComponent
    * @param dialogService Instance of the dialog service that will be used to open the dialog

libs/auth/src/angular/input-password/input-password.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from "@angular/core";
 import { ReactiveFormsModule, FormBuilder, Validators, FormControl } from "@angular/forms";
-import { BehaviorSubject, firstValueFrom } from "rxjs";
+import { firstValueFrom } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import {
@@ -115,15 +115,13 @@ interface InputPasswordForm {
   ],
 })
 export class InputPasswordComponent implements OnInit {
-  private submittingBehaviorSubject = new BehaviorSubject(false);
-  submitting$ = this.submittingBehaviorSubject.asObservable();
-
   @ViewChild(PasswordStrengthV2Component) passwordStrengthComponent:
     | PasswordStrengthV2Component
     | undefined = undefined;
 
   @Output() onPasswordFormSubmit = new EventEmitter<PasswordInputResult>();
   @Output() onSecondaryButtonClick = new EventEmitter<void>();
+  @Output() isSubmitting = new EventEmitter<boolean>();
 
   @Input({ required: true }) flow!: InputPasswordFlow;
 
@@ -265,15 +263,14 @@ export class InputPasswordComponent implements OnInit {
 
   submit = async () => {
     try {
-      this.submittingBehaviorSubject.next(true);
+      this.isSubmitting.emit(true);
 
       this.verifyFlow();
 
       this.formGroup.markAllAsTouched();
 
       if (this.formGroup.invalid) {
         this.showErrorSummary = true;
-        this.submittingBehaviorSubject.next(false);
         return;
       }
 
@@ -394,7 +391,7 @@ export class InputPasswordComponent implements OnInit {
     } catch (e) {
       this.validationService.showError(e);
     } finally {
-      this.submittingBehaviorSubject.next(false);
+      this.isSubmitting.emit(false);
     }
   };
 
@@ -451,7 +448,6 @@ export class InputPasswordComponent implements OnInit {
       false,
     );
     if (!newPasswordVerified) {
-      this.submittingBehaviorSubject.next(false);
       return;
     }