From 1c7504a69150621f3dcd5c962f3050edd02d531b Mon Sep 17 00:00:00 2001
From: Vincent Salucci <26154748+vincentsalucci@users.noreply.github.com>
Date: Fri, 27 Aug 2021 17:04:45 -0500
Subject: [PATCH] [Callout] Update UI structure (#2020)

* [Callout] Update UI structure

* Update jslib
---
 .../accounts/set-password.component.html      | 17 +-------------
 .../update-temp-password.component.html       | 22 ++++---------------
 2 files changed, 5 insertions(+), 34 deletions(-)

diff --git a/src/popup/accounts/set-password.component.html b/src/popup/accounts/set-password.component.html
index 53ebcbd33a..d0bbc45a64 100644
--- a/src/popup/accounts/set-password.component.html
+++ b/src/popup/accounts/set-password.component.html
@@ -20,22 +20,7 @@
         <div *ngIf="!syncLoading">
             <div class="box">
                 <app-callout type="tip">{{'ssoCompleteRegistration' | i18n}}</app-callout>
-                <app-callout type="info" *ngIf="enforcedPolicyOptions">
-                    {{'masterPasswordPolicyInEffect' | i18n}}
-                    <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>
+                <app-callout type="info" [enforcedPolicyOptions]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
                 </app-callout>
             </div>
             <div class="box">
diff --git a/src/popup/accounts/update-temp-password.component.html b/src/popup/accounts/update-temp-password.component.html
index df888ea1b5..91ce4d5cbf 100644
--- a/src/popup/accounts/update-temp-password.component.html
+++ b/src/popup/accounts/update-temp-password.component.html
@@ -17,22 +17,7 @@
         <app-callout type="warning" title="{{'updateMasterPassword' | i18n}}">
             {{'updateMasterPasswordWarning' | i18n}}
         </app-callout>
-        <app-callout type="info" *ngIf="enforcedPolicyOptions">
-            {{'masterPasswordPolicyInEffect' | i18n}}
-            <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>
+        <app-callout type="info" [enforcedPolicyOptions]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
         </app-callout>
         <div class="box">
             <div class="box-content">
@@ -59,8 +44,9 @@
                         </div>
                     </div>
                     <div class="progress">
-                        <div class="progress-bar bg-{{masterPasswordScoreStyle.Color}}" role="progressbar" aria-valuenow="0"
-                            aria-valuemin="0" aria-valuemax="100" [ngStyle]="{width: (masterPasswordScoreStyle.Width + '%')}"
+                        <div class="progress-bar bg-{{masterPasswordScoreStyle.Color}}" role="progressbar"
+                            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
+                            [ngStyle]="{width: (masterPasswordScoreStyle.Width + '%')}"
                             attr.aria-valuenow="{{masterPasswordScoreStyle.Width}}"></div>
                     </div>
                 </div>