Mise en place du localStorage dans User Service

src/app/app.component.ts

@@ -2,12 +2,15 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { HttpClientModule } from '@angular/common/http';
 
+import { LoginComponent } from './components/login/login.component';
+
 
 import { UserService } from './services/user-service';
 import { User } from './models/user.model';
 
 import { UserMenuComponent } from './components/user-menu/user-menu.component';
 import { SudokuService } from "./services/sudoku-service"
+import { UserAccueilComponent } from './components/user-accueil/user-accueil.component';
 
 @Component({
   selector: 'app-root',
@@ -22,9 +25,18 @@ import { SudokuService } from "./services/sudoku-service"
 export class AppComponent {
   title = 'angular-tp2-correct';
 
-  constructor( protected userService: UserService, protected sudokuService: SudokuService){ }
+  constructor(protected userService: UserService, protected sudokuService: SudokuService){ }
+
+  changeUserName($event: User): void {
+    this.userService.addToLocalStorage($event);
+  }
   
   onActivate(componentRef: Event): void {
-    console.log('onActivate', componentRef);
+    if(componentRef instanceof LoginComponent) {
+      componentRef.addConnectEvent.subscribe((connectedUser: User) => {
+        this.changeUserName(connectedUser);
+      });
+    }
+
   }
 }

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

@@ -10,7 +10,6 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { User } from '../../models/user.model';
 import { NgIf } from '@angular/common';
-import { UserService } from '../../services/user-service';
 import { Router } from '@angular/router';
 
 @Component({
@@ -35,7 +34,6 @@ export class LoginComponent implements OnInit {
   @Output() addConnectEvent = new EventEmitter<User>();
   
   public isButtonVisible = false;
-  private UserService : UserService; 
 
   user: User = {id:1, login: '', password: '', streak: null, streaks: [], points: null}
   loginForm: FormGroup = new FormGroup({
@@ -43,8 +41,7 @@ export class LoginComponent implements OnInit {
     password: new FormControl(this.user.password, Validators.required),
   });
 
-  public constructor(us: UserService,private router: Router) {
-    this.UserService = us
+  public constructor(private router: Router) {
   }
 
   ngOnInit() {
@@ -61,13 +58,10 @@ export class LoginComponent implements OnInit {
       console.log("ERREUR DIFFERENT");
       return;
     }
-    console.log(this.loginForm.value.login)
 
     this.user = this.loginForm.value;
-    localStorage.setItem('UserConnecte',String(this.user.login));
-    
-    //this.UserService.addUserToLocal(this.user);
-    this.addConnectEvent.emit(this.user)
+
+    this.addConnectEvent.emit(this.loginForm.value)
     this.loginForm.reset();
     this.isButtonVisible = false;
     this.router.navigate(['/accueil']);

src/app/components/user-accueil/user-accueil.component.ts

@@ -29,7 +29,7 @@ export class UserAccueilComponent {
     this.streaks = ["❌","❌","❌","❌","❌","❌","❌"]
     this.day = ["L","M","M","J","V","S","D"]
 
-    let userConnecte = localStorage.getItem('UserConnecte')
+    let userConnecte = us.getItemUserConnecte()
     if(userConnecte == undefined) {return}
 
     let id = us.getIdByUser(userConnecte)
@@ -60,7 +60,6 @@ export class UserAccueilComponent {
       day: 'numeric'
     }
     return currentDate.toLocaleDateString(undefined, options)
-
   }
 
 }

src/app/components/user-list/user-list.component.ts

@@ -27,7 +27,6 @@ export class UserListComponent {
     this.nbPage = 1;
     this.users = this.userService.getAll();
     this.loadPage(0);
-    console.log(this.users);
   }
 
   public changeWatchedvar(newVar:string) {

src/app/components/user-menu/user-menu.component.css

@@ -21,13 +21,13 @@ nav[mat-tab-nav-bar] {
   }
   
   a[mat-menu-item] {
-    text-align: center; /* Centrer le texte des éléments de menu */
-    padding: 10px; /* Espacement interne pour le menu */
-    display: block; /* Faire en sorte que le lien prenne toute la largeur */
-    color: #111; /* Couleur du texte du menu */
+    text-align: center;
+    padding: 10px; 
+    display: block;
+    color: #111;
   }
   
   a[mat-menu-item]:hover {
-    background-color: #555; /* Couleur au survol pour le menu */
+    background-color: #555;
   }
 

src/app/components/user-menu/user-menu.component.html

@@ -6,8 +6,8 @@
 </mat-menu>
 
 <nav mat-tab-nav-bar>
-  <mat-tab-link label="userconnecte" routerLink="/" mat-flat-button color="primary">{{userconnecte}}</mat-tab-link> 
-  <mat-tab-link label="Accueil" routerLink="/accueil" >Accueil</mat-tab-link>
-  <mat-tab-link label="Classement" routerLink="/users">Classement</mat-tab-link>
+  <mat-tab-link (click)="removePseudo()" label="userconnecte" [routerLink]="['/']" routerLinkActive="active" ariaCurrentWhenActive="page">{{userconnecte}}</mat-tab-link> 
+  <mat-tab-link (click)="reloadPseudo()" label="Accueil" [routerLink]="['/accueil']" >Accueil</mat-tab-link>
+  <mat-tab-link (click)="reloadPseudo()" label="Classement" [routerLink]="['/users']" >Classement</mat-tab-link>
   <button mat-button [matMenuTriggerFor]="menu">Menu</button>
 </nav>

src/app/components/user-menu/user-menu.component.ts

@@ -6,7 +6,6 @@ import { UserService } from '../../services/user-service';
 import { MatTabsModule } from '@angular/material/tabs'; 
 import { RouterLink } from '@angular/router';
 import { MatTabNav } from '@angular/material/tabs';
-import { SimpleChanges } from '@angular/core';
 
 @Component({
   selector: 'app-book-menu',
@@ -17,17 +16,19 @@ import { SimpleChanges } from '@angular/core';
 })
 
 export class UserMenuComponent {
+
   private service : UserService;
   public userconnecte : String | undefined;
   public route : String | undefined;
 
+
   public constructor(us: UserService) {
     this.service = us
     this.reloadPseudo()
   }
 
   public reloadPseudo(){
-    let name = localStorage.getItem('UserConnecte');
+    let name = this.service.getItemUserConnecte();
 
     if (typeof name === "string" && name !="undefined"){
       this.userconnecte = name
@@ -35,11 +36,16 @@ export class UserMenuComponent {
       // let id : number | undefined = this.service.getIdByUser(name)
       // if(id == undefined) return
       // this.route = "/user/" + id
-      // console.log(this.route)
 
     } else {
-      this.userconnecte = "Pseudo";
+      this.userconnecte = "Connexion";
       this.route = "/user/0";
     }
   }
+
+  public removePseudo(){
+    localStorage.clear();
+    this.userconnecte = "Connexion";      
+  }
+
 }

src/app/services/user-service.ts

@@ -89,4 +89,13 @@ export class UserService {
         }
         return a;
     }
+
+    public addToLocalStorage(user : User){
+        localStorage.setItem('UserConnecte',String(user.login))
+    }
+
+    public getItemUserConnecte() : String | null{
+        return localStorage.getItem('UserConnecte')
+    }
+
 }