Client: better notifications for a beautiful world

2 files changed, 17 insertions, 5 deletions

diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index 06ffa1a42..a56adbbad 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -7,6 +7,8 @@ import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/mergeMap';
 import 'rxjs/add/observable/throw';
 
+import { NotificationsService } from 'angular2-notifications';
+
 // Do not use the barrel (dependency loop)
 import { AuthStatus } from '../../shared/auth/auth-status.model';
 import { AuthUser } from '../../shared/auth/auth-user.model';
@@ -27,6 +29,7 @@ export class AuthService {
 
   constructor(
     private http: Http,
+    private notificationsService: NotificationsService,
     private restExtractor: RestExtractor,
     private router: Router
    ) {
@@ -44,11 +47,14 @@ export class AuthService {
           this.clientSecret = result.client_secret;
           console.log('Client credentials loaded.');
         },
+
         error => {
-          alert(
-            `Cannot retrieve OAuth Client credentials: ${error.text}. \n` +
-            'Ensure you have correctly configured PeerTube (config/ directory), in particular the "webserver" section.'
-          );
+          let errorMessage = `Cannot retrieve OAuth Client credentials: ${error.text}. \n`;
+          errorMessage += 'Ensure you have correctly configured PeerTube (config/ directory), in particular the "webserver" section.';
+
+          // We put a bigger timeout
+          // This is an important message
+          this.notificationsService.error('Error', errorMessage, { timeOut: 7000 });
         }
       );
 
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index 09a6f92f5..48fec2d43 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -3,6 +3,8 @@ import { CommonModule } from '@angular/common';
 import { HttpModule } from '@angular/http';
 import { RouterModule } from '@angular/router';
 
+import { SimpleNotificationsModule } from 'angular2-notifications';
+
 import { AuthService } from './auth';
 import { MenuComponent, MenuAdminComponent } from './menu';
 import { throwIfAlreadyLoaded } from './module-import-guard';
@@ -11,13 +13,17 @@ import { throwIfAlreadyLoaded } from './module-import-guard';
   imports: [
     CommonModule,
     HttpModule,
-    RouterModule
+    RouterModule,
+
+    SimpleNotificationsModule
   ],
   declarations: [
     MenuComponent,
     MenuAdminComponent
   ],
   exports: [
+    SimpleNotificationsModule,
+
     MenuComponent,
     MenuAdminComponent
   ],