[Callout] Added Enforced Policy Options UI (#458)

angular/src/components/callout.component.html

@@ -3,5 +3,24 @@
         <i class="fa {{icon}}" *ngIf="icon" aria-hidden="true"></i>
         {{title}}
     </h3>
+    <div *ngIf="enforcedPolicyOptions">
+        {{enforcedPolicyMessage}}
+        <ul>
+            <li *ngIf="enforcedPolicyOptions?.minComplexity > 0">
+                {{'policyInEffectMinComplexity' | i18n : getPasswordScoreAlertDisplay()}}
+            </li>
+            <li *ngIf="enforcedPolicyOptions?.minLength > 0">
+                {{'policyInEffectMinLength' | i18n : enforcedPolicyOptions?.minLength.toString()}}
+            </li>
+            <li *ngIf="enforcedPolicyOptions?.requireUpper">
+                {{'policyInEffectUppercase' | i18n}}</li>
+            <li *ngIf="enforcedPolicyOptions?.requireLower">
+                {{'policyInEffectLowercase' | i18n}}</li>
+            <li *ngIf="enforcedPolicyOptions?.requireNumbers">
+                {{'policyInEffectNumbers' | i18n}}</li>
+            <li *ngIf="enforcedPolicyOptions?.requireSpecial">
+                {{'policyInEffectSpecial' | i18n : '!@#$%^&*'}}</li>
+        </ul>
+    </div>
     <ng-content></ng-content>
 </div>

angular/src/components/callout.component.ts

@@ -6,6 +6,8 @@ import {
 
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 
+import { MasterPasswordPolicyOptions } from 'jslib-common/models/domain/masterPasswordPolicyOptions';
+
 @Component({
     selector: 'app-callout',
     templateUrl: 'callout.component.html',
@@ -15,6 +17,8 @@ export class CalloutComponent implements OnInit {
     @Input() icon: string;
     @Input() title: string;
     @Input() clickable: boolean;
+    @Input() enforcedPolicyOptions: MasterPasswordPolicyOptions;
+    @Input() enforcedPolicyMessage: string;
 
     calloutStyle: string;
 
@@ -23,6 +27,10 @@ export class CalloutComponent implements OnInit {
     ngOnInit() {
         this.calloutStyle = this.type;
 
+        if (this.enforcedPolicyMessage === undefined) {
+            this.enforcedPolicyMessage = this.i18nService.t('masterPasswordPolicyInEffect');
+        }
+
         if (this.type === 'warning' || this.type === 'danger') {
             if (this.type === 'danger') {
                 this.calloutStyle = 'danger';
@@ -51,4 +59,24 @@ export class CalloutComponent implements OnInit {
             }
         }
     }
+
+    getPasswordScoreAlertDisplay() {
+        if (this.enforcedPolicyOptions == null) {
+            return '';
+        }
+
+        let str: string;
+        switch (this.enforcedPolicyOptions.minComplexity) {
+            case 4:
+                str = this.i18nService.t('strong');
+                break;
+            case 3:
+                str = this.i18nService.t('good');
+                break;
+            default:
+                str = this.i18nService.t('weak');
+                break;
+        }
+        return str + ' (' + this.enforcedPolicyOptions.minComplexity + ')';
+    }
 }

angular/src/components/change-password.component.ts

@@ -38,26 +38,6 @@ 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');
-                break;
-            case 3:
-                str = this.i18nService.t('good');
-                break;
-            default:
-                str = this.i18nService.t('weak');
-                break;
-        }
-        return str + ' (' + this.enforcedPolicyOptions.minComplexity + ')';
-    }
-
     async submit() {
         if (!await this.strongPassword()) {
             return;