add token send and verify

Frontend/quizz-game/src/app/app-routing.module.ts

@@ -9,6 +9,9 @@ import {ListQuestionsComponent} from "./manage/questions/list-questions/list-que
 import {CreateUserComponent} from "./manage/users/create-user/create-user.component";
 import {CreateQuestionComponent} from "./manage/questions/create-question/create-question.component";
 import {AccountDetailsComponent} from "./manage/account-details/account-details.component";
+import {HomepageComponent} from "./homepage/homepage.component";
+import {WaitingPlayersComponent} from "./homepage/waiting-players/waiting-players.component";
+import {QuizzPlayComponent} from "./homepage/quizz-play/quizz-play.component";
 
 const routes: Routes = [
   { path: '', redirectTo: 'login', pathMatch: 'full' },
@@ -52,7 +55,26 @@ const routes: Routes = [
         component: AccountDetailsComponent
       }
     ]
+  },
+  { path: ':username/play',
+    component: HomepageComponent,
+    children: [
+      {
+        path: '',
+        redirectTo: 'waiting-players',
+        pathMatch: 'full'
+      },
+      {
+        path: 'waiting-players',
+        component: WaitingPlayersComponent
+      },
+      {
+        path: 'quizz-play',
+        component: QuizzPlayComponent
       }
+    ]
+  }
+
 
 ];
 

Frontend/quizz-game/src/app/app.module.ts

@@ -9,7 +9,7 @@ import { LoginComponent } from './login/login.component';
 import {CommonModule, NgOptimizedImage} from "@angular/common";
 import { FormsModule } from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
+import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
 import { ErrorloginComponent } from './login/errorlogin/errorlogin.component';
 import { ManageComponent } from './manage/manage.component';
 import { ListUsersComponent } from './manage/users/list-users/list-users.component';
@@ -22,6 +22,10 @@ import { LoadingComponent } from './manage/component/loading/loading.component';
 import { EditUserComponent } from './manage/users/edit-user/edit-user.component';
 import { EditQuestionComponent } from './manage/questions/edit-question/edit-question.component';
 import { DeleteItemComponent } from './manage/component/delete-item/delete-item.component';
+import { HomepageComponent } from './homepage/homepage.component';
+import { WaitingPlayersComponent } from './homepage/waiting-players/waiting-players.component';
+import { QuizzPlayComponent } from './homepage/quizz-play/quizz-play.component';
+import {TokenInterceptorService} from "./login/token-interceptor.service";
 
 
 
@@ -42,7 +46,10 @@ import { DeleteItemComponent } from './manage/component/delete-item/delete-item.
     LoadingComponent,
     EditUserComponent,
     EditQuestionComponent,
-    DeleteItemComponent
+    DeleteItemComponent,
+    HomepageComponent,
+    WaitingPlayersComponent,
+    QuizzPlayComponent
   ],
   imports: [
     BrowserModule,
@@ -53,7 +60,12 @@ import { DeleteItemComponent } from './manage/component/delete-item/delete-item.
     HttpClientModule,
     NgOptimizedImage
   ],
-  providers: [],
+  providers: [{
+    provide: HTTP_INTERCEPTORS,
+    useClass: TokenInterceptorService,
+    multi: true
+  }],
+
   bootstrap: [AppComponent]
 })
 export class AppModule { }

Frontend/quizz-game/src/app/homepage/homepage.component.html

+<div class="flex h-screen">
+  <div class="w-1/4 flex h-screen flex-col justify-between border-e bg-white">
+
+    <div class="bg-white p-8">
+      <h1 class="text-2xl font-bold mb-4">Joueurs Connectés</h1>
+      <ul class="text-gray-600">
+        <li *ngFor="let player of players" class="mb-2">{{ player.firstname }} {{ player.lastname }}</li>
+      </ul>
+      <ng-container *ngIf="players.length === 3">
+        <p class="text-green-500 mt-4">Tous les joueurs sont connectés ! La partie peut commencer.</p>
+      </ng-container>
+    </div>
+
+
+  </div>
+  <div class="w-3/4 h-screen">
+    <router-outlet></router-outlet>
+  </div>
+</div>
+

Frontend/quizz-game/src/app/homepage/homepage.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomepageComponent } from './homepage.component';
+
+describe('HomepageComponent', () => {
+  let component: HomepageComponent;
+  let fixture: ComponentFixture<HomepageComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [HomepageComponent]
+    });
+    fixture = TestBed.createComponent(HomepageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/quizz-game/src/app/homepage/homepage.component.ts

+import {Component, OnInit} from '@angular/core';
+import {User} from "../manage/users/user-model";
+
+@Component({
+  selector: 'app-homepage',
+  templateUrl: './homepage.component.html',
+  styleUrls: ['./homepage.component.css']
+})
+export class HomepageComponent implements OnInit {
+  players: User[]= [];
+
+  ngOnInit() {
+    this.players.push(new User("test", "voila", "moi", "sdfg@sdf.th", "user", "fsfdss"));
+  }
+
+  onUserConnect(user:User){
+    this.players.push(user);
+  }
+}

Frontend/quizz-game/src/app/homepage/quizz-play/quizz-play.component.html

+<p>quizz-play works!</p>

Frontend/quizz-game/src/app/homepage/quizz-play/quizz-play.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuizzPlayComponent } from './quizz-play.component';
+
+describe('QuizzPlayComponent', () => {
+  let component: QuizzPlayComponent;
+  let fixture: ComponentFixture<QuizzPlayComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuizzPlayComponent]
+    });
+    fixture = TestBed.createComponent(QuizzPlayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/quizz-game/src/app/homepage/quizz-play/quizz-play.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-quizz-play',
+  templateUrl: './quizz-play.component.html',
+  styleUrls: ['./quizz-play.component.css']
+})
+export class QuizzPlayComponent {
+
+}

Frontend/quizz-game/src/app/homepage/quizz.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { QuizzService } from './quizz.service';
+
+describe('QuizzService', () => {
+  let service: QuizzService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(QuizzService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

Frontend/quizz-game/src/app/homepage/quizz.service.ts

+import { Injectable } from '@angular/core';
+import {User} from "../manage/users/user-model";
+import {BehaviorSubject} from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class QuizzService {
+  private _players= new BehaviorSubject<User[]>([]);
+
+  get players(){
+    return this._players.asObservable();
+  }
+  constructor() { }
+}

Frontend/quizz-game/src/app/homepage/waiting-players/waiting-players.component.html

+<script src="waiting-players.component.ts"></script>
+<div class="flex items-center justify-center h-screen bg-primary">
+  <div class="bg-white rounded-lg shadow p-8">
+    <h1 class="text-2xl font-bold mb-4">Bienvenue></h1>
+    <h2 class="text-2xl font-bold mb-4">En attente de 3 joueurs...</h2>
+    <p class="text-gray-600">Veuillez patienter pendant que d'autres joueurs se connectent.</p>
+    <div class="flex justify-center mt-6">
+      <div class="w-8 h-8 bg-sky-500 rounded-full animate-bounce"></div>
+      <div class="w-8 h-8 bg-sky-500 rounded-full mx-1 "></div>
+      <div class="w-8 h-8 bg-sky-500 rounded-full"></div>
+    </div>
+  </div>
+</div>
+

Frontend/quizz-game/src/app/homepage/waiting-players/waiting-players.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WaitingPlayersComponent } from './waiting-players.component';
+
+describe('WaitingPlayersComponent', () => {
+  let component: WaitingPlayersComponent;
+  let fixture: ComponentFixture<WaitingPlayersComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [WaitingPlayersComponent]
+    });
+    fixture = TestBed.createComponent(WaitingPlayersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/quizz-game/src/app/homepage/waiting-players/waiting-players.component.ts

+import {Component, OnInit} from '@angular/core';
+import {Session} from "../../login/session-model";
+import {SessionService} from "../../login/session.service";
+import {Subscription} from "rxjs";
+
+@Component({
+  selector: 'app-waiting-players',
+  templateUrl: './waiting-players.component.html',
+  styleUrls: ['./waiting-players.component.css']
+})
+export class WaitingPlayersComponent implements OnInit{
+  userInfo!: Session;
+  userSub!: Subscription;
+  constructor(private sessionService: SessionService) {
+  }
+
+  ngOnInit() {
+    this.userSub=this.sessionService.sessionSubject.subscribe((session)=>{
+      this.userInfo=session;
+    })
+    console.log(this.userInfo);
+  }
+
+}

Frontend/quizz-game/src/app/login/session-model.ts

+export class Session {
+  constructor(
+    public firstname: string,
+    public lastname: string
+  ) {}
+}

Frontend/quizz-game/src/app/login/session.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { SessionService } from './session.service';
+
+describe('SessionService', () => {
+  let service: SessionService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SessionService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

Frontend/quizz-game/src/app/login/session.service.ts

+import { Injectable } from '@angular/core';
+import {Subject} from "rxjs";
+import {Session} from "./session-model";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SessionService {
+  private static LS_SESSION_TOKEN: string = "sessionToken"
+
+  private _session!: Session;
+
+  public sessionSubject: Subject<Session> = new Subject<Session>()
+
+  get session(): Session {
+    return this._session
+  }
+
+  set session(session: Session) {
+    this._session = session
+    this.sessionSubject.next(this._session)
+  }
+
+  get token(): string {
+    return localStorage.getItem(SessionService.LS_SESSION_TOKEN) ?? ""
+  }
+
+  set token(token: string) {
+    localStorage.setItem(SessionService.LS_SESSION_TOKEN, token)
+  }
+
+  constructor() { }
+
+}

Frontend/quizz-game/src/app/login/sign-in/sign-in.component.ts

@@ -3,6 +3,8 @@ import {Router} from "@angular/router";
 import {FormControl, FormGroup, Validators} from "@angular/forms";
 import {HttpClient} from "@angular/common/http";
 import {ErrorLogin, LoginService} from "../login.service";
+import {SessionService} from "../session.service";
+import {Session} from "../session-model";
 
 @Component({
   selector: 'app-sign-in',
@@ -13,7 +15,7 @@ export class SignInComponent implements OnInit{
   formData!: FormGroup;
   errorOccured!: boolean;
 
-  constructor(private httpClient: HttpClient, private loginService: LoginService, private router: Router) {
+  constructor(private sessionService: SessionService, private httpClient: HttpClient, private loginService: LoginService, private router: Router) {
 
   }
 
@@ -40,13 +42,15 @@ export class SignInComponent implements OnInit{
     let username:string=this.formData.value.username;
     this.httpClient.post<any>('http://localhost:30992/api/v1/guest/'+username, passwordPost).subscribe(
       response => {
+        console.log("reponse sign in:", response);
+        this.sessionService.token=response.token;
+        this.sessionService.session=new Session(response.firstname, response.lastname);
         if(response.message === "USER_ALLOWED"){
-          this.router.navigate(['/'+username+'/manage']);
+          this.router.navigate(['/'+username+'/play']);
         }
         if(response.message === "ADMIN_ALLOWED"){
           this.router.navigate(['/' + username + '/manage'])
         }
-        console.log(response.message);
 
       },
       error => {