diff --git a/jslib b/jslib index 786fa02b..be080f4f 160000 --- a/jslib +++ b/jslib @@ -1 +1 @@ -Subproject commit 786fa02b90d64044aee23011a18f6e202856a362 +Subproject commit be080f4f17b782fdb22c77560bd235e81346fb21 diff --git a/package-lock.json b/package-lock.json index 85cb5122..c7aaace1 100644 --- a/package-lock.json +++ b/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=" } } } diff --git a/package.json b/package.json index 77225ffa..b37ed4aa 100644 --- a/package.json +++ b/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" } } diff --git a/src/app/accounts/register.component.html b/src/app/accounts/register.component.html index 055eabc1..cb0adc8c 100644 --- a/src/app/accounts/register.component.html +++ b/src/app/accounts/register.component.html @@ -8,18 +8,26 @@ -
-
- - +
+
+
+ + +
+
+ + + +
-
- - - +
+
diff --git a/src/app/accounts/register.component.ts b/src/app/accounts/register.component.ts index 5db5d6da..942caa1f 100644 --- a/src/app/accounts/register.component.ts +++ b/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'; + } } } diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index fa91673a..b09790f3 100644 --- a/src/locales/en/messages.json +++ b/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?" } } diff --git a/src/scss/box.scss b/src/scss/box.scss index aac5997d..7c6fa6e7 100644 --- a/src/scss/box.scss +++ b/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 { diff --git a/src/scss/misc.scss b/src/scss/misc.scss index 083d5f11..db0d30cd 100644 --- a/src/scss/misc.scss +++ b/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;