Add login & logout

src/app/app.component.html

@@ -20,6 +20,10 @@
           >Dark Mode</mat-slide-toggle
         >
       </div>
+      <button *ngIf="loggedIn" mat-menu-item (click)="logout()">
+        <mat-icon>exit_to_app</mat-icon>
+        <span>Ausloggen</span>
+      </button>
     </mat-menu>
   </mat-toolbar>
 

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component, Renderer2 } from '@angular/core';
 import { ColorThemeService } from './services/colorTheme.service';
 import { AuthService } from './services/auth.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -15,7 +16,8 @@ export class AppComponent {
   constructor(
     private renderer: Renderer2,
     private themeService: ColorThemeService,
-    private authService: AuthService
+    private authService: AuthService,
+    private router: Router,
   ) {
     this.renderer.addClass(document.body, 'mat-app-background'); //so the background color changes dependent on current theme
     this.themeService.load();
@@ -26,4 +28,8 @@ export class AppComponent {
   changeTheme(event) {
     this.themeService.update(event.checked ? 'dark-theme' : 'light-theme');
   }
+
+  logout() {
+    this.authService.logout().subscribe().add(() => this.router.navigate(['login']));
+  }
 }

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

@@ -35,4 +35,7 @@
   <button mat-stroked-button color="primary" (click)="login()">
     Login
   </button>
+  <mat-error class="login-error-message" *ngIf="errorOccurred">
+    {{errorMessage}}
+  </mat-error>
 </div>

src/app/pages/login/login.component.scss

@@ -13,4 +13,7 @@
     #loading-bar {
         margin-bottom: 1em;
     }
+    .login-error-message {
+        margin-top: 0.5em;
+    }
 }

src/app/pages/login/login.component.ts

@@ -1,27 +1,44 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
 import { AuthService } from '../../services/auth.service';
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+  styleUrls: ['./login.component.scss'],
 })
 export class LoginComponent implements OnInit {
   email = new FormControl('', [Validators.required, Validators.email]);
   password = new FormControl('', [Validators.required]);
   hide = true;
   loading = false;
-  constructor(private authService: AuthService) { }
+  errorOccurred = false;
+  errorMessage = '';
+  constructor(private authService: AuthService, private router: Router) {}
 
-  ngOnInit(): void {
+  ngOnInit(): void {}
-  }
 
   login() {
+    this.errorMessage = '';
+    this.errorOccurred = false;
     if (this.email.invalid || this.password.invalid) {
       return;
     }
-    this.authService.login(this.email.value, this.password.value).subscribe();
+    this.loading = true;
+    this.authService
+      .login(this.email.value, this.password.value)
+      .subscribe(
+        () => this.router.navigate(['bikes']),
+        (error) => {
+          this.errorOccurred = true;
+          this.errorMessage =
+            error.error.message ||
+            'Ein Fehler bei Einloggen ist aufgetreten. Überprüfen Sie Ihre Internetverbindung oder versuchen Sie es später erneut.';
+        }
+      )
+      .add(() => {
+        this.loading = false;
+      });
   }
-
 }

src/app/services/auth.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { map } from 'rxjs/operators';
+import { map, tap } from 'rxjs/operators';
 import { environment } from '../../environments/environment';
 import { BehaviorSubject } from 'rxjs';
 
@@ -42,8 +42,12 @@ export class AuthService {
 
   logout() {
     // remove token from local storage to log user out
+    return this.http
+      .post<any>(`${environment.authUrl}/logout`, { request_token: this.requestToken }).pipe(tap(() => {
         localStorage.removeItem('requestToken');
         localStorage.removeItem('refreshToken');
         this.checkIfUserIsLoggedIn();
       }
+      ));
+  }
 }