Replace toaster library (#1183)

jslib

@@ -1 +1 @@
-Subproject commit 5db94cc9d06ba478a29e9b625993108dfa0d7ec8
+Subproject commit a6b95b15e36737ccf2e7664ed3c881bc19366b84

package-lock.json

@@ -13,7 +13,7 @@
         "@bitwarden/jslib-angular": "file:jslib/angular",
         "@bitwarden/jslib-common": "file:jslib/common",
         "@bitwarden/jslib-electron": "file:jslib/electron",
-        "angular2-toaster": "^11.0.1",
+        "ngx-toastr": "^13.2.1",
         "node-ipc": "^9.1.4",
         "nord": "^0.2.1",
         "regedit": "^3.0.3",
@@ -1740,20 +1740,6 @@
         "ajv": "^6.9.1"
       }
     },
-    "node_modules/angular2-toaster": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/angular2-toaster/-/angular2-toaster-11.0.1.tgz",
-      "integrity": "sha512-IRXE5zujPMNOhckcp+Hk2n+UrKSrlAviz55wGvSd9ECrqsSRjgh148UEtgsqkcYQ8leKcybZ4d0lrueDuQofNA==",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "^11.0.0",
-        "@angular/compiler": "^11.0.0",
-        "@angular/core": "^11.0.0",
-        "rxjs": "^6.5.3"
-      }
-    },
     "node_modules/ansi-align": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
@@ -8478,6 +8464,19 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/ngx-toastr": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-13.2.1.tgz",
+      "integrity": "sha512-UAzp7/xWK9IXA2LsOmhpaaIGCqscvJokoQpBNpAMrjEkDeSlFf8PWQAuQY795KW0mJb3qF9UG/s23nsXfMYKmg==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=10.0.0-0",
+        "@angular/core": ">=10.0.0-0",
+        "@angular/platform-browser": ">=10.0.0-0"
+      }
+    },
     "node_modules/no-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
@@ -15472,14 +15471,6 @@
       "dev": true,
       "requires": {}
     },
-    "angular2-toaster": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/angular2-toaster/-/angular2-toaster-11.0.1.tgz",
-      "integrity": "sha512-IRXE5zujPMNOhckcp+Hk2n+UrKSrlAviz55wGvSd9ECrqsSRjgh148UEtgsqkcYQ8leKcybZ4d0lrueDuQofNA==",
-      "requires": {
-        "tslib": "^2.0.0"
-      }
-    },
     "ansi-align": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
@@ -20732,6 +20723,14 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "ngx-toastr": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-13.2.1.tgz",
+      "integrity": "sha512-UAzp7/xWK9IXA2LsOmhpaaIGCqscvJokoQpBNpAMrjEkDeSlFf8PWQAuQY795KW0mJb3qF9UG/s23nsXfMYKmg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "no-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",

package.json

@@ -285,7 +285,7 @@
     "@bitwarden/jslib-angular": "file:jslib/angular",
     "@bitwarden/jslib-common": "file:jslib/common",
     "@bitwarden/jslib-electron": "file:jslib/electron",
-    "angular2-toaster": "^11.0.1",
+    "ngx-toastr": "^13.2.1",
     "node-ipc": "^9.1.4",
     "nord": "^0.2.1",
     "regedit": "^3.0.3",

src/app/app.component.ts

@@ -1,10 +1,3 @@
-import {
-    BodyOutputType,
-    Toast,
-    ToasterConfig,
-    ToasterService,
-} from 'angular2-toaster';
-
 import {
     Component,
     NgZone,
@@ -16,6 +9,10 @@ import {
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Router } from '@angular/router';
+import {
+    IndividualConfig,
+    ToastrService,
+} from 'ngx-toastr';
 
 import { PremiumComponent } from './accounts/premium.component';
 import { SettingsComponent } from './accounts/settings.component';
@@ -64,7 +61,6 @@ const SyncInterval = 6 * 60 * 60 * 1000; // 6 hours
     selector: 'app-root',
     styles: [],
     template: `
-        <toaster-container [toasterconfig]="toasterConfig" aria-live="polite"></toaster-container>
         <ng-template #settings></ng-template>
         <ng-template #premium></ng-template>
         <ng-template #passwordHistory></ng-template>
@@ -83,13 +79,6 @@ export class AppComponent implements OnInit {
     @ViewChild('appPasswordGenerator', { read: ViewContainerRef, static: true })
         passwordGeneratorModalRef: ViewContainerRef;
 
-    toasterConfig: ToasterConfig = new ToasterConfig({
-        showCloseButton: true,
-        mouseoverTimerStop: true,
-        animation: 'flyRight',
-        limit: 5,
-    });
-
     private lastActivity: number = null;
     private modal: ModalRef = null;
     private idleTimer: number = null;
@@ -100,7 +89,7 @@ export class AppComponent implements OnInit {
         private settingsService: SettingsService, private syncService: SyncService,
         private passwordGenerationService: PasswordGenerationService, private cipherService: CipherService,
         private authService: AuthService, private router: Router,
-        private toasterService: ToasterService, private i18nService: I18nService,
+        private toastrService: ToastrService, private i18nService: I18nService,
         private sanitizer: DomSanitizer, private ngZone: NgZone,
         private vaultTimeoutService: VaultTimeoutService, private storageService: StorageService,
         private cryptoService: CryptoService, private logService: LogService,
@@ -224,9 +213,9 @@ export class AppComponent implements OnInit {
                     case 'syncVault':
                         try {
                             await this.syncService.fullSync(true, true);
-                            this.toasterService.popAsync('success', null, this.i18nService.t('syncingComplete'));
+                            this.platformUtilsService.showToast('success', null, this.i18nService.t('syncingComplete'));
                         } catch {
-                            this.toasterService.popAsync('error', null, this.i18nService.t('syncingFailed'));
+                            this.platformUtilsService.showToast('error', null, this.i18nService.t('syncingFailed'));
                         }
                         break;
                     case 'checkSyncVault':
@@ -374,7 +363,7 @@ export class AppComponent implements OnInit {
         this.searchService.clearIndex();
         this.authService.logOut(async () => {
             if (expired) {
-                this.toasterService.popAsync('warning', this.i18nService.t('loggedOut'),
+                this.platformUtilsService.showToast('warning', this.i18nService.t('loggedOut'),
                     this.i18nService.t('loginExpired'));
             }
             this.router.navigate(['login']);
@@ -428,30 +417,29 @@ export class AppComponent implements OnInit {
     }
 
     private showToast(msg: any) {
-        const toast: Toast = {
-            type: msg.type,
-            title: msg.title,
-        };
-        if (typeof (msg.text) === 'string') {
-            toast.body = msg.text;
-        } else if (msg.text.length === 1) {
-            toast.body = msg.text[0];
-        } else {
         let message = '';
+
+        const options: Partial<IndividualConfig> = {};
+
+        if (typeof (msg.text) === 'string') {
+            message = msg.text;
+        } else if (msg.text.length === 1) {
+            message = msg.text[0];
+        } else {
             msg.text.forEach((t: string) =>
                 message += ('<p>' + this.sanitizer.sanitize(SecurityContext.HTML, t) + '</p>'));
-            toast.body = message;
+            options.enableHtml = true;
-            toast.bodyOutputType = BodyOutputType.TrustedHtml;
         }
         if (msg.options != null) {
             if (msg.options.trustedHtml === true) {
-                toast.bodyOutputType = BodyOutputType.TrustedHtml;
+                options.enableHtml = true;
             }
             if (msg.options.timeout != null && msg.options.timeout > 0) {
-                toast.timeout = msg.options.timeout;
+                options.timeOut = msg.options.timeout;
             }
         }
-        this.toasterService.popAsync(toast);
+
+        this.toastrService.show(message, msg.title, options, 'toast-' + msg.type);
     }
 
     private routeToVault(action: string, cipherType: CipherType) {

src/app/app.module.ts

@@ -1,7 +1,5 @@
 import 'zone.js/dist/zone';
 
-import { ToasterModule } from 'angular2-toaster';
-
 import { AppRoutingModule } from './app-routing.module';
 import { ServicesModule } from './services.module';
 
@@ -33,6 +31,7 @@ import { VaultTimeoutInputComponent } from './accounts/vault-timeout-input.compo
 
 import { CalloutComponent } from 'jslib-angular/components/callout.component';
 import { IconComponent } from 'jslib-angular/components/icon.component';
+import { BitwardenToastModule } from 'jslib-angular/components/toastr.component';
 
 import { A11yTitleDirective } from 'jslib-angular/directives/a11y-title.directive';
 import { ApiActionDirective } from 'jslib-angular/directives/api-action.directive';
@@ -177,7 +176,11 @@ registerLocaleData(localeZhTw, 'zh-TW');
         FormsModule,
         ReactiveFormsModule,
         ServicesModule,
-        ToasterModule.forRoot(),
+        BitwardenToastModule.forRoot({
+            maxOpened: 5,
+            autoDismiss: true,
+            closeButton: true,
+        }),
         ScrollingModule,
         A11yModule,
     ],

src/app/vault/vault.component.ts

@@ -14,8 +14,6 @@ import {
 
 import { first } from 'rxjs/operators';
 
-import { ToasterService } from 'angular2-toaster';
-
 import { AddEditComponent } from './add-edit.component';
 import { AttachmentsComponent } from './attachments.component';
 import { CiphersComponent } from './ciphers.component';
@@ -86,7 +84,7 @@ export class VaultComponent implements OnInit, OnDestroy {
         private i18nService: I18nService, private modalService: ModalService,
         private broadcasterService: BroadcasterService, private changeDetectorRef: ChangeDetectorRef,
         private ngZone: NgZone, private syncService: SyncService,
-        private toasterService: ToasterService, private messagingService: MessagingService,
+        private messagingService: MessagingService,
         private platformUtilsService: PlatformUtilsService, private eventService: EventService,
         private totpService: TotpService, private userService: UserService,
         private passwordRepromptService: PasswordRepromptService) { }
@@ -651,7 +649,7 @@ export class VaultComponent implements OnInit, OnDestroy {
             }
 
             this.platformUtilsService.copyToClipboard(value);
-            this.toasterService.popAsync('info', null,
+            this.platformUtilsService.showToast('info', null,
                 this.i18nService.t('valueCopied', this.i18nService.t(labelI18nKey)));
             if (this.action === 'view') {
                 this.messagingService.send('minimizeOnCopy');

src/scss/plugins.scss

@@ -1,43 +1,41 @@
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome.scss";
-@import "~angular2-toaster/toaster";
+@import '~ngx-toastr/toastr';
 @import "~sweetalert2/src/sweetalert2.scss";
 
 @import "variables.scss";
 
 .toast-container {
     .toast-close-button {
-        margin-right: 4px;
         font-size: 18px;
+        margin-right: 4px;
     }
 
-    .toast {
+    .ngx-toastr {
-        opacity: 1 !important;
+        align-items: center;
         background-image: none !important;
         border-radius: $border-radius;
         box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
         display: flex;
-        align-items: center;
+        padding: 15px;
+
+        .toast-close-button {
+            position: absolute;
+            right: 5px;
+            top: 0;
+        }
 
         &:hover {
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
         }
 
-        &:before {
+        .icon i::before {
+            float: left;
+            font-style: normal;
             font-family: FontAwesome;
             font-size: 25px;
             line-height: 20px;
-            float: left;
+            padding-right: 15px;
-            color: #ffffff;
-            margin: auto 0 auto 15px;
-        }
-
-        .toast-content {
-            padding: 15px;
-        }
-
-        .toaster-icon {
-            display: none;
         }
 
         .toast-message {
@@ -51,49 +49,41 @@ $fa-font-path: "~font-awesome/fonts";
         }
 
         &.toast-danger, &.toast-error {
-            background-image: none !important;
-
             @include themify($themes) {
                 background-color: themed('dangerColor');
             }
 
-            &:before {
+            .icon i::before {
                 content: "\f0e7";
             }
         }
 
         &.toast-warning {
-            background-image: none !important;
-
             @include themify($themes) {
                 background-color: themed('warningColor');
             }
 
-            &:before {
+            .icon i::before {
                 content: "\f071";
             }
         }
 
         &.toast-info {
-            background-image: none !important;
-
             @include themify($themes) {
                 background-color: themed('infoColor');
             }
 
-            &:before {
+            .icon i:before {
                 content: "\f05a";
             }
         }
 
         &.toast-success {
-            background-image: none !important;
-
             @include themify($themes) {
                 background-color: themed('successColor');
             }
 
-            &:before {
+            .icon i:before {
                 content: "\f00C";
             }
         }