fix roles security

src/app/core/constants/roles.ts

+export const ROLES = {
+    ADMIN: 'Admin',
+    PROJECTS_PLANNER: 'Planner',
+    CUSTOMERS_PLANER:'Planner',
+    SCIENTIFIC_DEPUTY: 'Employee',
+    EMPLOYEE :'Employee',
+    USER: 'User',
+  } as const;
\ No newline at end of file

src/app/core/guards/role.guard.ts

+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { AuthenticationService } from '../services/authentication/authentication.service';
+import { UserService } from '../services/authentication/user.service';
+import { ToastrService } from 'ngx-toastr';
+@Injectable({
+  providedIn: 'root'
+})
+export class RoleGuard implements CanActivate {
+
+  constructor(
+    private authService: UserService,
+    private router: Router,
+    private toastr :ToastrService
+    ) {}
+
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+    
+    // Get the roles required for the route from the route data
+    const requiredRoles: string[] = route.data['roles'];
+
+    // Get current user  roles
+    const userRoles = this.authService.getCurrentUserRoles(); // Array of roles
+
+    // Check if user has any of the required roles
+    if (requiredRoles.some(role => userRoles.map(e => e.name).includes(role))) {
+      return true;
+    } else {
+      this.toastr.error('ليس لديك صلاحيات الوصول إلى هذه الصفحة')
+      this.router.navigate(['/']); // Redirect to home page
+      return false;
+    }
+  }
+}

src/app/core/models/users/User.ts

@@ -3,7 +3,7 @@ export interface User {
     userName: string
     firstName :string 
     lastName :string,
-    roles :string[] 
+    roles : {name : string ,id :number }[] 
     email: string;
   }
   
\ No newline at end of file

src/app/core/services/authentication/authentication.service.ts

@@ -77,7 +77,6 @@ export class AuthenticationService {
   getToken(): string | null {
     return this.cookieService.get('token');
   }
-
   //#endregion  Authentication 
 
 

src/app/core/services/authentication/user.service.ts

@@ -10,17 +10,37 @@ export class UserService {
   
   constructor(private dataStorage : DataStorageService) { }
   
+  // this method responsible for get the current user details 
   getCurrentUser():User{
       return JSON.parse( this.dataStorage.getItem("userDetails"));
   }
 
+  // this meth responsible le for get the current logged employee id 
   getEmployeeId() :number{
     return this.getCurrentUser().employeeId;
   }
+
+  getCurrentUserRoles() {
+    return this.getCurrentUser().roles;
+  }
+
+  // fo first name 
   getUserFirstName():string{
       return JSON.parse( this.dataStorage.getItem("userDetails")).firstName;
   }
+  // for last name 
   getUserLastName():string{
     return JSON.parse( this.dataStorage.getItem("userDetails")).lastName;
-}
+  }
+
+  // the method check fora given role 
+  hasRole(roleName :string) : boolean{
+
+    return this
+    .getCurrentUser()
+    .roles
+    .filter(e => e.name == roleName)
+    .length !=0; 
+  }
+  
 }

src/app/customers/pages/customer-details/customer-details.component.html

@@ -36,7 +36,9 @@
                     <td class="text-center">{{contact.contactType}}</td>
                     <td class="text-center">{{contact.contactValue}}</td>
                     <td class="text-center"  >
-                      <button class="btn btn-danger" (click)="openRemoveConatact(contact)">
+                      <button class="btn btn-danger"
+                        [disabled]="!canEditCustomer()"
+                       (click)="openRemoveConatact(contact)">
                         إزالة
                       </button>
                     </td>
@@ -45,7 +47,7 @@
                 </tbody>
               </table>
             </div>
-            <div class="row mb-4">
+            <div *ngIf="canEditCustomer()" class="row mb-4">
 
                 <button  class="col-3 offset-1 m-4 btn btn-danger" (click)="openModal('delete')">إزالة</button>
                 <button class="col-3 offset-1 m-4 btn btn-primary" (click)="openModal('edit')">تعديل</button>

src/app/customers/pages/customer-details/customer-details.component.ts

@@ -9,6 +9,8 @@ import { AddContactInfoRequest, UpdateCustomerRequest } from '../../models/reque
 import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { AddContactinfoModalComponent } from '../../components/add-contactinfo-modal/add-contactinfo-modal.component';
 import { RemoveContactinfoModalComponent } from '../../components/remove-contactinfo-modal/remove-contactinfo-modal.component';
+import { UserService } from '../../../core/services/authentication/user.service';
+import { ROLES } from '../../../core/constants/roles';
 
 @Component({
   selector: 'customer-details',
@@ -34,7 +36,8 @@ export class CustomerDetailsComponent implements OnInit {
     private route: ActivatedRoute,
     private customerService: CustomerService,
     private toastr: ToastrService,
-    private modalService : NgbModal
+    private modalService : NgbModal,
+    public userService : UserService
   ) {}
 
   ngOnInit(): void {
@@ -43,6 +46,10 @@ export class CustomerDetailsComponent implements OnInit {
 
   }
 
+  canEditCustomer(): boolean {
+    return this.userService.hasRole(ROLES.CUSTOMERS_PLANER);
+  }
+
   loadCustomer (){
 
     this

src/app/customers/pages/customer-list/customer-list.component.html

@@ -6,7 +6,7 @@
                 <h2 class="h3 mb-0 page-title">الجهات الطارحة</h2>
                 </div>
             <div class="col-auto">
-                <button type="button"  (click)="this.router.navigate(['customers/create'])" class="btn btn-primary"><span class="fe fe-file-plus fe-12 mr-2"></span>إضافة جهة جديدة</button>
+                <button type="button"   [disabled]="!canEditCustomer()"  (click)="this.router.navigate(['customers/create'])" class="btn btn-primary"><span class="fe fe-file-plus fe-12 mr-2"></span>إضافة جهة جديدة</button>
             </div>
         </div>
         <div  class="row">

src/app/customers/pages/customer-list/customer-list.component.ts

@@ -8,13 +8,18 @@ import { config } from 'rxjs';
 import { ToastrService } from 'ngx-toastr';
 import { Router } from '@angular/router';
 import { LoadingService } from '../../../core/services/loading/loading-service.service';
+import { UserService } from '../../../core/services/authentication/user.service';
+import { ROLES } from '../../../core/constants/roles';
 
 @Component({
   selector: 'customer-list',
   templateUrl: './customer-list.component.html',
   styleUrl: './customer-list.component.css'
 })
+
 export class CustomerListComponent implements OnInit {
+
+
   customers :Customer[]=[]
   isCreate = false
   loading = true
@@ -26,7 +31,8 @@ export class CustomerListComponent implements OnInit {
     private customerService : CustomerService,
     private toastr: ToastrService,
     public router: Router,
-    private loadingService: LoadingService
+    private loadingService: LoadingService,
+    private userService :UserService
   ) {
 
   }
@@ -61,6 +67,12 @@ export class CustomerListComponent implements OnInit {
   toggle():void{
     this.isCreate = ! this.isCreate
   }
+
+
+  canEditCustomer(): boolean {
+    return this.userService.hasRole(ROLES.CUSTOMERS_PLANER);
+  }
+
   pageChanged(event: number): void {
     this.currentPage = event;
   }

src/app/customers/routing/customer-routing.module.ts

@@ -4,11 +4,13 @@ import { CustomerCreateComponent } from '../pages/customer-create/customer-creat
 import { UpdateCustomerComponent } from '../pages/update-customer/update-customer.component';
 import { CustomerDetailsComponent } from '../pages/customer-details/customer-details.component';
 import { CustomerListComponent } from '../pages/customer-list/customer-list.component';
+import { RoleGuard } from '../../core/guards/role.guard';
+import { ROLES } from '../../core/constants/roles';
 
 const routes: Routes = [
   { path: '', component: CustomerListComponent },
-  { path: 'edit/:id', component: UpdateCustomerComponent },
-  { path: 'create', component: CustomerCreateComponent },
+  { path: 'edit/:id', component: UpdateCustomerComponent , canActivate:[RoleGuard] ,  data: { roles: [ROLES.CUSTOMERS_PLANER] }},
+  { path: 'create', component: CustomerCreateComponent, canActivate:[RoleGuard] ,  data: { roles: [ROLES.CUSTOMERS_PLANER] } },
    { path: 'detail/:id', component: CustomerDetailsComponent  },
 ];
 

src/app/projects-types/pages/types-create/types-create.component.ts

@@ -4,6 +4,8 @@ import { ProjectsTypesService } from '../../services/projects-types.service';
 import { ToastrService } from 'ngx-toastr';
 import { Router } from '@angular/router';
 import { CreateCustomerRequest } from '../../../customers/models/requests/createCustomerRequest';
+import { UserService } from '../../../core/services/authentication/user.service';
+import { ROLES } from '../../../core/constants/roles';
 
 @Component({
   selector: 'types-create',

src/app/projects-types/pages/types-detail/types-detail.component.html

@@ -21,8 +21,8 @@
             </div>
             <div class="row mb-4">
 
-                <button class="col-3 offset-1 m-4 btn btn-danger" (click)="openModal('delete')">إزالة</button>
-                <button class="col-3 offset-1 m-4 btn btn-primary" (click)="openModal('edit')">تعديل</button>
+                <button   [disabled]="!canEdit()"  class="col-3 offset-1 m-4 btn btn-danger" (click)="openModal('delete')">إزالة</button>
+                <button  [disabled]="!canEdit()" class="col-3 offset-1 m-4 btn btn-primary" (click)="openModal('edit')">تعديل</button>
                 
             </div>
             

src/app/projects-types/pages/types-detail/types-detail.component.ts

@@ -5,6 +5,8 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 import { Modal } from 'bootstrap';
 import { UpdateTypeRequest } from '../../models/requests/updateProjectTypeRequest';
+import { UserService } from '../../../core/services/authentication/user.service';
+import { ROLES } from '../../../core/constants/roles';
 
 @Component({
   selector: 'types-detail',
@@ -23,7 +25,8 @@ export class TypesDetailComponent implements OnInit{
     private typeService : ProjectsTypesService,
     private route : ActivatedRoute,
     private toastr : ToastrService,
-    private router : Router
+    private router : Router,
+    private userService :UserService
 
   ){}
   ngOnInit(): void {
@@ -112,6 +115,10 @@ export class TypesDetailComponent implements OnInit{
       new Modal(modalElement).hide(); // Close the modal
     }
   }
+  canEdit(): boolean {
+    return this.userService.hasRole(ROLES.PROJECTS_PLANNER);
+  }
+
 
 
 }

src/app/projects-types/pages/types-list/types-list.component.html

@@ -6,7 +6,7 @@
                 <h2 class="h3 mb-0 page-title">  قائمة أنواع المشاريع </h2>
                 </div>
             <div class="col-auto">
-            <button type="button" [routerLink]="['/types/create']" class="btn btn-primary"><span class="fe fe-file-plus fe-12 mr-2"></span>إضافة عنصر </button>
+            <button   [disabled]="!canEdit()"  type="button" [routerLink]="['/types/create']" class="btn btn-primary"><span class="fe fe-file-plus fe-12 mr-2"></span>إضافة عنصر </button>
         </div>
    </div>
 <hr>

src/app/projects-types/pages/types-list/types-list.component.ts

@@ -6,6 +6,8 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { Modal } from 'bootstrap';
 import { ProjectType } from '../../models/responses/projectType';
 import { UpdateTypeRequest } from '../../models/requests/updateProjectTypeRequest';
+import { ROLES } from '../../../core/constants/roles';
+import { UserService } from '../../../core/services/authentication/user.service';
 
 @Component({
   selector: 'types-list',
@@ -24,7 +26,9 @@ export class TypesListComponent {
     private toastr : ToastrService,
     private route: ActivatedRoute,
     public router :Router,
-    private modalService: NgbModal
+    private modalService: NgbModal,
+    private userService :UserService
+
   ) {
     
   }
@@ -124,5 +128,9 @@ export class TypesListComponent {
     }
   }
 
+  canEdit(): boolean {
+    return this.userService.hasRole(ROLES.PROJECTS_PLANNER);
+  }
+
 
 }

src/app/projects-types/projects-types.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { ProjectsTypesRoutingModule } from './projects-types-routing.module';
+import { ProjectsTypesRoutingModule } from './routing/projects-types-routing.module';
 import { TypeItemComponent } from './components/type-item/type-item.component';
 import { TypesListComponent } from './pages/types-list/types-list.component';
 import { TypesCreateComponent } from './pages/types-create/types-create.component';

src/app/projects-types/projects-types-routing.module.ts → src/app/projects-types/routing/projects-types-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { TypesCreateComponent } from './pages/types-create/types-create.component';
-import { TypesDetailComponent } from './pages/types-detail/types-detail.component';
-import { TypesListComponent } from './pages/types-list/types-list.component';
+import { TypesDetailComponent } from '../pages/types-detail/types-detail.component';
+import { TypesCreateComponent } from '../pages/types-create/types-create.component';
+import { TypesListComponent } from '../pages/types-list/types-list.component';
+import { ROLES } from '../../core/constants/roles';
+import { RoleGuard } from '../../core/guards/role.guard';
 
 const routes: Routes = [
-  {path:'create',component:TypesCreateComponent},
-  {path:'detail/:id',component:TypesDetailComponent},
+  {path:'create',component:TypesCreateComponent , canActivate:[RoleGuard] ,  data: { roles: [ROLES.PROJECTS_PLANNER] }},
+  {path:'detail/:id',component:TypesDetailComponent },
   {path:'',component:TypesListComponent},
   
 ];

src/app/shared/sharedLayout/sidebar/sidebar.component.html

@@ -50,7 +50,9 @@
         </a>
       </li>
       <li class="nav-item">
-        <a [routerLink]="['/customers/create']" class="nav-link collapsed " >
+        <a
+          *ngIf="hasRole('Planner')"
+        [routerLink]="['/customers/create']" class="nav-link collapsed " >
           <i class="fe fe-edit-2"></i><span>إضافة جهة طارحة</span>
         </a>
       </li>

src/app/shared/sharedLayout/sidebar/sidebar.component.ts

@@ -20,7 +20,7 @@ export class SidebarComponent implements OnInit {
   @Input() isToggled: Boolean;  
 
   ngOnInit(): void {
-    this.roles=this.userService.getCurrentUser().roles
+    this.roles=this.userService.getCurrentUser().roles.map(e => e.name)
     this.id= this.userService.getEmployeeId();
   }