platform utils for toasting

src/popup/accounts/environment.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { EnvironmentService } from 'jslib/abstractions/environment.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 
 import { EnvironmentComponent as BaseEnvironmentComponent } from 'jslib/angular/components/environment.component';
 
@@ -14,10 +14,10 @@ import { EnvironmentComponent as BaseEnvironmentComponent } from 'jslib/angular/
     templateUrl: 'environment.component.html',
 })
 export class EnvironmentComponent extends BaseEnvironmentComponent {
-    constructor(analytics: Angulartics2, toasterService: ToasterService,
+    constructor(analytics: Angulartics2, platformUtilsService: PlatformUtilsService,
         environmentService: EnvironmentService, i18nService: I18nService,
         private router: Router) {
-        super(analytics, toasterService, environmentService, i18nService);
+        super(analytics, platformUtilsService, environmentService, i18nService);
         this.showCustom = true;
     }
 

src/popup/accounts/hint.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { ApiService } from 'jslib/abstractions/api.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 
 import { HintComponent as BaseHintComponent } from 'jslib/angular/components/hint.component';
 
@@ -15,8 +15,8 @@ import { HintComponent as BaseHintComponent } from 'jslib/angular/components/hin
 })
 export class HintComponent extends BaseHintComponent {
     constructor(router: Router, analytics: Angulartics2,
-        toasterService: ToasterService, i18nService: I18nService,
+        platformUtilsService: PlatformUtilsService, i18nService: I18nService,
         apiService: ApiService) {
-        super(router, analytics, toasterService, i18nService, apiService);
+        super(router, analytics, i18nService, apiService, platformUtilsService);
     }
 }

src/popup/accounts/home.component.ts

@@ -1,16 +1,7 @@
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { ToasterService } from 'angular2-toaster';
-import { Angulartics2 } from 'angulartics2';
-
-import { I18nService } from 'jslib/abstractions/i18n.service';
 
 @Component({
     selector: 'app-home',
     templateUrl: 'home.component.html',
 })
-export class HomeComponent {
+export class HomeComponent { }
-    constructor(private router: Router, i18nService: I18nService,
-        analytics: Angulartics2, toasterService: ToasterService) { }
-}

src/popup/accounts/lock.component.ts

@@ -4,7 +4,6 @@ import {
 } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { CryptoService } from 'jslib/abstractions/crypto.service';
@@ -21,11 +20,10 @@ import { LockComponent as BaseLockComponent } from 'jslib/angular/components/loc
 })
 export class LockComponent extends BaseLockComponent implements OnInit {
     constructor(router: Router, analytics: Angulartics2,
-        toasterService: ToasterService, i18nService: I18nService,
+        i18nService: I18nService,
         platformUtilsService: PlatformUtilsService, messagingService: MessagingService,
         userService: UserService, cryptoService: CryptoService) {
-        super(router, analytics, toasterService, i18nService, platformUtilsService,
+        super(router, analytics, i18nService, platformUtilsService, messagingService, userService, cryptoService);
-            messagingService, userService, cryptoService);
         this.successRoute = '/tabs/current';
     }
 

src/popup/accounts/login.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { AuthService } from 'jslib/abstractions/auth.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { StorageService } from 'jslib/abstractions/storage.service';
 import { SyncService } from 'jslib/abstractions/sync.service';
 
@@ -17,9 +17,9 @@ import { LoginComponent as BaseLoginComponent } from 'jslib/angular/components/l
 })
 export class LoginComponent extends BaseLoginComponent {
     constructor(authService: AuthService, router: Router,
-        analytics: Angulartics2, toasterService: ToasterService,
+        analytics: Angulartics2, platformUtilsService: PlatformUtilsService,
-        i18nService: I18nService, private syncService: SyncService, storageService: StorageService) {
+        i18nService: I18nService, syncService: SyncService, storageService: StorageService) {
-        super(authService, router, analytics, toasterService, i18nService, storageService);
+        super(authService, router, analytics, platformUtilsService, i18nService, storageService);
         super.onSuccessfulLogin = () => {
             return syncService.fullSync(true);
         };

src/popup/accounts/register.component.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { ApiService } from 'jslib/abstractions/api.service';
@@ -19,11 +18,11 @@ import { RegisterComponent as BaseRegisterComponent } from 'jslib/angular/compon
 })
 export class RegisterComponent extends BaseRegisterComponent {
     constructor(authService: AuthService, router: Router,
-        analytics: Angulartics2, toasterService: ToasterService,
+        analytics: Angulartics2,
         i18nService: I18nService, cryptoService: CryptoService,
         apiService: ApiService, stateService: StateService,
         platformUtilsService: PlatformUtilsService) {
-        super(authService, router, analytics, toasterService, i18nService, cryptoService, apiService, stateService,
+        super(authService, router, analytics, i18nService, cryptoService, apiService, stateService,
             platformUtilsService);
     }
 }

src/popup/accounts/two-factor-options.component.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { AuthService } from 'jslib/abstractions/auth.service';
@@ -18,9 +17,9 @@ import {
 })
 export class TwoFactorOptionsComponent extends BaseTwoFactorOptionsComponent {
     constructor(authService: AuthService, router: Router,
-        analytics: Angulartics2, toasterService: ToasterService,
+        analytics: Angulartics2,
         i18nService: I18nService, platformUtilsService: PlatformUtilsService) {
-        super(authService, router, analytics, toasterService, i18nService, platformUtilsService, window);
+        super(authService, router, analytics, i18nService, platformUtilsService, window);
     }
 
     choose(p: any) {

src/popup/accounts/two-factor.component.ts

@@ -2,13 +2,10 @@ import {
     ChangeDetectorRef,
     Component,
     NgZone,
-    OnDestroy,
-    OnInit,
 } from '@angular/core';
 
 import { Router } from '@angular/router';
 
-import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { BrowserApi } from '../../browser/browserApi';
@@ -36,13 +33,13 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
     showNewWindowMessage = false;
 
     constructor(authService: AuthService, router: Router,
-        analytics: Angulartics2, toasterService: ToasterService,
+        analytics: Angulartics2,
         i18nService: I18nService, apiService: ApiService,
         platformUtilsService: PlatformUtilsService, syncService: SyncService,
         environmentService: EnvironmentService, private ngZone: NgZone,
         private broadcasterService: BroadcasterService, private changeDetectorRef: ChangeDetectorRef) {
-        super(authService, router, analytics, toasterService, i18nService, apiService,
+        super(authService, router, analytics, i18nService, apiService, platformUtilsService, window,
-            platformUtilsService, window, environmentService);
+            environmentService);
         super.onSuccessfulLogin = () => {
             return syncService.fullSync(true);
         };

src/popup/app.component.ts

@@ -1,8 +1,11 @@
 import { BrowserApi } from '../browser/browserApi';
 
 import {
+    BodyOutputType,
+    Toast,
     ToasterConfig,
     ToasterContainerComponent,
+    ToasterService,
 } from 'angular2-toaster';
 import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
 import swal from 'sweetalert';
@@ -12,14 +15,15 @@ import {
     Component,
     NgZone,
     OnInit,
+    SecurityContext,
 } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 import {
     NavigationEnd,
     Router,
     RouterOutlet,
 } from '@angular/router';
 
-import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
@@ -62,7 +66,8 @@ export class AppComponent implements OnInit {
         private broadcasterService: BroadcasterService, private authService: AuthService,
         private i18nService: I18nService, private router: Router,
         private stateService: StateService, private messagingService: MessagingService,
-        private changeDetectorRef: ChangeDetectorRef, private ngZone: NgZone) { }
+        private changeDetectorRef: ChangeDetectorRef, private ngZone: NgZone,
+        private sanitizer: DomSanitizer) { }
 
     ngOnInit() {
         if (BrowserApi.getBackgroundPage() == null) {
@@ -84,8 +89,11 @@ export class AppComponent implements OnInit {
                     this.authService.logOut(() => {
                         this.analytics.eventTrack.next({ action: 'Logged Out' });
                         if (msg.expired) {
-                            this.toasterService.popAsync('warning', this.i18nService.t('loggedOut'),
+                            this.showToast({
-                                this.i18nService.t('loginExpired'));
+                                type: 'warning',
+                                title: this.i18nService.t('loggedOut'),
+                                text: this.i18nService.t('loginExpired'),
+                            });
                         }
                         this.router.navigate(['home']);
                         this.stateService.purge();
@@ -96,6 +104,11 @@ export class AppComponent implements OnInit {
                 this.stateService.purge();
             } else if (msg.command === 'showDialog') {
                 await this.showDialog(msg);
+            } else if (msg.command === 'showToast') {
+                this.ngZone.run(async () => {
+                    await this.showToast(msg);
+                    this.changeDetectorRef.detectChanges();
+                });
             } else {
                 msg.webExtSender = sender;
                 this.broadcasterService.send(msg);
@@ -133,6 +146,33 @@ export class AppComponent implements OnInit {
         this.storageService.save(ConstantsService.lastActiveKey, now);
     }
 
+    private async 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 = '';
+            msg.text.forEach((t: string) =>
+                message += ('<p>' + this.sanitizer.sanitize(SecurityContext.HTML, t) + '</p>'));
+            toast.body = message;
+            toast.bodyOutputType = BodyOutputType.TrustedHtml;
+        }
+        if (msg.options != null) {
+            if (msg.options.trustedHtml === true) {
+                toast.bodyOutputType = BodyOutputType.TrustedHtml;
+            }
+            if (msg.options.timeout != null && msg.options.timeout > 0) {
+                toast.timeout = msg.options.timeout;
+            }
+        }
+        this.toasterService.popAsync(toast);
+    }
+
     private async showDialog(msg: any) {
         const buttons = [msg.confirmText == null ? this.i18nService.t('ok') : msg.confirmText];
         if (msg.cancelText != null) {

src/popup/components/ciphers-list.component.ts

@@ -5,20 +5,10 @@ import {
     Output,
 } from '@angular/core';
 
-import { ToasterService } from 'angular2-toaster';
-import { Angulartics2 } from 'angulartics2';
-
-import { BrowserApi } from '../../browser/browserApi';
-
 import { CipherType } from 'jslib/enums/cipherType';
 
 import { CipherView } from 'jslib/models/view/cipherView';
 
-import { I18nService } from 'jslib/abstractions/i18n.service';
-import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
-
-import { PopupUtilsService } from '../services/popup-utils.service';
-
 @Component({
     selector: 'app-ciphers-list',
     templateUrl: 'ciphers-list.component.html',

src/popup/generator/password-generator-history.component.ts

@@ -1,4 +1,3 @@
-import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { Location } from '@angular/common';
@@ -19,8 +18,8 @@ import {
 export class PasswordGeneratorHistoryComponent extends BasePasswordGeneratorHistoryComponent {
     constructor(passwordGenerationService: PasswordGenerationService, analytics: Angulartics2,
         platformUtilsService: PlatformUtilsService, i18nService: I18nService,
-        toasterService: ToasterService, private location: Location) {
+        private location: Location) {
-        super(passwordGenerationService, analytics, platformUtilsService, i18nService, toasterService, window);
+        super(passwordGenerationService, analytics, platformUtilsService, i18nService, window);
     }
 
     close() {

src/popup/generator/password-generator.component.ts

@@ -1,4 +1,3 @@
-import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { Location } from '@angular/common';
@@ -24,9 +23,8 @@ export class PasswordGeneratorComponent extends BasePasswordGeneratorComponent {
 
     constructor(passwordGenerationService: PasswordGenerationService, analytics: Angulartics2,
         platformUtilsService: PlatformUtilsService, i18nService: I18nService,
-        toasterService: ToasterService, private stateService: StateService,
+        private stateService: StateService, private location: Location) {
-        private location: Location) {
+        super(passwordGenerationService, analytics, platformUtilsService, i18nService, window);
-        super(passwordGenerationService, analytics, platformUtilsService, i18nService, toasterService, window);
     }
 
     async ngOnInit() {

src/popup/settings/export.component.ts

@@ -1,4 +1,3 @@
-import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { Component } from '@angular/core';
@@ -16,12 +15,11 @@ import { ExportComponent as BaseExportComponent } from 'jslib/angular/components
     templateUrl: 'export.component.html',
 })
 export class ExportComponent extends BaseExportComponent {
-    constructor(analytics: Angulartics2, toasterService: ToasterService,
+    constructor(analytics: Angulartics2,
         cryptoService: CryptoService, i18nService: I18nService,
         platformUtilsService: PlatformUtilsService, exportService: ExportService,
         private router: Router) {
-        super(analytics, toasterService, cryptoService, i18nService, platformUtilsService,
+        super(analytics, cryptoService, i18nService, platformUtilsService, exportService, window);
-            exportService, window);
     }
 
     protected saved() {

src/popup/settings/folder-add-edit.component.ts

@@ -4,7 +4,6 @@ import {
     Router,
 } from '@angular/router';
 
-import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { FolderService } from 'jslib/abstractions/folder.service';
@@ -21,10 +20,10 @@ import {
 })
 export class FolderAddEditComponent extends BaseFolderAddEditComponent {
     constructor(folderService: FolderService, i18nService: I18nService,
-        analytics: Angulartics2, toasterService: ToasterService,
+        analytics: Angulartics2,
         platformUtilsService: PlatformUtilsService, private router: Router,
         private route: ActivatedRoute) {
-        super(folderService, i18nService, analytics, toasterService, platformUtilsService);
+        super(folderService, i18nService, analytics, platformUtilsService);
     }
 
     async ngOnInit() {

src/popup/settings/premium.component.ts

@@ -1,7 +1,6 @@
 import { CurrencyPipe } from '@angular/common';
 import { Component } from '@angular/core';
 
-import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { ApiService } from 'jslib/abstractions/api.service';
@@ -18,11 +17,11 @@ import { PremiumComponent as BasePremiumComponent } from 'jslib/angular/componen
 export class PremiumComponent extends BasePremiumComponent {
     priceString: string;
 
-    constructor(analytics: Angulartics2, toasterService: ToasterService,
+    constructor(analytics: Angulartics2,
         i18nService: I18nService, platformUtilsService: PlatformUtilsService,
         tokenService: TokenService, apiService: ApiService,
         private currencyPipe: CurrencyPipe) {
-        super(analytics, toasterService, i18nService, platformUtilsService, tokenService, apiService);
+        super(analytics, i18nService, platformUtilsService, tokenService, apiService);
 
         // Support old price string. Can be removed in future once all translations are properly updated.
         const thePrice = this.currencyPipe.transform(this.price, '$');

src/popup/vault/add-edit.component.ts

@@ -8,11 +8,8 @@ import {
     Router,
 } from '@angular/router';
 
-import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
-import { CipherType } from 'jslib/enums/cipherType';
-
 import { AuditService } from 'jslib/abstractions/audit.service';
 import { CipherService } from 'jslib/abstractions/cipher.service';
 import { FolderService } from 'jslib/abstractions/folder.service';
@@ -31,12 +28,12 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit {
 
     constructor(cipherService: CipherService, folderService: FolderService,
         i18nService: I18nService, platformUtilsService: PlatformUtilsService,
-        analytics: Angulartics2, toasterService: ToasterService,
+        analytics: Angulartics2,
         auditService: AuditService, stateService: StateService,
         private route: ActivatedRoute, private router: Router,
         private location: Location) {
         super(cipherService, folderService, i18nService, platformUtilsService, analytics,
-            toasterService, auditService, stateService);
+            auditService, stateService);
     }
 
     ngOnInit() {

src/popup/vault/attachments.component.ts

@@ -2,7 +2,6 @@ import { Location } from '@angular/common';
 import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { CipherService } from 'jslib/abstractions/cipher.service';
@@ -19,12 +18,11 @@ import { AttachmentsComponent as BaseAttachmentsComponent } from 'jslib/angular/
 })
 export class AttachmentsComponent extends BaseAttachmentsComponent {
     constructor(cipherService: CipherService, analytics: Angulartics2,
-        toasterService: ToasterService, i18nService: I18nService,
+        i18nService: I18nService,
         cryptoService: CryptoService, userService: UserService,
         platformUtilsService: PlatformUtilsService, private location: Location,
         private route: ActivatedRoute) {
-        super(cipherService, analytics, toasterService, i18nService, cryptoService, userService,
+        super(cipherService, analytics, i18nService, cryptoService, userService, platformUtilsService, window);
-            platformUtilsService, window);
     }
 
     async ngOnInit() {

src/popup/vault/password-history.component.ts

@@ -1,4 +1,3 @@
-import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { Location } from '@angular/common';
@@ -20,9 +19,8 @@ import {
 export class PasswordHistoryComponent extends BasePasswordHistoryComponent {
     constructor(cipherService: CipherService, analytics: Angulartics2,
         platformUtilsService: PlatformUtilsService, i18nService: I18nService,
-        toasterService: ToasterService, private location: Location,
+        private location: Location, private route: ActivatedRoute) {
-        private route: ActivatedRoute) {
+        super(cipherService, analytics, platformUtilsService, i18nService, window);
-        super(cipherService, analytics, platformUtilsService, i18nService, toasterService, window);
     }
 
     async ngOnInit() {

src/popup/vault/view.component.ts

@@ -9,7 +9,6 @@ import {
     Router,
 } from '@angular/router';
 
-import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { AuditService } from 'jslib/abstractions/audit.service';
@@ -33,14 +32,14 @@ export class ViewComponent extends BaseViewComponent {
     showAttachments = true;
 
     constructor(cipherService: CipherService, totpService: TotpService,
-        tokenService: TokenService, toasterService: ToasterService,
+        tokenService: TokenService,
         cryptoService: CryptoService, platformUtilsService: PlatformUtilsService,
         i18nService: I18nService, analytics: Angulartics2,
         auditService: AuditService, private route: ActivatedRoute,
         private router: Router, private location: Location,
         broadcasterService: BroadcasterService, ngZone: NgZone,
         changeDetectorRef: ChangeDetectorRef, userService: UserService) {
-        super(cipherService, totpService, tokenService, toasterService, cryptoService, platformUtilsService,
+        super(cipherService, totpService, tokenService, cryptoService, platformUtilsService,
             i18nService, analytics, auditService, window, broadcasterService, ngZone, changeDetectorRef, userService);
     }
 

src/services/browserPlatformUtils.service.ts

@@ -1,3 +1,4 @@
+import { ToasterService } from 'angular2-toaster';
 import * as tldjs from 'tldjs';
 
 import { BrowserApi } from '../browser/browserApi';
@@ -178,8 +179,13 @@ export default class BrowserPlatformUtilsService implements PlatformUtilsService
         return true;
     }
 
-    showToast(type: 'error' | 'success' | 'warning' | 'info', title: string, text: string, global?: any): void {
+    showToast(type: 'error' | 'success' | 'warning' | 'info', title: string, text: string, options?: any): void {
-        throw new Error('showToast not implemented');
+        this.messagingService.send('showToast', {
+            text: text,
+            title: title,
+            type: type,
+            options: options,
+        });
     }
 
     showDialog(text: string, title?: string, confirmText?: string, cancelText?: string, type?: string) {