bouton déconnection

src/app/components/navbar/navbar.component.html

@@ -9,7 +9,7 @@
         >Memory Map</span
       >
     </a>
-    <div class="flex lg:order-2">
+    <div class="flex lg:order-2 justify-between">
       <button
         type="button"
         data-collapse-toggle="navbar-search"
@@ -104,6 +104,14 @@
           />
         </svg>
       </button>
+
+      <button
+        (click)="logout()"
+        type="button"
+        class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 ml-10 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
+      >
+        Déconnection
+      </button>
     </div>
     <div
       class="items-center justify-between hidden w-full lg:flex lg:w-auto lg:order-1"

src/app/components/navbar/navbar.component.ts

@@ -2,6 +2,7 @@ import { NgIf } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { NavigationEnd, Router, RouterLink } from '@angular/router';
 import { AddPinPopupComponent } from '../add-pin-popup/add-pin-popup.component';
+import { LocalStorageService } from '../../services/localstorage.service';
 
 @Component({
   selector: 'app-navbar',
@@ -12,7 +13,10 @@ export class NavbarComponent implements OnInit {
   isHome: boolean = false;
   isModalOpen: boolean = false;
 
-  constructor(private router: Router) {}
+  constructor(
+    private router: Router,
+    private localStorageService: LocalStorageService
+  ) {}
 
   ngOnInit(): void {
     this.isHome = this.router.url === '/';
@@ -22,4 +26,9 @@ export class NavbarComponent implements OnInit {
       }
     });
   }
+
+  public logout() {
+    this.localStorageService.removeToken();
+    this.router.navigate(['/']);
+  }
 }

src/app/components/register-page/register-page.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { LoginService } from '../../services/login.service';
 import { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { FormBuilder } from '@angular/forms';
 import { Router } from '@angular/router';

src/app/services/localstorage.service.ts

@@ -1,23 +1,22 @@
 import { Injectable } from '@angular/core';
 
 @Injectable({
-    providedIn: 'root'
+  providedIn: 'root',
 })
 export class LocalStorageService {
+  private readonly AUTH_TOKEN_KEY = 'auth_token';
 
-    private readonly AUTH_TOKEN_KEY = 'auth_token';
+  constructor() {}
 
-    constructor() { }
+  setToken(token: string): void {
+    localStorage.setItem(this.AUTH_TOKEN_KEY, token);
+  }
 
-    setToken(token: string): void {
+  getToken(): string | null {
-        localStorage.setItem(this.AUTH_TOKEN_KEY, token);
+    return localStorage.getItem(this.AUTH_TOKEN_KEY);
-    }
+  }
 
-    getToken(): string | null {
+  removeToken(): void {
-        return localStorage.getItem(this.AUTH_TOKEN_KEY);
+    localStorage.removeItem(this.AUTH_TOKEN_KEY);
-    }
+  }
-
+}
-    removeToken(): void {
-        localStorage.removeItem(this.AUTH_TOKEN_KEY);
-    }
-}