change kdf confirmation component migration (#8489)

Change kdf configuration component migration

apps/web/src/app/auth/settings/security/change-kdf/change-kdf-confirmation.component.html

@@ -1,50 +1,33 @@
-<bit-dialog>
-  <span bitDialogTitle>
-    {{ "changeKdf" | i18n }}
-  </span>
+<form [formGroup]="form" [bitSubmit]="submit" autocomplete="off">
+  <bit-dialog>
+    <span bitDialogTitle>
+      {{ "changeKdf" | i18n }}
+    </span>
 
-  <span bitDialogContent>
-    <bit-callout type="warning">{{ "kdfSettingsChangeLogoutWarning" | i18n }}</bit-callout>
-    <form
-      id="form"
-      [formGroup]="form"
-      (ngSubmit)="submit()"
-      [appApiAction]="formPromise"
-      ngNativeValidate
-      autocomplete="off"
-    >
-      <div class="row">
-        <div class="col-12">
-          <bit-form-field class="tw-mb-1"
-            ><bit-label>{{ "masterPass" | i18n }}</bit-label>
-            <input
-              bitInput
-              type="password"
-              required
-              formControlName="masterPassword"
-              appAutofocus
-            />
-            <button
-              type="button"
-              bitSuffix
-              bitIconButton
-              bitPasswordInputToggle
-              [(toggled)]="showPassword"
-            ></button
-            ><bit-hint>
-              {{ "confirmIdentity" | i18n }}
-            </bit-hint></bit-form-field
-          >
-        </div>
-      </div>
-    </form>
-  </span>
-  <ng-container bitDialogFooter>
-    <button bitButton buttonType="primary" type="submit" [loading]="loading" form="form">
-      <span>{{ "changeKdf" | i18n }}</span>
-    </button>
-    <button bitButton buttonType="secondary" type="button" bitDialogClose>
-      {{ "cancel" | i18n }}
-    </button>
-  </ng-container>
-</bit-dialog>
+    <span bitDialogContent>
+      <bit-callout type="warning">{{ "kdfSettingsChangeLogoutWarning" | i18n }}</bit-callout>
+      <bit-form-field>
+        <bit-label>{{ "masterPass" | i18n }}</bit-label>
+        <input bitInput type="password" formControlName="masterPassword" appAutofocus />
+        <button
+          type="button"
+          bitIconButton
+          bitSuffix
+          bitPasswordInputToggle
+          [(toggled)]="showPassword"
+        ></button>
+        <bit-hint>
+          {{ "confirmIdentity" | i18n }}
+        </bit-hint></bit-form-field
+      >
+    </span>
+    <ng-container bitDialogFooter>
+      <button bitButton buttonType="primary" type="submit" bitFormButton>
+        <span>{{ "changeKdf" | i18n }}</span>
+      </button>
+      <button bitButton buttonType="secondary" type="button" bitFormButton bitDialogClose>
+        {{ "cancel" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>

apps/web/src/app/auth/settings/security/change-kdf/change-kdf-confirmation.component.ts

@@ -5,12 +5,10 @@ import { firstValueFrom, map } from "rxjs";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
-import { KdfConfigService } from "@bitwarden/common/auth/abstractions/kdf-config.service";
 import { KdfConfig } from "@bitwarden/common/auth/models/domain/kdf-config";
 import { KdfRequest } from "@bitwarden/common/models/request/kdf.request";
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { KdfType } from "@bitwarden/common/platform/enums";
@@ -27,7 +25,6 @@ export class ChangeKdfConfirmationComponent {
   });
   showPassword = false;
   masterPassword: string;
-  formPromise: Promise<any>;
   loading = false;
 
   constructor(
@@ -36,33 +33,24 @@ export class ChangeKdfConfirmationComponent {
     private platformUtilsService: PlatformUtilsService,
     private cryptoService: CryptoService,
     private messagingService: MessagingService,
+    @Inject(DIALOG_DATA) params: { kdf: KdfType; kdfConfig: KdfConfig },
     private accountService: AccountService,
-    private logService: LogService,
-    private kdfConfigService: KdfConfigService,
-    @Inject(DIALOG_DATA) params: { kdfConfig: KdfConfig },
   ) {
     this.kdfConfig = params.kdfConfig;
     this.masterPassword = null;
   }
 
-  async submit() {
+  submit = async () => {
     this.loading = true;
-
-    try {
-      this.formPromise = this.makeKeyAndSaveAsync();
-      await this.formPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        this.i18nService.t("encKeySettingsChanged"),
-        this.i18nService.t("logBackIn"),
-      );
-      this.messagingService.send("logout");
-    } catch (e) {
-      this.logService.error(e);
-    } finally {
-      this.loading = false;
-    }
-  }
+    await this.makeKeyAndSaveAsync();
+    this.platformUtilsService.showToast(
+      "success",
+      this.i18nService.t("encKeySettingsChanged"),
+      this.i18nService.t("logBackIn"),
+    );
+    this.messagingService.send("logout");
+    this.loading = false;
+  };
 
   private async makeKeyAndSaveAsync() {
     const masterPassword = this.form.value.masterPassword;