🚸 Improve token expiration ux

src/app/auth.guard.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { CanActivate, Router } from '@angular/router';
 import { LocalStorageService } from './services/localstorage.service';
+import { LoginModalService } from './services/login-modal.service';
 
 @Injectable({
   providedIn: 'root',
@@ -8,7 +9,8 @@ import { LocalStorageService } from './services/localstorage.service';
 export class AuthGuard implements CanActivate {
   constructor(
     private localStorageService: LocalStorageService,
-    private router: Router
+    private router: Router,
+    private loginModalService: LoginModalService
   ) {}
 
   canActivate(): boolean {
@@ -16,7 +18,8 @@ export class AuthGuard implements CanActivate {
     if (token) {
       return true;
     } else {
-      this.router.navigate(['?sign']);
+      this.loginModalService.openModal();
+      this.router.navigate(['/']);
       return false;
     }
   }

src/app/components/home-page/home-page.component.html

@@ -46,7 +46,7 @@
           important.
         </p>
         <button
-          routerLink="/map"
+          (click)="openLogin()"
           class="inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-800"
         >
           Commencez votre aventure

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

@@ -1,11 +1,16 @@
 import { Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
+import { LoginModalService } from '../../services/login-modal.service';
 
 @Component({
   selector: 'app-home-page',
-  imports: [RouterLink],
   templateUrl: './home-page.component.html',
 })
 export class HomePageComponent {
   currentYear = new Date().getFullYear();
+
+  constructor(private loginModalService: LoginModalService) {}
+
+  openLogin() {
+    this.loginModalService.openModal();
+  }
 }

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

@@ -8,8 +8,10 @@ import {
   Validators,
 } from '@angular/forms';
 import { Router } from '@angular/router';
+import { Subscription } from 'rxjs';
 import { User } from '../../model/User';
 import { LocalStorageService } from '../../services/localstorage.service';
+import { LoginModalService } from '../../services/login-modal.service';
 import { LoginService } from '../../services/login.service';
 
 @Component({
@@ -23,11 +25,13 @@ export class LoginPageComponent {
   user: User = { login: '', password: '' };
   errorMessage: string = '';
   isLoginModalOpen: boolean = false;
+  private modalSub!: Subscription;
 
   constructor(
     private loginService: LoginService,
     private fb: FormBuilder,
     private router: Router,
+    private loginModalService: LoginModalService,
     private localStorageService: LocalStorageService
   ) {
     this.userForm = this.fb.group({
@@ -39,6 +43,16 @@ export class LoginPageComponent {
     });
   }
 
+  ngOnInit() {
+    this.modalSub = this.loginModalService.showModal$.subscribe((open) => {
+      this.isLoginModalOpen = open;
+    });
+  }
+
+  ngOnDestroy() {
+    this.modalSub.unsubscribe();
+  }
+
   public login() {
     if (this.userForm.invalid) {
       this.errorMessage =

src/app/services/login-modal.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoginModalService } from './login-modal.service';
+
+describe('LoginModalService', () => {
+  let service: LoginModalService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LoginModalService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/login-modal.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class LoginModalService {
+  private showModalSubject = new BehaviorSubject<boolean>(false);
+
+  showModal$ = this.showModalSubject.asObservable();
+
+  openModal() {
+    this.showModalSubject.next(true);
+  }
+
+  closeModal() {
+    this.showModalSubject.next(false);
+  }
+}