RIFFMASTER: FRONTEND: add list of roles in the userAdminPanel

Backend/Spring/.idea/workspace.xml

@@ -10,7 +10,28 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="8315de53-8c15-472c-a710-45938463dc02" name="Changes" comment="RIFFMASTER: add frontend files">
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/0.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/0.pack" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/10.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/10.pack" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/11.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/11.pack" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/12.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/12.pack" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/13.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/13.pack" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/15.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/15.pack" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/16.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/16.pack" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/17.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/17.pack" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/18.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/18.pack" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/2.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/2.pack" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/4.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/4.pack" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/5.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/5.pack" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/7.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/7.pack" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/8.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/8.pack" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/9.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/9.pack" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/index.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/index.pack" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/index.pack.old" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/index.pack.old" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/Services/auth-guard.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/Services/auth-guard.service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/app-routing.module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/app-routing.module.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/app.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/app.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/app.module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/app.module.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -222,7 +243,10 @@
       <workItem from="1687039482556" duration="614000" />
       <workItem from="1687040353033" duration="220000" />
       <workItem from="1687069497459" duration="19142000" />
-      <workItem from="1687166331886" duration="8183000" />
+      <workItem from="1687166331886" duration="8791000" />
+      <workItem from="1687186879600" duration="824000" />
+      <workItem from="1687199254970" duration="3353000" />
+      <workItem from="1687253936070" duration="1751000" />
     </task>
     <task id="LOCAL-00001" summary="add basic hello world and transfering data to server">
       <created>1679575346987</created>

Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/controller/AppUserRESTController.java

@@ -46,16 +46,16 @@ public class AppUserRESTController {
     }
     //#################################################################################_DELETE USER
 
-    @RequestMapping(value = "/users/{id}", method = RequestMethod.DELETE)
-    public ResponseEntity<String> deleteUser(@PathVariable("id") Long userId) {
+    @DeleteMapping("/users/{id}")
+    public ResponseEntity<Void> deleteUser(@PathVariable("id") Long userId) {
         // Check if the user exists
         if (userService.getAppUser(userId) == null) {
-            return ResponseEntity.status(HttpStatus.NOT_FOUND).body("User not found");
+            return ResponseEntity.notFound().build();
         }
 
         // Delete the user
         userService.removeAppUser(userId);
-        return ResponseEntity.ok("User deleted successfully");
+        return ResponseEntity.noContent().build();
     }
 
 

Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/controller/SongController.java

@@ -99,7 +99,8 @@ public class SongController {
         if (song.isPresent()) {
             songService.removeSong(id);
             return ResponseEntity.noContent().build();
-        } else {
+        }
+        else {
             return ResponseEntity.notFound().build();
         }
     }

Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/security/CustomInterceptor.java

@@ -100,7 +100,7 @@ public class CustomInterceptor implements HandlerInterceptor {
                     //-------------------------------------------------------check user authority
 
                     if (isAuthorized(endpoint, method, userRoles)) {
-                        System.out.println("preauthorizing reuqst");
+                        System.out.println("\n      authorized successfully! - redirecting to the endpoint");
                         return HandlerInterceptor.super.preHandle(request, response, handler);
                     }
                     else {

Frontend/RiffMasterFront/.angular/cache/16.0.4/babel-webpack/f22cc7d4cb8cebe223f915d1912a86cbbacf2a6d64ee46604a8e2905553ef50b.json

@@ -0,0 +1 @@
+{"ast":null,"code":"import * as i0 from \"@angular/core\";\nclass UsersPageComponent {}\nUsersPageComponent.ɵfac = function UsersPageComponent_Factory(t) {\n  return new (t || UsersPageComponent)();\n};\nUsersPageComponent.ɵcmp = /*@__PURE__*/i0.ɵɵdefineComponent({\n  type: UsersPageComponent,\n  selectors: [[\"app-users-page\"]],\n  decls: 2,\n  vars: 0,\n  template: function UsersPageComponent_Template(rf, ctx) {\n    if (rf & 1) {\n      i0.ɵɵelementStart(0, \"p\");\n      i0.ɵɵtext(1, \"users-page works!\");\n      i0.ɵɵelementEnd();\n    }\n  },\n  styles: [\"\\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZVJvb3QiOiIifQ== */\"]\n});\nexport { UsersPageComponent };","map":{"version":3,"names":["UsersPageComponent","selectors","decls","vars","template","UsersPageComponent_Template","rf","ctx","i0","ɵɵelementStart","ɵɵtext","ɵɵelementEnd"],"sources":["C:\\Users\\Kuba\\Desktop\\studia\\WPFt\\RiffMaster web application\\Frontend\\RiffMasterFront\\src\\app\\users-page\\users-page.component.ts","C:\\Users\\Kuba\\Desktop\\studia\\WPFt\\RiffMaster web application\\Frontend\\RiffMasterFront\\src\\app\\users-page\\users-page.component.html"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-users-page',\n  templateUrl: './users-page.component.html',\n  styleUrls: ['./users-page.component.css']\n})\nexport class UsersPageComponent {\n\n}\n","<p>users-page works!</p>\n"],"mappings":";AAEA,MAKaA,kBAAkB;AAAlBA,kBAAkB,C;mBAAlBA,kBAAkB;AAAA;AAAlBA,kBAAkB,C;QAAlBA,kBAAkB;EAAAC,SAAA;EAAAC,KAAA;EAAAC,IAAA;EAAAC,QAAA,WAAAC,4BAAAC,EAAA,EAAAC,GAAA;IAAA,IAAAD,EAAA;MCP/BE,EAAA,CAAAC,cAAA,QAAG;MAAAD,EAAA,CAAAE,MAAA,wBAAiB;MAAAF,EAAA,CAAAG,YAAA,EAAI;;;;;SDOXX,kBAAkB"},"metadata":{},"sourceType":"module","externalDependencies":[]}

Frontend/RiffMasterFront/.idea/workspace.xml

@@ -6,9 +6,15 @@
   <component name="ChangeListManager">
     <list default="true" id="d91bc08d-d968-4797-8fb3-ef602a37db2a" name="Changes" comment="RIFFMASTER: add frontend business logic (riff, song)">
       <change beforePath="$PROJECT_DIR$/../../Backend/Spring/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/configuration/SecurityConfiguration.java" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/configuration/SecurityConfiguration.java" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/controller/AppUserRESTController.java" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/controller/AppUserRESTController.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/controller/SongController.java" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/controller/SongController.java" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/security/CustomInterceptor.java" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/security/CustomInterceptor.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/target/Spring-1.0-SNAPSHOT/WEB-INF/classes/pl/dmcs/jwoszczyk/controller/AppUserRESTController.class" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/target/Spring-1.0-SNAPSHOT/WEB-INF/classes/pl/dmcs/jwoszczyk/controller/AppUserRESTController.class" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/target/Spring-1.0-SNAPSHOT/WEB-INF/classes/pl/dmcs/jwoszczyk/controller/SongController.class" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/target/Spring-1.0-SNAPSHOT/WEB-INF/classes/pl/dmcs/jwoszczyk/controller/SongController.class" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/target/Spring-1.0-SNAPSHOT/WEB-INF/classes/pl/dmcs/jwoszczyk/security/CustomInterceptor.class" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/target/Spring-1.0-SNAPSHOT/WEB-INF/classes/pl/dmcs/jwoszczyk/security/CustomInterceptor.class" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/target/classes/pl/dmcs/jwoszczyk/controller/AppUserRESTController.class" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/target/classes/pl/dmcs/jwoszczyk/controller/AppUserRESTController.class" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/target/classes/pl/dmcs/jwoszczyk/controller/SongController.class" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/target/classes/pl/dmcs/jwoszczyk/controller/SongController.class" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/target/classes/pl/dmcs/jwoszczyk/security/CustomInterceptor.class" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/target/classes/pl/dmcs/jwoszczyk/security/CustomInterceptor.class" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -42,7 +48,7 @@
     &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
     &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
     &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
-    &quot;last_opened_file_path&quot;: &quot;C:/Users/Kuba/Desktop/studia/WPFt/RiffMaster web application/Frontend/RiffMasterFront/src/app&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/Kuba/Desktop/studia/WPFt/RiffMaster web application/Frontend/RiffMasterFront/src/app/models&quot;,
     &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
     &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
     &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
@@ -56,6 +62,7 @@
 }</component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Users\Kuba\Desktop\studia\WPFt\RiffMaster web application\Frontend\RiffMasterFront\src\app\models" />
       <recent name="C:\Users\Kuba\Desktop\studia\WPFt\RiffMaster web application\Frontend\RiffMasterFront\src\app" />
       <recent name="C:\Users\Quba\Desktop\studia\WPFt\RiffMasterFront\src\app\main" />
     </key>
@@ -116,7 +123,10 @@
       <workItem from="1687039479377" duration="859000" />
       <workItem from="1687040351475" duration="221000" />
       <workItem from="1687069506147" duration="12962000" />
-      <workItem from="1687166414054" duration="6013000" />
+      <workItem from="1687166414054" duration="7288000" />
+      <workItem from="1687186876524" duration="822000" />
+      <workItem from="1687199275652" duration="4286000" />
+      <workItem from="1687253957427" duration="2407000" />
     </task>
     <task id="LOCAL-00001" summary="RIFFMASTER: add frontend project">
       <created>1685976235580</created>

Frontend/RiffMasterFront/src/app/Services/auth-guard.service.ts

@@ -44,3 +44,13 @@ export class RemoveSongButtonGuard implements CanActivate {
     return userRoles.includes('ROLE_MODERATOR') || userRoles.includes('ROLE_ADMIN');
   }
 }
+
+@Injectable({ providedIn: 'root' })
+export class UsersPageAuthGuard implements CanActivate {
+  constructor(private authService: AuthService) {}
+
+  canActivate(): boolean {
+    const userRoles = this.authService.getUserRoles();
+    return userRoles.includes('ROLE_ADMIN');
+  }
+}

Frontend/RiffMasterFront/src/app/Services/user.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { User } from '../models/user';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+  private apiUrl= 'http://localhost:8080';
+
+  constructor(private http: HttpClient) { }
+
+  getAllUsers(): Observable<User[]> {
+    const headers = this.getHeaders();
+    return this.http.get<User[]>(`${this.apiUrl}/users`, { headers });
+  }
+
+  deleteUser(userId: number): Observable<void> {
+    const headers = this.getHeaders();
+    return this.http.delete<void>(`${this.apiUrl}/users/${userId}`, { headers });
+  }
+
+  private getHeaders(): HttpHeaders {
+    const jwtToken = sessionStorage.getItem('jwtToken') || '';
+    return new HttpHeaders()
+      .set('Content-Type', 'application/json')
+      .set('Authorization', jwtToken);
+  }
+}

Frontend/RiffMasterFront/src/app/app-routing.module.ts

@@ -3,14 +3,16 @@ import { RouterModule, Routes } from '@angular/router';
 import {LoginPageComponent} from "./login-page/login-page.component";
 import {MainPageComponent} from "./main-page/main-page.component";
 import {RegisterPageComponent} from "./register-page/register-page.component";
-import { MainAuthGuard, LoginAuthGuard, RemoveSongButtonGuard} from 'src/app/Services/auth-guard.service';
+import { MainAuthGuard, LoginAuthGuard, RemoveSongButtonGuard, UsersPageAuthGuard} from 'src/app/Services/auth-guard.service';
 import { RemoveSongButtonComponent } from './remove-song-button/remove-song-button.component';
-
+import { UsersPageComponent } from './users-page/users-page.component';
 
 const routes: Routes = [
   { path: 'login', component: LoginPageComponent, canActivate: [LoginAuthGuard] },
   { path: 'register', component: RegisterPageComponent, canActivate: [LoginAuthGuard] },
   { path: 'main', component: MainPageComponent, canActivate: [MainAuthGuard] },
+  { path: 'users', component: UsersPageComponent, canActivate: [UsersPageAuthGuard] },
+
   { path: 'remove-song', component: RemoveSongButtonComponent, canActivate: [RemoveSongButtonGuard] },
   { path: '', redirectTo: '/login', pathMatch: 'full' },
   { path: '**', redirectTo: '/login', pathMatch: 'full' }

Frontend/RiffMasterFront/src/app/app.component.html

@@ -7,6 +7,7 @@
 
   <div>
     <a mat-button [routerLink]="'/main'" class="riffmaster-home-button">RiffMaster</a>
+    <a mat-button *ngIf="isLoggedIn()" [routerLink]="'/users'">Users</a>
     <a mat-button *ngIf="!isLoggedIn()" [routerLink]="'/login'">Login</a>
     <a mat-button *ngIf="!isLoggedIn()" [routerLink]="'/register'">Sign up</a>
     <a mat-button *ngIf="isLoggedIn()" (click)="logout()">Logout</a>

Frontend/RiffMasterFront/src/app/app.module.ts

@@ -26,8 +26,9 @@ import { MatRadioChange } from '@angular/material/radio';
 
 import { MatTableModule } from '@angular/material/table';
 
-import { MainAuthGuard, LoginAuthGuard, RemoveSongButtonGuard} from 'src/app/Services/auth-guard.service';
+import { MainAuthGuard, LoginAuthGuard, RemoveSongButtonGuard, UsersPageAuthGuard} from 'src/app/Services/auth-guard.service';
 import { RemoveSongButtonComponent } from './remove-song-button/remove-song-button.component';
+import { UsersPageComponent } from './users-page/users-page.component';
 
 
 
@@ -38,7 +39,8 @@ import { RemoveSongButtonComponent } from './remove-song-button/remove-song-butt
     LoginPageComponent,
     MainPageComponent,
     RegisterPageComponent,
-    RemoveSongButtonComponent
+    RemoveSongButtonComponent,
+    UsersPageComponent
   ],
   imports: [
     BrowserModule,
@@ -64,7 +66,8 @@ import { RemoveSongButtonComponent } from './remove-song-button/remove-song-butt
     DatePipe,
     MainAuthGuard,
     LoginAuthGuard,
-    RemoveSongButtonGuard
+    RemoveSongButtonGuard,
+    UsersPageAuthGuard
   ],
   bootstrap: [AppComponent]
 })

Frontend/RiffMasterFront/src/app/models/role.ts

@@ -0,0 +1,10 @@
+export class Role {
+  id: number;
+  roleName: string;
+
+
+  constructor(id: number, roleName: string) {
+    this.id = id;
+    this.roleName = roleName;
+  }
+}

Frontend/RiffMasterFront/src/app/models/user.ts

@@ -0,0 +1,21 @@
+import { Role } from "./role";
+
+export class User {
+  id: number;
+  email: string;
+  enabled: number;
+  firstName: number;
+  lastName: string;
+  login: string;
+  appUserRole: Role[];
+
+  constructor(id: number, email: string, enabled: number, firstName: number, lastName: string, login: string, appUserRole: Role[]) {
+    this.id = id;
+    this.email = email;
+    this.enabled = enabled;
+    this.firstName = firstName;
+    this.lastName = lastName;
+    this.login = login;
+    this.appUserRole = appUserRole;
+  }
+}

Frontend/RiffMasterFront/src/app/users-page/users-page.component.html

@@ -0,0 +1,73 @@
+<mat-card class="user-list-card">
+  <mat-card-header>
+    <mat-card-title class="card-title">User List</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <mat-form-field appearance="fill">
+      <mat-label>Search users</mat-label>
+      <input matInput type="text" placeholder="Search users" [(ngModel)]="searchQuery">
+    </mat-form-field>
+    <table mat-table [dataSource]="users">
+      <!-- ID Column -->
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef>ID</th>
+        <td mat-cell *matCellDef="let user">{{ user.id }}</td>
+      </ng-container>
+
+      <!-- Email Column -->
+      <ng-container matColumnDef="email">
+        <th mat-header-cell *matHeaderCellDef>Email</th>
+        <td mat-cell *matCellDef="let user">{{ user.email }}</td>
+      </ng-container>
+
+      <!-- Enabled Column -->
+      <ng-container matColumnDef="enabled">
+        <th mat-header-cell *matHeaderCellDef>Enabled</th>
+        <td mat-cell *matCellDef="let user">{{ user.enabled }}</td>
+      </ng-container>
+
+      <!-- First Name Column -->
+      <ng-container matColumnDef="firstName">
+        <th mat-header-cell *matHeaderCellDef>First Name</th>
+        <td mat-cell *matCellDef="let user">{{ user.firstName }}</td>
+      </ng-container>
+
+      <!-- Last Name Column -->
+      <ng-container matColumnDef="lastName">
+        <th mat-header-cell *matHeaderCellDef>Last Name</th>
+        <td mat-cell *matCellDef="let user">{{ user.lastName }}</td>
+      </ng-container>
+
+      <!-- Login Column -->
+      <ng-container matColumnDef="login">
+        <th mat-header-cell *matHeaderCellDef>Login</th>
+        <td mat-cell *matCellDef="let user">{{ user.login }}</td>
+      </ng-container>
+
+      <!-- Roles Column -->
+      <ng-container matColumnDef="roles">
+        <th mat-header-cell *matHeaderCellDef>Roles</th>
+        <td mat-cell *matCellDef="let user">
+          <ng-container *ngIf="user.appUserRole && user.appUserRole.length > 0">
+            <span *ngFor="let role of user.appUserRole">{{ role.roleName }} </span>
+          </ng-container>
+        </td>
+      </ng-container>
+
+
+      <!-- Actions Column -->
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef>Actions</th>
+        <td mat-cell *matCellDef="let user">
+          <button mat-icon-button color="warn" (click)="deleteUser(user)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <!-- Table Rows -->
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let user; columns: displayedColumns"></tr>
+    </table>
+  </mat-card-content>
+</mat-card>

Frontend/RiffMasterFront/src/app/users-page/users-page.component.ts

@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+import { User } from '../models/user';
+import { UserService } from '../Services/user.service';
+
+@Component({
+  selector: 'app-users-page',
+  templateUrl: './users-page.component.html',
+  styleUrls: ['./users-page.component.css']
+})
+export class UsersPageComponent {
+  users: User[] = [];
+  searchQuery: string = '';
+  displayedColumns: string[] = ['id', 'email', 'enabled', 'firstName', 'lastName', 'login', 'roles', 'actions'];
+
+
+
+  constructor(private userService: UserService) {}
+
+  ngOnInit() {
+    this.getAllUsers();
+  }
+
+  getAllUsers() {
+    this.userService.getAllUsers().subscribe(
+      (users: User[]) => {
+        this.users = users;
+      },
+      (error) => {
+        console.error('Error retrieving users:', error);
+      }
+    );
+  }
+
+  deleteUser(user: User) {
+    if (!confirm(`Are you sure you want to delete the user '${user.login}'?`)) {
+      return;
+    }
+    console.log('user.id = ' + user.id)
+    this.userService.deleteUser(user.id).subscribe(
+      () => {
+        this.getAllUsers();
+      },
+      (error) => {
+        console.error('Error deleting user:', error);
+      }
+    );
+  }
+
+  displayUserInfo(user: User | null): void {
+    if (user) {
+      // Handle displaying user information
+    } else {
+      // Handle the case when no user is selected
+    }
+  }
+  // filterUsers() {
+  //   this.filteredUsers = this.users.filter(user =>
+  //     user.login.toLowerCase().includes(this.searchQuery.toLowerCase())
+  //   );
+  // }
+}