[SG-414] Refactor password strength component (#3186)

* moved password strength to libs

* refactored password strength component

* made changes on desktop and browser to reuse component

* resolved suggestions from PR review

* shared module restructure

* shared module restructure

apps/browser/src/popup/accounts/register.component.html

@@ -25,11 +25,8 @@
             <div class="row-main">
               <label for="masterPassword">
                 {{ "masterPass" | i18n }}
-                <strong
+                <strong class="sub-label text-{{ color }}" *ngIf="text">
-                  class="sub-label text-{{ masterPasswordScoreColor }}"
+                  {{ text }}
-                  *ngIf="masterPasswordScoreText"
-                >
-                  {{ masterPasswordScoreText }}
                 </strong>
               </label>
               <input
@@ -38,7 +35,6 @@
                 class="monospaced"
                 formControlName="masterPassword"
                 appInputVerbatim
-                (input)="updatePasswordStrength()"
               />
             </div>
             <div class="action-buttons">
@@ -58,17 +54,14 @@
               </button>
             </div>
           </div>
-          <div class="progress">
+          <app-password-strength
-            <div
+            [password]="formGroup.get('masterPassword')?.value"
-              class="progress-bar bg-{{ masterPasswordScoreColor }}"
+            [email]="formGroup.get('email')?.value"
-              role="progressbar"
+            [name]="formGroup.get('name')?.value"
-              aria-valuenow="0"
+            (passwordStrengthResult)="getStrengthResult($event)"
-              aria-valuemin="0"
+            (passwordScoreColor)="getPasswordScoreText($event)"
-              aria-valuemax="100"
+          >
-              [ngStyle]="{ width: masterPasswordScoreWidth + '%' }"
+          </app-password-strength>
-              attr.aria-valuenow="{{ masterPasswordScoreWidth }}"
-            ></div>
-          </div>
         </div>
       </div>
       <div class="box-footer">

apps/browser/src/popup/accounts/register.component.ts

@@ -19,6 +19,9 @@ import { StateService } from "@bitwarden/common/abstractions/state.service";
   templateUrl: "register.component.html",
 })
 export class RegisterComponent extends BaseRegisterComponent {
+  color: string;
+  text: string;
+
   constructor(
     formValidationErrorService: FormValidationErrorsService,
     formBuilder: UntypedFormBuilder,

apps/browser/src/popup/accounts/set-password.component.html

@@ -42,10 +42,10 @@
                 <label for="masterPassword"
                   >{{ "masterPass" | i18n }}
                   <strong
-                    class="sub-label text-{{ masterPasswordScoreColor }}"
+                    class="sub-label text-{{ passwordStrengthComponent?.masterPasswordScoreColor }}"
-                    *ngIf="masterPasswordScoreText"
+                    *ngIf="passwordStrengthComponent?.masterPasswordScoreText"
                   >
-                    {{ masterPasswordScoreText }}
+                    {{ passwordStrengthComponent?.masterPasswordScoreText }}
                   </strong>
                 </label>
                 <input
@@ -55,7 +55,6 @@
                   class="monospaced"
                   [(ngModel)]="masterPassword"
                   required
-                  (input)="updatePasswordStrength()"
                   appInputVerbatim
                 />
               </div>
@@ -76,17 +75,14 @@
                 </button>
               </div>
             </div>
-            <div class="progress">
+
-              <div
+            <app-password-strength
-                class="progress-bar bg-{{ masterPasswordScoreColor }}"
+              [password]="masterPassword"
-                role="progressbar"
+              [email]="email"
-                aria-valuenow="0"
+              (passwordStrengthResult)="getStrengthResult($event)"
-                aria-valuemin="0"
+              (passwordScoreColor)="getPasswordScoreText($event)"
-                aria-valuemax="100"
+            >
-                [ngStyle]="{ width: masterPasswordScoreWidth + '%' }"
+            </app-password-strength>
-                attr.aria-valuenow="{{ masterPasswordScoreWidth }}"
-              ></div>
-            </div>
           </div>
         </div>
         <div class="box-footer">

apps/browser/src/popup/accounts/set-password.component.ts

@@ -44,34 +44,4 @@ export class SetPasswordComponent extends BaseSetPasswordComponent {
       stateService
     );
   }
-
-  get masterPasswordScoreWidth() {
-    return this.masterPasswordScore == null ? 0 : (this.masterPasswordScore + 1) * 20;
-  }
-
-  get masterPasswordScoreColor() {
-    switch (this.masterPasswordScore) {
-      case 4:
-        return "success";
-      case 3:
-        return "primary";
-      case 2:
-        return "warning";
-      default:
-        return "danger";
-    }
-  }
-
-  get masterPasswordScoreText() {
-    switch (this.masterPasswordScore) {
-      case 4:
-        return this.i18nService.t("strong");
-      case 3:
-        return this.i18nService.t("good");
-      case 2:
-        return this.i18nService.t("weak");
-      default:
-        return this.masterPasswordScore != null ? this.i18nService.t("weak") : null;
-    }
-  }
 }

apps/browser/src/popup/accounts/update-temp-password.component.html

@@ -30,11 +30,8 @@
             <div class="row-main">
               <label for="masterPassword">
                 {{ "masterPass" | i18n }}
-                <strong
+                <strong class="sub-label text-{{ color }}" *ngIf="text">
-                  class="sub-label text-{{ masterPasswordScoreStyle.Color }}"
+                  {{ text }}
-                  *ngIf="masterPasswordScoreStyle.Text"
-                >
-                  {{ masterPasswordScoreStyle.Text }}
                 </strong>
               </label>
               <input
@@ -45,7 +42,6 @@
                 [(ngModel)]="masterPassword"
                 required
                 appInputVerbatim
-                (input)="updatePasswordStrength()"
               />
             </div>
             <div class="action-buttons">
@@ -65,17 +61,13 @@
               </button>
             </div>
           </div>
-          <div class="progress">
+          <app-password-strength
-            <div
+            [password]="masterPassword"
-              class="progress-bar bg-{{ masterPasswordScoreStyle.Color }}"
+            [email]="email"
-              role="progressbar"
+            (passwordStrengthResult)="getStrengthResult($event)"
-              aria-valuenow="0"
+            (passwordScoreColor)="getPasswordScoreText($event)"
-              aria-valuemin="0"
+          >
-              aria-valuemax="100"
+          </app-password-strength>
-              [ngStyle]="{ width: masterPasswordScoreStyle.Width + '%' }"
-              attr.aria-valuenow="{{ masterPasswordScoreStyle.Width }}"
-            ></div>
-          </div>
         </div>
       </div>
     </div>

apps/browser/src/popup/accounts/update-temp-password.component.ts

@@ -12,47 +12,11 @@ import { PolicyService } from "@bitwarden/common/abstractions/policy.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { SyncService } from "@bitwarden/common/abstractions/sync.service";
 
-interface MasterPasswordScore {
-  Color: string;
-  Text: string;
-  Width: number;
-}
-
 @Component({
   selector: "app-update-temp-password",
   templateUrl: "update-temp-password.component.html",
 })
 export class UpdateTempPasswordComponent extends BaseUpdateTempPasswordComponent {
-  get masterPasswordScoreStyle(): MasterPasswordScore {
-    const scoreWidth = this.masterPasswordScore == null ? 0 : (this.masterPasswordScore + 1) * 20;
-    switch (this.masterPasswordScore) {
-      case 4:
-        return {
-          Color: "bg-success",
-          Text: "strong",
-          Width: scoreWidth,
-        };
-      case 3:
-        return {
-          Color: "bg-primary",
-          Text: "good",
-          Width: scoreWidth,
-        };
-      case 2:
-        return {
-          Color: "bg-warning",
-          Text: "weak",
-          Width: scoreWidth,
-        };
-      default:
-        return {
-          Color: "bg-danger",
-          Text: "weak",
-          Width: scoreWidth,
-        };
-    }
-  }
-
   constructor(
     i18nService: I18nService,
     platformUtilsService: PlatformUtilsService,

apps/desktop/src/app/accounts/register.component.html

@@ -18,11 +18,8 @@
             <div class="row-main">
               <label for="masterPassword">
                 {{ "masterPass" | i18n }}
-                <strong
+                <strong class="sub-label text-{{ color }}" *ngIf="text">
-                  class="sub-label text-{{ masterPasswordScoreColor }}"
+                  {{ text }}
-                  *ngIf="masterPasswordScoreText"
-                >
-                  {{ masterPasswordScoreText }}
                 </strong>
               </label>
               <input
@@ -30,7 +27,6 @@
                 type="{{ showPassword ? 'text' : 'password' }}"
                 class="monospaced"
                 formControlName="masterPassword"
-                (input)="updatePasswordStrength()"
                 appInputVerbatim
               />
             </div>
@@ -51,17 +47,14 @@
               </button>
             </div>
           </div>
-          <div class="progress">
+          <app-password-strength
-            <div
+            [password]="formGroup.get('masterPassword')?.value"
-              class="progress-bar bg-{{ masterPasswordScoreColor }}"
+            [email]="formGroup.get('email')?.value"
-              role="progressbar"
+            [name]="formGroup.get('name')?.value"
-              aria-valuenow="0"
+            (passwordStrengthResult)="getStrengthResult($event)"
-              aria-valuemin="0"
+            (passwordScoreColor)="getPasswordScoreText($event)"
-              aria-valuemax="100"
+          >
-              [ngStyle]="{ width: masterPasswordScoreWidth + '%' }"
+          </app-password-strength>
-              attr.aria-valuenow="{{ masterPasswordScoreWidth }}"
-            ></div>
-          </div>
         </div>
       </div>
       <div class="box-footer">

apps/desktop/src/app/accounts/set-password.component.html

@@ -37,11 +37,8 @@
                 <div class="row-main">
                   <label for="masterPassword"
                     >{{ "masterPass" | i18n }}
-                    <strong
+                    <strong class="sub-label text-{{ color }}" *ngIf="text">
-                      class="sub-label text-{{ masterPasswordScoreColor }}"
+                      {{ text }}
-                      *ngIf="masterPasswordScoreText"
-                    >
-                      {{ masterPasswordScoreText }}
                     </strong>
                   </label>
                   <input
@@ -51,7 +48,6 @@
                     class="monospaced"
                     [(ngModel)]="masterPassword"
                     required
-                    (input)="updatePasswordStrength()"
                     appInputVerbatim
                   />
                 </div>
@@ -72,17 +68,13 @@
                   </button>
                 </div>
               </div>
-              <div class="progress">
+              <app-password-strength
-                <div
+                [password]="masterPassword"
-                  class="progress-bar bg-{{ masterPasswordScoreColor }}"
+                [email]="email"
-                  role="progressbar"
+                (passwordStrengthResult)="getStrengthResult($event)"
-                  aria-valuenow="0"
+                (passwordScoreColor)="getPasswordScoreText($event)"
-                  aria-valuemin="0"
+              >
-                  aria-valuemax="100"
+              </app-password-strength>
-                  [ngStyle]="{ width: masterPasswordScoreWidth + '%' }"
-                  attr.aria-valuenow="{{ masterPasswordScoreWidth }}"
-                ></div>
-              </div>
             </div>
           </div>
           <div class="box-footer">

apps/desktop/src/app/accounts/set-password.component.ts

@@ -50,36 +50,6 @@ export class SetPasswordComponent extends BaseSetPasswordComponent implements On
     );
   }
 
-  get masterPasswordScoreWidth() {
-    return this.masterPasswordScore == null ? 0 : (this.masterPasswordScore + 1) * 20;
-  }
-
-  get masterPasswordScoreColor() {
-    switch (this.masterPasswordScore) {
-      case 4:
-        return "success";
-      case 3:
-        return "primary";
-      case 2:
-        return "warning";
-      default:
-        return "danger";
-    }
-  }
-
-  get masterPasswordScoreText() {
-    switch (this.masterPasswordScore) {
-      case 4:
-        return this.i18nService.t("strong");
-      case 3:
-        return this.i18nService.t("good");
-      case 2:
-        return this.i18nService.t("weak");
-      default:
-        return this.masterPasswordScore != null ? this.i18nService.t("weak") : null;
-    }
-  }
-
   async ngOnInit() {
     await super.ngOnInit();
     this.broadcasterService.subscribe(BroadcasterSubscriptionId, async (message: any) => {

apps/desktop/src/app/accounts/update-temp-password.component.html

@@ -16,11 +16,8 @@
             <div class="row-main">
               <label for="masterPassword">
                 {{ "masterPass" | i18n }}
-                <strong
+                <strong class="sub-label text-{{ color }}" *ngIf="text">
-                  class="sub-label text-{{ masterPasswordScoreStyle.Color }}"
+                  {{ text }}
-                  *ngIf="masterPasswordScoreStyle.Text"
-                >
-                  {{ masterPasswordScoreStyle.Text }}
                 </strong>
               </label>
               <input
@@ -31,7 +28,6 @@
                 [(ngModel)]="masterPassword"
                 required
                 [appAutofocus]="masterPassword === ''"
-                (input)="updatePasswordStrength()"
                 appInputVerbatim
               />
             </div>
@@ -52,17 +48,13 @@
               </button>
             </div>
           </div>
-          <div class="progress">
+          <app-password-strength
-            <div
+            [password]="masterPassword"
-              class="progress-bar bg-{{ masterPasswordScoreStyle.Color }}"
+            [email]="email"
-              role="progressbar"
+            (passwordStrengthResult)="getStrengthResult($event)"
-              aria-valuenow="0"
+            (passwordScoreColor)="getPasswordScoreText($event)"
-              aria-valuemin="0"
+          >
-              aria-valuemax="100"
+          </app-password-strength>
-              [ngStyle]="{ width: masterPasswordScoreStyle.Width + '%' }"
-              attr.aria-valuenow="{{ masterPasswordScoreStyle.Width }}"
-            ></div>
-          </div>
         </div>
       </div>
     </div>

apps/desktop/src/app/accounts/update-temp-password.component.ts

@@ -12,46 +12,11 @@ import { PolicyService } from "@bitwarden/common/abstractions/policy.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { SyncService } from "@bitwarden/common/abstractions/sync.service";
 
-interface MasterPasswordScore {
-  Color: string;
-  Text: string;
-  Width: number;
-}
-
 @Component({
   selector: "app-update-temp-password",
   templateUrl: "update-temp-password.component.html",
 })
 export class UpdateTempPasswordComponent extends BaseUpdateTempPasswordComponent {
-  get masterPasswordScoreStyle(): MasterPasswordScore {
-    const scoreWidth = this.masterPasswordScore == null ? 0 : (this.masterPasswordScore + 1) * 20;
-    switch (this.masterPasswordScore) {
-      case 4:
-        return {
-          Color: "bg-success",
-          Text: "strong",
-          Width: scoreWidth,
-        };
-      case 3:
-        return {
-          Color: "bg-primary",
-          Text: "good",
-          Width: scoreWidth,
-        };
-      case 2:
-        return {
-          Color: "bg-warning",
-          Text: "weak",
-          Width: scoreWidth,
-        };
-      default:
-        return {
-          Color: "bg-danger",
-          Text: "weak",
-          Width: scoreWidth,
-        };
-    }
-  }
   constructor(
     i18nService: I18nService,
     platformUtilsService: PlatformUtilsService,

apps/web/src/app/accounts/set-password.component.html

@@ -32,11 +32,15 @@
                   name="MasterPasswordHash"
                   class="text-monospace form-control mb-1"
                   [(ngModel)]="masterPassword"
-                  (input)="updatePasswordStrength()"
                   required
                   appInputVerbatim
                 />
-                <app-password-strength [score]="masterPasswordScore" [showText]="true">
+                <app-password-strength
+                  [password]="masterPassword"
+                  [email]="email"
+                  [showText]="true"
+                  (passwordStrengthResult)="getStrengthResult($event)"
+                >
                 </app-password-strength>
               </div>
               <div>

apps/web/src/app/accounts/update-password.component.html

@@ -44,13 +44,13 @@
                     name="NewMasterPasswordHash"
                     class="form-control mb-1"
                     [(ngModel)]="masterPassword"
-                    (input)="updatePasswordStrength()"
                     required
                     appInputVerbatim
                     autocomplete="new-password"
                   />
                   <app-password-strength
-                    [score]="masterPasswordScore"
+                    [password]="masterPassword"
+                    [email]="email"
                     [showText]="true"
                   ></app-password-strength>
                 </div>

apps/web/src/app/accounts/update-temp-password.component.html

@@ -21,11 +21,14 @@
                   name="MasterPasswordHash"
                   class="text-monospace form-control mb-1"
                   [(ngModel)]="masterPassword"
-                  (input)="updatePasswordStrength()"
                   required
                   appInputVerbatim
                 />
-                <app-password-strength [score]="masterPasswordScore" [showText]="true">
+                <app-password-strength
+                  [password]="masterPassword"
+                  [email]="email"
+                  [showText]="true"
+                >
                 </app-password-strength>
               </div>
               <div>

apps/web/src/app/components/password-strength.component.ts

@@ -1,40 +0,0 @@
-import { Component, Input, OnChanges } from "@angular/core";
-
-import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
-
-@Component({
-  selector: "app-password-strength",
-  templateUrl: "password-strength.component.html",
-})
-export class PasswordStrengthComponent implements OnChanges {
-  @Input() score?: number;
-  @Input() showText = false;
-
-  scoreWidth = 0;
-  color = "bg-danger";
-  text: string;
-
-  constructor(private i18nService: I18nService) {}
-
-  ngOnChanges(): void {
-    this.scoreWidth = this.score == null ? 0 : (this.score + 1) * 20;
-    switch (this.score) {
-      case 4:
-        this.color = "bg-success";
-        this.text = this.i18nService.t("strong");
-        break;
-      case 3:
-        this.color = "bg-primary";
-        this.text = this.i18nService.t("good");
-        break;
-      case 2:
-        this.color = "bg-warning";
-        this.text = this.i18nService.t("weak");
-        break;
-      default:
-        this.color = "bg-danger";
-        this.text = this.score != null ? this.i18nService.t("weak") : null;
-        break;
-    }
-  }
-}

apps/web/src/app/modules/register-form/register-form.component.html

@@ -34,7 +34,6 @@
         <input
           id="register-form_input_master-password"
           bitInput
-          (input)="updatePasswordStrength()"
           type="{{ showPassword ? 'text' : 'password' }}"
           formControlName="masterPassword"
         />
@@ -50,7 +49,13 @@
           {{ "masterPassImportant" | i18n }}
         </bit-hint>
       </bit-form-field>
-      <app-password-strength [score]="masterPasswordScore" [showText]="true">
+      <app-password-strength
+        [password]="formGroup.get('masterPassword')?.value"
+        [email]="formGroup.get('email')?.value"
+        [name]="formGroup.get('name')?.value"
+        [showText]="true"
+        (passwordStrengthResult)="getStrengthResult($event)"
+      >
       </app-password-strength>
     </div>
 

apps/web/src/app/modules/register-form/register-form.component.ts

@@ -69,7 +69,7 @@ export class RegisterFormComponent extends BaseRegisterComponent {
     if (
       this.enforcedPolicyOptions != null &&
       !this.policyService.evaluateMasterPassword(
-        this.masterPasswordScore,
+        this.passwordStrengthResult.score,
         this.formGroup.get("masterPassword")?.value,
         this.enforcedPolicyOptions
       )

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

@@ -66,7 +66,6 @@ import {
   MenuModule,
 } from "@bitwarden/components";
 
-import { PasswordStrengthComponent } from "../components/password-strength.component";
 import { PaymentComponent } from "../settings/payment.component";
 import { TaxInfoComponent } from "../settings/tax-info.component";
 
@@ -122,7 +121,7 @@ registerLocaleData(localeZhCn, "zh-CN");
 registerLocaleData(localeZhTw, "zh-TW");
 
 @NgModule({
-  declarations: [PasswordStrengthComponent, PaymentComponent, TaxInfoComponent],
+  declarations: [PaymentComponent, TaxInfoComponent],
   imports: [
     CommonModule,
     DragDropModule,
@@ -158,7 +157,6 @@ registerLocaleData(localeZhTw, "zh-TW");
     MenuModule,
     FormFieldModule,
     SubmitButtonModule,
-    PasswordStrengthComponent,
     PaymentComponent,
     TaxInfoComponent,
   ],

apps/web/src/app/organizations/manage/reset-password.component.html

@@ -53,7 +53,6 @@
                 required
                 appInputVerbatim
                 autocomplete="new-password"
-                (input)="updatePasswordStrength()"
               />
               <div class="input-group-append">
                 <button
@@ -78,7 +77,7 @@
                 </button>
               </div>
             </div>
-            <app-password-strength [score]="masterPasswordScore" [showText]="true">
+            <app-password-strength [password]="newPassword" [email]="email" [showText]="true">
             </app-password-strength>
           </div>
         </div>

apps/web/src/app/organizations/manage/reset-password.component.ts

@@ -1,5 +1,6 @@
-import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from "@angular/core";
 
+import { PasswordStrengthComponent } from "@bitwarden/angular/shared/components/password-strength/password-strength.component";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -22,13 +23,13 @@ export class ResetPasswordComponent implements OnInit {
   @Input() id: string;
   @Input() organizationId: string;
   @Output() onPasswordReset = new EventEmitter();
+  @ViewChild(PasswordStrengthComponent) passwordStrengthComponent: PasswordStrengthComponent;
 
   enforcedPolicyOptions: MasterPasswordPolicyOptions;
   newPassword: string = null;
   showPassword = false;
   masterPasswordScore: number;
   formPromise: Promise<any>;
-  private newPasswordStrengthTimeout: any;
 
   constructor(
     private apiService: ApiService,
@@ -52,7 +53,7 @@ export class ResetPasswordComponent implements OnInit {
   async generatePassword() {
     const options = (await this.passwordGenerationService.getOptions())[0];
     this.newPassword = await this.passwordGenerationService.generatePassword(options);
-    this.updatePasswordStrength();
+    this.passwordStrengthComponent.updatePasswordStrength(this.newPassword);
   }
 
   togglePassword() {
@@ -183,35 +184,4 @@ export class ResetPasswordComponent implements OnInit {
       this.logService.error(e);
     }
   }
-
-  updatePasswordStrength() {
-    if (this.newPasswordStrengthTimeout != null) {
-      clearTimeout(this.newPasswordStrengthTimeout);
-    }
-    this.newPasswordStrengthTimeout = setTimeout(() => {
-      const strengthResult = this.passwordGenerationService.passwordStrength(
-        this.newPassword,
-        this.getPasswordStrengthUserInput()
-      );
-      this.masterPasswordScore = strengthResult == null ? null : strengthResult.score;
-    }, 300);
-  }
-
-  private getPasswordStrengthUserInput() {
-    let userInput: string[] = [];
-    const atPosition = this.email.indexOf("@");
-    if (atPosition > -1) {
-      userInput = userInput.concat(
-        this.email
-          .substr(0, atPosition)
-          .trim()
-          .toLowerCase()
-          .split(/[^A-Za-z0-9]/)
-      );
-    }
-    if (this.name != null && this.name !== "") {
-      userInput = userInput.concat(this.name.trim().toLowerCase().split(" "));
-    }
-    return userInput;
-  }
 }

apps/web/src/app/settings/change-password.component.html

@@ -37,15 +37,17 @@
           name="NewMasterPasswordHash"
           class="form-control mb-1"
           [(ngModel)]="masterPassword"
-          (input)="updatePasswordStrength()"
           required
           appInputVerbatim
           autocomplete="new-password"
         />
         <app-password-strength
-          [score]="masterPasswordScore"
+          [password]="masterPassword"
+          [email]="email"
           [showText]="true"
-        ></app-password-strength>
+          (passwordStrengthResult)="getStrengthResult($event)"
+        >
+        </app-password-strength>
       </div>
     </div>
     <div class="col-6">

apps/web/src/app/settings/emergency-access-takeover.component.html

@@ -39,12 +39,16 @@
                 name="NewMasterPasswordHash"
                 class="form-control mb-1"
                 [(ngModel)]="masterPassword"
-                (input)="updatePasswordStrength()"
                 required
                 appInputVerbatim
                 autocomplete="new-password"
               />
-              <app-password-strength [score]="masterPasswordScore" [showText]="true">
+              <app-password-strength
+                [password]="masterPassword"
+                [email]="email"
+                [showText]="true"
+                (passwordStrengthResult)="getStrengthResult($event)"
+              >
               </app-password-strength>
             </div>
           </div>

libs/angular/src/components/change-password.component.ts

@@ -12,20 +12,22 @@ import { EncString } from "@bitwarden/common/models/domain/encString";
 import { MasterPasswordPolicyOptions } from "@bitwarden/common/models/domain/masterPasswordPolicyOptions";
 import { SymmetricCryptoKey } from "@bitwarden/common/models/domain/symmetricCryptoKey";
 
+import { PasswordColorText } from "../shared/components/password-strength/password-strength.component";
+
 @Directive()
 export class ChangePasswordComponent implements OnInit {
   masterPassword: string;
   masterPasswordRetype: string;
   formPromise: Promise<any>;
-  masterPasswordScore: number;
   enforcedPolicyOptions: MasterPasswordPolicyOptions;
+  passwordStrengthResult: any;
+  color: string;
+  text: string;
 
   protected email: string;
   protected kdf: KdfType;
   protected kdfIterations: number;
 
-  private masterPasswordStrengthTimeout: any;
-
   constructor(
     protected i18nService: I18nService,
     protected cryptoService: CryptoService,
@@ -116,10 +118,7 @@ export class ChangePasswordComponent implements OnInit {
       return false;
     }
 
-    const strengthResult = this.passwordGenerationService.passwordStrength(
+    const strengthResult = this.passwordStrengthResult;
-      this.masterPassword,
-      this.getPasswordStrengthUserInput()
-    );
 
     if (
       this.enforcedPolicyOptions != null &&
@@ -153,19 +152,6 @@ export class ChangePasswordComponent implements OnInit {
     return true;
   }
 
-  updatePasswordStrength() {
-    if (this.masterPasswordStrengthTimeout != null) {
-      clearTimeout(this.masterPasswordStrengthTimeout);
-    }
-    this.masterPasswordStrengthTimeout = setTimeout(() => {
-      const strengthResult = this.passwordGenerationService.passwordStrength(
-        this.masterPassword,
-        this.getPasswordStrengthUserInput()
-      );
-      this.masterPasswordScore = strengthResult == null ? null : strengthResult.score;
-    }, 300);
-  }
-
   async logOut() {
     const confirmed = await this.platformUtilsService.showDialog(
       this.i18nService.t("logOutConfirmation"),
@@ -178,18 +164,12 @@ export class ChangePasswordComponent implements OnInit {
     }
   }
 
-  private getPasswordStrengthUserInput() {
+  getStrengthResult(result: any) {
-    let userInput: string[] = [];
+    this.passwordStrengthResult = result;
-    const atPosition = this.email.indexOf("@");
+  }
-    if (atPosition > -1) {
+
-      userInput = userInput.concat(
+  getPasswordScoreText(event: PasswordColorText) {
-        this.email
+    this.color = event.color;
-          .substr(0, atPosition)
+    this.text = event.text;
-          .trim()
-          .toLowerCase()
-          .split(/[^A-Za-z0-9]/)
-      );
-    }
-    return userInput;
   }
 }

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

@@ -22,6 +22,8 @@ import { KeysRequest } from "@bitwarden/common/models/request/keysRequest";
 import { ReferenceEventRequest } from "@bitwarden/common/models/request/referenceEventRequest";
 import { RegisterRequest } from "@bitwarden/common/models/request/registerRequest";
 
+import { PasswordColorText } from "../shared/components/password-strength/password-strength.component";
+
 import { CaptchaProtectedComponent } from "./captchaProtected.component";
 
 @Directive()
@@ -31,10 +33,12 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
 
   showPassword = false;
   formPromise: Promise<any>;
-  masterPasswordScore: number;
   referenceData: ReferenceEventRequest;
   showTerms = true;
   showErrorSummary = false;
+  passwordStrengthResult: any;
+  color: string;
+  text: string;
 
   formGroup = this.formBuilder.group(
     {
@@ -63,7 +67,6 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
   );
 
   protected successRoute = "login";
-  private masterPasswordStrengthTimeout: any;
 
   constructor(
     protected formValidationErrorService: FormValidationErrorsService,
@@ -87,36 +90,6 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
     this.setupCaptcha();
   }
 
-  get masterPasswordScoreWidth() {
-    return this.masterPasswordScore == null ? 0 : (this.masterPasswordScore + 1) * 20;
-  }
-
-  get masterPasswordScoreColor() {
-    switch (this.masterPasswordScore) {
-      case 4:
-        return "success";
-      case 3:
-        return "primary";
-      case 2:
-        return "warning";
-      default:
-        return "danger";
-    }
-  }
-
-  get masterPasswordScoreText() {
-    switch (this.masterPasswordScore) {
-      case 4:
-        return this.i18nService.t("strong");
-      case 3:
-        return this.i18nService.t("good");
-      case 2:
-        return this.i18nService.t("weak");
-      default:
-        return this.masterPasswordScore != null ? this.i18nService.t("weak") : null;
-    }
-  }
-
   async submit(showToast = true) {
     let email = this.formGroup.get("email")?.value;
     let name = this.formGroup.get("name")?.value;
@@ -147,11 +120,7 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
       return;
     }
 
-    const strengthResult = this.passwordGenerationService.passwordStrength(
+    if (this.passwordStrengthResult != null && this.passwordStrengthResult.score < 3) {
-      masterPassword,
-      this.getPasswordStrengthUserInput()
-    );
-    if (strengthResult != null && strengthResult.score < 3) {
       const result = await this.platformUtilsService.showDialog(
         this.i18nService.t("weakMasterPasswordDesc"),
         this.i18nService.t("weakMasterPassword"),
@@ -235,39 +204,13 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
     this.showPassword = !this.showPassword;
   }
 
-  updatePasswordStrength() {
+  getStrengthResult(result: any) {
-    const masterPassword = this.formGroup.get("masterPassword")?.value;
+    this.passwordStrengthResult = result;
-
-    if (this.masterPasswordStrengthTimeout != null) {
-      clearTimeout(this.masterPasswordStrengthTimeout);
-    }
-    this.masterPasswordStrengthTimeout = setTimeout(() => {
-      const strengthResult = this.passwordGenerationService.passwordStrength(
-        masterPassword,
-        this.getPasswordStrengthUserInput()
-      );
-      this.masterPasswordScore = strengthResult == null ? null : strengthResult.score;
-    }, 300);
   }
 
-  private getPasswordStrengthUserInput() {
+  getPasswordScoreText(event: PasswordColorText) {
-    let userInput: string[] = [];
+    this.color = event.color;
-    const email = this.formGroup.get("email")?.value;
+    this.text = event.text;
-    const name = this.formGroup.get("name").value;
-    const atPosition = email.indexOf("@");
-    if (atPosition > -1) {
-      userInput = userInput.concat(
-        email
-          .substr(0, atPosition)
-          .trim()
-          .toLowerCase()
-          .split(/[^A-Za-z0-9]/)
-      );
-    }
-    if (name != null && name !== "") {
-      userInput = userInput.concat(name.trim().toLowerCase().split(" "));
-    }
-    return userInput;
   }
 
   private getErrorToastMessage() {

libs/angular/src/jslib.module.ts

@@ -29,6 +29,7 @@ import { I18nPipe } from "./pipes/i18n.pipe";
 import { SearchCiphersPipe } from "./pipes/search-ciphers.pipe";
 import { SearchPipe } from "./pipes/search.pipe";
 import { UserNamePipe } from "./pipes/user-name.pipe";
+import { PasswordStrengthComponent } from "./shared/components/password-strength/password-strength.component";
 
 @NgModule({
   imports: [
@@ -68,6 +69,7 @@ import { UserNamePipe } from "./pipes/user-name.pipe";
     StopPropDirective,
     TrueFalseValueDirective,
     UserNamePipe,
+    PasswordStrengthComponent,
   ],
   exports: [
     A11yInvalidDirective,
@@ -97,6 +99,7 @@ import { UserNamePipe } from "./pipes/user-name.pipe";
     StopPropDirective,
     TrueFalseValueDirective,
     UserNamePipe,
+    PasswordStrengthComponent,
   ],
   providers: [CreditCardNumberPipe, DatePipe, I18nPipe, SearchPipe, UserNamePipe],
 })

libs/angular/src/shared/components/password-strength/password-strength.component.ts

@@ -0,0 +1,133 @@
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from "@angular/core";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { PasswordGenerationService } from "@bitwarden/common/abstractions/passwordGeneration.service";
+
+export interface PasswordColorText {
+  color: string;
+  text: string;
+}
+
+@Component({
+  selector: "app-password-strength",
+  templateUrl: "password-strength.component.html",
+})
+export class PasswordStrengthComponent implements OnChanges {
+  @Input() showText = false;
+  @Input() email: string;
+  @Input() password: string;
+  @Input() name: string;
+
+  @Output() passwordStrengthResult = new EventEmitter<any>();
+  @Output() passwordScoreColor = new EventEmitter<PasswordColorText>();
+
+  masterPasswordScore: number;
+  scoreWidth = 0;
+  color = "bg-danger";
+  text: string;
+
+  private masterPasswordStrengthTimeout: any;
+
+  //used by desktop and browser to display strength text color
+  get masterPasswordScoreColor() {
+    switch (this.masterPasswordScore) {
+      case 4:
+        return "success";
+      case 3:
+        return "primary";
+      case 2:
+        return "warning";
+      default:
+        return "danger";
+    }
+  }
+
+  //used by desktop and browser to display strength text
+  get masterPasswordScoreText() {
+    switch (this.masterPasswordScore) {
+      case 4:
+        return this.i18nService.t("strong");
+      case 3:
+        return this.i18nService.t("good");
+      case 2:
+        return this.i18nService.t("weak");
+      default:
+        return this.masterPasswordScore != null ? this.i18nService.t("weak") : null;
+    }
+  }
+
+  constructor(
+    private i18nService: I18nService,
+    private passwordGenerationService: PasswordGenerationService
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.masterPasswordStrengthTimeout = setTimeout(() => {
+      this.updatePasswordStrength(changes.password?.currentValue);
+
+      this.scoreWidth = this.masterPasswordScore == null ? 0 : (this.masterPasswordScore + 1) * 20;
+
+      switch (this.masterPasswordScore) {
+        case 4:
+          this.color = "bg-success";
+          this.text = this.i18nService.t("strong");
+          break;
+        case 3:
+          this.color = "bg-primary";
+          this.text = this.i18nService.t("good");
+          break;
+        case 2:
+          this.color = "bg-warning";
+          this.text = this.i18nService.t("weak");
+          break;
+        default:
+          this.color = "bg-danger";
+          this.text = this.masterPasswordScore != null ? this.i18nService.t("weak") : null;
+          break;
+      }
+
+      this.setPasswordScoreText(this.color, this.text);
+    }, 100);
+  }
+
+  updatePasswordStrength(password: string) {
+    const masterPassword = password;
+
+    if (this.masterPasswordStrengthTimeout != null) {
+      clearTimeout(this.masterPasswordStrengthTimeout);
+    }
+
+    const strengthResult = this.passwordGenerationService.passwordStrength(
+      masterPassword,
+      this.getPasswordStrengthUserInput()
+    );
+    this.passwordStrengthResult.emit(strengthResult);
+
+    this.masterPasswordScore = strengthResult == null ? null : strengthResult.score;
+  }
+
+  getPasswordStrengthUserInput() {
+    let userInput: string[] = [];
+    const email = this.email;
+    const name = this.name;
+    const atPosition = email.indexOf("@");
+    if (atPosition > -1) {
+      userInput = userInput.concat(
+        email
+          .substr(0, atPosition)
+          .trim()
+          .toLowerCase()
+          .split(/[^A-Za-z0-9]/)
+      );
+    }
+    if (name != null && name !== "") {
+      userInput = userInput.concat(name.trim().toLowerCase().split(" "));
+    }
+    return userInput;
+  }
+
+  setPasswordScoreText(color: string, text: string) {
+    color = color.slice(3);
+    this.passwordScoreColor.emit({ color: color, text: text });
+  }
+}