fix email 2fa validation (#9702)

apps/web/src/app/auth/settings/two-factor-base.component.ts

@@ -41,6 +41,7 @@ export abstract class TwoFactorBaseComponent {
     this.authed = true;
   }
 
+  /** @deprecated used for formPromise flows.*/
   protected async enable(enableFunction: () => Promise<void>) {
     try {
       await enableFunction();
@@ -50,6 +51,10 @@ export abstract class TwoFactorBaseComponent {
     }
   }
 
+  /**
+   * @deprecated used for formPromise flows.
+   * TODO: Remove this method when formPromises are removed from all flows.
+   * */
   protected async disable(promise: Promise<unknown>) {
     const confirmed = await this.dialogService.openSimpleDialog({
       title: { key: "disable" },
@@ -78,6 +83,29 @@ export abstract class TwoFactorBaseComponent {
     }
   }
 
+  protected async disableMethod() {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "disable" },
+      content: { key: "twoStepDisableDesc" },
+      type: "warning",
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    const request = await this.buildRequestModel(TwoFactorProviderRequest);
+    request.type = this.type;
+    if (this.organizationId != null) {
+      await this.apiService.putTwoFactorOrganizationDisable(this.organizationId, request);
+    } else {
+      await this.apiService.putTwoFactorDisable(request);
+    }
+    this.enabled = false;
+    this.platformUtilsService.showToast("success", null, this.i18nService.t("twoStepDisabled"));
+    this.onUpdated.emit(false);
+  }
+
   protected async buildRequestModel<T extends SecretVerificationRequest>(
     requestClass: new () => T,
   ) {

apps/web/src/app/auth/settings/two-factor-email.component.ts

@@ -27,7 +27,6 @@ export class TwoFactorEmailComponent extends TwoFactorBaseComponent {
   @Output() onChangeStatus: EventEmitter<boolean> = new EventEmitter();
   type = TwoFactorProviderType.Email;
   sentEmail: string;
-  formPromise: Promise<TwoFactorEmailResponse>;
   emailPromise: Promise<unknown>;
   override componentName = "app-two-factor-email";
   formGroup = this.formBuilder.group({
@@ -79,21 +78,22 @@ export class TwoFactorEmailComponent extends TwoFactorBaseComponent {
   }
 
   submit = async () => {
-    this.formGroup.markAllAsTouched();
-    if (this.formGroup.invalid) {
-      return;
-    }
     if (this.enabled) {
       await this.disableEmail();
       this.onChangeStatus.emit(false);
     } else {
+      this.formGroup.markAllAsTouched();
+      if (this.formGroup.invalid) {
+        return;
+      }
+
       await this.enable();
       this.onChangeStatus.emit(true);
     }
   };
 
   private disableEmail() {
-    return super.disable(this.formPromise);
+    return super.disableMethod();
   }
 
   sendEmail = async () => {
@@ -109,11 +109,9 @@ export class TwoFactorEmailComponent extends TwoFactorBaseComponent {
     request.email = this.email;
     request.token = this.token;
 
-    return super.enable(async () => {
-      this.formPromise = this.apiService.putTwoFactorEmail(request);
-      const response = await this.formPromise;
-      await this.processResponse(response);
-    });
+    const response = await this.apiService.putTwoFactorEmail(request);
+    await this.processResponse(response);
+    this.onUpdated.emit(true);
   }
 
   onClose = () => {