toast changes

src-ui/src/app/services/auth.interceptor.ts

@@ -3,15 +3,18 @@ import {
   HttpRequest,
   HttpHandler,
   HttpEvent,
-  HttpInterceptor
+  HttpInterceptor,
+  HttpErrorResponse
 } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { Observable, throwError } from 'rxjs';
 import { AuthService } from './auth.service';
+import { catchError } from 'rxjs/operators';
+import { Toast, ToastService } from './toast.service';
 
 @Injectable()
 export class AuthInterceptor implements HttpInterceptor {
 
-  constructor(private authService: AuthService) {}
+  constructor(private authService: AuthService, private toastService: ToastService) {}
 
   intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
     if (this.authService.isAuthenticated()) {
@@ -21,6 +24,14 @@ export class AuthInterceptor implements HttpInterceptor {
         }
       });
     }
-    return next.handle(request);
+    return next.handle(request).pipe(
+      catchError((error: HttpErrorResponse) => {
+        if (error.status == 401 && this.authService.isAuthenticated()) {
+          this.authService.logout()
+          this.toastService.showToast(Toast.makeError("Your session has expired. Please log in again."))
+        }
+        return throwError(error)
+      })
+    );
   }
 }

src-ui/src/app/services/toast.service.ts

@@ -1,20 +1,27 @@
 import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs';
+import { Subject, zip } from 'rxjs';
 
 export class Toast {
 
-  static make(title: string, content: string, delay?: number): Toast {
+  static make(title: string, content: string, classname?: string, delay?: number): Toast {
     let t = new Toast()
     t.title = title
     t.content = content
+    t.classname = classname
     if (delay) {
       t.delay = delay
     }
     return t
   }
 
+  static makeError(content: string) {
+    return Toast.make("Error", content, null, 10000)
+  }
+
   title: string
 
+  classname: string
+
   content: string
 
   delay: number = 5000
@@ -30,23 +37,23 @@ export class ToastService {
 
   private toasts: Toast[] = []
 
-  private toastSubject: Subject<Toast[]> = new Subject()
+  private toastsSubject: Subject<Toast[]> = new Subject()
 
   showToast(toast: Toast) {
     this.toasts.push(toast)
-    this.toastSubject.next(this.toasts)
+    this.toastsSubject.next(this.toasts)
   }
 
   closeToast(toast: Toast) {
     let index = this.toasts.findIndex(t => t == toast)
     if (index > -1) {
       this.toasts.splice(index, 1)
-      this.toastSubject.next(this.toasts)
+      this.toastsSubject.next(this.toasts)
     }
   }
 
   getToasts() {
-    return this.toastSubject
+    return this.toastsSubject
   }
 
 }