Changes to use Form Fields

apps/web/src/app/modules/shared.module.ts

@@ -61,6 +61,7 @@ import {
   BadgeModule,
   ButtonModule,
   CalloutModule,
+  FormFieldModule,
   MenuModule,
   SubmitButtonModule,
 } from "@bitwarden/components";
@@ -132,6 +133,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     BadgeModule,
     ButtonModule,
     MenuModule,
+    FormFieldModule,
     SubmitButtonModule,
   ],
   exports: [
@@ -149,6 +151,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     BadgeModule,
     ButtonModule,
     MenuModule,
+    FormFieldModule,
     SubmitButtonModule,
   ],
   providers: [DatePipe],

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

@@ -32,11 +32,11 @@ export class OrganizationExportComponent extends ExportComponent {
     policyService: PolicyService,
     logService: LogService,
     userVerificationService: UserVerificationService,
-    formBuilder: FormBuilder,
     modalService: ModalService,
     apiService: ApiService,
     stateService: StateService,
     modalConfig: ModalConfig,
+    formBuilder: FormBuilder,
     fileDownloadService: FileDownloadService
   ) {
     super(
@@ -48,11 +48,11 @@ export class OrganizationExportComponent extends ExportComponent {
       policyService,
       logService,
       userVerificationService,
-      formBuilder,
       modalService,
       apiService,
       stateService,
       modalConfig,
+      formBuilder,
       fileDownloadService
     );
   }

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

@@ -104,19 +104,6 @@ import { WebFileDownloadService } from "./webFileDownload.service";
     { provide: MessagingServiceAbstraction, useClass: BroadcasterMessagingService },
     { provide: ModalServiceAbstraction, useClass: ModalService },
     { provide: ModalConfigAbstraction, useClass: ModalConfig },
-    {
-      provide: ImportServiceAbstraction,
-      useClass: ImportService,
-      deps: [
-        CipherServiceAbstraction,
-        FolderServiceAbstraction,
-        ApiServiceAbstraction,
-        I18nServiceAbstraction,
-        CollectionServiceAbstraction,
-        PlatformUtilsServiceAbstraction,
-        CryptoServiceAbstraction,
-      ],
-    },
     {
       provide: ExportServiceAbstraction,
       useClass: ExportService,

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

@@ -1,7 +1,6 @@
 <form
   #form
   (ngSubmit)="submit()"
-  ngNativeValidate
   [appApiAction]="formPromise"
   [formGroup]="exportForm"
   *ngIf="exportForm"
@@ -20,10 +19,12 @@
 
   <div class="row">
     <div class="form-group col-6">
-      <label class="tw-text-sm tw-semi-bold" for="format">{{ "fileFormat" | i18n }}</label>
-      <select class="form-control" name="format" formControlName="format">
-        <option *ngFor="let f of formatOptions" [value]="f.value">{{ f.name }}</option>
-      </select>
+      <bit-form-field>
+        <bit-label for="format">{{ "fileFormat" | i18n }}</bit-label>
+        <select bitInput name="format" formControlName="format">
+          <option *ngFor="let f of formatOptions" [value]="f.value">{{ f.name }}</option>
+        </select>
+      </bit-form-field>
     </div>
   </div>
   <div class="row">
@@ -79,51 +80,57 @@
         <br />
 
         <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">
-              <button
-                type="button"
-                class="btn btn-outline-secondary"
-                appStopClick
-                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-                [attr.aria-pressed]="showPassword"
-                (click)="togglePassword()"
-              >
-                <i
-                  class="bwi bwi-lg"
-                  aria-hidden="true"
-                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
-                ></i>
-              </button>
-            </div>
-          </div>
+            <bit-form-field>
+              <bit-label>{{ "filePassword" | i18n }}</bit-label>
+              <input
+                bitInput
+                required
+                type="{{ showPassword ? 'text' : 'password' }}"
+                formControlName="password"
+                name="password"
+              />
 
+              <div class="input-group-append">
+                <button
+                  bitSuffix
+                  bitButton
+                  buttonType="secondary"
+                  appStopClick
+                  appA11yTitle="{{ 'toggleVisibility' | i18n }}"
+                  [attr.aria-pressed]="showPassword"
+                  (click)="togglePassword()"
+                >
+                  <i
+                    class="bwi bwi-lg"
+                    aria-hidden="true"
+                    [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
+                  ></i>
+                </button>
+              </div>
+            </bit-form-field>
+          </div>
           <div class="small text-muted">
             {{ "exportPasswordDescription" | i18n }}
           </div>
           <br />
-          <label for="format">{{ "confirmFilePassword" | i18n }}</label>
-          <div class="input-group">
-            <input
-              formControlName="confirmPassword"
-              name="confirmPassword"
-              class="form-control"
-              type="{{ showConfirmPassword ? 'text' : 'password' }}"
-            />
 
-            <div class="input-group-append">
-              <div class="action-buttons">
+          <div class="input-group">
+            <bit-form-field>
+              <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
+              <input
+                bitInput
+                required
+                type="{{ showConfirmPassword ? 'text' : 'password' }}"
+                formControlName="confirmPassword"
+                name="confirmPassword"
+              />
+
+              <div class="input-group-append">
                 <button
-                  type="button"
-                  class="btn btn-outline-secondary"
+                  bitSuffix
+                  bitButton
+                  buttonType="secondary"
                   appStopClick
                   appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                   [attr.aria-pressed]="showConfirmPassword"
@@ -139,11 +146,11 @@
                   ></i>
                 </button>
               </div>
-            </div>
+            </bit-form-field>
           </div>
-          <br />
         </ng-container>
       </ng-container>
+
       <button
         type="submit"
         class="btn btn-primary btn-submit"

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

@@ -16,7 +16,7 @@ import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification.service";
 import { EncryptedExportType } from "@bitwarden/common/enums/EncryptedExportType";
 
-import { UserVerificationPromptComponent } from "../components/user-verification-prompt.component";
+import { UserVerificationPromptComponent } from "src/app/components/user-verification-prompt.component";
 
 @Component({
   selector: "app-export",
@@ -39,11 +39,11 @@ export class ExportComponent extends BaseExportComponent {
     policyService: PolicyService,
     logService: LogService,
     userVerificationService: UserVerificationService,
-    formBuilder: FormBuilder,
     modalService: ModalService,
     apiService: ApiService,
     stateService: StateService,
     modalConfig: ModalConfig,
+    formBuilder: FormBuilder,
     fileDownloadService: FileDownloadService
   ) {
     super(
@@ -56,11 +56,11 @@ export class ExportComponent extends BaseExportComponent {
       window,
       logService,
       userVerificationService,
-      formBuilder,
       modalService,
       apiService,
       stateService,
       modalConfig,
+      formBuilder,
       fileDownloadService
     );
   }

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

@@ -13,6 +13,8 @@ import { ImportService as ImportServiceAbstraction } from "@bitwarden/common/abs
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { ImportService } from "@bitwarden/common/services/import.service";
 
+import { SharedModule } from "src/app/modules/shared.module";
+
 import { LooseComponentsModule } from "../../modules/loose-components.module";
 
 import { ExportComponent } from "./export.component";
@@ -27,6 +29,7 @@ import { ImportComponent } from "./import.component";
     FormsModule,
     ReactiveFormsModule,
     ImportExportRoutingModule,
+    SharedModule,
   ],
   declarations: [ImportComponent, ExportComponent],
   providers: [

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

@@ -3,6 +3,7 @@ import { Router } from "@angular/router";
 import * as JSZip from "jszip";
 import Swal, { SweetAlertIcon } from "sweetalert2";
 
+import { FilePasswordPromptComponent } from "@bitwarden/angular/components/file-password-prompt.component";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { ImportService } from "@bitwarden/common/abstractions/import.service";
@@ -14,7 +15,6 @@ 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",