From ed865a67470c70a0a968810eb24e173c09f839ed Mon Sep 17 00:00:00 2001
From: ttalty <144813356+ttalty@users.noreply.github.com>
Date: Tue, 28 Nov 2023 14:44:06 -0500
Subject: [PATCH] =?UTF-8?q?[PM-3560]=20Adding=20the=20password=20complexit?=
 =?UTF-8?q?y=20component=20to=20the=20password=20protected=20va=E2=80=A6?=
 =?UTF-8?q?=20(#6936)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Adding the password complexity component to the password protected valut export

* Removing the zxcvbn import as the component handles the strength check
---
 .../tools/vault-export/export.component.html  | 41 +++++++++++--------
 .../export/components/export.component.ts     |  6 ++-
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/app/tools/vault-export/export.component.html b/apps/web/src/app/tools/vault-export/export.component.html
index 159f929084..9d885ba398 100644
--- a/apps/web/src/app/tools/vault-export/export.component.html
+++ b/apps/web/src/app/tools/vault-export/export.component.html
@@ -86,24 +86,29 @@
         <br />
 
         <ng-container *ngIf="fileEncryptionType == encryptedExportType.FileEncrypted">
-          <bit-form-field>
-            <bit-label>{{ "filePassword" | i18n }}</bit-label>
-            <input
-              bitInput
-              type="password"
-              id="filePassword"
-              formControlName="filePassword"
-              name="password"
-            />
-            <button
-              type="button"
-              bitSuffix
-              bitIconButton
-              bitPasswordInputToggle
-              [(toggled)]="showFilePassword"
-            ></button>
-            <bit-hint>{{ "exportPasswordDescription" | i18n }}</bit-hint>
-          </bit-form-field>
+          <div class="tw-mb-3">
+            <bit-form-field>
+              <bit-label>{{ "filePassword" | i18n }}</bit-label>
+              <input
+                bitInput
+                type="password"
+                id="filePassword"
+                formControlName="filePassword"
+                name="password"
+              />
+              <button
+                type="button"
+                bitSuffix
+                bitIconButton
+                bitPasswordInputToggle
+                [(toggled)]="showFilePassword"
+              ></button>
+              <bit-hint>{{ "exportPasswordDescription" | i18n }}</bit-hint>
+            </bit-form-field>
+            <app-password-strength [password]="filePassword" [showText]="true">
+            </app-password-strength>
+          </div>
+
           <bit-form-field>
             <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
             <input
diff --git a/libs/angular/src/tools/export/components/export.component.ts b/libs/angular/src/tools/export/components/export.component.ts
index 5cd567e49f..279e223919 100644
--- a/libs/angular/src/tools/export/components/export.component.ts
+++ b/libs/angular/src/tools/export/components/export.component.ts
@@ -1,4 +1,4 @@
-import { Directive, EventEmitter, OnDestroy, OnInit, Output } from "@angular/core";
+import { Directive, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from "@angular/core";
 import { UntypedFormBuilder, Validators } from "@angular/forms";
 import { merge, startWith, Subject, takeUntil } from "rxjs";
 
@@ -16,10 +16,14 @@ import { EncryptedExportType } from "@bitwarden/common/tools/enums/encrypted-exp
 import { DialogService } from "@bitwarden/components";
 import { VaultExportServiceAbstraction } from "@bitwarden/exporter/vault-export";
 
+import { PasswordStrengthComponent } from "../../../shared/components/password-strength/password-strength.component";
+
 @Directive()
 export class ExportComponent implements OnInit, OnDestroy {
   @Output() onSaved = new EventEmitter();
+  @ViewChild(PasswordStrengthComponent) passwordStrengthComponent: PasswordStrengthComponent;
 
+  filePasswordValue: string = null;
   formPromise: Promise<string>;
   private _disabledByPolicy = false;