Requested changes and improvements

apps/web/src/app/components/file-password-prompt.component.html

@@ -1,6 +1,6 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="confirmVaultImport | i18n">
+<div class="modal fade" role="dialog" aria-modal="true">
   <div class="modal-dialog modal-dialog-scrollable" role="document">
-    <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" *ngIf="filePassword">
+    <form #form (ngSubmit)="submit()">
       <div class="form-group modal-content">
         <div class="modal-header">
           <div class="tw-text-center bwi-3x">
@@ -18,8 +18,9 @@
               <input
                 bitInput
                 required
-                type="{{ showPassword ? 'text' : 'password' }}"
+                type="{{ showFilePassword ? 'text' : 'password' }}"
                 name="filePassword"
+                [formControl]="filePassword"
                 appAutofocus
                 appInputVerbatim
               />
@@ -28,13 +29,13 @@
                 bitButton
                 appStopClick
                 appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-                [attr.aria-pressed]="showPassword"
-                (click)="togglePassword()"
+                [attr.aria-pressed]="showFilePassword"
+                (click)="toggleFilePassword()"
               >
                 <i
                   class="bwi bwi-lg"
                   aria-hidden="true"
-                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
+                  [ngClass]="{ 'bwi-eye': !showFilePassword, 'bwi-eye-slash': showFilePassword }"
                 ></i>
               </button>
             </bit-form-field>
@@ -47,7 +48,7 @@
                 <span>{{ "importData" | i18n }}</span>
               </button>
               <button bitButton buttonType="secondary" type="button" data-dismiss="modal">
-                {{ "cancel" | i18n }}
+                <span>{{ "cancel" | i18n }}</span>
               </button>
             </div>
           </div>

apps/web/src/app/components/user-verification-prompt.component.html

@@ -13,12 +13,12 @@
         <div>
           {{ confirmDescription | i18n }}
         </div>
-      </div>
-      <div class="modal-footer">
         <div class="modal-footer-content">
           <app-user-verification ngDefaultControl [formControl]="secret" name="secret">
           </app-user-verification>
         </div>
+      </div>
+      <div class="modal-footer">
         <button bitButton buttonType="primary" type="submit" appBlurClick>
           <span>{{ confirmButtonText | i18n }}</span>
         </button>

apps/web/src/app/services/services.module.ts

@@ -10,11 +10,7 @@ import {
   SYSTEM_LANGUAGE,
   MEMORY_STORAGE,
 } from "@bitwarden/angular/services/jslib-services.module";
-import {
-  ModalService as ModalServiceAbstraction,
-  ModalConfig as ModalConfigAbstraction,
-  ModalConfig,
-} from "@bitwarden/angular/services/modal.service";
+import { ModalService as ModalServiceAbstraction } from "@bitwarden/angular/services/modal.service";
 import { ApiService as ApiServiceAbstraction } from "@bitwarden/common/abstractions/api.service";
 import { CipherService as CipherServiceAbstraction } from "@bitwarden/common/abstractions/cipher.service";
 import { CollectionService as CollectionServiceAbstraction } from "@bitwarden/common/abstractions/collection.service";
@@ -104,7 +100,6 @@ import { WebFileDownloadService } from "./webFileDownload.service";
     },
     { provide: MessagingServiceAbstraction, useClass: BroadcasterMessagingService },
     { provide: ModalServiceAbstraction, useClass: ModalService },
-    { provide: ModalConfigAbstraction, useClass: ModalConfig },
     {
       provide: ImportServiceAbstraction,
       useClass: ImportService,

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

@@ -86,7 +86,7 @@
               <input
                 bitInput
                 required
-                type="{{ showPassword ? 'text' : 'password' }}"
+                type="{{ showFilePassword ? 'text' : 'password' }}"
                 id="filePassword"
                 formControlName="filePassword"
                 name="password"
@@ -122,7 +122,7 @@
               <input
                 bitInput
                 required
-                type="{{ showConfirmPassword ? 'text' : 'password' }}"
+                type="{{ showConfirmFilePassword ? 'text' : 'password' }}"
                 id="confirmFilePassword"
                 formControlName="confirmFilePassword"
                 name="confirmFilePassword"

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

@@ -61,7 +61,8 @@ export class ExportComponent extends BaseExportComponent {
     }
 
     const confirmDescription =
-      this.exportForm.get("fileEncryptionType").value === EncryptedExportType.FileEncrypted
+      this.exportForm.get("fileEncryptionType").value ===
+      EncryptedExportType.FileEncrypted.toString()
         ? "FileEncryptedExportWarningDesc"
         : "encExportKeyWarningDesc";
 
@@ -102,7 +103,7 @@ export class ExportComponent extends BaseExportComponent {
 
   get validForm() {
     if (
-      this.fileEncryptionType == EncryptedExportType.FileEncrypted &&
+      this.fileEncryptionType == EncryptedExportType.FileEncrypted.toString() &&
       this.format == "encrypted_json"
     ) {
       if (this.filePassword.length > 0 || this.confirmFilePassword.length > 0) {

libs/angular/src/components/export.component.ts

@@ -10,6 +10,7 @@ import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { PolicyService } from "@bitwarden/common/abstractions/policy.service";
 import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification.service";
+import { EncryptedExportType } from "@bitwarden/common/enums/EncryptedExportType";
 import { EventType } from "@bitwarden/common/enums/eventType";
 import { PolicyType } from "@bitwarden/common/enums/policyType";
 
@@ -53,7 +54,9 @@ export class ExportComponent implements OnInit {
 
   async ngOnInit() {
     await this.checkExportDisabled();
-    this.exportForm.get("fileEncryptionType").setValue(0);
+    this.exportForm
+      .get("fileEncryptionType")
+      .setValue(EncryptedExportType.AccountEncrypted.toString());
   }
 
   async checkExportDisabled() {
@@ -160,7 +163,8 @@ export class ExportComponent implements OnInit {
   }
 
   protected getExportData() {
-    return (this.fileEncryptionType != 1 && this.filePassword == undefined) ||
+    return (this.fileEncryptionType != EncryptedExportType.FileEncrypted.toString() &&
+      this.filePassword == undefined) ||
       this.filePassword == ""
       ? this.exportService.getExport(this.format, null)
       : this.exportService.getPasswordProtectedExport(this.filePassword);

libs/angular/src/components/file-password-prompt.component.ts

@@ -14,7 +14,7 @@ import { ModalRef } from "./modal/modal.ref";
  */
 @Directive()
 export class FilePasswordPromptComponent {
-  showPassword: boolean;
+  showFilePassword: boolean;
   filePassword = new FormControl("");
   organizationId: string;
   fileContents: string;
@@ -31,8 +31,8 @@ export class FilePasswordPromptComponent {
     this.organizationId = config.data.organizationId;
   }
 
-  togglePassword() {
-    this.showPassword = !this.showPassword;
+  toggleFilePassword() {
+    this.showFilePassword = !this.showFilePassword;
   }
 
   async submit() {