Added conditions to check role after connexion and changed guards

package-lock.json

@@ -18,6 +18,7 @@
         "@tailwindcss/postcss": "^4.1.17",
         "@tailwindcss/vite": "^4.1.17",
         "browser-image-compression": "^2.0.2",
+        "jwt-decode": "^4.0.0",
         "ng-zorro-antd": "^20.4.0",
         "postcss": "^8.5.6",
         "rimraf": "^6.1.3",
@@ -6912,6 +6913,15 @@
       ],
       "license": "MIT"
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/less": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/less/-/less-4.4.2.tgz",

package.json

@@ -32,6 +32,7 @@
     "@tailwindcss/postcss": "^4.1.17",
     "@tailwindcss/vite": "^4.1.17",
     "browser-image-compression": "^2.0.2",
+    "jwt-decode": "^4.0.0",
     "ng-zorro-antd": "^20.4.0",
     "postcss": "^8.5.6",
     "rimraf": "^6.1.3",

src/app/app.routes.ts

@@ -1,6 +1,5 @@
 import {Routes} from '@angular/router';
 import {authGuard} from "./guards/auth.guard";
-import {roleGuard} from "./guards/role.guard";
 
 export const routes: Routes = [
     {
@@ -60,8 +59,7 @@ export const routes: Routes = [
             {
                 path: 'user',
                 loadComponent: () => import('./pages/user/user').then(m => m.User),
-                canActivate: [authGuard, roleGuard],
+                canActivate: [authGuard],
-                data: {roles: ['Admin']},
             },
             {
                 path: '**',

src/app/components/deliverer-table/deliverer-table.html

@@ -43,9 +43,11 @@
                     <div style="justify-content: center; display: flex">
                         <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"
                                  (click)="openEditModal(deliverer)"></nz-icon>
-                        <nz-divider nzType="vertical"></nz-divider>
+                        @if (admin()){
-                        <nz-icon nzType="delete" nzTheme="outline" (click)="delete(deliverer.id)"
+                            <nz-divider nzType="vertical"></nz-divider>
-                                 class="text-red-600 cursor-pointer"></nz-icon>
+                            <nz-icon nzType="delete" nzTheme="outline" (click)="delete(deliverer.id)"
+                                     class="text-red-600 cursor-pointer"></nz-icon>
+                        }
                     </div>
                 </td>
             </tr>

src/app/components/deliverer-table/deliverer-table.ts

@@ -9,6 +9,7 @@ import {DelivererForm} from "../deliverer-form/deliverer-form";
 import {DeliverersService, GetDelivererDto, GetSupplierDto} from "../../services/api";
 import {NzNotificationService} from "ng-zorro-antd/notification";
 import {firstValueFrom} from "rxjs";
+import {AuthService} from "../../services/auth.service";
 
 @Component({
     selector: 'app-deliverer-table',
@@ -28,14 +29,17 @@ import {firstValueFrom} from "rxjs";
 export class DelivererTable implements OnInit {
     private deliverersService = inject(DeliverersService);
     private notificationService = inject(NzNotificationService)
+    private authService = inject(AuthService);
 
     deliverers = signal<GetDelivererDto[]>([]);
     deliverersLoading = signal<boolean>(false);
+    admin = signal<boolean>(false);
 
     modal = viewChild.required<ModalNav>('modalNav');
 
     async ngOnInit() {
         await this.fetchDeliverers();
+        this.admin.set(this.authService.isAdmin());
     }
 
     async fetchDeliverers() {

src/app/components/deliverery-note-table/deliverery-note-table.html

@@ -38,9 +38,11 @@
                         <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"
                                  (click)="openEditModal(deliveryNote)"></nz-icon>
                         <nz-divider nzType="vertical"></nz-divider>
-                        <nz-icon nzType="delete" nzTheme="outline" (click)="delete(deliveryNote.id)"
+                        @if (admin()){
-                                 class="cursor-pointer text-red-700"/>
+                            <nz-icon nzType="delete" nzTheme="outline" (click)="delete(deliveryNote.id)"
-                        <nz-divider nzType="vertical"></nz-divider>
+                                     class="cursor-pointer text-red-700"/>
+                            <nz-divider nzType="vertical"></nz-divider>
+                        }
                         <nz-icon nzType="export" nzTheme="outline" (click)="export(deliveryNote.id)"
                                  class="cursor-pointer text-green-700"/>
                     </div>

src/app/components/deliverery-note-table/deliverery-note-table.ts

@@ -10,6 +10,7 @@ import {NzNotificationService} from "ng-zorro-antd/notification";
 import {firstValueFrom} from "rxjs";
 import {format} from "date-fns";
 import {FileService} from "../../services/file.service";
+import {AuthService} from "../../services/auth.service";
 
 @Component({
     selector: 'app-deliverery-note-table',
@@ -28,9 +29,11 @@ export class DelivereryNoteTable implements OnInit {
     private deliveryNotesService = inject(DeliverynotesService);
     private notificationService = inject(NzNotificationService);
     private fileService = inject(FileService);
+    private authService = inject(AuthService);
 
     deliveryNotes = signal<GetDeliveryNoteDto[]>([]);
     deliveryNotesLoading = signal<boolean>(false);
+    admin = signal<boolean>(false);
 
     modal = viewChild.required<ModalNav>('modalNav');
 
@@ -38,6 +41,7 @@ export class DelivereryNoteTable implements OnInit {
 
     async ngOnInit() {
         await this.fetchDeliveryNotes();
+        this.admin.set(this.authService.isAdmin());
     }
 
     async fetchDeliveryNotes() {

src/app/components/layout/layout.html

@@ -59,14 +59,14 @@
                         </li>
                     </ul>
                 </li>
-                <li nz-menu-item routerLinkActive="ant-menu-item-selected">
+                @if (admin()) {
-                    @if (authService.hasRole(['ADMIN'])) {
+                    <li nz-menu-item routerLinkActive="ant-menu-item-selected">
                         <a routerLink="/user">
                             <nz-icon nzType="user"></nz-icon>
                             <span>Utilisateur</span>
                         </a>
-                    }
+                    </li>
-                </li>
+                }
             </ul>
 
             <!-- ICONES À DROITE -->

src/app/components/layout/layout.ts

@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, OnInit, signal} from '@angular/core';
 import {ModalNav} from "../modal-nav/modal-nav";
 import {NzContentComponent, NzHeaderComponent, NzLayoutComponent} from "ng-zorro-antd/layout";
 import {NzIconDirective} from "ng-zorro-antd/icon";
@@ -28,10 +28,16 @@ import {AuthService} from "../../services/auth.service";
     templateUrl: './layout.html',
     styleUrl: './layout.css',
 })
-export class Layout {
+export class Layout implements OnInit {
-    protected authService = inject(AuthService);
+    private authService = inject(AuthService);
     private router = inject(Router);
 
+    admin = signal<boolean>(false);
+
+    ngOnInit() {
+        this.admin.set(this.authService.isAdmin());
+    }
+
     async disconnect() {
         this.authService.logout();
         await this.router.navigate(['/login']);

src/app/components/purchase-order-table/purchase-order-table.html

@@ -60,9 +60,11 @@
                         <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"
                                  (click)="openEditModal(purchaseOrder)"></nz-icon>
                         <nz-divider nzType="vertical"></nz-divider>
-                        <nz-icon nzType="delete" nzTheme="outline" (click)="delete(purchaseOrder.id)"
+                        @if (admin()) {
-                                 class="cursor-pointer text-red-700"/>
+                            <nz-icon nzType="delete" nzTheme="outline" (click)="delete(purchaseOrder.id)"
-                        <nz-divider nzType="vertical"></nz-divider>
+                                     class="cursor-pointer text-red-700"/>
+                            <nz-divider nzType="vertical"></nz-divider>
+                        }
                         <nz-icon nzType="export" nzTheme="outline" (click)="export(purchaseOrder.id)"
                                  class="cursor-pointer text-green-700"/>
                         <nz-divider nzType="vertical"></nz-divider>

src/app/components/purchase-order-table/purchase-order-table.ts

@@ -17,6 +17,7 @@ import {firstValueFrom} from "rxjs";
 import {FileService} from "../../services/file.service";
 import {QuantityForm} from "../quantity-form/quantity-form";
 import {DelivererChoice} from "../deliverer-choice/deliverer-choice";
+import {AuthService} from "../../services/auth.service";
 
 @Component({
     selector: 'app-purchase-order-table',
@@ -38,9 +39,11 @@ export class PurchaseOrderTable implements OnInit {
     private notificationService = inject(NzNotificationService);
     private fileService = inject(FileService);
     private deliveryNoteService = inject(DeliverynotesService);
+    private authService = inject(AuthService);
 
     purchaseOrders = signal<GetPurchaseOrderDto[]>([]);
     purchaseOrdersLoading = signal<boolean>(false);
+    admin = signal<boolean>(false);
 
     modal = viewChild.required<ModalNav>('modalNav');
     modalQuantity = viewChild.required<ModalNav>('modalQuantity');
@@ -48,6 +51,7 @@ export class PurchaseOrderTable implements OnInit {
 
     async ngOnInit() {
         await this.fetchPurchaseOrder();
+        this.admin.set(this.authService.isAdmin());
     }
 
     async fetchPurchaseOrder() {

src/app/components/quotation-table/quotation-table.html

@@ -60,9 +60,11 @@
                         <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"
                                  (click)="openEditModal(quotation)"></nz-icon>
                         <nz-divider nzType="vertical"></nz-divider>
-                        <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"
+                        @if (admin()) {
-                                 (click)="delete(quotation.id)"/>
+                            <nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"
-                        <nz-divider nzType="vertical"></nz-divider>
+                                     (click)="delete(quotation.id)"/>
+                            <nz-divider nzType="vertical"></nz-divider>
+                        }
                         <nz-icon nzType="export" (click)="export(quotation.id)" nzTheme="outline"
                                  class="cursor-pointer text-green-700"/>
                     </div>

src/app/components/quotation-table/quotation-table.ts

@@ -14,6 +14,7 @@ import {NzNotificationService} from "ng-zorro-antd/notification";
 import {firstValueFrom} from "rxjs";
 import {FileService} from "../../services/file.service";
 import {QuantityForm} from "../quantity-form/quantity-form";
+import {AuthService} from "../../services/auth.service";
 
 @Component({
     selector: 'app-quotation-table',
@@ -34,15 +35,18 @@ export class QuotationTable implements OnInit {
     private quotationsService = inject(QuotationsService);
     private notificationService = inject(NzNotificationService);
     private fileService = inject(FileService);
+    private authService = inject(AuthService);
 
     quotations = signal<GetQuotationDto[]>([]);
     quotationsLoading = signal<boolean>(false);
+    admin = signal<boolean>(false);
 
     modal = viewChild.required<ModalNav>('modalNav');
     modalQuantity = viewChild.required<ModalNav>('modalQuantity');
 
     async ngOnInit() {
         await this.fetchQuotations();
+        this.admin.set(this.authService.isAdmin());
     }
 
     async fetchQuotations() {

src/app/components/setting-form/setting-form.html

@@ -10,15 +10,23 @@
             }
         </div>
 
-        <div class="row-right">
+        @if (admin()){
-            <nz-form-item>
+            <div class="row-right">
-                <nz-form-label nzSpan="9">Logo</nz-form-label>
+                <nz-form-item>
-                <nz-form-control nzErrorTip="Ce champ est requis">
+                    <nz-form-label nzSpan="9">Logo</nz-form-label>
-                    <input #fileInputLogo nz-input type="file" placeholder="Déposer"
+                    <nz-form-control nzErrorTip="Ce champ est requis">
-                           (change)="onFileChange('logo', fileInputLogo.files)">
+                        <input #fileInputLogo nz-input type="file" placeholder="Déposer"
-                </nz-form-control>
+                               (change)="onFileChange('logo', fileInputLogo.files)">
-            </nz-form-item>
+                    </nz-form-control>
-        </div>
+                </nz-form-item>
+            </div>
+        } @else {
+            <div class="row-right">
+                <nz-form-item>
+                    <p class="text-red-600">Vous ne pouvez pas modifier le logo</p>
+                </nz-form-item>
+            </div>
+        }
     </div>
 
     <!-- Signature -->
@@ -31,14 +39,22 @@
             }
         </div>
 
-        <div class="row-right">
+        @if (admin()) {
-            <nz-form-item>
+            <div class="row-right">
-                <nz-form-label nzSpan="9">Signature</nz-form-label>
+                <nz-form-item>
-                <nz-form-control nzErrorTip="Ce champ est requis">
+                    <nz-form-label nzSpan="9">Signature</nz-form-label>
-                    <input #fileInputSignature nz-input type="file" placeholder="Déposer"
+                    <nz-form-control nzErrorTip="Ce champ est requis">
-                           (change)="onFileChange('electronicSignature', fileInputSignature.files)">
+                        <input #fileInputSignature nz-input type="file" placeholder="Déposer"
-                </nz-form-control>
+                               (change)="onFileChange('electronicSignature', fileInputSignature.files)">
-            </nz-form-item>
+                    </nz-form-control>
-        </div>
+                </nz-form-item>
+            </div>
+        } @else {
+            <div class="row-right">
+                <nz-form-item>
+                    <p class="text-red-600">Vous ne pouvez pas modifier la signature</p>
+                </nz-form-item>
+            </div>
+        }
     </div>
 </form>

src/app/components/setting-form/setting-form.ts

@@ -8,6 +8,7 @@ import {firstValueFrom} from "rxjs";
 import {GetSettingDto, SettingsService} from "../../services/api";
 import {NzNotificationService} from "ng-zorro-antd/notification";
 import imageCompression from "browser-image-compression";
+import {AuthService} from "../../services/auth.service";
 
 @Component({
     selector: 'app-setting-form',
@@ -27,8 +28,10 @@ import imageCompression from "browser-image-compression";
 export class SettingForm implements OnInit {
     private settingsService = inject(SettingsService);
     private notificationService = inject(NzNotificationService);
+    private authService = inject(AuthService);
 
     settings = signal<GetSettingDto>({});
+    admin = signal<boolean>(false);
 
     setting: SettingInfo = {
         logo: 'https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png',
@@ -42,6 +45,7 @@ export class SettingForm implements OnInit {
 
     async ngOnInit() {
         await this.fetchSettings();
+        this.admin.set(this.authService.isAdmin());
     }
 
     async fetchSettings() {

src/app/components/stock-table/stock-table.html

@@ -46,9 +46,11 @@
                     <div style="justify-content: center; display: flex">
                         <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"
                                  (click)="openEditModal(product)"></nz-icon>
-                        <nz-divider nzType="vertical"></nz-divider>
+                        @if (admin()) {
-                        <nz-icon nzType="delete" nzTheme="outline" (click)="delete(product.id)"
+                            <nz-divider nzType="vertical"></nz-divider>
-                                 class="text-red-600 cursor-pointer"></nz-icon>
+                            <nz-icon nzType="delete" nzTheme="outline" (click)="delete(product.id)"
+                                     class="text-red-600 cursor-pointer"></nz-icon>
+                        }
                     </div>
                 </td>
             </tr>

src/app/components/stock-table/stock-table.ts

@@ -9,6 +9,7 @@ import {GetProductDto, ProductsService, WarehouseproductsService} from "../../se
 import {NzNotificationService} from "ng-zorro-antd/notification";
 import {first, firstValueFrom} from "rxjs";
 import {NzCheckboxComponent} from "ng-zorro-antd/checkbox";
+import {AuthService} from "../../services/auth.service";
 
 interface ProductWithQuantity extends GetProductDto {
     totalQuantity?: number;
@@ -34,9 +35,11 @@ export class StockTable implements OnInit {
     private productsService = inject(ProductsService);
     private wareHousseProductsService = inject(WarehouseproductsService)
     private notificationService = inject(NzNotificationService)
+    private authService = inject(AuthService);
 
     products = signal<ProductWithQuantity[]>([]);
     productsLoading = signal<boolean>(false);
+    admin = signal<boolean>(false);
 
     modal = viewChild.required<ModalNav>('modalNav');
 
@@ -50,6 +53,7 @@ export class StockTable implements OnInit {
 
     async ngOnInit() {
         await this.fetchProducts();
+        this.admin.set(this.authService.isAdmin());
     }
 
     async fetchProducts() {

src/app/components/supplier-table/supplier-table.html

@@ -46,10 +46,12 @@
                                                 <nz-icon nzType="edit" nzTheme="outline"
                                                          class="cursor-pointer text-gray-600 hover:text-gray-900"
                                                          (click)="openEditProductModal(product, supplier.id)"></nz-icon>
-                                                <nz-divider nzType="vertical"></nz-divider>
+                                                @if (admin()) {
-                                                <nz-icon nzType="delete" nzTheme="outline"
+                                                    <nz-divider nzType="vertical"></nz-divider>
-                                                         class="cursor-pointer text-red-600 hover:text-red-800"
+                                                    <nz-icon nzType="delete" nzTheme="outline"
-                                                         (click)="deleteProduct(product.productId, supplier.id)"></nz-icon>
+                                                             class="cursor-pointer text-red-600 hover:text-red-800"
+                                                             (click)="deleteProduct(product.productId, supplier.id)"></nz-icon>
+                                                }
                                             </div>
                                         </td>
                                     </tr>
@@ -62,9 +64,11 @@
                     <div style="display: flex; align-items: center;">
                         <nz-icon nzType="edit" nzTheme="outline" class="cursor-pointer"
                                  (click)="openEditModal(supplier)"></nz-icon>
-                        <nz-divider nzType="vertical"></nz-divider>
+                        @if (admin()) {
-                        <nz-icon nzType="delete" nzTheme="outline" (click)="delete(supplier.id)"
+                            <nz-divider nzType="vertical"></nz-divider>
-                                 class="text-red-600 cursor-pointer"></nz-icon>
+                            <nz-icon nzType="delete" nzTheme="outline" (click)="delete(supplier.id)"
+                                     class="text-red-600 cursor-pointer"></nz-icon>
+                        }
                     </div>
                 </td>
             </tr>

src/app/components/supplier-table/supplier-table.ts

@@ -9,6 +9,7 @@ import {GetPriceDto, GetSupplierDto, PricesService, SuppliersService} from "../.
 import {NzNotificationService} from "ng-zorro-antd/notification";
 import {firstValueFrom} from "rxjs";
 import {PriceForm} from "../price-form/price-form";
+import {AuthService} from "../../services/auth.service";
 
 @Component({
     selector: 'app-supplier-table',
@@ -29,9 +30,11 @@ export class SupplierTable implements OnInit {
     private suppliersService = inject(SuppliersService);
     private pricesService = inject(PricesService);
     private notificationService = inject(NzNotificationService);
+    private authService = inject(AuthService);
 
     suppliers = signal<GetSupplierDto[]>([]);
     suppliersLoading = signal<boolean>(false);
+    admin = signal<boolean>(false);
 
     supplierModal = viewChild.required<ModalNav>('supplierModal');
     productModal = viewChild.required<ModalNav>('productModal');
@@ -42,6 +45,7 @@ export class SupplierTable implements OnInit {
 
     async ngOnInit() {
         await this.fetchSuppliers();
+        this.admin.set(this.authService.isAdmin());
     }
 
     async fetchSuppliers() {

src/app/guards/auth.guard.ts

@@ -2,9 +2,13 @@ import { inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { AuthService} from "../services/auth.service";
 
-export const authGuard = () => {
+export const authGuard = async () => {
     const auth = inject(AuthService);
     const router = inject(Router);
 
-    return auth.isLoggedIn() ? true : router.parseUrl('/login');
+    if(!auth.userAuthenticated()) {
+        await router.navigateByUrl('/login');
+        return false;
+    }
+    return true
 };

src/app/guards/role.guard.ts

@@ -1,12 +0,0 @@
-import { inject } from '@angular/core';
-import { ActivatedRouteSnapshot, Router } from '@angular/router';
-import { AuthService} from "../services/auth.service";
-
-export const roleGuard = (route: ActivatedRouteSnapshot) => {
-    const auth = inject(AuthService);
-    const router = inject(Router);
-
-    const requiredRoles: string[] = route.data['roles'];
-
-    return auth.hasRole(requiredRoles) ? true : router.parseUrl('/dashboard');
-};

src/app/services/auth.service.ts

@@ -2,6 +2,7 @@ import {inject, Injectable} from '@angular/core';
 import {firstValueFrom} from 'rxjs';
 import {NzNotificationService} from 'ng-zorro-antd/notification';
 import {UsersService} from "./api";
+import  {  jwtDecode  }  from  "jwt-decode" ;
 
 @Injectable({
     providedIn: 'root',
@@ -10,12 +11,15 @@ export class AuthService {
     private usersService = inject(UsersService);
     private notificationService = inject(NzNotificationService);
 
+    private isAuthenticated: boolean = false;
+
     async connectUser(name: string, password: string) {
         try {
             const loginDto = {name, password};
             const res = await firstValueFrom(this.usersService.connectUserEndpoint(loginDto));
             localStorage.setItem('jwt', res.token);
-            return true;
+            this.isAuthenticated = true;
+            return this.isAuthenticated;
         } catch {
             this.notificationService.error('Erreur', 'Identifiant invalide');
             return false;
@@ -31,39 +35,20 @@ export class AuthService {
     }
 
     logout() {
+        this.isAuthenticated = false;
         localStorage.removeItem('jwt');
     }
 
-    decodeToken(): { sub?: string; role?: string; exp?: number } | null {
+    userAuthenticated() {
-        const token = this.getToken();
+        return this.isAuthenticated
-        if (!token) return null;
-
-        try {
-            const payload = token.split('.')[1];
-            return JSON.parse(atob(payload));
-        } catch {
-            return null;
-        }
     }
 
-    isLoggedIn(): boolean {
+    getRole() {
-        const token = this.getToken();
+        const jwtDecoded = jwtDecode(this.getToken());
-        if (!token) return false;
+        return jwtDecoded['role'];
-
-        const decoded = this.decodeToken();
-        if (!decoded?.exp) return true;
-
-        return decoded.exp * 1000 > Date.now();
     }
 
-    getRole(): string | null {
+    isAdmin(){
-        return this.decodeToken()?.role ?? null;
+        return this.getRole() === 'Admin';
     }
-
-    hasRole(requiredRoles: string[]): boolean {
-        const role = this.getRole();
-        if (!role) return false;
-        return requiredRoles.includes(role);
-    }
-
 }