Making suggested changes

apps/web/src/app/organizations/tools/import.component.ts

@@ -2,9 +2,9 @@ import { Component } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
-import { FilePasswordPromptService } from "@bitwarden/common/abstractions/filePasswordPrompt.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { ImportService } from "@bitwarden/common/abstractions/import.service";
+import { KeyConnectorService } from "@bitwarden/common/abstractions/keyConnector.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
@@ -29,7 +29,7 @@ export class ImportComponent extends BaseImportComponent {
     private organizationService: OrganizationService,
     logService: LogService,
     modalService: ModalService,
-    filePasswordPromptService: FilePasswordPromptService
+    keyConnectorService: KeyConnectorService
   ) {
     super(
       i18nService,
@@ -39,7 +39,7 @@ export class ImportComponent extends BaseImportComponent {
       policyService,
       logService,
       modalService,
-      filePasswordPromptService
+      keyConnectorService
     );
   }
 

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

@@ -20,7 +20,6 @@ import { CollectionService as CollectionServiceAbstraction } from "@bitwarden/co
 import { CryptoService as CryptoServiceAbstraction } from "@bitwarden/common/abstractions/crypto.service";
 import { CryptoFunctionService as CryptoFunctionServiceAbstraction } from "@bitwarden/common/abstractions/cryptoFunction.service";
 import { ExportService as ExportServiceAbstraction } from "@bitwarden/common/abstractions/export.service";
-import { FilePasswordPromptService as FilePasswordPromptServiceAbstraction } from "@bitwarden/common/abstractions/filePasswordPrompt.service";
 import { FolderService as FolderServiceAbstraction } from "@bitwarden/common/abstractions/folder.service";
 import { I18nService as I18nServiceAbstraction } from "@bitwarden/common/abstractions/i18n.service";
 import { ImportService as ImportServiceAbstraction } from "@bitwarden/common/abstractions/import.service";
@@ -40,7 +39,6 @@ import { StateService as StateServiceAbstraction } from "../../abstractions/stat
 import { Account } from "../../models/account";
 import { GlobalState } from "../../models/globalState";
 import { BroadcasterMessagingService } from "../../services/broadcasterMessaging.service";
-import { FilePasswordPromptService } from "../../services/filePasswordPrompt.service";
 import { HtmlStorageService } from "../../services/htmlStorage.service";
 import { I18nService } from "../../services/i18n.service";
 import { MemoryStorageService } from "../../services/memoryStorage.service";
@@ -151,10 +149,6 @@ import { RouterService } from "./router.service";
       provide: PasswordRepromptServiceAbstraction,
       useClass: PasswordRepromptService,
     },
-    {
-      provide: FilePasswordPromptServiceAbstraction,
-      useClass: FilePasswordPromptService,
-    },
     {
       provide: UserVerificationPromptServiceAbstraction,
       useClass: UserVerificationPromptService,

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

@@ -4,6 +4,7 @@
   ngNativeValidate
   [appApiAction]="formPromise"
   [formGroup]="exportForm"
+  *ngIf="exportForm"
 >
   <div class="page-header">
     <h1>{{ "exportVault" | i18n }}</h1>
@@ -20,20 +21,14 @@
   <div class="row">
     <div class="form-group col-6">
       <label for="format">{{ "fileFormat" | i18n }}</label>
-      <select
-        class="form-control"
-        name="format"
-        formControlName="format"
-        [(ngModel)]="formatControl"
-        (change)="encryptionType = 0"
-      >
+      <select class="form-control" name="format" formControlName="format">
         <option *ngFor="let f of formatOptions" [value]="f.value">{{ f.name }}</option>
       </select>
     </div>
   </div>
   <div class="row">
     <div class="form-group col-6">
-      <ng-container *ngIf="formatControl === 'encrypted_json'">
+      <ng-container *ngIf="format === 'encrypted_json'">
         <div role="radiogroup" aria-labelledby="fileTypeHeading">
           <label id="fileTypeHeading" class="radio-header">
             {{ "fileTypeHeading" | i18n }}
@@ -43,11 +38,10 @@
             <input
               type="radio"
               class="radio"
-              name="FileType"
+              name="fileEncryptionType"
               id="1"
-              [value]="1"
-              [(ngModel)]="encryptionType"
-              (change)="encryptionType = 0"
+              [value]="0"
+              formControlName="fileEncryptionType"
             />
             <label class="unstyled"> {{ "accountBackup" | i18n }} </label>
             <div class="small text-muted" style="margin-left: 1.25em">
@@ -56,15 +50,12 @@
             <input
               type="radio"
               class="radio"
-              name="FileType"
+              name="fileEncryptionType"
               id="2"
-              [value]="2"
-              [(ngModel)]="encryptionType"
-              (change)="encryptionType = 1"
+              [value]="1"
+              formControlName="fileEncryptionType"
             />
 
-            <input formControlName="fileEncryptionType" [ngModel]="encryptionType" hidden="true" />
-
             <label class="unstyled">{{ "passwordProtected" | i18n }}</label>
             <div class="small text-muted" style="margin-left: 1.25em">
               {{ "passwordProtectedOptionDescription" | i18n }}
@@ -73,13 +64,14 @@
           <br />
         </div>
 
-        <ng-container *ngIf="encryptionType == 1">
+        <ng-container *ngIf="fileEncryptionType == 1">
           <label for="format">{{ "filePassword" | i18n }}</label>
 
           <div class="input-group">
             <input
               type="{{ showPassword ? 'text' : 'password' }}"
               formControlName="password"
+              name="password"
               class="form-control"
             />
             <div class="input-group-append">
@@ -108,8 +100,7 @@
           <div class="input-group">
             <input
               formControlName="confirmPassword"
-              [(ngModel)]="encryptionPassword"
-              (change)="encryptionPassword = $event.target.value"
+              name="confirmPassword"
               class="form-control"
               type="{{ showConfirmPassword ? 'text' : 'password' }}"
             />
@@ -142,7 +133,7 @@
       <button
         type="submit"
         class="btn btn-primary btn-submit"
-        [disabled]="form.loading || exportForm.disabled"
+        [disabled]="form.loading || disabled"
       >
         <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
         <span>{{ "confirmFormat" | i18n }}</span>

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

@@ -1,5 +1,5 @@
 import { Component, ViewChild, ViewContainerRef } from "@angular/core";
-import { FormBuilder, FormControl } from "@angular/forms";
+import { FormBuilder, FormControl, FormGroup } from "@angular/forms";
 
 import { ExportComponent as BaseExportComponent } from "@bitwarden/angular/components/export.component";
 import { ModalConfig, ModalService } from "@bitwarden/angular/services/modal.service";
@@ -22,7 +22,6 @@ import { EncryptedExportType } from "@bitwarden/common/enums/EncryptedExportType
 })
 export class ExportComponent extends BaseExportComponent {
   organizationId: string;
-  formatControl: string;
   encryptionType: EncryptedExportType;
   showPassword: boolean;
   showConfirmPassword: boolean;
@@ -69,7 +68,7 @@ export class ExportComponent extends BaseExportComponent {
 
   async submit() {
     const confirmDescription =
-      this.encryptionType == EncryptedExportType.FileEncrypted
+      this.exportForm.get("fileEncryptionType").value == EncryptedExportType.FileEncrypted
         ? "confirmVaultExportDesc"
         : "encExportKeyWarningDesc";
     const confirmButtonText = "exportVault";

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

@@ -4,9 +4,9 @@ import * as JSZip from "jszip";
 import Swal, { SweetAlertIcon } from "sweetalert2";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
-import { FilePasswordPromptService } from "@bitwarden/common/abstractions/filePasswordPrompt.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { ImportService } from "@bitwarden/common/abstractions/import.service";
+import { KeyConnectorService } from "@bitwarden/common/abstractions/keyConnector.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { PolicyService } from "@bitwarden/common/abstractions/policy.service";
@@ -14,6 +14,8 @@ import { ImportOption, ImportType } from "@bitwarden/common/enums/importOptions"
 import { PolicyType } from "@bitwarden/common/enums/policyType";
 import { ImportError } from "@bitwarden/common/importers/importError";
 
+import { FilePasswordPromptComponent } from "../components/file-password-prompt.component";
+
 @Component({
   selector: "app-import",
   templateUrl: "import.component.html",
@@ -26,6 +28,7 @@ export class ImportComponent implements OnInit {
   formPromise: Promise<ImportError>;
   loading = false;
   importBlockedByPolicy = false;
+  protected component = FilePasswordPromptComponent;
 
   protected organizationId: string = null;
   protected successNavigate: any[] = ["vault"];
@@ -37,8 +40,8 @@ export class ImportComponent implements OnInit {
     protected platformUtilsService: PlatformUtilsService,
     protected policyService: PolicyService,
     private logService: LogService,
-    private modalService: ModalService,
-    private filePasswordPromptService: FilePasswordPromptService
+    protected modalService: ModalService,
+    protected keyConnectorService: KeyConnectorService
   ) {}
 
   async ngOnInit() {
@@ -139,7 +142,7 @@ export class ImportComponent implements OnInit {
   }
 
   private async promptFilePassword(fcontents: string) {
-    return await this.filePasswordPromptService.showPasswordPrompt(fcontents, this.organizationId);
+    return await this.showPasswordPrompt(fcontents, this.organizationId);
   }
 
   getFormatInstructionTitle() {
@@ -246,4 +249,33 @@ export class ImportComponent implements OnInit {
         }
       );
   }
+
+  protectedFields() {
+    return ["TOTP", "Password", "H_Field", "Card Number", "Security Code"];
+  }
+
+  async showPasswordPrompt(fcontents: string, organizationId: string) {
+    // if (!(await this.enabled())) {
+    //   return true;
+    // }
+
+    const ref = this.modalService.open(this.component, {
+      allowMultipleModals: true,
+      data: {
+        fileContents: fcontents,
+        organizationId: organizationId,
+      },
+    });
+
+    // if (ref == null) {
+    //   return false;
+    // }
+
+    const result = await ref.onClosedPromise();
+    return result === true;
+  }
+
+  async enabled() {
+    return !this.keyConnectorService.getUsesKeyConnector();
+  }
 }

apps/web/src/locales/en/messages.json

@@ -666,6 +666,9 @@
   "invalidMasterPassword": {
     "message": "Invalid master password"
   },
+  "invalidFilePassword": {
+    "message": "Invalid file password, please use the password you entered when you created the export file."
+  },
   "lockNow": {
     "message": "Lock Now"
   },

apps/web/src/services/filePasswordPrompt.service.ts

@@ -1,10 +0,0 @@
-import { Injectable } from "@angular/core";
-
-import { FilePasswordPromptService as BaseFilePasswordPromptService } from "@bitwarden/angular/services/filePasswordPrompt.service";
-
-import { FilePasswordPromptComponent } from "../app/components/file-password-prompt.component";
-
-@Injectable()
-export class FilePasswordPromptService extends BaseFilePasswordPromptService {
-  component = FilePasswordPromptComponent;
-}

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

@@ -60,7 +60,7 @@ export class ExportComponent implements OnInit {
     protected win: Window,
     private logService: LogService,
     private userVerificationService: UserVerificationService,
-    private formBuilder: FormBuilder,
+    protected formBuilder: FormBuilder,
     protected modalService: ModalService,
     protected apiService: ApiService,
     protected stateService: StateService,
@@ -106,6 +106,8 @@ export class ExportComponent implements OnInit {
       this.saved();
       await this.collectEvent();
       this.exportForm.get("secret").setValue("");
+      this.exportForm.get("password").setValue("");
+      this.exportForm.get("confirmPassword").setValue("");
     } catch (e) {
       this.logService.error(e);
     }

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

@@ -51,7 +51,7 @@ export class FilePasswordPromptComponent {
       this.platformUtilsService.showToast(
         "error",
         this.i18nService.t("error"),
-        this.i18nService.t("invalidMasterPassword")
+        this.i18nService.t("invalidFilePassword")
       );
     } else {
       this.modalRef.close(true);

libs/angular/src/services/filePasswordPrompt.service.ts

@@ -1,50 +0,0 @@
-import { Injectable } from "@angular/core";
-
-import { FilePasswordPromptService as FilePasswordPromptServiceAbstraction } from "@bitwarden/common/abstractions/filePasswordPrompt.service";
-import { KeyConnectorService } from "@bitwarden/common/abstractions/keyConnector.service";
-
-import { FilePasswordPromptComponent } from "../components/file-password-prompt.component";
-
-import { ModalService } from "./modal.service";
-
-/**
- * Used to verify the user's File Password for the "Import passwords using File Password" feature only.
- */
-@Injectable()
-export class FilePasswordPromptService implements FilePasswordPromptServiceAbstraction {
-  protected component = FilePasswordPromptComponent;
-
-  constructor(
-    private modalService: ModalService,
-    private keyConnectorService: KeyConnectorService
-  ) {}
-
-  protectedFields() {
-    return ["TOTP", "Password", "H_Field", "Card Number", "Security Code"];
-  }
-
-  async showPasswordPrompt(fcontents: string, organizationId: string) {
-    if (!(await this.enabled())) {
-      return true;
-    }
-
-    const ref = await this.modalService.open(this.component, {
-      allowMultipleModals: true,
-      data: {
-        fileContents: fcontents,
-        organizationId: organizationId,
-      },
-    });
-
-    if (ref == null) {
-      return false;
-    }
-
-    const result = await ref.onClosedPromise();
-    return result === true;
-  }
-
-  async enabled() {
-    return !(await this.keyConnectorService.getUsesKeyConnector());
-  }
-}

libs/common/src/abstractions/filePasswordPrompt.service.ts

@@ -1,5 +0,0 @@
-export abstract class FilePasswordPromptService {
-  protectedFields: () => string[];
-  showPasswordPrompt: (fcontents: string, organizationId: string) => Promise<boolean>;
-  enabled: () => Promise<boolean>;
-}