basic login/logout

client/src/app/screens/screen-profile/screen-profile.html

@@ -11,6 +11,7 @@
         <i class="bi bi-wallet2 fs-4"></i>
         <h3 class="mb-0">{{ balance  | currency}}</h3>
       </div>
+      <button type="button" (click)="logOut()" class="btn btn-outline-secondary">Log out</button>
     </div>
   </div>
 

client/src/app/screens/screen-profile/screen-profile.ts

@@ -2,6 +2,7 @@ import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { APIService } from '../../services/api';
 import Transaction from '@model/transaction';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-screen-profile',
@@ -15,7 +16,10 @@ export class ScreenProfile implements OnInit{
   balance = 200;
   transactions!: Transaction[];
 
-  constructor(private api: APIService){}
+  constructor(
+    private api: APIService,
+    private router: Router,
+  ){}
 
   ngOnInit(): void {
     // FIXME transactions displaying delayed (only on second nav click)
@@ -28,5 +32,15 @@ export class ScreenProfile implements OnInit{
       },
     })
   }
+  logOut(){
+    this.api.logout().subscribe({
+      next: () => {
+        this.router.navigate(['login'])
+      },
+      error: (err) => {
+        console.error('Error logging out:', err)
+      }
+    })
+  }
 
 }

client/src/app/services/api.ts

@@ -17,4 +17,7 @@ export class APIService {
   login(username: string, password: string): Observable<any>{
     return this.http.post(this.apiUrl + '/auth/login',{ 'username': username, 'password': password});
   }
+  logout(): Observable<any>{
+    return this.http.post(this.apiUrl + '/auth/logout', {});
+  }
 }