From 85c0ddba10ef1a3212d8ff595e0a6dd768ae7015 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Mon, 12 Nov 2018 22:54:40 -0500 Subject: [PATCH] password strength checks during registration --- jslib | 2 +- package-lock.json | 5 +++ package.json | 3 +- src/app/accounts/register.component.html | 7 ++- src/app/accounts/register.component.ts | 7 ++- src/app/app.module.ts | 2 + .../password-strength.component.html | 8 ++++ .../components/password-strength.component.ts | 44 +++++++++++++++++++ src/locales/en/messages.json | 14 ++++++ 9 files changed, 86 insertions(+), 6 deletions(-) create mode 100644 src/app/components/password-strength.component.html create mode 100644 src/app/components/password-strength.component.ts diff --git a/jslib b/jslib index 786fa02b..aa16fb2a 160000 --- a/jslib +++ b/jslib @@ -1 +1 @@ -Subproject commit 786fa02b90d64044aee23011a18f6e202856a362 +Subproject commit aa16fb2a9e4b6fb33ed80dea2a4c7bfa2234d45c diff --git a/package-lock.json b/package-lock.json index 34321292..4998af17 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12003,6 +12003,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 85bf1626..1766f0f4 100644 --- a/package.json +++ b/package.json @@ -88,6 +88,7 @@ "web-animations-js": "2.3.1", "webcrypto-shim": "0.1.4", "whatwg-fetch": "3.0.0", - "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 873cb950..26caf8f2 100644 --- a/src/app/accounts/register.component.html +++ b/src/app/accounts/register.component.html @@ -21,8 +21,11 @@
- +
+ + +
diff --git a/src/app/accounts/register.component.ts b/src/app/accounts/register.component.ts index b1765a6f..8afadf53 100644 --- a/src/app/accounts/register.component.ts +++ b/src/app/accounts/register.component.ts @@ -8,6 +8,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'; @@ -24,8 +25,10 @@ export class RegisterComponent extends BaseRegisterComponent { constructor(authService: AuthService, router: Router, i18nService: I18nService, cryptoService: CryptoService, apiService: ApiService, private route: ActivatedRoute, - stateService: StateService, platformUtilsService: PlatformUtilsService) { - super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService); + stateService: StateService, platformUtilsService: PlatformUtilsService, + passwordGenerationService: PasswordGenerationService) { + super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService, + passwordGenerationService); this.showTerms = !platformUtilsService.isSelfHost(); } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c3279e48..f3ea7f12 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -18,6 +18,7 @@ import { ModalComponent } from './modal.component'; import { AvatarComponent } from './components/avatar.component'; import { CalloutComponent } from './components/callout.component'; +import { PasswordStrengthComponent } from './components/password-strength.component'; import { FooterComponent } from './layouts/footer.component'; import { FrontendLayoutComponent } from './layouts/frontend-layout.component'; @@ -291,6 +292,7 @@ registerLocaleData(localeZhCn, 'zh-CN'); VerifyEmailComponent, VerifyEmailTokenComponent, VerifyRecoverDeleteComponent, + PasswordStrengthComponent, ], entryComponents: [ AddEditComponent, diff --git a/src/app/components/password-strength.component.html b/src/app/components/password-strength.component.html new file mode 100644 index 00000000..6dad0a7a --- /dev/null +++ b/src/app/components/password-strength.component.html @@ -0,0 +1,8 @@ +
+
+ + {{text}} + +
+
diff --git a/src/app/components/password-strength.component.ts b/src/app/components/password-strength.component.ts new file mode 100644 index 00000000..153a3740 --- /dev/null +++ b/src/app/components/password-strength.component.ts @@ -0,0 +1,44 @@ +import { + Component, + Input, + OnChanges, +} from '@angular/core'; + +import { I18nService } from 'jslib/abstractions/i18n.service'; + +@Component({ + selector: 'app-password-strength', + templateUrl: 'password-strength.component.html', +}) +export class PasswordStrengthComponent implements OnChanges { + @Input() score?: number; + @Input() showText = false; + + scoreWidth = 0; + color = 'bg-danger'; + text: string; + + constructor(private i18nService: I18nService) { } + + ngOnChanges(): void { + this.scoreWidth = this.score == null ? 0 : (this.score + 1) * 20; + switch (this.score) { + case 4: + this.color = 'bg-success'; + this.text = this.i18nService.t('strong'); + break; + case 3: + this.color = 'bg-warning'; + this.text = this.i18nService.t('ok'); + break; + case 2: + this.color = 'bg-warning'; + this.text = this.i18nService.t('weak'); + break; + default: + this.color = 'bg-danger'; + this.text = this.score != null ? this.i18nService.t('weak') : null; + break; + } + } +} diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index 573d2c04..0e4309ad 100644 --- a/src/locales/en/messages.json +++ b/src/locales/en/messages.json @@ -2512,5 +2512,19 @@ }, "whoOwnsThisItem": { "message": "Who owns this item?" + }, + "strong": { + "message": "Strong", + "description": "ex. Strong password" + }, + "weak": { + "message": "Weak", + "description": "ex. Weak password" + }, + "weakMasterPassword": { + "message": "Weak Master Password" + }, + "weakMasterPasswordDesc": { + "message": "The master password you have chosen is weak. You should use a strong master password to properly protect your Bitwarden account. Are you sure you want to use this master password?" } }