From 24d9ac88ba0515d86fa426ba70ba7f49b8cf6ba6 Mon Sep 17 00:00:00 2001
From: Daniel James Smith <djsmith85@users.noreply.github.com>
Date: Thu, 29 Jun 2023 21:59:17 +0200
Subject: [PATCH] [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
---
 .../file-password-prompt.component.html       | 77 ++++++++-----------
 .../dialog/file-password-prompt.component.ts  | 12 +--
 .../tools/import-export/import.component.ts   | 12 +--
 .../bitwarden-password-protected-importer.ts  |  4 +
 4 files changed, 43 insertions(+), 62 deletions(-)

diff --git a/apps/web/src/app/tools/import-export/dialog/file-password-prompt.component.html b/apps/web/src/app/tools/import-export/dialog/file-password-prompt.component.html
index 0b48be7ad9..6c849da69d 100644
--- a/apps/web/src/app/tools/import-export/dialog/file-password-prompt.component.html
+++ b/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>
diff --git a/apps/web/src/app/tools/import-export/dialog/file-password-prompt.component.ts b/apps/web/src/app/tools/import-export/dialog/file-password-prompt.component.ts
index ab5c51e0c8..d0cbfe20fd 100644
--- a/apps/web/src/app/tools/import-export/dialog/file-password-prompt.component.ts
+++ b/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);
   }
 }
diff --git a/apps/web/src/app/tools/import-export/import.component.ts b/apps/web/src/app/tools/import-export/import.component.ts
index 6247bcea24..14023c377d 100644
--- a/apps/web/src/app/tools/import-export/import.component.ts
+++ b/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 {
diff --git a/libs/importer/src/importers/bitwarden/bitwarden-password-protected-importer.ts b/libs/importer/src/importers/bitwarden/bitwarden-password-protected-importer.ts
index fb5530f352..80872b6804 100644
--- a/libs/importer/src/importers/bitwarden/bitwarden-password-protected-importer.ts
+++ b/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,