Merge pull request #168 from LeadOn/develop

Everything is cleaner now

Author: LeadOn

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "gameon-front",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -10,15 +10,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.0.5",
-    "@angular/cdk": "^19.0.4",
-    "@angular/common": "^19.0.5",
-    "@angular/compiler": "^19.0.5",
-    "@angular/core": "^19.0.5",
-    "@angular/forms": "^19.0.5",
-    "@angular/platform-browser": "^19.0.5",
-    "@angular/platform-browser-dynamic": "^19.0.5",
-    "@angular/router": "^19.0.5",
+    "@angular/animations": "^19.0.6",
+    "@angular/cdk": "^19.0.5",
+    "@angular/common": "^19.0.6",
+    "@angular/compiler": "^19.0.6",
+    "@angular/core": "^19.0.6",
+    "@angular/forms": "^19.0.6",
+    "@angular/platform-browser": "^19.0.6",
+    "@angular/platform-browser-dynamic": "^19.0.6",
+    "@angular/router": "^19.0.6",
     "@fortawesome/angular-fontawesome": "^1.0.0",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@ngrx/store": "^19.0.0",
@@ -32,9 +32,9 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.0.6",
-    "@angular/cli": "^19.0.6",
-    "@angular/compiler-cli": "^19.0.5",
+    "@angular-devkit/build-angular": "^19.0.7",
+    "@angular/cli": "^19.0.7",
+    "@angular/compiler-cli": "^19.0.6",
     "@types/jasmine": "~5.1.0",
     "autoprefixer": "^10.4.20",
     "jasmine-core": "~5.1.0",

package.json

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AdminHomeComponent } from './home/admin-home.component';
-import { AuthGuard } from '../shared/guards/auth.guard';
 import { AdminLayoutComponent } from './admin-layout.component';
 import { AdminPlatformsComponent } from './platforms/admin-platforms.component';
 import { AdminPlatformEditComponent } from './platforms/edit/admin-platform-edit.component';
@@ -14,13 +13,14 @@ import { AdminSeasonsComponent } from './seasons/admin-seasons.component';
 import { AdminEditTournamentComponent } from './tournaments/edit/admin-edit-tournament.component';
 import { AdminCreateTournamentComponent } from './tournaments/create/admin-create-tournament.component';
 import { AdminTournamentsComponent } from './tournaments/admin-tournaments.component';
+import { canActivateAuthRole } from '../shared/guards/auth.guard';
 
 const routes: Routes = [
   {
     path: '',
     component: AdminLayoutComponent,
-    canActivate: [AuthGuard],
-    data: { roles: ['gameon_admin'] },
+    canActivate: [canActivateAuthRole],
+    data: { role: 'gameon_admin' },
     children: [
       {
         path: '',

src/app/admin/admin-routing.module.ts

@@ -4,7 +4,7 @@ import { CommonLayoutComponent } from './shared/layouts/common-layout.component'
 import { NotFoundComponent } from './shared/components/not-found/not-found.component';
 import { HomeComponent } from './home/home.component';
 import { ProfilePageComponent } from './players/me/profile.component';
-import { AuthGuard } from './shared/guards/auth.guard';
+import { canActivateAuthRole } from './shared/guards/auth.guard';
 import { PlayerDetailsComponent } from './players/details/player-details.component';
 import { ChangelogComponent } from './changelog/changelog.component';
 import { DonateComponent } from './donate/donate.component';
@@ -15,7 +15,7 @@ import { LolHomeComponent } from './lol/lol-home.component';
 import { LolPlayerDetailsComponent } from './lol/player/lol-player-details.component';
 import { LolGameDetailsComponent } from './lol/games/details/lol-game-details.component';
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     path: '',
     component: CommonLayoutComponent,
@@ -51,7 +51,8 @@ const routes: Routes = [
       {
         path: 'player/me',
         component: ProfilePageComponent,
-        canActivate: [AuthGuard],
+        canActivate: [canActivateAuthRole],
+        data: { role: 'default-roles-gameon' },
       },
       {
         path: 'player/:id',

src/app/app-routing.module.ts

@@ -1,10 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { initFlowbite } from 'flowbite';
-import { KeycloakService } from 'keycloak-angular';
 import { Store } from '@ngrx/store';
 import { setPlayer, setPlayerStats } from './store/actions/player.actions';
 import { Player } from './shared/classes/common/Player';
 import { GameOnPlayerService } from './shared/services/common/gameon-player.service';
+import Keycloak from 'keycloak-js';
 
 @Component({
   selector: 'app-root',
@@ -13,16 +13,24 @@ import { GameOnPlayerService } from './shared/services/common/gameon-player.serv
   standalone: false,
 })
 export class AppComponent implements OnInit {
+  private readonly keycloak = inject(Keycloak);
+
+  isLoggedIn = false;
+
   constructor(
-    private keycloak: KeycloakService,
     private playerService: GameOnPlayerService,
     private store: Store<{ player: Player }>
   ) {}
 
   ngOnInit(): void {
     initFlowbite();
 
-    if (this.keycloak.isLoggedIn()) {
+    this.isLoggedIn =
+      this.keycloak.authenticated != null && this.keycloak.authenticated
+        ? true
+        : false;
+
+    if (this.isLoggedIn) {
       // Getting its account, and setting it into store
       this.playerService.getCurrent().subscribe(
         (data) => {

src/app/app.component.ts

@@ -1,12 +1,18 @@
-import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
+import {
+  createInterceptorCondition,
+  INCLUDE_BEARER_TOKEN_INTERCEPTOR_CONFIG,
+  IncludeBearerTokenCondition,
+  includeBearerTokenInterceptor,
+  provideKeycloak,
+} from 'keycloak-angular';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { environment } from '../environments/environment';
 import { SharedModule } from './shared/modules/shared.module';
 import { CommonLayoutComponent } from './shared/layouts/common-layout.component';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import { HomeComponent } from './home/home.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -34,21 +40,15 @@ import { HomeChangelogComponent } from './home/components/changelog/home-changel
 import { HomeFifaComponent } from './home/components/fifa/home-fifa.component';
 import { HomeLolComponent } from './home/components/lol/home-lol.component';
 
-function initializeKeycloak(keycloak: KeycloakService) {
-  return () =>
-    keycloak.init({
-      config: {
-        url: environment.keycloak.url,
-        realm: environment.keycloak.realm,
-        clientId: environment.keycloak.clientId,
-      },
-      initOptions: {
-        onLoad: 'check-sso',
-        silentCheckSsoRedirectUri:
-          window.location.origin + '/assets/silent-check-sso.html',
-      },
-    });
-}
+const devCondition = createInterceptorCondition<IncludeBearerTokenCondition>({
+  urlPattern: /^(http:\/\/localhost:5184)(\/.*)?$/i,
+  bearerPrefix: 'Bearer',
+});
+
+const prodCondition = createInterceptorCondition<IncludeBearerTokenCondition>({
+  urlPattern: /^(https:\/\/gameon-api.valentinvirot.fr)(\/.*)?$/i,
+  bearerPrefix: 'Bearer',
+});
 
 @NgModule({
   declarations: [
@@ -75,25 +75,33 @@ function initializeKeycloak(keycloak: KeycloakService) {
   imports: [
     BrowserModule,
     AppRoutingModule,
-    KeycloakAngularModule,
     SharedModule,
     FontAwesomeModule,
     BrowserAnimationsModule,
     StoreModule.forRoot({
       player: playerReducer,
       globalStats: playerStatsReducer,
     }),
-    HttpClientModule,
     ClipboardModule,
     AdminModule,
   ],
   providers: [
+    provideKeycloak({
+      config: {
+        url: environment.keycloak.url,
+        realm: environment.keycloak.realm,
+        clientId: environment.keycloak.clientId,
+      },
+      initOptions: {
+        onLoad: 'check-sso',
+        silentCheckSsoRedirectUri: `${window.location.origin}/assets/silent-check-sso.html`,
+      },
+    }),
     {
-      provide: APP_INITIALIZER,
-      useFactory: initializeKeycloak,
-      multi: true,
-      deps: [KeycloakService],
+      provide: INCLUDE_BEARER_TOKEN_INTERCEPTOR_CONFIG,
+      useValue: [devCondition, prodCondition],
     },
+    provideHttpClient(withInterceptors([includeBearerTokenInterceptor])),
   ],
   bootstrap: [AppComponent],
 })

src/app/app.module.ts

@@ -1,5 +1,5 @@
 <section id="top-card" class="px-4 pt-4">
-  <div [@inOutAnimation]>
+  <div>
     <app-common-page-header
       [icon]="btcIcon"
       [title]="'Me soutenir'"

src/app/donate/donate.component.html

@@ -1,12 +1,12 @@
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import {
   faEdit,
   faExternalLinkAlt,
   faTrash,
 } from '@fortawesome/free-solid-svg-icons';
-import { KeycloakService } from 'keycloak-angular';
 import { GameOnAdminService } from '../../../admin/shared/services/gameon-admin.service';
 import { FifaGamePlayed } from '../../../shared/classes/fifa/FifaGamePlayed';
+import Keycloak from 'keycloak-js';
 
 @Component({
   selector: 'app-fifa-game-history-card',
@@ -15,6 +15,8 @@ import { FifaGamePlayed } from '../../../shared/classes/fifa/FifaGamePlayed';
   standalone: false,
 })
 export class FifaGameHistoryCardComponent {
+  private readonly keycloak = inject(Keycloak);
+
   @Input()
   game: FifaGamePlayed = new FifaGamePlayed();
 
@@ -27,18 +29,15 @@ export class FifaGameHistoryCardComponent {
 
   isAdmin = false;
 
-  constructor(
-    private adminService: GameOnAdminService,
-    private keycloakService: KeycloakService
-  ) {
-    if (keycloakService.isUserInRole('gameon_admin')) {
+  constructor(private adminService: GameOnAdminService) {
+    if (this.keycloak.hasRealmRole('gameon_admin')) {
       this.isAdmin = true;
     }
   }
 
   deleteGame(game: FifaGamePlayed) {
     if (
-      this.keycloakService.isUserInRole('gameon_admin') &&
+      this.isAdmin &&
       confirm(
         'Voulez-vous vraiment supprimer le match ' +
           game.id +

src/app/fifa/components/fifa-game-history-card/fifa-game-history-card.component.ts

@@ -1,24 +1,20 @@
-<section id="fifa-header" class="px-4 pt-4" [@inOutAnimation]>
+<section id="fifa-header" class="px-4 pt-4">
   <app-common-page-header
     [icon]="footballIcon"
     [title]="'Création match'"
   ></app-common-page-header>
 </section>
 
 <section id="top-card" class="px-4 mt-4">
-  <app-loading-spinner
-    *ngIf="isLoading == true"
-    [@inOutAnimation]
-  ></app-loading-spinner>
+  <app-loading-spinner *ngIf="isLoading == true"></app-loading-spinner>
 </section>
 
 <form
   [formGroup]="createGameForm"
   class="flex flex-col"
-  [@inOutAnimation]
   *ngIf="isLoading == false"
 >
-  <div class="px-4 mt-4 flex" [@inOutAnimation]>
+  <div class="px-4 mt-4 flex">
     <span class="text-lg font-semibold text-primary dark:text-primaryDark"
       >Équipe #1</span
     >
@@ -94,7 +90,7 @@
     </div>
   </div>
 
-  <div class="px-4 mt-4 flex" [@inOutAnimation]>
+  <div class="px-4 mt-4 flex">
     <span class="text-lg font-semibold text-primary dark:text-primaryDark"
       >Équipe #2</span
     >
@@ -170,7 +166,7 @@
     </div>
   </div>
 
-  <div class="px-4 mt-4 flex" [@inOutAnimation]>
+  <div class="px-4 mt-4 flex">
     <span class="text-lg font-semibold text-primary dark:text-primaryDark"
       >Plateforme</span
     >
@@ -191,7 +187,7 @@
   </div>
 </form>
 
-<div class="px-4 mt-4 flex" [@inOutAnimation] *ngIf="isLoading == false">
+<div class="px-4 mt-4 flex" *ngIf="isLoading == false">
   <button
     (click)="createGame()"
     class="drop-shadow-lg text-white bg-customGreen hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-customGreen font-medium rounded-lg text-sm w-full px-5 py-2.5 text-center"

src/app/fifa/create/fifa-create-game.component.html

@@ -2,7 +2,6 @@ import { formatDate } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
-import { trigger, style, animate, transition } from '@angular/animations';
 import { faSoccerBall } from '@fortawesome/free-solid-svg-icons';
 import { GameOnPlayerService } from '../../shared/services/common/gameon-player.service';
 import { Player } from '../../shared/classes/common/Player';
@@ -16,18 +15,6 @@ import { GameOnFifaTeamService } from '../../shared/services/fifa/gameon-fifatea
   selector: 'app-fifa-create-game',
   templateUrl: './fifa-create-game.component.html',
   styleUrls: ['./fifa-create-game.component.scss'],
-  animations: [
-    trigger('inOutAnimation', [
-      transition(':enter', [
-        style({ opacity: 0 }),
-        animate(200, style({ opacity: 1 })),
-      ]),
-      transition(':leave', [
-        style({ opacity: 1 }),
-        animate(200, style({ opacity: 0 })),
-      ]),
-    ]),
-  ],
   standalone: false,
 })
 export class FifaCreateGameComponent implements OnInit {