-
+
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 @@
+
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?"
}
}