implement callout component w/ generator policy (#395)

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,

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>

src/locales/en/messages.json

@@ -1276,5 +1276,8 @@
   },
   "clone": {
     "message": "Clone"
+  },
+  "passwordGeneratorPolicyInEffect": {
+    "message": "One or more organization policies are affecting your generator settings."
   }
 }

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');
+            }
+        }
+    }
+}

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,
     ),
 );