add password strength progress bar and warning message

jslib

@@ -1 +1 @@
-Subproject commit 17e7ee4838071ea836867b06863a71ab047ed443
+Subproject commit be080f4f17b782fdb22c77560bd235e81346fb21

src/_locales/en/messages.json

@@ -1112,5 +1112,11 @@
   },
   "whoOwnsThisItem": {
     "message": "Who owns this item?"
+  },
+  "weakMasterPassword": {
+    "message": "Weak Master Password"
+  },
+  "weakMasterPasswordDesc": {
+    "message": "The master password you have chosen is weak. You should use a strong master password (or a passphrase) to properly protect your Bitwarden account. Are you sure you want to use this master password?"
   }
 }

src/popup/accounts/register.component.html

@@ -21,19 +21,26 @@
                     <input id="email" type="text" name="Email" [(ngModel)]="email" required
                            [appAutofocus]="email === ''" inputmode="email" appInputVerbatim="false">
                 </div>
-                <div class="box-content-row box-content-row-flex" appBoxRow>
-                    <div class="row-main">
-                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
-                        <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
-                               class="monospaced" [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''"
-                               appInputVerbatim>
+                <div class="box-content-row" appBoxRow>
+                    <div class="box-content-row-flex">
+                        <div class="row-main">
+                            <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                            <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
+                                    name="MasterPassword" class="monospaced" [(ngModel)]="masterPassword" required
+                                    [appAutofocus]="email !== ''" appInputVerbatim  (input)="updatePasswordStrength()">
+                        </div>
+                        <div class="action-buttons">
+                            <a class="row-btn" href="#" appStopClick appBlurClick
+                                title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
+                                <i class="fa fa-lg"
+                                    [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                            </a>
+                        </div>
                     </div>
-                    <div class="action-buttons">
-                        <a class="row-btn" href="#" appStopClick appBlurClick
-                           title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
-                            <i class="fa fa-lg"
-                               [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
-                        </a>
+                    <div class="progress">
+                        <div class="progress-bar {{masterPasswordScoreColor}}" role="progressbar" aria-valuenow="0"
+                            aria-valuemin="0" aria-valuemax="100" [ngStyle]="{width: (masterPasswordScoreWidth + '%')}"
+                            attr.aria-valuenow="{{masterPasswordScoreWidth}}"></div>
                     </div>
                 </div>
             </div>

src/popup/accounts/register.component.ts

@@ -23,4 +23,21 @@ 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

@@ -111,8 +111,8 @@
                 flex-grow: 1;
             }
 
-            &.box-content-row-flex, &.box-content-row-checkbox, &.box-content-row-input,
-            &.box-content-row-slider, &.box-content-row-multi {
+            &.box-content-row-flex, .box-content-row-flex, &.box-content-row-checkbox,
+            &.box-content-row-input, &.box-content-row-slider, &.box-content-row-multi {
                 display: flex;
                 align-items: center;
                 word-break: break-all;
@@ -312,7 +312,6 @@
                 }
             }
 
-
             &.totp {
                 .totp-code {
                     font-family: $font-family-monospace;
@@ -373,6 +372,27 @@
                     }
                 }
             }
+
+            .progress {
+                display: flex;
+                height: 5px;
+                overflow: hidden; // force rounded corners by cropping it
+                font-size: $font-size-small;
+                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 {

src/popup/scss/misc.scss

@@ -4,6 +4,36 @@ small, .small {
     font-size: $font-size-small;
 }
 
+.bg-primary {
+    @include themify($themes) {
+        background-color: themed('primaryColor') !important;
+    }
+}
+
+.bg-success {
+    @include themify($themes) {
+        background-color: themed('successColor') !important;
+    }
+}
+
+.bg-danger {
+    @include themify($themes) {
+        background-color: themed('dangerColor') !important;
+    }
+}
+
+.bg-info {
+    @include themify($themes) {
+        background-color: themed('infoColor') !important;
+    }
+}
+
+.bg-warning {
+    @include themify($themes) {
+        background-color: themed('warningColor') !important;
+    }
+}
+
 .text-primary {
     @include themify($themes) {
         color: themed('primaryColor') !important;