add master password strength text

jslib

@@ -1 +1 @@
-Subproject commit be080f4f17b782fdb22c77560bd235e81346fb21
+Subproject commit da47faca5c9a41f732136448461a06fc6e6fe023

src/_locales/en/messages.json

@@ -1113,6 +1113,18 @@
   "whoOwnsThisItem": {
     "message": "Who owns this item?"
   },
+  "strong": {
+    "message": "Strong",
+    "description": "ex. A strong password. Scale: Weak -> Good -> Strong"
+  },
+  "good": {
+    "message": "Good",
+    "description": "ex. A good password. Scale: Weak -> Good -> Strong"
+  },
+  "weak": {
+    "message": "Weak",
+    "description": "ex. A weak password. Scale: Weak -> Good -> Strong"
+  },
   "weakMasterPassword": {
     "message": "Weak Master Password"
   },

src/popup/accounts/register.component.html

@@ -24,7 +24,13 @@
                 <div class="box-content-row" appBoxRow>
                     <div class="box-content-row-flex">
                         <div class="row-main">
-                            <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                            <label for="masterPassword">
+                                {{'masterPass' | i18n}}
+                                <strong class="sub-label text-{{masterPasswordScoreColor}}"
+                                        *ngIf="masterPasswordScoreText">
+                                    {{masterPasswordScoreText}}
+                                </strong>
+                            </label>
                             <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
                                     name="MasterPassword" class="monospaced" [(ngModel)]="masterPassword" required
                                     [appAutofocus]="email !== ''" appInputVerbatim (input)="updatePasswordStrength()">
@@ -38,7 +44,7 @@
                         </div>
                     </div>
                     <div class="progress">
-                        <div class="progress-bar {{masterPasswordScoreColor}}" role="progressbar" aria-valuenow="0"
+                        <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>

src/popup/accounts/register.component.ts

@@ -23,21 +23,4 @@ export class RegisterComponent extends BaseRegisterComponent {
         super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService,
             passwordGenerationService);
     }
-
-    get masterPasswordScoreWidth() {
-        return this.masterPasswordScore == null ? 0 : (this.masterPasswordScore + 1) * 20;
-    }
-
-    get masterPasswordScoreColor() {
-        switch (this.masterPasswordScore) {
-            case 4:
-                return 'bg-success';
-            case 3:
-                return 'bg-primary';
-            case 2:
-                return 'bg-warning';
-            default:
-                return 'bg-danger';
-        }
-    }
 }

src/popup/scss/box.scss

@@ -84,6 +84,10 @@
                 @include themify($themes) {
                     color: themed('mutedColor');
                 }
+
+                .sub-label {
+                    margin-left: 10px;
+                }
             }
 
             .text, .detail {
@@ -376,24 +380,18 @@
             .progress {
                 display: flex;
                 height: 5px;
-                overflow: hidden; // force rounded corners by cropping it
+                overflow: hidden;
-                font-size: $font-size-small;
+                margin: 5px -15px -10px;
-                margin: 10px -15px -10px;
-
-                @include themify($themes) {
-                    background-color: themed('borderColor');
-                }
-            }
 
                 .progress-bar {
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
-                text-align: center;
                     white-space: nowrap;
                     background-color: $brand-primary;
                 }
             }
+        }
 
         &.condensed .box-content-row, .box-content-row.condensed {
             padding-top: 5px;