Replace toaster library (#183)

2026-01-04 01:23:19 +00:00 · 2021-12-07 19:43:57 +00:00
parent 9bec2aa2f0
commit 7c93d59a42
8 changed files with 82 additions and 102 deletions
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,34 +1,27 @@
-import {
-    BodyOutputType,
-    Toast,
-    ToasterConfig,
-    ToasterContainerComponent,
-    ToasterService,
-} from 'angular2-toaster';
-
 import {
    Component,
-    ComponentFactoryResolver,
    NgZone,
    OnInit,
    SecurityContext,
-    Type,
    ViewChild,
    ViewContainerRef,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Router } from '@angular/router';
+import {
+    IndividualConfig,
+    ToastrService,
+} from 'ngx-toastr';

-import { ApiService } from 'jslib-common/abstractions/api.service';
 import { AuthService } from 'jslib-common/abstractions/auth.service';
 import { BroadcasterService } from 'jslib-common/abstractions/broadcaster.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
-import { StorageService } from 'jslib-common/abstractions/storage.service';
 import { TokenService } from 'jslib-common/abstractions/token.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';

 import { ConfigurationService } from '../services/configuration.service';
 import { SyncService } from '../services/sync.service';
@@ -39,31 +32,20 @@ const BroadcasterSubscriptionId = 'AppComponent';
    selector: 'app-root',
    styles: [],
    template: `
-        <toaster-container [toasterconfig]="toasterConfig"></toaster-container>
        <ng-template #settings></ng-template>
        <router-outlet></router-outlet>`,
 })
 export class AppComponent implements OnInit {
    @ViewChild('settings', { read: ViewContainerRef, static: true }) settingsRef: ViewContainerRef;

-    toasterConfig: ToasterConfig = new ToasterConfig({
-        showCloseButton: true,
-        mouseoverTimerStop: true,
-        animation: 'flyRight',
-        limit: 5,
-    });
-
-    private lastActivity: number = null;
-
    constructor(private broadcasterService: BroadcasterService, private userService: UserService,
-        private tokenService: TokenService, private storageService: StorageService,
+        private tokenService: TokenService,
        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 componentFactoryResolver: ComponentFactoryResolver, private messagingService: MessagingService,
+        private platformUtilsService: PlatformUtilsService, private messagingService: MessagingService,
        private configurationService: ConfigurationService, private syncService: SyncService,
-        private stateService: StateService, private apiService: ApiService, private logService: LogService) {
-        (window as any).BitwardenToasterService = toasterService;
+        private stateService: StateService, private logService: LogService) {
    }

    ngOnInit() {
@@ -138,7 +120,7 @@ export class AppComponent implements OnInit {

        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']);
@@ -146,29 +128,28 @@ export class AppComponent implements OnInit {
    }

    private showToast(msg: any) {
-        const toast: Toast = {
-            type: msg.type,
-            title: msg.title,
-        };
+        let message = '';
+
+        const options: Partial<IndividualConfig> = {};
+
        if (typeof (msg.text) === 'string') {
-            toast.body = msg.text;
+            message = msg.text;
        } else if (msg.text.length === 1) {
-            toast.body = msg.text[0];
+            message = msg.text[0];
        } else {
-            let message = '';
            msg.text.forEach((t: string) =>
                message += ('<p>' + this.sanitizer.sanitize(SecurityContext.HTML, t) + '</p>'));
-            toast.body = message;
-            toast.bodyOutputType = BodyOutputType.TrustedHtml;
+            options.enableHtml = true;
        }
        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);
    }
 }
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,8 +1,6 @@
 import 'core-js/stable';
 import 'zone.js/dist/zone';

-import { ToasterModule } from 'angular2-toaster';
-
 import { AppRoutingModule } from './app-routing.module';
 import { ServicesModule } from './services/services.module';

@@ -15,6 +13,7 @@ import { AppComponent } from './app.component';

 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 { ApiKeyComponent } from './accounts/apiKey.component';
 import { EnvironmentComponent } from './accounts/environment.component';
@@ -42,7 +41,11 @@ import { SearchCiphersPipe } from 'jslib-angular/pipes/search-ciphers.pipe';
        FormsModule,
        AppRoutingModule,
        ServicesModule,
-        ToasterModule.forRoot(),
+        BitwardenToastModule.forRoot({
+            maxOpened: 5,
+            autoDismiss: true,
+            closeButton: true,
+        }),
    ],
    declarations: [
        A11yTitleDirective,
--- a/src/app/tabs/dashboard.component.ts
+++ b/src/app/tabs/dashboard.component.ts
@@ -6,12 +6,11 @@ import {
    OnInit,
 } from '@angular/core';

-import { ToasterService } from 'angular2-toaster';
-
 import { BroadcasterService } from 'jslib-common/abstractions/broadcaster.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';

 import { SyncService } from '../../services/sync.service';

@@ -45,7 +44,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
    constructor(private i18nService: I18nService, private syncService: SyncService,
        private configurationService: ConfigurationService, private broadcasterService: BroadcasterService,
        private ngZone: NgZone, private messagingService: MessagingService,
-        private toasterService: ToasterService, private changeDetectorRef: ChangeDetectorRef,
+        private platformUtilsService: PlatformUtilsService, private changeDetectorRef: ChangeDetectorRef,
        private stateService: StateService) { }

    async ngOnInit() {
@@ -76,13 +75,13 @@ export class DashboardComponent implements OnInit, OnDestroy {
        await this.startPromise;
        this.messagingService.send('scheduleNextDirSync');
        this.syncRunning = true;
-        this.toasterService.popAsync('success', null, this.i18nService.t('syncingStarted'));
+        this.platformUtilsService.showToast('success', null, this.i18nService.t('syncingStarted'));
    }

    async stop() {
        this.messagingService.send('cancelDirSync');
        this.syncRunning = false;
-        this.toasterService.popAsync('success', null, this.i18nService.t('syncingStopped'));
+        this.platformUtilsService.showToast('success', null, this.i18nService.t('syncingStopped'));
    }

    async sync() {
@@ -90,7 +89,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
        const result = await this.syncPromise;
        const groupCount = result[0] != null ? result[0].length : 0;
        const userCount = result[1] != null ? result[1].length : 0;
-        this.toasterService.popAsync('success', null,
+        this.platformUtilsService.showToast('success', null,
            this.i18nService.t('syncCounts', groupCount.toString(), userCount.toString()));
    }

--- a/src/app/tabs/more.component.ts
+++ b/src/app/tabs/more.component.ts
@@ -6,8 +6,6 @@ import {
    OnInit,
 } from '@angular/core';

-import { ToasterService } from 'angular2-toaster';
-
 import { BroadcasterService } from 'jslib-common/abstractions/broadcaster.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
@@ -28,7 +26,7 @@ export class MoreComponent implements OnInit {

    constructor(private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
        private messagingService: MessagingService, private configurationService: ConfigurationService,
-        private toasterService: ToasterService, private broadcasterService: BroadcasterService,
+        private broadcasterService: BroadcasterService,
        private ngZone: NgZone, private changeDetectorRef: ChangeDetectorRef) { }

    async ngOnInit() {
@@ -72,6 +70,6 @@ export class MoreComponent implements OnInit {

    async clearCache() {
        await this.configurationService.clearStatefulSettings(true);
-        this.toasterService.popAsync('success', null, this.i18nService.t('syncCacheCleared'));
+        this.platformUtilsService.showToast('success', null, this.i18nService.t('syncCacheCleared'));
    }
 }
--- a/src/scss/plugins.scss
+++ b/src/scss/plugins.scss
@@ -1,38 +1,40 @@
 $fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";
-@import "~angular2-toaster/toaster";
+@import '~ngx-toastr/toastr';

@import "~bootstrap/scss/_variables.scss";

-#toast-container {
+.toast-container {
    .toast-close-button {
-        right: -0.15em;
+        font-size: 18px;
+        margin-right: 4px;
    }

-    .toast {
-        opacity: 1 !important;
+    .ngx-toastr {
+        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;
-            color: #ffffff;
-            padding-right: 10px;
-            margin: auto 0 auto -36px;
-        }
-
-        .toaster-icon {
-            display: none;
+            padding-right: 15px;
        }

        .toast-message {
@@ -46,38 +48,33 @@ $fa-font-path: "~font-awesome/fonts";
        }

        &.toast-danger, &.toast-error {
-            background-image: none !important;
            background-color: $danger;

-            &:before {
+            .icon i::before {
                content: "\f0e7";
-                margin-left: -30px;
            }
        }

        &.toast-warning {
-            background-image: none !important;
            background-color: $warning;

-            &:before {
+            .icon i::before {
                content: "\f071";
            }
        }

        &.toast-info {
-            background-image: none !important;
            background-color: $info;

-            &:before {
+            .icon i:before {
                content: "\f05a";
            }
        }

        &.toast-success {
-            background-image: none !important;
            background-color: $success;

-            &:before {
+            .icon i:before {
                content: "\f00C";
            }
        }