callout component

src/app/app.module.ts

@@ -17,6 +17,7 @@ import { AppComponent } from './app.component';
 import { ModalComponent } from './modal.component';
 
 import { AvatarComponent } from './components/avatar.component';
+import { CalloutComponent } from './components/callout.component';
 
 import { FooterComponent } from './layouts/footer.component';
 import { FrontendLayoutComponent } from './layouts/frontend-layout.component';
@@ -102,6 +103,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
         BulkDeleteComponent,
         BulkMoveComponent,
         BulkShareComponent,
+        CalloutComponent,
         ChangeEmailComponent,
         ChangePasswordComponent,
         CiphersComponent,

src/app/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"></i>
+        {{title}}
+    </h3>
+    <ng-content></ng-content>
+</div>

src/app/components/callout.component.ts

@@ -0,0 +1,53 @@
+import {
+    Component,
+    Input,
+    OnInit,
+} from '@angular/core';
+
+import { I18nService } from 'jslib/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';
+            }
+        }
+    }
+}

src/app/settings/change-email.component.html

@@ -15,10 +15,7 @@
     <ng-container *ngIf="tokenSent">
         <hr>
         <p>{{'changeEmailDesc' | i18n : newEmail}}</p>
-        <div class="callout callout-warning" role="alert">
+        <app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
-            <h3 class="callout-heading">{{'warning' | i18n}}</h3>
-            <p class="mb-0">{{'loggedOutWarning' | i18n}}</p>
-        </div>
         <div class="row">
             <div class="col-6">
                 <div class="form-group">

src/app/settings/change-password.component.html

@@ -1,7 +1,4 @@
-<div class="callout callout-warning" role="alert">
+<app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
-    <h3 class="callout-heading">{{'warning' | i18n}}</h3>
-    <p class="mb-0">{{'loggedOutWarning' | i18n}}</p>
-</div>
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="row">
         <div class="col-6">

src/app/settings/deauthorize-sessions.component.html

@@ -9,10 +9,7 @@
             </div>
             <div class="modal-body">
                 <p>{{'deauthorizeSessionsDesc' | i18n}}</p>
-                <div class="callout callout-warning" role="alert">
+                <app-callout type="warning">{{'deauthorizeSessionsWarning' | i18n}}</app-callout>
-                    <h3 class="callout-heading">{{'warning' | i18n}}</h3>
-                    <p class="mb-0">{{'deauthorizeSessionsWarning' | i18n}}</p>
-                </div>
                 <label for="masterPassword">{{'masterPass' | i18n}}</label>
                 <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
                     appAutoFocus>

src/app/settings/delete-account.component.html

@@ -9,10 +9,7 @@
             </div>
             <div class="modal-body">
                 <p>{{'deleteAccountDesc' | i18n}}</p>
-                <div class="callout callout-warning" role="alert">
+                <app-callout type="warning">{{'deleteAccountWarning' | i18n}}</app-callout>
-                    <h3 class="callout-heading">{{'warning' | i18n}}</h3>
-                    <p class="mb-0">{{'deleteAccountWarning' | i18n}}</p>
-                </div>
                 <label for="masterPassword">{{'masterPass' | i18n}}</label>
                 <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
                     appAutofocus>

src/app/settings/purge-vault.component.html

@@ -9,10 +9,7 @@
             </div>
             <div class="modal-body">
                 <p>{{'purgeVaultDesc' | i18n}}</p>
-                <div class="callout callout-warning" role="alert">
+                <app-callout type="warning">{{'purgeVaultWarning' | i18n}}</app-callout>
-                    <h3 class="callout-heading">{{'warning' | i18n}}</h3>
-                    <p class="mb-0">{{'purgeVaultWarning' | i18n}}</p>
-                </div>
                 <label for="masterPassword">{{'masterPass' | i18n}}</label>
                 <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
                     appAutofocus>

src/app/tools/export.component.html

@@ -3,10 +3,7 @@
         <h1>{{'exportVault' | i18n}}</h1>
     </div>
     <p>{{'exportMasterPassword' | i18n}}</p>
-    <div class="callout callout-warning" role="alert">
+    <app-callout type="warning">{{'exportWarning' | i18n}}</app-callout>
-        <h3 class="callout-heading">{{'warning' | i18n}}</h3>
-        <p class="mb-0">{{'exportWarning' | i18n}}</p>
-    </div>
     <div class="row">
         <div class="form-group col-6">
             <label for="masterPassword">{{'masterPass' | i18n}}</label>

src/app/tools/import.component.html

@@ -14,25 +14,22 @@
             </div>
         </div>
     </div>
-    <div class="callout callout-info" role="alert" *ngIf="format">
+    <app-callout type="info" title="{{getFormatInstructionTitle()}}" *ngIf="format">
-        <h3 class="callout-heading">{{'instructionsFor' | i18n : getFormatName()}}</h3>
+        <ng-container *ngIf="format === 'bitwardencsv'">
-        <p class="mb-0">
+            See detailed instructions on our help site at
-            <ng-container *ngIf="format === 'bitwardencsv'">
+            <a target="_blank" href="https://help.bitwarden.com/article/export-your-data/">https://help.bitwarden.com/article/export-your-data/</a>
-                See detailed instructions on our help site at
+        </ng-container>
-                <a target="_blank" href="https://help.bitwarden.com/article/export-your-data/">https://help.bitwarden.com/article/export-your-data/</a>
+        <ng-container *ngIf="format === 'lastpasscsv'">
-            </ng-container>
+            See detailed instructions on our help site at
-            <ng-container *ngIf="format === 'lastpasscsv'">
+            <a target="_blank" href="https://help.bitwarden.com/article/import-from-lastpass/">https://help.bitwarden.com/article/import-from-lastpass/</a>
-                See detailed instructions on our help site at
+        </ng-container>
-                <a target="_blank" href="https://help.bitwarden.com/article/import-from-lastpass/">https://help.bitwarden.com/article/import-from-lastpass/</a>
+        <ng-container *ngIf="format === 'keepassxcsv'">
-            </ng-container>
+            Using the KeePassX desktop application, navigate to "Database" &rarr; "Export to CSV file" and save the CSV file.
-            <ng-container *ngIf="format === 'keepassxcsv'">
+        </ng-container>
-                Using the KeePassX desktop application, navigate to "Database" &rarr; "Export to CSV file" and save the CSV file.
+        <ng-container *ngIf="format === 'aviracsv'">
-            </ng-container>
+            In the Avira web vault, go to "Settings" &rarr; "My Data" &rarr; "Export data" and save the CSV file.
-            <ng-container *ngIf="format === 'aviracsv'">
+        </ng-container>
-                In the Avira web vault, go to "Settings" &rarr; "My Data" &rarr; "Export data" and save the CSV file.
+    </app-callout>
-            </ng-container>
-        </p>
-    </div>
     <div class="row">
         <div class="col-6">
             <div class="form-group">

src/app/tools/import.component.ts

@@ -165,14 +165,14 @@ export class ImportComponent {
         }
     }
 
-    getFormatName() {
+    getFormatInstructionTitle() {
         if (this.format == null) {
             return null;
         }
 
         const results = this.featuredImportOptions.concat(this.importOptions).filter((o) => o.id === this.format);
         if (results.length > 0) {
-            return results[0].name;
+            return this.i18nService.t('instructionsFor', results[0].name);
         }
         return null;
     }