From a06ef80dc68ba1bfdb0e53bd14ca287f0812fd8c Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kspearrin@users.noreply.github.com>
Date: Fri, 28 Feb 2020 16:58:28 -0500
Subject: [PATCH] implement callout component w/ generator policy (#1158)

---
 jslib                                         |  2 +-
 src/_locales/en/messages.json                 |  3 +
 src/popup/app.module.ts                       |  2 +
 .../password-generator.component.html         |  3 +
 src/popup/scss/misc.scss                      | 81 +++++++++++++++++++
 src/popup/scss/variables.scss                 |  6 ++
 6 files changed, 96 insertions(+), 1 deletion(-)

diff --git a/jslib b/jslib
index 6c529422048..e93c534ec4f 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 6c529422048c95645304ceb14250c8efce938f34
+Subproject commit e93c534ec4f724eaa8b494f516b187bea67b132c
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index b604bc64673..edf1c9e834e 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -1244,5 +1244,8 @@
   },
   "clone": {
     "message": "Clone"
+  },
+  "passwordGeneratorPolicyInEffect": {
+    "message": "One or more organization policies are affecting your generator settings."
   }
 }
diff --git a/src/popup/app.module.ts b/src/popup/app.module.ts
index c5f8db4f003..ec1abbf303f 100644
--- a/src/popup/app.module.ts
+++ b/src/popup/app.module.ts
@@ -65,6 +65,7 @@ import { ActionButtonsComponent } from './components/action-buttons.component';
 import { CiphersListComponent } from './components/ciphers-list.component';
 import { PopOutComponent } from './components/pop-out.component';
 
+import { CalloutComponent } from 'jslib/angular/components/callout.component';
 import { IconComponent } from 'jslib/angular/components/icon.component';
 
 import {
@@ -165,6 +166,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         AutofocusDirective,
         BlurClickDirective,
         BoxRowDirective,
+        CalloutComponent,
         CiphersComponent,
         CiphersListComponent,
         CollectionsComponent,
diff --git a/src/popup/generator/password-generator.component.html b/src/popup/generator/password-generator.component.html
index ddf39bf888a..350c75c8e5a 100644
--- a/src/popup/generator/password-generator.component.html
+++ b/src/popup/generator/password-generator.component.html
@@ -11,6 +11,9 @@
     </div>
 </header>
 <content>
+    <app-callout type="info" *ngIf="policyInEffect">
+        {{'passwordGeneratorPolicyInEffect' | i18n}}
+    </app-callout>
     <div class="password-block">
         <div class="password-wrapper" [innerHTML]="password | colorPassword" appSelectCopy></div>
     </div>
diff --git a/src/popup/scss/misc.scss b/src/popup/scss/misc.scss
index ee2f66f9283..0b7af23dc0f 100644
--- a/src/popup/scss/misc.scss
+++ b/src/popup/scss/misc.scss
@@ -222,3 +222,84 @@ app-vault-icon {
 .draggable {
     cursor: move;
 }
+
+.callout {
+    padding: 10px;
+    margin: 10px;
+    border: 1px solid #000000;
+    border-left-width: 5px;
+    border-radius: 3px;
+    @include themify($themes) {
+        border-color: themed('calloutBorderColor');
+        background-color: themed('calloutBackgroundColor');
+    }
+
+    .callout-heading {
+        margin-top: 0;
+    }
+
+    h3.callout-heading {
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    &.callout-primary {
+        @include themify($themes) {
+            border-left-color: themed('primaryColor');
+        }
+
+        .callout-heading {
+            @include themify($themes) {
+                color: themed('primaryColor');
+            }
+        }
+    }
+
+    &.callout-info {
+        @include themify($themes) {
+            border-left-color: themed('infoColor');
+        }
+
+        .callout-heading {
+            @include themify($themes) {
+                color: themed('infoColor');
+            }
+        }
+    }
+
+    &.callout-danger {
+        @include themify($themes) {
+            border-left-color: themed('dangerColor');
+        }
+
+        .callout-heading {
+            @include themify($themes) {
+                color: themed('dangerColor');
+            }
+        }
+    }
+
+    &.callout-success {
+        @include themify($themes) {
+            border-left-color: themed('successColor');
+        }
+
+        .callout-heading {
+            @include themify($themes) {
+                color: themed('successColor');
+            }
+        }
+    }
+
+    &.callout-warning {
+        @include themify($themes) {
+            border-left-color: themed('warningColor');
+        }
+
+        .callout-heading {
+            @include themify($themes) {
+                color: themed('warningColor');
+            }
+        }
+    }
+}
diff --git a/src/popup/scss/variables.scss b/src/popup/scss/variables.scss
index 1bae5bb0d21..6aa0f97762e 100644
--- a/src/popup/scss/variables.scss
+++ b/src/popup/scss/variables.scss
@@ -83,6 +83,8 @@ $themes: (
         logoSuffix: 'dark',
         passwordNumberColor: #007fde,
         passwordSpecialColor: #c40800,
+        calloutBorderColor: $border-color-dark,
+        calloutBackgroundColor: $box-background-color,
     ),
     dark: (
         textColor: #ffffff,
@@ -129,6 +131,8 @@ $themes: (
         logoSuffix: 'white',
         passwordNumberColor: #52bdfb,
         passwordSpecialColor: #ff7c70,
+        calloutBorderColor: #111111,
+        calloutBackgroundColor: #3d3d3d,
     ),
     nord: (
         textColor: $nord5,
@@ -175,6 +179,8 @@ $themes: (
         logoSuffix: 'white',
         passwordNumberColor: $nord8,
         passwordSpecialColor: $nord12,
+        calloutBorderColor: $nord0,
+        calloutBackgroundColor: $nord2,
     ),
 );