From 305d86f765f27d44c6568e06a6e1f04f8b3c9848 Mon Sep 17 00:00:00 2001
From: Vincent Salucci <26154748+vincentsalucci@users.noreply.github.com>
Date: Tue, 3 Mar 2020 15:37:54 -0600
Subject: [PATCH] Update complexity score display (#479)

* Update complexity score

* Simplifying switch statement
---
 src/app/accounts/register.component.html      |  2 +-
 src/app/accounts/register.component.ts        | 19 ++++++++++++++++++-
 .../manage/policy-edit.component.html         |  6 ++++--
 .../manage/policy-edit.component.ts           | 12 +++++++++++-
 .../settings/change-password.component.html   |  2 +-
 src/app/settings/change-password.component.ts | 17 +++++++++++++++++
 6 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/src/app/accounts/register.component.html b/src/app/accounts/register.component.html
index 657f5af004..b9d107e9c0 100644
--- a/src/app/accounts/register.component.html
+++ b/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()}}
diff --git a/src/app/accounts/register.component.ts b/src/app/accounts/register.component.ts
index a0080475dc..d555842d2d 100644
--- a/src/app/accounts/register.component.ts
+++ b/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) {
diff --git a/src/app/organizations/manage/policy-edit.component.html b/src/app/organizations/manage/policy-edit.component.html
index 23c3277756..ee3be52f99 100644
--- a/src/app/organizations/manage/policy-edit.component.html
+++ b/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"
-                                name="MasterPassMinComplexity" [(ngModel)]="masterPassMinComplexity" min="0" max="4">
+                            <select id="masterPassMinComplexity" name="MasterPassMinComplexity"
+                                [(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>
diff --git a/src/app/organizations/manage/policy-edit.component.ts b/src/app/organizations/manage/policy-edit.component.ts
index 235a9d1671..48af6419b1 100644
--- a/src/app/organizations/manage/policy-edit.component.ts
+++ b/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();
diff --git a/src/app/settings/change-password.component.html b/src/app/settings/change-password.component.html
index 9274fb58ca..142d45bbe8 100644
--- a/src/app/settings/change-password.component.html
+++ b/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()}}
diff --git a/src/app/settings/change-password.component.ts b/src/app/settings/change-password.component.ts
index dd5cac871d..02bf5b18be 100644
--- a/src/app/settings/change-password.component.ts
+++ b/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) {