weak password detection during registration

src/app/accounts/register.component.html

@@ -8,18 +8,26 @@
                     <input id="email" type="text" name="Email" [(ngModel)]="email" required
                            [appAutofocus]="email === ''">
                 </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 !== ''">
+                <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 !== ''" (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 bg-{{masterPasswordScoreColor}}" role="progressbar" aria-valuenow="0"
+                            aria-valuemin="0" aria-valuemax="100" [ngStyle]="{width: (masterPasswordScoreWidth + '%')}"
+                            attr.aria-valuenow="{{masterPasswordScoreWidth}}"></div>
                     </div>
                 </div>
             </div>

src/app/accounts/register.component.ts

@@ -5,6 +5,7 @@ import { ApiService } from 'jslib/abstractions/api.service';
 import { AuthService } from 'jslib/abstractions/auth.service';
 import { CryptoService } from 'jslib/abstractions/crypto.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { StateService } from 'jslib/abstractions/state.service';
 
@@ -18,7 +19,25 @@ export class RegisterComponent extends BaseRegisterComponent {
     constructor(authService: AuthService, router: Router,
         i18nService: I18nService, cryptoService: CryptoService,
         apiService: ApiService, stateService: StateService,
-        platformUtilsService: PlatformUtilsService) {
-        super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService);
+        platformUtilsService: PlatformUtilsService, passwordGenerationService: PasswordGenerationService) {
+        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

@@ -1128,5 +1128,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/scss/box.scss

@@ -56,6 +56,11 @@
 
             &:first-child, &:last-child {
                 border-radius: $border-radius;
+
+                .progress {
+                    border-bottom-left-radius: $border-radius;
+                    border-bottom-right-radius: $border-radius;
+                }
             }
 
             &:last-child {
@@ -118,7 +123,7 @@
                 flex-grow: 1;
             }
 
-            &.box-content-row-flex, &.box-content-row-checkbox, &.box-content-row-input,
+            &.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;
@@ -290,6 +295,21 @@
                     color: themed('mutedColor');
                 }
             }
+
+            .progress {
+                display: flex;
+                height: 5px;
+                overflow: hidden;
+                margin: 5px -15px -10px;
+
+                .progress-bar {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    white-space: nowrap;
+                    background-color: $brand-primary;
+                }
+            }
         }
 
         &.condensed .box-content-row, .box-content-row.condensed {

src/scss/misc.scss

@@ -4,6 +4,36 @@ 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;