added error interceptor

src/app/app.module.ts

@@ -47,6 +47,7 @@ import { MenuListItemComponent } from './components/menu-list-item/menu-list-ite
 import { SidenavProfileComponent } from './components/sidenav-profile/sidenav-profile.component';
 import { NavService } from './components/menu-list-item/nav.service';
 import { TokenInterceptor } from './helper/token.interceptor';
+import { HttpErrorInterceptor } from './helper/http-error.interceptor';
 import { BikeComponent } from './pages/dataPages/bike/bike.component';
 import {
   TableComponent,
@@ -138,6 +139,7 @@ import { ProfileComponent } from './pages/profile/profile.component';
     MatDatepickerModule,
     DatePipe,
     { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },
+    { provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true },
     {provide: MAT_DATE_LOCALE, useValue: 'de-DE'},
   ],
 

src/app/helper/http-error.interceptor.ts

@@ -0,0 +1,45 @@
+import {
+    HttpEvent,
+    HttpInterceptor,
+    HttpHandler,
+    HttpRequest,
+    HttpResponse,
+    HttpErrorResponse
+   } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+   import { Observable, throwError } from 'rxjs';
+   import { retry, catchError } from 'rxjs/operators';
+   import {SnackBarService} from '../services/snackbar.service';
+   
+   @Injectable()
+   export class HttpErrorInterceptor implements HttpInterceptor {
+
+    constructor(private snackBar: SnackBarService){}
+
+    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+      return next.handle(request)
+        .pipe(
+          catchError((error: HttpErrorResponse) => {
+            
+
+            let errorMessage = '';
+            if (error.error instanceof ErrorEvent) {
+
+              // client error
+              errorMessage = `Error: ${error.error.message}`;
+            } else {
+                // server error
+                if (error.status === 401){
+                    errorMessage = `Das eingegeben Passwort ist falsch`;
+                } else {
+                    errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
+                }
+              
+            }
+            
+            this.snackBar.openSnackBar(errorMessage, "Ok", true);
+            return throwError(errorMessage);
+          })
+        )
+    }
+   }

src/app/helper/token.interceptor.ts

@@ -22,7 +22,7 @@ export class TokenInterceptor implements HttpInterceptor {
       if (error instanceof HttpErrorResponse && error.status === 401) {
         return this.handle401Error(request, next);
       } else {
-        return throwError(error);
+        //return throwError(error);
       }
     }));
   }

src/app/pages/login/login.component.html

@@ -12,7 +12,7 @@
   </mat-form-field>
 
   <mat-form-field (keyup.enter)="login()">
-    <mat-label>Passwort eingeben</mat-label>
+    <mat-label>Passwort eingebene</mat-label>
     <input
       matInput
       [type]="hide ? 'password' : 'text'"

src/app/services/snackbar.service.ts

@@ -9,10 +9,18 @@ export class SnackBarService {
     constructor(private snackBar : MatSnackBar) { } 
   
   
-    openSnackBar(message: string, action: string = "") { 
-        this.snackBar.open(message, action, { 
-            duration: 5000, 
-            panelClass: ['mat-toolbar', 'mat-primary', 'simple-snack-bar']
-        });
+    openSnackBar(message: string, action: string = "", error: boolean = false) { 
+        if (error){
+            this.snackBar.open(message, action, { 
+                duration: 5000, 
+                panelClass: ['mat-toolbar', 'mat-warn', 'simple-snack-bar']
+            });
+        } else {
+            this.snackBar.open(message, action, { 
+                duration: 5000, 
+                panelClass: ['mat-toolbar', 'mat-primary', 'simple-snack-bar']
+            });
+        }
+        
     } 
 }