Update complexity score display (#479)

* Update complexity score

* Simplifying switch statement

src/app/accounts/register.component.html

@@ -25,7 +25,7 @@
                             <p>{{'masterPasswordPolicyInEffect' | i18n}}</p>
                             <ul>
                                 <li *ngIf="enforcedPolicyOptions?.minComplexity > 0">
-                                    {{'policyInEffectMinComplexity' | i18n : enforcedPolicyOptions?.minComplexity.toString()}}
+                                    {{'policyInEffectMinComplexity' | i18n : getPasswordScoreAlertDisplay()}}
                                 </li>
                                 <li *ngIf="enforcedPolicyOptions?.minLength > 0">
                                     {{'policyInEffectMinLength' | i18n : enforcedPolicyOptions?.minLength.toString()}}

src/app/accounts/register.component.ts

@@ -27,9 +27,9 @@ import { PolicyData } from 'jslib/models/data/policyData';
 export class RegisterComponent extends BaseRegisterComponent {
     showCreateOrgMessage = false;
     showTerms = true;
+    enforcedPolicyOptions: MasterPasswordPolicyOptions;
 
     private policies: Policy[];
-    enforcedPolicyOptions: MasterPasswordPolicyOptions;
 
     constructor(authService: AuthService, router: Router,
         i18nService: I18nService, cryptoService: CryptoService,
@@ -41,6 +41,23 @@ export class RegisterComponent extends BaseRegisterComponent {
         this.showTerms = !platformUtilsService.isSelfHost();
     }
 
+    getPasswordScoreAlertDisplay() {
+        if (this.enforcedPolicyOptions == null) {
+            return '';
+        }
+
+        let str: string;
+        switch (this.enforcedPolicyOptions.minComplexity) {
+            case 4:
+                str = this.i18nService.t('strong');
+            case 3:
+                str = this.i18nService.t('good');
+            default:
+                str = this.i18nService.t('weak');
+        }
+        return str + ' (' + this.enforcedPolicyOptions.minComplexity + ')';
+    }
+
     async ngOnInit() {
         const queryParamsSub = this.route.queryParams.subscribe((qParams) => {
             if (qParams.email != null && qParams.email.indexOf('@') > -1) {

src/app/organizations/manage/policy-edit.component.html

@@ -28,8 +28,10 @@
                     <div class="row">
                         <div class="col-6 form-group">
                             <label for="masterPassMinComplexity">{{'minComplexityScore' | i18n}}</label>
-                            <input id="masterPassMinComplexity" class="form-control" type="number"
+                            <select id="masterPassMinComplexity" name="MasterPassMinComplexity"
-                                name="MasterPassMinComplexity" [(ngModel)]="masterPassMinComplexity" min="0" max="4">
+                                [(ngModel)]="masterPassMinComplexity" class="form-control">
+                                <option *ngFor="let o of passwordScores" [ngValue]="o.value">{{o.name}}</option>
+                            </select>
                         </div>
                         <div class="col-6 form-group">
                             <label for="masterPassMinLength">{{'minLength' | i18n}}</label>

src/app/organizations/manage/policy-edit.component.ts

@@ -33,6 +33,7 @@ export class PolicyEditComponent implements OnInit {
     loading = true;
     enabled = false;
     formPromise: Promise<any>;
+    passwordScores: any[];
 
     // Master password
 
@@ -56,7 +57,16 @@ export class PolicyEditComponent implements OnInit {
     private policy: PolicyResponse;
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService) { }
+        private analytics: Angulartics2, private toasterService: ToasterService) {
+        this.passwordScores = [
+            { name: '', value: null },
+            { name: i18nService.t('weak') + ' (0)', value: 0 },
+            { name: i18nService.t('weak') + ' (1)', value: 1 },
+            { name: i18nService.t('weak') + ' (2)', value: 2 },
+            { name: i18nService.t('good') + ' (3)', value: 3 },
+            { name: i18nService.t('strong') + ' (4)', value: 4 },
+        ];
+    }
 
     async ngOnInit() {
         await this.load();

src/app/settings/change-password.component.html

@@ -3,7 +3,7 @@
     <p>{{'masterPasswordPolicyInEffect' | i18n}}</p>
     <ul>
         <li *ngIf="enforcedPolicyOptions?.minComplexity > 0">
-            {{'policyInEffectMinComplexity' | i18n : enforcedPolicyOptions?.minComplexity.toString()}}
+            {{'policyInEffectMinComplexity' | i18n : getPasswordScoreAlertDisplay()}}
         </li>
         <li *ngIf="enforcedPolicyOptions?.minLength > 0">
             {{'policyInEffectMinLength' | i18n : enforcedPolicyOptions?.minLength.toString()}}

src/app/settings/change-password.component.ts

@@ -56,6 +56,23 @@ export class ChangePasswordComponent implements OnInit {
         this.enforcedPolicyOptions = await this.policyService.getMasterPasswordPolicyOptions();
     }
 
+    getPasswordScoreAlertDisplay() {
+        if (this.enforcedPolicyOptions == null) {
+            return '';
+        }
+
+        let str: string;
+        switch (this.enforcedPolicyOptions.minComplexity) {
+            case 4:
+                str = this.i18nService.t('strong');
+            case 3:
+                str = this.i18nService.t('good');
+            default:
+                str = this.i18nService.t('weak');
+        }
+        return str + ' (' + this.enforcedPolicyOptions.minComplexity + ')';
+    }
+
     async submit() {
         const hasEncKey = await this.cryptoService.hasEncKey();
         if (!hasEncKey) {