diff --git a/src/angular/components/callout.component.html b/src/angular/components/callout.component.html
new file mode 100644
index 0000000000..31e1d10e96
--- /dev/null
+++ b/src/angular/components/callout.component.html
@@ -0,0 +1,7 @@
+<div class="callout callout-{{calloutStyle}}" role="alert">
+    <h3 class="callout-heading" *ngIf="title">
+        <i class="fa {{icon}}" *ngIf="icon" aria-hidden="true"></i>
+        {{title}}
+    </h3>
+    <ng-content></ng-content>
+</div>
diff --git a/src/angular/components/callout.component.ts b/src/angular/components/callout.component.ts
new file mode 100644
index 0000000000..34d84f07b6
--- /dev/null
+++ b/src/angular/components/callout.component.ts
@@ -0,0 +1,53 @@
+import {
+    Component,
+    Input,
+    OnInit,
+} from '@angular/core';
+
+import { I18nService } from '../../abstractions/i18n.service';
+
+@Component({
+    selector: 'app-callout',
+    templateUrl: 'callout.component.html',
+})
+export class CalloutComponent implements OnInit {
+    @Input() type = 'info';
+    @Input() icon: string;
+    @Input() title: string;
+
+    calloutStyle: string;
+
+    constructor(private i18nService: I18nService) { }
+
+    ngOnInit() {
+        this.calloutStyle = this.type;
+
+        if (this.type === 'warning' || this.type === 'danger') {
+            if (this.type === 'danger') {
+                this.calloutStyle = 'danger';
+            }
+            if (this.title === undefined) {
+                this.title = this.i18nService.t('warning');
+            }
+            if (this.icon === undefined) {
+                this.icon = 'fa-warning';
+            }
+        } else if (this.type === 'error') {
+            this.calloutStyle = 'danger';
+            if (this.title === undefined) {
+                this.title = this.i18nService.t('error');
+            }
+            if (this.icon === undefined) {
+                this.icon = 'fa-bolt';
+            }
+        } else if (this.type === 'tip') {
+            this.calloutStyle = 'success';
+            if (this.title === undefined) {
+                this.title = this.i18nService.t('tip');
+            }
+            if (this.icon === undefined) {
+                this.icon = 'fa-lightbulb-o';
+            }
+        }
+    }
+}
diff --git a/src/angular/components/password-generator.component.ts b/src/angular/components/password-generator.component.ts
index a62d308cdf..9b703a31cb 100644
--- a/src/angular/components/password-generator.component.ts
+++ b/src/angular/components/password-generator.component.ts
@@ -19,6 +19,7 @@ export class PasswordGeneratorComponent implements OnInit {
     password: string = '-';
     showOptions = false;
     avoidAmbiguous = false;
+    policyInEffect = false;
     enforcedPolicyOptions: PasswordGeneratorPolicyOptions;
 
     constructor(protected passwordGenerationService: PasswordGenerationService,
@@ -29,6 +30,14 @@ export class PasswordGeneratorComponent implements OnInit {
         const optionsResponse = await this.passwordGenerationService.getOptions();
         this.options = optionsResponse[0];
         this.enforcedPolicyOptions = optionsResponse[1];
+        this.policyInEffect = this.enforcedPolicyOptions != null && (
+            this.enforcedPolicyOptions.minLength > 0 ||
+            this.enforcedPolicyOptions.numberCount > 0 ||
+            this.enforcedPolicyOptions.specialCount > 0 ||
+            this.enforcedPolicyOptions.useUppercase ||
+            this.enforcedPolicyOptions.useLowercase ||
+            this.enforcedPolicyOptions.useNumbers ||
+            this.enforcedPolicyOptions.useSpecial);
         this.avoidAmbiguous = !this.options.ambiguous;
         this.options.type = this.options.type === 'passphrase' ? 'passphrase' : 'password';
         this.password = await this.passwordGenerationService.generatePassword(this.options);
@@ -79,24 +88,6 @@ export class PasswordGeneratorComponent implements OnInit {
         this.showOptions = !this.showOptions;
     }
 
-    hasPolicyInEffect() {
-        if (this.enforcedPolicyOptions == null) {
-            return false;
-        }
-
-        if (this.enforcedPolicyOptions.minLength > 0
-            || this.enforcedPolicyOptions.numberCount > 0
-            || this.enforcedPolicyOptions.specialCount > 0
-            || this.enforcedPolicyOptions.useUppercase
-            || this.enforcedPolicyOptions.useLowercase
-            || this.enforcedPolicyOptions.useNumbers
-            || this.enforcedPolicyOptions.useSpecial) {
-            return true;
-        } else {
-            return false;
-        }
-    }
-
     private normalizeOptions() {
         this.options.minLowercase = 0;
         this.options.minUppercase = 0;