chore: update auth logic

- fix top bar user mapping
- fix intercepter

src/CoinyProject.Api/Program.cs

@@ -50,8 +50,9 @@
         corsPolicyBuilder =>
         {
             corsPolicyBuilder.WithOrigins("http://localhost:4200")
-                   .AllowAnyHeader()
-                   .AllowAnyMethod();
+                .AllowAnyHeader()
+                .AllowAnyMethod()
+                .AllowCredentials();
         });
 });
 

src/CoinyProject.Api/appsettings.json

@@ -12,6 +12,6 @@
   "Jwt": {
     "Key": "thisisasecretkeyanditsmorelengthiernow",
     "Issuer": "https://localhost:7218",
-    "Audience": "https://localhost:4200"
+    "Audience": "http://localhost:4200"
   }
 }

src/CoinyProject.Client/src/app/app.routes.ts

@@ -4,19 +4,25 @@ import {AlbumComponent} from "./album/album.component";
 import {LoginComponent} from "./login/login.component";
 import {RegisterComponent} from "./register/register.component";
 import {AlbumFormComponent} from "./album/album-form/album-form.component";
+import {authGuard} from "./guards/auth.guard";
 
 export const routes: Routes = [
   //{ path: '', redirectTo: 'albums', pathMatch: 'full' },
   { path: 'albums', component: AlbumComponent },
   { path: 'info', component: InfoComponent },
   { path: 'login', component: LoginComponent },
   { path: 'register', component: RegisterComponent },
-  { path: 'album-create', component: AlbumFormComponent },
-  { path: 'album-edit', component: AlbumFormComponent },
-  /*{
-    path: 'employees',
-    component: EmployeeComponent,
+  {
+    path: 'album-create',
+    component: AlbumFormComponent,
     canActivate: [authGuard],
-    data: { roles: ['Administrator', 'HRManager', 'ProjectManager'] }
-  },*/
+    data: { roles: ['User'] }
+  },
+  {
+    path: 'album-edit/:id',
+    component: AlbumFormComponent,
+    canActivate: [authGuard],
+    data: { roles: ['User'] }
+  },
+
 ]

src/CoinyProject.Client/src/app/login/login.component.html

@@ -1,8 +1,13 @@
 <!-- login.component.html -->
-<div class="flex justify-center items-center h-screen bg-yellow-100">
+<div class="flex justify-center items-center mt-20 bg-yellow-100">
   <div class="w-full max-w-md bg-white shadow-lg rounded-lg p-8">
     <h2 class="text-3xl font-bold mb-6 text-center text-yellow-600">Login</h2>
 
+    <!-- Error message -->
+    <div *ngIf="errorMessage" class="text-red-600 bg-red-100 p-3 rounded mb-4">
+      {{ errorMessage }}
+    </div>
+
     <form (ngSubmit)="onLoginFormSubmit()" class="space-y-6">
       <!-- Email or Username -->
       <div>

src/CoinyProject.Client/src/app/login/login.component.ts

@@ -4,13 +4,15 @@ import {AuthService} from "../services/auth.service";
 import {FormsModule} from "@angular/forms";
 import {LoginRequestDto} from "./login-request.module";
 import {CookieService} from "ngx-cookie-service";
+import {NgIf} from "@angular/common";
 
 @Component({
   selector: 'app-login',
   standalone: true,
-  imports: [
-    FormsModule
-  ],
+    imports: [
+        FormsModule,
+        NgIf
+    ],
   templateUrl: './login.component.html',
   styleUrl: './login.component.css'
 })

src/CoinyProject.Client/src/app/register/register.component.html

@@ -1,5 +1,5 @@
 <!-- register.component.html -->
-<div class="flex justify-center items-center h-screen bg-yellow-100">
+<div class="flex justify-center items-center mt-12 bg-yellow-100">
   <div class="w-full max-w-md bg-white shadow-lg rounded-lg p-8">
     <h2 class="text-3xl font-bold mb-6 text-center text-yellow-600">Register</h2>
 

src/CoinyProject.Client/src/app/services/auth.service.ts

@@ -27,10 +27,15 @@ export class AuthService {
   }
 
   setUser(user: UserModel): void {
-    this.userSubject.next(user);
     localStorage.setItem('user-name', user.username);
     localStorage.setItem('user-email', user.email);
     localStorage.setItem('user-roles', user.roles.join());
+    this.userSubject.next(user);
+  }
+
+  isTokenExpired(token: string): boolean {
+    const expiry = (JSON.parse(atob(token.split('.')[1]))).exp;
+    return (Math.floor((new Date).getTime() / 1000)) >= expiry;
   }
 
   user(): Observable<UserModel | undefined> {
@@ -52,6 +57,7 @@ export class AuthService {
     return undefined;
   }
 
+
   logout(): void {
     localStorage.clear();
     this.cookieService.delete('Authorization', '/');

src/CoinyProject.Client/src/app/top-bar/top-bar.component.ts

@@ -35,17 +35,18 @@ export class TopBarComponent implements OnInit{
   constructor(protected authService: AuthService, private router: Router) { }
 
   ngOnInit() {
-    this.authService.user().subscribe(user => {
-      if (user) {
-        this.user = user;
-        console.log(`User is logged in as ${user.email}`);
+    this.authService.user().subscribe(() => {
+      this.user = this.authService.getUser();
+      if (this.user) {
+        console.log(`User is logged in as ${this.user.email}`);
+      } else {
+        console.log('User is not logged in');
       }
     });
-    this.user = this.authService.getUser();
   }
 
   onLogout(): void{
-    this.user = undefined;
+    //this.user = undefined;
     this.authService.logout();
     this.router.navigate(['login']);
     console.log('User is logged out');

src/CoinyProject.Client/src/main.ts

@@ -1,6 +1,15 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
+import {provideRouter} from "@angular/router";
+import {routes} from "./app/app.routes";
+import {importProvidersFrom} from "@angular/core";
+import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
+import {AuthInterceptor} from "./app/interceptors/auth.interceptor";
 
-bootstrapApplication(AppComponent, appConfig)
-  .catch((err) => console.error(err));
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideRouter(routes),
+    importProvidersFrom(HttpClientModule),
+    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
+  ]
+}).catch(err => console.error(err));