Menu et accueil

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

@@ -1,6 +0,0 @@
-<button mat-button [matMenuTriggerFor]="menu">Menu</button>
-<mat-menu #menu="matMenu">
-  <a mat-menu-item routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">Accueil</a>
-  <a mat-menu-item routerLink="/books" routerLinkActive="active" ariaCurrentWhenActive="page">Liste des livres</a>
-  <a mat-menu-item routerLink="/book/add" routerLinkActive="active" ariaCurrentWhenActive="page">Ajouter un livre</a>
-</mat-menu>

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

@@ -1,15 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
-
-@Component({
-  selector: 'app-book-menu',
-  standalone: true,
-  imports: [RouterModule, MatButtonModule, MatMenuModule],
-  templateUrl: './book-menu.component.html'
-})
-export class BookMenuComponent {
-
-}

src/app/components/login/login.component.html

@@ -1,18 +1,19 @@
 <section>
+
     <h2>Identifiez vous !</h2>
 
     <form [formGroup]="loginForm">
         <div>
             <mat-form-field class="full-width">
                 <mat-label>Login</mat-label>
-                <input matInput type="text" formControlName="login" (input)="onInputChange($event)"/>
+                <input matInput type="text" formControlName="login" (input)="onInputChange()"/>
             </mat-form-field>
         </div>
         
         <div>
             <mat-form-field class="full-width">
                 <mat-label>Password</mat-label>
-                <input matInput type="text" formControlName="password" (input)="onInputChange($event)"/>
+                <input matInput type="text" formControlName="password" (input)="onInputChange()"/>
             </mat-form-field>
         </div>
         

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

@@ -10,6 +10,8 @@ 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({
   selector: 'app-login',
@@ -33,6 +35,7 @@ export class LoginComponent {
   @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({
@@ -40,6 +43,11 @@ export class LoginComponent {
     password: new FormControl(this.user.password, Validators.required),
   });
 
+  public constructor(us: UserService,private router: Router) {
+    this.UserService = us
+  }
+
+
   connect() {  
     console.log(this.loginForm.value.login)
     console.log(this.loginForm.value.password)
@@ -55,14 +63,17 @@ export class LoginComponent {
     }
 
     this.user = this.loginForm.value;
+    localStorage.setItem('UserConnecte',String(this.user.id));
     
+    //this.UserService.addUserToLocal(this.user);
     this.addConnectEvent.emit(this.user);
     this.loginForm.reset();
     this.isButtonVisible = false;
+    this.router.navigate(['/accueil']);
 
   }
 
-  onInputChange(event: Event) {
+  onInputChange() {
     if(this.loginForm.value.login != "" && this.loginForm.value.password != ""){
       this.isButtonVisible = true;
     } else{

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

@@ -0,0 +1,3 @@
+<app-book-menu></app-book-menu>
+
+<p>user-accueil works!</p>

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

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { UserMenuComponent } from '../user-menu/user-menu.component';
+
+@Component({
+  selector: 'app-user-accueil',
+  standalone: true,
+  imports: [UserMenuComponent,RouterModule],
+  templateUrl: './user-accueil.component.html',
+  styleUrl: './user-accueil.component.css'
+})
+
+export class UserAccueilComponent {
+
+}

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

@@ -1,3 +1,5 @@
+<app-book-menu></app-book-menu>
+
 <h2>User list</h2>
 
 <ul>

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

@@ -4,11 +4,12 @@ import { NgFor } from '@angular/common';
 
 import { User } from '../../models/user.model';
 import { UserService } from '../../services/user-service';
+import { UserMenuComponent } from '../user-menu/user-menu.component';
 
 @Component({
   selector: 'app-user-list',
   standalone: true,
-  imports: [RouterModule,NgFor,],
+  imports: [RouterModule,NgFor,UserMenuComponent],
   templateUrl: './user-list.component.html',
   styleUrl: './user-list.component.css'
 })

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

@@ -0,0 +1,7 @@
+<button mat-button [matMenuTriggerFor]="menu">Menu</button>
+<mat-menu #menu="matMenu">
+  <a mat-menu-item routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">{{userconnecte}}</a>
+  <a mat-menu-item routerLink="/accueil" routerLinkActive="active" ariaCurrentWhenActive="page">Accueil</a>
+  <a mat-menu-item routerLink="/users" routerLinkActive="active" ariaCurrentWhenActive="page">Classement</a>
+  <a mat-menu-item routerLink="{{route}}" routerLinkActive="active" ariaCurrentWhenActive="page">Details</a>
+</mat-menu>

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

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { UserService } from '../../services/user-service';
+
+@Component({
+  selector: 'app-book-menu',
+  standalone: true,
+  imports: [RouterModule, MatButtonModule, MatMenuModule],
+  templateUrl: './user-menu.component.html'
+})
+
+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 id = localStorage.getItem('UserConnecte');
+
+    if (typeof id === "string" && id !="undefined"){
+      let user = this.Service.getUserById(+id);
+      this.route = "/users/" + user?.id;
+      this.userconnecte = user?.login;
+    } else {
+      this.userconnecte = "Pseudo";
+      this.route = "/users/0";
+    }
+  }
+
+}