shoe strength text in label

jslib

@@ -1 +1 @@
-Subproject commit be080f4f17b782fdb22c77560bd235e81346fb21
+Subproject commit b48c48470801eb88aaec2c2cd84baeb6f1876923

src/app/accounts/register.component.html

@@ -11,7 +11,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}}
+                                <span class="sub-label text-{{masterPasswordScoreColor}}"
+                                      *ngIf="masterPasswordScoreText">
+                                    {{masterPasswordScoreText}}
+                                </span>
+                            </label>
                             <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
                                    name="MasterPassword" class="monospaced" [(ngModel)]="masterPassword"
                                    required [appAutofocus]="email !== ''" (input)="updatePasswordStrength()">

src/app/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 'success';
-            case 3:
-                return 'primary';
-            case 2:
-                return 'warning';
-            default:
-                return 'danger';
-        }
-    }
 }

src/locales/en/messages.json

@@ -1129,6 +1129,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/scss/box.scss

@@ -96,6 +96,10 @@
                 @include themify($themes) {
                     color: themed('mutedColor');
                 }
+
+                .sub-label {
+                    margin-left: 10px;
+                }
             }
 
             .text, .detail {

src/scss/misc.scss

@@ -46,6 +46,12 @@ small {
     }
 }
 
+.text-danger {
+    @include themify($themes) {
+        color: themed('dangerColor') !important;
+    }
+}
+
 .text-muted {
     @include themify($themes) {
         color: themed('mutedColor') !important;