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

---
 jslib                                         |  2 +-
 src/app/app.module.ts                         |  2 +
 .../vault/password-generator.component.html   |  3 +
 src/locales/en/messages.json                  |  3 +
 src/scss/misc.scss                            | 81 +++++++++++++++++++
 src/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/app/app.module.ts b/src/app/app.module.ts
index a1f3f2f6ac3..33793203c79 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -27,6 +27,7 @@ import { SettingsComponent } from './accounts/settings.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 
+import { CalloutComponent } from 'jslib/angular/components/callout.component';
 import { IconComponent } from 'jslib/angular/components/icon.component';
 import { ModalComponent } from 'jslib/angular/components/modal.component';
 
@@ -151,6 +152,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         AutofocusDirective,
         BlurClickDirective,
         BoxRowDirective,
+        CalloutComponent,
         CiphersComponent,
         CollectionsComponent,
         ColorPasswordPipe,
diff --git a/src/app/vault/password-generator.component.html b/src/app/vault/password-generator.component.html
index 46baf59b7cb..761a3131667 100644
--- a/src/app/vault/password-generator.component.html
+++ b/src/app/vault/password-generator.component.html
@@ -2,6 +2,9 @@
     <div class="modal-dialog modal-sm" role="document">
         <div class="modal-content">
             <div class="modal-body">
+                <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/locales/en/messages.json b/src/locales/en/messages.json
index a9c8a55d409..b1ebadb53d3 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -1276,5 +1276,8 @@
   },
   "clone": {
     "message": "Clone"
+  },
+  "passwordGeneratorPolicyInEffect": {
+    "message": "One or more organization policies are affecting your generator settings."
   }
 }
diff --git a/src/scss/misc.scss b/src/scss/misc.scss
index ef14ea7168e..54324d78e3b 100644
--- a/src/scss/misc.scss
+++ b/src/scss/misc.scss
@@ -290,3 +290,84 @@ app-root > #loading {
 .draggable {
     cursor: move;
 }
+
+.callout {
+    padding: 10px;
+    margin-bottom: 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/scss/variables.scss b/src/scss/variables.scss
index 41f7ada747f..53d12a87e63 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -86,6 +86,8 @@ $themes: (
         logoSuffix: 'dark',
         passwordNumberColor: #007fde,
         passwordSpecialColor: #c40800,
+        calloutBorderColor: $border-color-dark,
+        calloutBackgroundColor: $background-color,
     ),
     dark: (
         textColor: #ffffff,
@@ -134,6 +136,8 @@ $themes: (
         logoSuffix: 'white',
         passwordNumberColor: #52bdfb,
         passwordSpecialColor: #ff7c70,
+        calloutBorderColor: #2f2f2f,
+        calloutBackgroundColor: #363636,
     ),
     nord: (
         textColor: $nord5,
@@ -182,6 +186,8 @@ $themes: (
         logoSuffix: 'white',
         passwordNumberColor: $nord8,
         passwordSpecialColor: $nord12,
+        calloutBorderColor: $nord1,
+        calloutBackgroundColor: $nord2,
     ),
 );