From 12b93e74e26ef69d1732769f3b247218ecc56410 Mon Sep 17 00:00:00 2001
From: CarleyDiaz-Bitwarden
 <103955722+CarleyDiaz-Bitwarden@users.noreply.github.com>
Date: Thu, 7 Jul 2022 15:44:45 -0400
Subject: [PATCH] updates requested by Matt

---
 .../file-password-prompt.component.html       | 43 +++++++++++--------
 .../file-password-prompt.component.ts         | 27 +++++++-----
 2 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/apps/web/src/app/components/file-password-prompt.component.html b/apps/web/src/app/components/file-password-prompt.component.html
index 993d957af66..2f27063a057 100644
--- a/apps/web/src/app/components/file-password-prompt.component.html
+++ b/apps/web/src/app/components/file-password-prompt.component.html
@@ -1,6 +1,12 @@
 <div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
   <div class="modal-dialog modal-dialog-scrollable" role="document">
-    <form class="modal-content" #form (ngSubmit)="submit()">
+    <form
+      #form
+      (ngSubmit)="submit()"
+      [appApiAction]="formPromise"
+      [formGroup]="importForm"
+      *ngIf="importForm"
+    >
       <div class="tw-text-center bwi-3x">
         <i class="bwi bwi-exclamation-triangle text-warning"></i>
       </div>
@@ -17,26 +23,29 @@
 
       <div class="modal-footer">
         <div class="form-group modal-content">
-          <label for="filePassword">{{ "confirmFilePassword" | i18n }}</label>
           <div>
             <div class="input-group">
-              <input
-                id="filePassword"
-                type="{{ showPassword ? 'text' : 'password' }}"
-                name="filePassword"
-                class="text-monospace form-control"
-                [(ngModel)]="filePassword"
-                required
-                appAutofocus
-                appInputVerbatim
-              />
-
+              <bit-form-field>
+                <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
+                <input
+                  bitInput
+                  required
+                  type="{{ showPassword ? 'text' : 'password' }}"
+                  formControlName="filePassword"
+                  name="filePassword"
+                  appAutofocus
+                  appInputVerbatim
+                />
+              </bit-form-field>
               <div class="input-group-append">
                 <div class="action-buttons">
                   <button
-                    type="button"
-                    class="btn btn-outline-secondary"
+                    bitSuffix
+                    bitButton
+                    buttonType="secondary"
+                    appStopClick
                     appA11yTitle="{{ 'toggleVisibility' | i18n }}"
+                    [attr.aria-pressed]="showPassword"
                     (click)="togglePassword()"
                   >
                     <i
@@ -50,10 +59,10 @@
             </div>
           </div>
           <div class="tw-mt-4">
-            <button type="submit" class="btn btn-primary btn-submit" appBlurClick>
+            <button bitSuffix bitButton buttonType="primary" type="submit" appBlurClick>
               <span>{{ "importData" | i18n }}</span>
             </button>
-            <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+            <button bitSuffix bitButton buttonType="primary" type="button" data-dismiss="modal">
               {{ "cancel" | i18n }}
             </button>
           </div>
diff --git a/libs/angular/src/components/file-password-prompt.component.ts b/libs/angular/src/components/file-password-prompt.component.ts
index 428712c5252..203de86a634 100644
--- a/libs/angular/src/components/file-password-prompt.component.ts
+++ b/libs/angular/src/components/file-password-prompt.component.ts
@@ -1,4 +1,5 @@
 import { Directive } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
 
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { ImportService } from "@bitwarden/common/abstractions/import.service";
@@ -13,20 +14,24 @@ import { ModalRef } from "./modal/modal.ref";
  */
 @Directive()
 export class FilePasswordPromptComponent {
-  showPassword = false;
-  filePassword = "";
-  organizationId = "";
-  fileContents = "";
+  showPassword: boolean;
+
+  importForm = this.formBuilder.group({
+    filePassword: [""],
+    organizationId: [""],
+    fileContents: [""],
+  });
 
   constructor(
     private modalRef: ModalRef,
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
     private importService: ImportService,
-    config: ModalConfig
+    config: ModalConfig,
+    protected formBuilder: FormBuilder
   ) {
-    this.fileContents = config.data.fileContents;
-    this.organizationId = config.data.organizationId;
+    this.importForm.get("fileContents").setValue(config.data.fileContents);
+    this.importForm.get("organizationId").setValue(config.data.organizationId);
   }
 
   togglePassword() {
@@ -36,14 +41,14 @@ export class FilePasswordPromptComponent {
   async submit() {
     const importerPassword = this.importService.getImporter(
       "bitwardenpasswordprotected",
-      this.organizationId,
-      this.filePassword
+      this.importForm.get("organizationId").value,
+      this.importForm.get("filePassword").value
     );
 
     const formPromise = this.importService.import(
       importerPassword,
-      this.fileContents,
-      this.organizationId
+      this.importForm.get("fileContents").value,
+      this.importForm.get("organizationId").value
     );
     const passwordError = await formPromise;