Fix dev to feature

angular-client/angular.json

@@ -32,6 +32,7 @@
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+               "./node_modules/leaflet/dist/leaflet.css", 
               "src/styles.scss"
             ],
             "scripts": []
@@ -122,4 +123,4 @@
     "analytics": false,
     "packageManager": "npm"
   }
-}
+}

angular-client/src/app/components/shared/contact/map/map.component.scss

@@ -1,5 +1,18 @@
 #frugalmap {
-    height: 300px;
+  width: 100%;
+  height: 400px;
+  z-index: 1;
+
+  .leaflet-container {
     width: 100%;
-    border-radius: 1em;
-}
+    height: 100%;
+  }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  #frugalmap {
+    height: 300px;
+  }
+}
+ 

angular-client/src/app/components/shared/contact/map/map.component.ts

@@ -1,15 +1,15 @@
-import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
+import { Component, OnInit, Inject, PLATFORM_ID, AfterViewInit } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { Restaurant } from './../../../../models/restaurant';
 import { RestaurantsService } from 'src/app/services/restaurants.service';
-import { LeafletService } from 'src/app/services/leaflet.service'; // Assurez-vous de créer ce service
+import { LeafletService } from 'src/app/services/leaflet.service';
 
 @Component({
   selector: 'app-map',
   templateUrl: './map.component.html',
   styleUrls: ['./map.component.scss']
 })
-export class MapComponent implements OnInit {
+export class MapComponent implements OnInit, AfterViewInit {
   private L: any;
   private macarte: any;
 
@@ -22,81 +22,45 @@ export class MapComponent implements OnInit {
   ngOnInit() {
     if (isPlatformBrowser(this.platformId)) {
       this.L = this.leafletService.getLeaflet();
+    }
+  }
+
+  ngAfterViewInit() {
+    if (isPlatformBrowser(this.platformId)) {
       this.initMap();
+
+      // Corriger le découpage de la carte après affichage
+      setTimeout(() => {
+        this.macarte.invalidateSize();
+      }, 500);
     }
   }
 
   private initMap(): void {
     if (!this.L) return;
 
-    // Déclaration de la carte avec les coordonnées du centre et le niveau de zoom.
     this.macarte = this.L.map('frugalmap').setView([48.85513, 2.353429], 9);
 
-    this.L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+    // Utiliser HTTPS pour éviter les erreurs Mixed Content
+    this.L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
       attribution: 'FatBoar',
     }).addTo(this.macarte);
 
     const myIcon = this.L.icon({
-      iconUrl: "../assets/img/marker/markericon.png"
+      iconUrl: 'assets/img/marker/markericon.png',
+      iconSize: [38, 38],
+      iconAnchor: [19, 38],
     });
 
     this.restaurantsService.getRestaurants().subscribe((data: any) => {
-      console.log('test resto', data);
       data.forEach((res: Restaurant) => {
         const marker = this.L.marker([res.latitude, res.longitude], { icon: myIcon }).addTo(this.macarte);
 
-        marker.bindPopup(`<h5 style="text-align: center"><b>${res.name}</b></h5>  <b> adresse : </b>${res.adress}`,
+        marker.bindPopup(
+          `<h5 style="text-align: center"><b>${res.name}</b></h5><b>Adresse :</b> ${res.adress}`,
           { maxWidth: 130, minWidth: 120 }
         );
       });
     });
   }
-}
-
-
-
-// import { Restaurant } from './../../../../models/restaurant';
-// import { Component, OnInit } from '@angular/core';
-// import { HttpClient } from '@angular/common/http';
-// import * as L from 'leaflet';
-// import { RestaurantsService } from 'src/app/services/restaurants.service';
-
-
-// @Component({
-//   selector: 'app-map',
-//   templateUrl: './map.component.html',
-//   styleUrls: ['./map.component.scss']
-// })
-// export class MapComponent implements OnInit {
-//   constructor(private restaurantsService: RestaurantsService) {}
- 
-//   // Fonction d'initialisation du composant.
-//   ngOnInit() {
-//     // Déclaration de la carte avec les coordonnées du centre et le niveau de zoom.
-//     const macarte = L.map('frugalmap').setView([48.85513, 2.353429], 9);
-   
-//     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
-//       attribution: 'FatBoar',
-//     }).addTo(macarte);
-   
-//     const myIcon = L.icon({
-//       // iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/images/marker-icon.png'
-//       iconUrl: "../assets/img/marker/markericon.png"
-      
-//     });
-   
-   
-//     this.restaurantsService.getRestaurants().subscribe((data: any) => {
-//       console.log('test resto', data)
-//       data.forEach( (res : Restaurant ) => {
-//         var marker = L.marker([res.latitude, res.longitude], {icon: myIcon}).addTo(macarte);
-  
-
-//         marker.bindPopup(`<h5 style="text-align: center"><b>${res.name}</b></h5>  <b> adresse : </b>${res.adress}`,
-//         { maxWidth: 130 , minWidth:120}
-//         );
-//       });
-//     });
-   
-//   }
-//   }
+}

angular-client/src/app/components/shared/navbar/navbar.component.html

@@ -1,4 +1,4 @@
-<div>
+<div *ngIf="isBrowser">
 
   <mat-toolbar color="primary" class="fatboar-navbar">
     <div fxShow="true" fxHide.gt-sm="true">
@@ -6,94 +6,76 @@
         <mat-icon>menu</mat-icon>
       </button>
     </div>
-    
-    <a  routerLink="/" class="">
-    <span><img  src="assets/img/logo-fatboar.png"  width="50" height="50" class="logo-fatboar"  alt="fatboar"></span>  
-      
-    </a> 
+
+    <a routerLink="/">
+      <span>
+        <img src="assets/img/logo-fatboar.png" width="50" height="50" class="logo-fatboar" alt="fatboar">
+      </span>
+    </a>
+
     <span class="example-spacer"></span>
+
     <div fxShow="true" fxHide.lt-md="true">
-      <a class="navbtn" mat-button routerLink="/login" *ngIf="!isLogged"> Connexion</a>
+      <a class="navbtn" mat-button routerLink="/login" *ngIf="!isLogged">Connexion</a>
       <a class="navbtn" mat-button routerLink="/register" *ngIf="!isLogged">Inscription</a>
       <a class="navbtn" mat-button routerLink="/auth" *ngIf="isLogged && !isAdmin">Gain</a>
-      <a class="navbtn" mat-button routerLink="/tirage" [hidden]="!isAdmin">Tirage</a>
-      <a class="navbtn" mat-button routerLink="/profil" *ngIf="isLogged"><mat-icon>person</mat-icon>Mon profil</a>
-      <a class="navbtn" mat-button routerLink="/users" [hidden]="!isAdmin">Clients</a>
-      <a class="navbtn" mat-button routerLink="/statistique" [hidden]="!isAdmin">Statistique</a>
-      <a class="navbtn" mat-button routerLink="/emailing" [hidden]="!isAdmin">Emailing</a>
-      <a class="navbtn" mat-button routerLink="/assistance" [hidden]="!isAdmin">Assistance</a>
-      <!-- <a class="navbtn" mat-button routerLink="/users" [hidden]="!isAdmin">Employés</a> -->
-      <a class="navbtn" mat-button routerLink="/contact" *ngIf="!isLogged && !isAdmin" >Contact</a>
+      <a class="navbtn" mat-button routerLink="/tirage" *ngIf="isAdmin">Tirage</a>
+      <a class="navbtn" mat-button routerLink="/profil" *ngIf="isLogged">
+        <mat-icon>person</mat-icon>Mon profil
+      </a>
+      <a class="navbtn" mat-button routerLink="/users" *ngIf="isAdmin">Clients</a>
+      <a class="navbtn" mat-button routerLink="/statistique" *ngIf="isAdmin">Statistique</a>
+      <a class="navbtn" mat-button routerLink="/emailing" *ngIf="isAdmin">Emailing</a>
+      <a class="navbtn" mat-button routerLink="/assistance" *ngIf="isAdmin">Assistance</a>
+      <a class="navbtn" mat-button routerLink="/contact" *ngIf="!isLogged && !isAdmin">Contact</a>
       <a class="navbtn" mat-icon-button color="basic" aria-label="" (click)="logOut()" *ngIf="isLogged">
         <mat-icon>power_settings_new</mat-icon>
       </a>
     </div>
   </mat-toolbar>
 
-
-
-
-
-
-
   <mat-sidenav-container fxFlexFill class="fatboar-sidenav-containe">
-
-     <!-- le menu -->
-    <mat-sidenav color="primary" #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true">
+    <mat-sidenav #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true">
       <div fxLayout="column" class="msidenav">
-        <!-- <a mat-button routerLink="/about-us">About us</a>
-        <a mat-button routerLink="/prices">Prices</a>
-        <a mat-button routerLink="/start-page">Start page</a>
-        <a mat-button routerLink="/offer">  <mat-icon>home</mat-icon>Offer</a>
-        <a mat-button routerLink="/contact">Contact</a> -->
         <mat-nav-list>
-        <a mat-list-item routerLink="/" *ngIf="!isLogged">
-          <mat-icon mat-list-icon>home</mat-icon>
-          <span mat-line>Menu</span>
-        </a>
-        <a mat-list-item routerLink="/login" *ngIf="!isLogged">
-          <mat-icon mat-list-icon>account_circle</mat-icon>
-          <span mat-line>Connexion</span>
-        </a>
-        <a mat-list-item routerLink="/register" *ngIf="!isLogged">
-          <mat-icon mat-list-icon>article</mat-icon>
-          <span mat-line>Inscription</span>
-        </a>
-        <a mat-list-item routerLink="/user" *ngIf="isLogged">
-          <mat-icon mat-list-icon>account_circle</mat-icon>
-          <span mat-line>users</span>
-        </a>
-        <a mat-list-item routerLink="/contact">
-          <mat-icon mat-list-icon>forward_to_inbox</mat-icon>
-          <span mat-line>Contact</span>
-        </a>
-        <a mat-list-item (click)="logOut()" *ngIf="isLogged">
-          <mat-icon mat-list-icon>power_settings_new</mat-icon>
-          <span mat-line>Déconnecter</span>
-        </a>
-        <a mat-list-item (click)="sidenav.toggle()">
-          <mat-icon mat-list-icon>clear</mat-icon>
-          <span mat-line>Fermer</span>
-        </a>
-      </mat-nav-list>
-        <!-- <a mat-button (click)="sidenav.toggle()" >Close</a>
-        <a class="navbtn" mat-button (click)="sidenav.toggle()" color="basic" aria-label="">
-          <mat-icon>clear</mat-icon>
-        </a> -->
+          <a mat-list-item routerLink="/" *ngIf="!isLogged">
+            <mat-icon mat-list-icon>home</mat-icon>
+            <span mat-line>Menu</span>
+          </a>
+          <a mat-list-item routerLink="/login" *ngIf="!isLogged">
+            <mat-icon mat-list-icon>account_circle</mat-icon>
+            <span mat-line>Connexion</span>
+          </a>
+          <a mat-list-item routerLink="/register" *ngIf="!isLogged">
+            <mat-icon mat-list-icon>article</mat-icon>
+            <span mat-line>Inscription</span>
+          </a>
+          <a mat-list-item routerLink="/user" *ngIf="isLogged">
+            <mat-icon mat-list-icon>account_circle</mat-icon>
+            <span mat-line>users</span>
+          </a>
+          <a mat-list-item routerLink="/contact">
+            <mat-icon mat-list-icon>forward_to_inbox</mat-icon>
+            <span mat-line>Contact</span>
+          </a>
+          <a mat-list-item (click)="logOut()" *ngIf="isLogged">
+            <mat-icon mat-list-icon>power_settings_new</mat-icon>
+            <span mat-line>Déconnecter</span>
+          </a>
+          <a mat-list-item (click)="sidenav.toggle()">
+            <mat-icon mat-list-icon>clear</mat-icon>
+            <span mat-line>Fermer</span>
+          </a>
+        </mat-nav-list>
       </div>
     </mat-sidenav>
 
     <mat-sidenav-content fxFlexFill class="fatboar-sidenav-content">
-      
-     <router-outlet></router-outlet>
-     <div class="footer">
-      <app-footer></app-footer>
-     </div>
-
-      
+      <router-outlet></router-outlet>
+      <div class="footer">
+        <app-footer></app-footer>
+      </div>
     </mat-sidenav-content>
-  
   </mat-sidenav-container>
-  
-  
+
 </div>

angular-client/src/app/components/shared/navbar/navbar.component.ts

@@ -1,36 +1,43 @@
 import { AuthService } from 'src/app/services/auth.service';
-import { Component, OnInit, Output } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
 import { User } from '../../../models/userResponse';
 
-
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.scss']
 })
 export class NavbarComponent implements OnInit {
-  isLogged: User;
+  isLogged: User | null = null;
   isAdmin: boolean = false;
-  constructor(private authService : AuthService) { 
-    console.log('Variable', this.isAdmin)
-    this.authService.user_info.subscribe((x) =>{
-      this.isLogged = x;
-      this.isLogged.role ==='admin' ? this.isAdmin = true : this.isAdmin = false;
-      console.log('Variable dedans', this.isAdmin);
-
-    });
-
+  isLoggedIn: boolean = false;
+  isBrowser: boolean = false;
+
+  constructor(
+    private authService: AuthService,
+    @Inject(PLATFORM_ID) private platformId: Object
+  ) {
+    this.isBrowser = isPlatformBrowser(this.platformId);
+
+    if (this.isBrowser) {
+      this.authService.user_info.subscribe((user) => {
+        if (user) {
+          this.isLogged = user;
+          this.isLoggedIn = true;
+          this.isAdmin = user.role === 'admin';
+        } else {
+          this.isLogged = null;
+          this.isLoggedIn = false;
+          this.isAdmin = false;
+        }
+      });
+    }
   }
 
-  ngOnInit(): void {
-    //console.log(this.isLogged)
+  ngOnInit(): void {}
 
+  logOut() {
+    this.authService.logout();
   }
-  
-
-  logOut(){
-    this.authService.logout()
-  }
-
-}
-
+}

angular-client/src/app/guards/auth.guard.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
-import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
-import { Observable } from 'rxjs';
-import { AuthService } from 'src/app/services/auth.service'
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { AuthService } from 'src/app/services/auth.service';
 
 @Injectable({
   providedIn: 'root'
@@ -9,22 +8,38 @@ import { AuthService } from 'src/app/services/auth.service'
 export class AuthGuard implements CanActivate {
   constructor(private router: Router, private authService: AuthService) {}
   
-  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
     const currentUser = this.authService.userValue;
+    
+    // Debug logging to understand what's happening
+    console.log('AuthGuard Debug:', {
+      currentUser: currentUser,
+      userRole: currentUser?.role,
+      routeRoles: route.data?.roles,
+      hasToken: this.authService.tokenValue !== null
+    });
+    
     if (currentUser) {
-        // check if route is restricted by role
-        if (route.data.roles && route.data.roles.indexOf(currentUser.role) === -1) {
-            // role not authorised so redirect to home page
-            this.router.navigate(['/']);
-            return false;
+      // check if route is restricted by role
+      if (route.data?.roles && route.data.roles.length > 0) {
+        // Check if user has a role and if it's in the allowed roles
+        if (!currentUser.role || route.data.roles.indexOf(currentUser.role) === -1) {
+          // role not authorized or user has no role, redirect to home page
+          console.warn('Access denied: User role not authorized for this route', {
+            userRole: currentUser.role,
+            requiredRoles: route.data.roles
+          });
+          this.router.navigate(['/']);
+          return false;
         }
+      }
 
-        // authorised so return true
-        return true;
+      // authorized so return true
+      return true;
     }
 
     // not logged in so redirect to login page with the return url
     this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
     return false;
-}
+  }
 }

angular-client/src/app/services/auth.service.ts

@@ -35,6 +35,7 @@ export class AuthService {
   ) {
     this.tokenSubject = new BehaviorSubject<Token>(JSON.parse(this.storageService.getItem('token')));
     this.token = this.tokenSubject.asObservable();
+    const storedUser = this.storageService.getItem('user');
     this.user_infoSubject = new BehaviorSubject<User>(JSON.parse(this.storageService.getItem('user')));
     this.user_info = this.user_infoSubject.asObservable();
   }