[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
2025-02-23 02:31:26 +01:00 · 2022-08-01 23:26:50 +01:00 · 2022-08-01 23:26:50 +01:00 · 257fb0c0af
commit 257fb0c0af
parent 8820a42ec9
27 changed files with 259 additions and 425 deletions
--- a/apps/browser/src/popup/accounts/register.component.html
+++ b/apps/browser/src/popup/accounts/register.component.html
@ -25,11 +25,8 @@
            <div class="row-main">
              <label for="masterPassword">
                {{ "masterPass" | i18n }}
-                <strong
-                  class="sub-label text-{{ masterPasswordScoreColor }}"
-                  *ngIf="masterPasswordScoreText"
-                >
-                  {{ masterPasswordScoreText }}
+                <strong class="sub-label text-{{ color }}" *ngIf="text">
+                  {{ text }}
                </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">
-            <div
-              class="progress-bar bg-{{ masterPasswordScoreColor }}"
-              role="progressbar"
-              aria-valuenow="0"
-              aria-valuemin="0"
-              aria-valuemax="100"
-              [ngStyle]="{ width: masterPasswordScoreWidth + '%' }"
-              attr.aria-valuenow="{{ masterPasswordScoreWidth }}"
-            ></div>
-          </div>
+          <app-password-strength
+            [password]="formGroup.get('masterPassword')?.value"
+            [email]="formGroup.get('email')?.value"
+            [name]="formGroup.get('name')?.value"
+            (passwordStrengthResult)="getStrengthResult($event)"
+            (passwordScoreColor)="getPasswordScoreText($event)"
+          >
+          </app-password-strength>
        </div>
      </div>
      <div class="box-footer">
--- a/apps/browser/src/popup/accounts/register.component.ts
+++ b/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,
--- a/apps/browser/src/popup/accounts/set-password.component.html
+++ b/apps/browser/src/popup/accounts/set-password.component.html
@ -42,10 +42,10 @@
                <label for="masterPassword"
                  >{{ "masterPass" | i18n }}
                  <strong
-                    class="sub-label text-{{ masterPasswordScoreColor }}"
-                    *ngIf="masterPasswordScoreText"
+                    class="sub-label text-{{ passwordStrengthComponent?.masterPasswordScoreColor }}"
+                    *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
-                class="progress-bar bg-{{ masterPasswordScoreColor }}"
-                role="progressbar"
-                aria-valuenow="0"
-                aria-valuemin="0"
-                aria-valuemax="100"
-                [ngStyle]="{ width: masterPasswordScoreWidth + '%' }"
-                attr.aria-valuenow="{{ masterPasswordScoreWidth }}"
-              ></div>
-            </div>
+
+            <app-password-strength
+              [password]="masterPassword"
+              [email]="email"
+              (passwordStrengthResult)="getStrengthResult($event)"
+              (passwordScoreColor)="getPasswordScoreText($event)"
+            >
+            </app-password-strength>
          </div>
        </div>
        <div class="box-footer">
--- a/apps/browser/src/popup/accounts/set-password.component.ts
+++ b/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;
-    }
-  }
 }
--- a/apps/browser/src/popup/accounts/update-temp-password.component.html
+++ b/apps/browser/src/popup/accounts/update-temp-password.component.html
@ -30,11 +30,8 @@
            <div class="row-main">
              <label for="masterPassword">
                {{ "masterPass" | i18n }}
-                <strong
-                  class="sub-label text-{{ masterPasswordScoreStyle.Color }}"
-                  *ngIf="masterPasswordScoreStyle.Text"
-                >
-                  {{ masterPasswordScoreStyle.Text }}
+                <strong class="sub-label text-{{ color }}" *ngIf="text">
+                  {{ 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">
-            <div
-              class="progress-bar bg-{{ masterPasswordScoreStyle.Color }}"
-              role="progressbar"
-              aria-valuenow="0"
-              aria-valuemin="0"
-              aria-valuemax="100"
-              [ngStyle]="{ width: masterPasswordScoreStyle.Width + '%' }"
-              attr.aria-valuenow="{{ masterPasswordScoreStyle.Width }}"
-            ></div>
-          </div>
+          <app-password-strength
+            [password]="masterPassword"
+            [email]="email"
+            (passwordStrengthResult)="getStrengthResult($event)"
+            (passwordScoreColor)="getPasswordScoreText($event)"
+          >
+          </app-password-strength>
        </div>
      </div>
    </div>
--- a/apps/browser/src/popup/accounts/update-temp-password.component.ts
+++ b/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,
--- a/apps/desktop/src/app/accounts/register.component.html
+++ b/apps/desktop/src/app/accounts/register.component.html
@ -18,11 +18,8 @@
            <div class="row-main">
              <label for="masterPassword">
                {{ "masterPass" | i18n }}
-                <strong
-                  class="sub-label text-{{ masterPasswordScoreColor }}"
-                  *ngIf="masterPasswordScoreText"
-                >
-                  {{ masterPasswordScoreText }}
+                <strong class="sub-label text-{{ color }}" *ngIf="text">
+                  {{ text }}
                </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">
-            <div
-              class="progress-bar bg-{{ masterPasswordScoreColor }}"
-              role="progressbar"
-              aria-valuenow="0"
-              aria-valuemin="0"
-              aria-valuemax="100"
-              [ngStyle]="{ width: masterPasswordScoreWidth + '%' }"
-              attr.aria-valuenow="{{ masterPasswordScoreWidth }}"
-            ></div>
-          </div>
+          <app-password-strength
+            [password]="formGroup.get('masterPassword')?.value"
+            [email]="formGroup.get('email')?.value"
+            [name]="formGroup.get('name')?.value"
+            (passwordStrengthResult)="getStrengthResult($event)"
+            (passwordScoreColor)="getPasswordScoreText($event)"
+          >
+          </app-password-strength>
        </div>
      </div>
      <div class="box-footer">
--- a/apps/desktop/src/app/accounts/set-password.component.html
+++ b/apps/desktop/src/app/accounts/set-password.component.html
@ -37,11 +37,8 @@
                <div class="row-main">
                  <label for="masterPassword"
                    >{{ "masterPass" | i18n }}
-                    <strong
-                      class="sub-label text-{{ masterPasswordScoreColor }}"
-                      *ngIf="masterPasswordScoreText"
-                    >
-                      {{ masterPasswordScoreText }}
+                    <strong class="sub-label text-{{ color }}" *ngIf="text">
+                      {{ text }}
                    </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">
-                <div
-                  class="progress-bar bg-{{ masterPasswordScoreColor }}"
-                  role="progressbar"
-                  aria-valuenow="0"
-                  aria-valuemin="0"
-                  aria-valuemax="100"
-                  [ngStyle]="{ width: masterPasswordScoreWidth + '%' }"
-                  attr.aria-valuenow="{{ masterPasswordScoreWidth }}"
-                ></div>
-              </div>
+              <app-password-strength
+                [password]="masterPassword"
+                [email]="email"
+                (passwordStrengthResult)="getStrengthResult($event)"
+                (passwordScoreColor)="getPasswordScoreText($event)"
+              >
+              </app-password-strength>
            </div>
          </div>
          <div class="box-footer">
--- a/apps/desktop/src/app/accounts/set-password.component.ts
+++ b/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) => {
--- a/apps/desktop/src/app/accounts/update-temp-password.component.html
+++ b/apps/desktop/src/app/accounts/update-temp-password.component.html
@ -16,11 +16,8 @@
            <div class="row-main">
              <label for="masterPassword">
                {{ "masterPass" | i18n }}
-                <strong
-                  class="sub-label text-{{ masterPasswordScoreStyle.Color }}"
-                  *ngIf="masterPasswordScoreStyle.Text"
-                >
-                  {{ masterPasswordScoreStyle.Text }}
+                <strong class="sub-label text-{{ color }}" *ngIf="text">
+                  {{ 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">
-            <div
-              class="progress-bar bg-{{ masterPasswordScoreStyle.Color }}"
-              role="progressbar"
-              aria-valuenow="0"
-              aria-valuemin="0"
-              aria-valuemax="100"
-              [ngStyle]="{ width: masterPasswordScoreStyle.Width + '%' }"
-              attr.aria-valuenow="{{ masterPasswordScoreStyle.Width }}"
-            ></div>
-          </div>
+          <app-password-strength
+            [password]="masterPassword"
+            [email]="email"
+            (passwordStrengthResult)="getStrengthResult($event)"
+            (passwordScoreColor)="getPasswordScoreText($event)"
+          >
+          </app-password-strength>
        </div>
      </div>
    </div>
--- a/apps/desktop/src/app/accounts/update-temp-password.component.ts
+++ b/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,
--- a/apps/web/src/app/accounts/set-password.component.html
+++ b/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>
--- a/apps/web/src/app/accounts/update-password.component.html
+++ b/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>
--- a/apps/web/src/app/accounts/update-temp-password.component.html
+++ b/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>
--- a/apps/web/src/app/components/password-strength.component.ts
+++ b/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;
-    }
-  }
-}
--- a/apps/web/src/app/modules/register-form/register-form.component.html
+++ b/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>

--- a/apps/web/src/app/modules/register-form/register-form.component.ts
+++ b/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
      )
--- a/apps/web/src/app/modules/shared.module.ts
+++ b/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,
  ],
--- a/apps/web/src/app/organizations/manage/reset-password.component.html
+++ b/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>
--- a/apps/web/src/app/organizations/manage/reset-password.component.ts
+++ b/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;
-  }
 }
--- a/apps/web/src/app/settings/change-password.component.html
+++ b/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">
--- a/apps/web/src/app/settings/emergency-access-takeover.component.html
+++ b/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>
--- a/libs/angular/src/components/change-password.component.ts
+++ b/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(
-      this.masterPassword,
-      this.getPasswordStrengthUserInput()
-    );
+    const strengthResult = this.passwordStrengthResult;

    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() {
-    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]/)
-      );
-    }
-    return userInput;
+  getStrengthResult(result: any) {
+    this.passwordStrengthResult = result;
+  }
+
+  getPasswordScoreText(event: PasswordColorText) {
+    this.color = event.color;
+    this.text = event.text;
  }
 }
--- a/libs/angular/src/components/register.component.ts
+++ b/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(
-      masterPassword,
-      this.getPasswordStrengthUserInput()
-    );
-    if (strengthResult != null && strengthResult.score < 3) {
+    if (this.passwordStrengthResult != null && this.passwordStrengthResult.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() {
-    const masterPassword = this.formGroup.get("masterPassword")?.value;
-
-    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);
+  getStrengthResult(result: any) {
+    this.passwordStrengthResult = result;
  }

-  private getPasswordStrengthUserInput() {
-    let userInput: string[] = [];
-    const email = this.formGroup.get("email")?.value;
-    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;
+  getPasswordScoreText(event: PasswordColorText) {
+    this.color = event.color;
+    this.text = event.text;
  }

  private getErrorToastMessage() {
--- a/libs/angular/src/jslib.module.ts
+++ b/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],
 })
--- a/libs/angular/src/shared/components/password-strength/password-strength.component.html
+++ b/libs/angular/src/shared/components/password-strength/password-strength.component.html
--- a/libs/angular/src/shared/components/password-strength/password-strength.component.ts
+++ b/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 });
+  }
+}