sanchezvem/pyrofetes-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added conditions to check role after connexion and changed guards

Browse Source
This commit is contained in:
sanchezvem
2026-06-01 10:41:50 +01:00
parent cf53e4c8ef
commit 80b4726004
22 changed files with 142 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+10
View File
@@ -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
+1
View File
@@ -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 -3
View File
@@ -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],
data: {roles: ['Admin']},
canActivate: [authGuard],
},
{
path: '**',
src/app/components/deliverer-table/deliverer-table.html
+5 -3
View File
@@ -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>
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(deliverer.id)"
class="text-red-600 cursor-pointer"></nz-icon>
@if (admin()){
<nz-divider nzType="vertical"></nz-divider>
<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
+4
View File
@@ -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
+5 -3
View File
@@ -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)"
class="cursor-pointer text-red-700"/>
<nz-divider nzType="vertical"></nz-divider>
@if (admin()){
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(deliveryNote.id)"
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
+4
View File
@@ -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
+4 -4
View File
@@ -59,14 +59,14 @@
</li>
</ul>
</li>
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
@if (authService.hasRole(['ADMIN'])) {
@if (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
+9 -3
View File
@@ -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 {
protected authService = inject(AuthService);
export class Layout implements OnInit {
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
+5 -3
View File
@@ -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)"
class="cursor-pointer text-red-700"/>
<nz-divider nzType="vertical"></nz-divider>
@if (admin()) {
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(purchaseOrder.id)"
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
+4
View File
@@ -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
+5 -3
View File
@@ -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"
(click)="delete(quotation.id)"/>
<nz-divider nzType="vertical"></nz-divider>
@if (admin()) {
<nz-icon nzType="delete" nzTheme="outline" class="cursor-pointer text-red-700"
(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
+4
View File
@@ -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
+34 -18
View File
@@ -10,15 +10,23 @@
}
</div>
<div class="row-right">
<nz-form-item>
<nz-form-label nzSpan="9">Logo</nz-form-label>
<nz-form-control nzErrorTip="Ce champ est requis">
<input #fileInputLogo nz-input type="file" placeholder="Déposer"
(change)="onFileChange('logo', fileInputLogo.files)">
</nz-form-control>
</nz-form-item>
</div>
@if (admin()){
<div class="row-right">
<nz-form-item>
<nz-form-label nzSpan="9">Logo</nz-form-label>
<nz-form-control nzErrorTip="Ce champ est requis">
<input #fileInputLogo nz-input type="file" placeholder="Déposer"
(change)="onFileChange('logo', fileInputLogo.files)">
</nz-form-control>
</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">
<nz-form-item>
<nz-form-label nzSpan="9">Signature</nz-form-label>
<nz-form-control nzErrorTip="Ce champ est requis">
<input #fileInputSignature nz-input type="file" placeholder="Déposer"
(change)="onFileChange('electronicSignature', fileInputSignature.files)">
</nz-form-control>
</nz-form-item>
</div>
@if (admin()) {
<div class="row-right">
<nz-form-item>
<nz-form-label nzSpan="9">Signature</nz-form-label>
<nz-form-control nzErrorTip="Ce champ est requis">
<input #fileInputSignature nz-input type="file" placeholder="Déposer"
(change)="onFileChange('electronicSignature', fileInputSignature.files)">
</nz-form-control>
</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
+4
View File
@@ -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
+5 -3
View File
@@ -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>
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(product.id)"
class="text-red-600 cursor-pointer"></nz-icon>
@if (admin()) {
<nz-divider nzType="vertical"></nz-divider>
<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
+4
View File
@@ -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
+11 -7
View File
@@ -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>
<nz-icon nzType="delete" nzTheme="outline"
class="cursor-pointer text-red-600 hover:text-red-800"
(click)="deleteProduct(product.productId, supplier.id)"></nz-icon>
@if (admin()) {
<nz-divider nzType="vertical"></nz-divider>
<nz-icon nzType="delete" nzTheme="outline"
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>
<nz-icon nzType="delete" nzTheme="outline" (click)="delete(supplier.id)"
class="text-red-600 cursor-pointer"></nz-icon>
@if (admin()) {
<nz-divider nzType="vertical"></nz-divider>
<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
+4
View File
@@ -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
+6 -2
View File
@@ -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
-12
View File
@@ -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
+13 -28
View File
@@ -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 {
const token = this.getToken();
if (!token) return null;
try {
const payload = token.split('.')[1];
return JSON.parse(atob(payload));
} catch {
return null;
}
userAuthenticated() {
return this.isAuthenticated
}
isLoggedIn(): boolean {
const token = this.getToken();
if (!token) return false;
const decoded = this.decodeToken();
if (!decoded?.exp) return true;
return decoded.exp * 1000 > Date.now();
getRole() {
const jwtDecoded = jwtDecode(this.getToken());
return jwtDecoded['role'];
}
getRole(): string | null {
return this.decodeToken()?.role ?? null;
isAdmin(){
return this.getRole() === 'Admin';
}
hasRole(requiredRoles: string[]): boolean {
const role = this.getRole();
if (!role) return false;
return requiredRoles.includes(role);
}
}