From 55dfb8df6224310e86dd5d37ec9c976ae0ce7600 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Thu, 15 Nov 2018 15:27:27 -0500
Subject: [PATCH] shoe strength text in label

---
 jslib                                    |  2 +-
 src/app/accounts/register.component.html |  8 +++++++-
 src/app/accounts/register.component.ts   | 17 -----------------
 src/locales/en/messages.json             | 12 ++++++++++++
 src/scss/box.scss                        |  4 ++++
 src/scss/misc.scss                       |  6 ++++++
 6 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/jslib b/jslib
index be080f4f17..b48c484708 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit be080f4f17b782fdb22c77560bd235e81346fb21
+Subproject commit b48c48470801eb88aaec2c2cd84baeb6f1876923
diff --git a/src/app/accounts/register.component.html b/src/app/accounts/register.component.html
index cb0adc8c5d..e8e82ec749 100644
--- a/src/app/accounts/register.component.html
+++ b/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()">
diff --git a/src/app/accounts/register.component.ts b/src/app/accounts/register.component.ts
index 942caa1ffc..19fa0c1962 100644
--- a/src/app/accounts/register.component.ts
+++ b/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';
-        }
-    }
 }
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index b09790f386..cb95e5c680 100644
--- a/src/locales/en/messages.json
+++ b/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"
   },
diff --git a/src/scss/box.scss b/src/scss/box.scss
index 7c6fa6e746..4bb04539a7 100644
--- a/src/scss/box.scss
+++ b/src/scss/box.scss
@@ -96,6 +96,10 @@
                 @include themify($themes) {
                     color: themed('mutedColor');
                 }
+
+                .sub-label {
+                    margin-left: 10px;
+                }
             }
 
             .text, .detail {
diff --git a/src/scss/misc.scss b/src/scss/misc.scss
index db0d30cd22..1a0a45b4e2 100644
--- a/src/scss/misc.scss
+++ b/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;