weak password detection during registration

jslib

@@ -1 +1 @@
-Subproject commit 786fa02b90d64044aee23011a18f6e202856a362
+Subproject commit be080f4f17b782fdb22c77560bd235e81346fb21

package-lock.json

@@ -628,6 +628,12 @@
         "source-map": "^0.6.0"
       }
     },
+    "@types/zxcvbn": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@types/zxcvbn/-/zxcvbn-4.4.0.tgz",
+      "integrity": "sha512-GQLOT+SN20a+AI51y3fAimhyTF4Y0RG+YP3gf91OibIZ7CJmPFgoZi+ZR5a+vRbS01LbQosITWum4ATmJ1Z6Pg==",
+      "dev": true
+    },
     "@webassemblyjs/ast": {
       "version": "1.7.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.6.tgz",
@@ -12524,6 +12530,11 @@
       "version": "0.8.26",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.26.tgz",
       "integrity": "sha512-W9Nj+UmBJG251wkCacIkETgra4QgBo/vgoEkb4a2uoLzpQG7qF9nzwoLXWU5xj3Fg2mxGvEDh47mg24vXccYjA=="
+    },
+    "zxcvbn": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/zxcvbn/-/zxcvbn-4.4.2.tgz",
+      "integrity": "sha1-KOwXzwl0PtyrBW3dixsGJizHPDA="
     }
   }
 }

package.json

@@ -198,6 +198,7 @@
     "@types/semver": "^5.5.0",
     "@types/webcrypto": "^0.0.28",
     "@types/webpack": "^4.4.11",
+    "@types/zxcvbn": "4.4.0",
     "clean-webpack-plugin": "^0.1.19",
     "concurrently": "^4.0.1",
     "copy-webpack-plugin": "^4.2.0",
@@ -256,6 +257,7 @@
     "nord": "0.2.1",
     "papaparse": "4.6.0",
     "rxjs": "6.3.2",
-    "zone.js": "0.8.26"
+    "zone.js": "0.8.26",
+    "zxcvbn": "4.4.2"
   }
 }

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="box-content-row" appBoxRow>
-                    <div class="row-main">
+                    <div class="box-content-row-flex">
-                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                        <div class="row-main">
-                        <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
+                            <label for="masterPassword">{{'masterPass' | i18n}}</label>
-                               class="monospaced" [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''">
+                            <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">
+                    <div class="progress">
-                        <a class="row-btn" href="#" appStopClick appBlurClick
+                        <div class="progress-bar bg-{{masterPasswordScoreColor}}" role="progressbar" aria-valuenow="0"
-                           title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
+                            aria-valuemin="0" aria-valuemax="100" [ngStyle]="{width: (masterPasswordScoreWidth + '%')}"
-                            <i class="fa fa-lg"
+                            attr.aria-valuenow="{{masterPasswordScoreWidth}}"></div>
-                               [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
-                        </a>
                     </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) {
+        platformUtilsService: PlatformUtilsService, passwordGenerationService: PasswordGenerationService) {
-        super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService);
+        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;