[PM-1826] [PM-2168] [Tech debt] Migrate file-password-prompt to dialog (#5666)

* Migrate file-password-prompt to Dialog

* Fix issue with cancel/empty password returned

* Removed unneeded click handler to cancel dialog

* Added margin as requested by design

* Only apply margin to top of field

* Call submit when clicking on Import data

* Add form and and submit trigger

apps/web/src/app/tools/import-export/dialog/file-password-prompt.component.html

@@ -1,45 +1,32 @@
-<!-- Please remove this disable statement when editing this file! -->
-<!-- eslint-disable tailwindcss/no-custom-classname -->
-<div
-  class="modal fade"
-  role="dialog"
-  aria-modal="true"
-  [attr.aria-labelledby]="'confirmVaultImport' | i18n"
->
-  <div class="modal-dialog modal-dialog-scrollable" role="document">
-    <form #form (ngSubmit)="submit()">
-      <div class="form-group modal-content">
-        <h2 class="tw-my-6 tw-ml-3.5 tw-font-semibold" id="confirmVaultImport">
-          {{ "confirmVaultImport" | i18n | uppercase }}
-        </h2>
-        <div
-          class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-px-3.5 tw-pt-3.5"
-        >
-          {{ "confirmVaultImportDesc" | i18n }}
-          <bit-form-field class="tw-pt-3.5">
-            <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
-            <input
-              bitInput
-              type="password"
-              name="filePassword"
-              [formControl]="filePassword"
-              appAutofocus
-              appInputVerbatim
-            />
-            <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
-          </bit-form-field>
-        </div>
-        <div
-          class="tw-flex tw-w-full tw-flex-wrap tw-items-center tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-bg-background-alt tw-px-3.5 tw-pb-3.5 tw-pt-4"
-        >
-          <button bitButton buttonType="primary" class="tw-mr-2" type="submit" appBlurClick>
-            <span>{{ "importData" | i18n }}</span>
-          </button>
-          <button bitButton buttonType="secondary" type="button" (click)="cancel()">
-            <span>{{ "cancel" | i18n }}</span>
-          </button>
-        </div>
-      </div>
-    </form>
-  </div>
-</div>
+<form (submit)="submit()">
+  <bit-dialog>
+    <span bitDialogTitle>
+      {{ "confirmVaultImport" | i18n }}
+    </span>
+
+    <div bitDialogContent>
+      {{ "confirmVaultImportDesc" | i18n }}
+      <bit-form-field class="tw-mt-6">
+        <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
+        <input
+          bitInput
+          type="password"
+          name="filePassword"
+          [formControl]="filePassword"
+          appAutofocus
+          appInputVerbatim
+        />
+        <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
+      </bit-form-field>
+    </div>
+
+    <ng-container bitDialogFooter>
+      <button bitButton buttonType="primary" type="submit">
+        <span>{{ "importData" | i18n }}</span>
+      </button>
+      <button bitButton bitDialogClose buttonType="secondary" type="button">
+        <span>{{ "cancel" | i18n }}</span>
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>

apps/web/src/app/tools/import-export/dialog/file-password-prompt.component.ts

@@ -1,26 +1,20 @@
+import { DialogRef } from "@angular/cdk/dialog";
 import { Component } from "@angular/core";
 import { FormControl, Validators } from "@angular/forms";
 
-import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
-
 @Component({
   templateUrl: "file-password-prompt.component.html",
 })
 export class FilePasswordPromptComponent {
   filePassword = new FormControl("", Validators.required);
 
-  constructor(private modalRef: ModalRef) {}
+  constructor(public dialogRef: DialogRef) {}
 
   submit() {
     this.filePassword.markAsTouched();
     if (!this.filePassword.valid) {
       return;
     }
-
-    this.modalRef.close(this.filePassword.value);
-  }
-
-  cancel() {
-    this.modalRef.close(null);
+    this.dialogRef.close(this.filePassword.value);
   }
 }

apps/web/src/app/tools/import-export/import.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
 import * as JSZip from "jszip";
-import { Subject } from "rxjs";
+import { Subject, lastValueFrom } from "rxjs";
 import { takeUntil } from "rxjs/operators";
 import Swal, { SweetAlertIcon } from "sweetalert2";
 
@@ -270,15 +270,11 @@ export class ImportComponent implements OnInit, OnDestroy {
   }
 
   async getFilePassword(): Promise<string> {
-    const ref = this.modalService.open(FilePasswordPromptComponent, {
-      allowMultipleModals: true,
+    const dialog = this.dialogService.open<string>(FilePasswordPromptComponent, {
+      ariaModal: true,
     });
 
-    if (ref == null) {
-      return null;
-    }
-
-    return await ref.onClosedPromise();
+    return await lastValueFrom(dialog.closed);
   }
 
   ngOnDestroy(): void {

libs/importer/src/importers/bitwarden/bitwarden-password-protected-importer.ts

@@ -62,6 +62,10 @@ export class BitwardenPasswordProtectedImporter extends BitwardenJsonImporter im
     jdoc: BitwardenPasswordProtectedFileFormat,
     password: string
   ): Promise<boolean> {
+    if (this.isNullOrWhitespace(password)) {
+      return false;
+    }
+
     this.key = await this.cryptoService.makePinKey(
       password,
       jdoc.salt,