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

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

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

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,