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>
+<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
+      <bit-form-field>
-      id="form"
+        <bit-label>{{ "masterPass" | i18n }}</bit-label>
-      [formGroup]="form"
+        <input bitInput type="password" formControlName="masterPassword" appAutofocus />
-      (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
+          bitSuffix
           bitPasswordInputToggle
           [(toggled)]="showPassword"
-            ></button
+        ></button>
-            ><bit-hint>
+        <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">
+      <button bitButton buttonType="primary" type="submit" bitFormButton>
         <span>{{ "changeKdf" | i18n }}</span>
       </button>
-    <button bitButton buttonType="secondary" type="button" bitDialogClose>
+      <button bitButton buttonType="secondary" type="button" bitFormButton bitDialogClose>
         {{ "cancel" | i18n }}
       </button>
     </ng-container>
-</bit-dialog>
+  </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;
-
+    await this.makeKeyAndSaveAsync();
-    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;
-    }
+  };
-  }
 
   private async makeKeyAndSaveAsync() {
     const masterPassword = this.form.value.masterPassword;