[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
-                  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">

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 }}"
-                    *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">

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
-                  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>

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,