RIFFMASTER: FRONTEND: add authGuards for login, register and main component

Backend/Spring/.idea/workspace.xml

@@ -11,14 +11,12 @@
   <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/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/node_modules/.package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/node_modules/.package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/package.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/Services/auth.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/Services/auth.service.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/login-page/login-page.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/login-page/login-page.component.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/login-page/login-page.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/login-page/login-page.component.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/register-page/register-page.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/register-page/register-page.component.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/register-page/register-page.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/register-page/register-page.component.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.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/app.component.ts" 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" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -226,7 +224,7 @@
       <workItem from="1686986592460" duration="4445000" />
       <workItem from="1687000973157" duration="670000" />
       <workItem from="1687006511411" duration="604000" />
-      <workItem from="1687011079341" duration="17053000" />
+      <workItem from="1687011079341" duration="18645000" />
     </task>
     <task id="LOCAL-00001" summary="add basic hello world and transfering data to server">
       <created>1679575346987</created>

Frontend/RiffMasterFront/.idea/workspace.xml

@@ -12,6 +12,13 @@
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="TypeScript File" />
+      </list>
+    </option>
+  </component>
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/../.." />
     <option name="RESET_MODE" value="HARD" />
@@ -101,7 +108,7 @@
       <workItem from="1686937499471" duration="1137000" />
       <workItem from="1686989529474" duration="3659000" />
       <workItem from="1687006518226" duration="3557000" />
-      <workItem from="1687011087000" duration="4350000" />
+      <workItem from="1687011087000" duration="7706000" />
     </task>
     <task id="LOCAL-00001" summary="RIFFMASTER: add frontend project">
       <created>1685976235580</created>

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

@@ -0,0 +1,35 @@
+import { Injectable } from "@angular/core";
+import {CanActivate, Router } from "@angular/router";
+import { AuthService } from "./auth.service";
+
+@Injectable({ providedIn: 'root' })
+export class MainAuthGuard implements CanActivate {
+  constructor(private authService: AuthService, private router: Router) {}
+
+  canActivate(): boolean {
+    if (this.authService.isLoggedIn()) {
+      // User is logged in, allow access to the main page
+      return true;
+    } else {
+      // User is not logged in, redirect to the login page
+      this.router.navigate(['/login']);
+      return false;
+    }
+  }
+}
+
+@Injectable({ providedIn: 'root' })
+export class LoginAuthGuard implements CanActivate {
+  constructor(private authService: AuthService, private router: Router) {}
+
+  canActivate(): boolean {
+    if (this.authService.isLoggedIn()) {
+      // User is already logged in, redirect to the main page
+      this.router.navigate(['/main']);
+      return false;
+    } else {
+      // User is not logged in, allow access to the login page
+      return true;
+    }
+  }
+}

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

@@ -18,7 +18,7 @@ export class AuthService {
 
   login(login: string, password: string) {
     console.log("login" + login + " password: " + password)
-    
+
     let loginDto = {
       "login": login,
       "password": password
@@ -69,4 +69,11 @@ export class AuthService {
         console.error('Error making POST request:', error);
       });
   }
+
+
+
+  isLoggedIn(): boolean {
+    return sessionStorage.getItem('jwtToken') !== null;
+  }
+
 }

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

@@ -3,16 +3,19 @@ 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 } from 'src/app/Services/auth-guard.service';
+
 
 const routes: Routes = [
-  { path: 'login', component: LoginPageComponent },
-  { path: 'register', component: RegisterPageComponent },
-  { path: 'main', component: MainPageComponent },
+  { path: 'login', component: LoginPageComponent, canActivate: [LoginAuthGuard] },
+  { path: 'register', component: RegisterPageComponent, canActivate: [LoginAuthGuard] },
+  { path: 'main', component: MainPageComponent, canActivate: [MainAuthGuard] },
   { path: '', redirectTo: '/login', pathMatch: 'full' },
   { path: '**', redirectTo: '/login', pathMatch: 'full' }
 ];
 
 
+
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]

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

@@ -9,7 +9,7 @@
     <a mat-button [routerLink]="'/main'" class="riffmaster-home-button">RiffMaster</a>
     <a mat-button [routerLink]="'/login'">Login</a>
     <a mat-button [routerLink]="'/register'">Sign up</a>
-    <a mat-button >Logout</a>
+    <a mat-button (click)="logout()">Logout</a>
   </div>
 
 </mat-toolbar>

Frontend/RiffMasterFront/src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,18 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'RiffMasterFront';
+
+  constructor(private router: Router) {}
+
+  logout(): void {
+    // Clear session data
+    sessionStorage.removeItem('jwtToken');
+    sessionStorage.removeItem('login');
+    sessionStorage.removeItem('login_id');
+    sessionStorage.removeItem('role');
+
+    // Redirect to the login page
+    this.router.navigate(['/login']);
+  }
+
 }

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

@@ -26,6 +26,8 @@ import { MatRadioChange } from '@angular/material/radio';
 
 import { MatTableModule } from '@angular/material/table';
 
+import { MainAuthGuard, LoginAuthGuard } from 'src/app/Services/auth-guard.service';
+
 
 
 
@@ -53,10 +55,15 @@ import { MatTableModule } from '@angular/material/table';
 
     MatRadioModule,
     MatTableModule,
-  
+
     DatePipe,
   ],
-  providers: [DatePipe ],
+  providers: [
+    DatePipe,
+    MainAuthGuard,
+    LoginAuthGuard
+
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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

@@ -30,6 +30,13 @@ export class MainPageComponent implements OnInit {
     this.getAllSongs();
   }
 
+
+  isModeratorOrAdmin(): boolean {
+    const role = sessionStorage.getItem('role');
+    return role === 'MODERATOR' || role === 'ADMIN';
+  }
+
+
   getAllSongs(): void {
     this.songService.getAllSongs().subscribe(
       (response: Song[]) => {