feat: update link to user profile

Author: HlibPavlyk

src/CoinyProject.Api/Controllers/UserController.cs

@@ -38,5 +38,19 @@ public async Task<IActionResult> GetUser([FromQuery] Guid? id)
             return NotFound(e.Message);
         }
     }
+    
+    [HttpGet("{id}/name")]
+    public async Task<IActionResult> GetUserName([FromRoute]Guid id)
+    {
+        try
+        {
+            var userName = await _userService.GetUserNameAsync(id);
+            return Ok(userName);
+        }
+        catch (NotFoundException e)
+        {
+            return NotFound(e.Message);
+        }
+    }
 
 }

src/CoinyProject.Application/Abstractions/Services/IUserService.cs

@@ -6,4 +6,5 @@ public interface IUserService
 {
     Task<UserStatsGetDto> GetUserStatsAsync(Guid userId);
     Task<UserStatsGetDto> GetCurrentUserStatsAsync();
+    Task<UserNameGetDto> GetUserNameAsync(Guid userId);
 }

src/CoinyProject.Application/Dto/Auth/LoginResponseDto.cs

@@ -2,6 +2,7 @@
 
 public sealed class LoginResponseDto
 {
+    public Guid Id { get; set; }
     public string Username { get; set; }
     public string Email { get; set; }
     public string Token { get; set; }

src/CoinyProject.Application/Services/AuthService.cs

@@ -47,8 +47,9 @@ public async Task<LoginResponseDto> LoginAsync(LoginRequestDto login)
 
                     return new LoginResponseDto
                     {
+                        Id = identityUser.Id,
                         Username = identityUser.UserName,
-                        Email = login.EmailOrUsername,
+                        Email = identityUser.Email,
                         Roles = roles.ToList(),
                         Token = jwtToken
                     };

src/CoinyProject.Application/Services/UserService.cs

@@ -40,4 +40,13 @@ public async Task<UserStatsGetDto> GetCurrentUserStatsAsync()
 
         return await GetUserStatsAsync(currentUserId);
     }
+
+    public async Task<UserNameGetDto> GetUserNameAsync(Guid userId)
+    {
+        var album = await _unitOfWork.Users.GetByIdAsync(userId);
+        if (album == null)
+            throw new NotFoundException("Album not found.");
+            
+        return _mapper.Map<UserNameGetDto>(album);
+    }
 }

src/CoinyProject.Client/src/app/album/album-view/album-view.component.html

@@ -110,12 +110,18 @@ <h2 class="text-lg font-bold mb-2 truncate text-yellow-600">{{ album.name }}</h2
         <!-- Author section -->
         <div class="flex items-center mb-4">
           <span class="font-bold text-yellow-600">Author: </span>
-          <a [routerLink]="['/profile', album.author.id]" class="ml-2 text-yellow-600 hover:underline">
+          <!-- Conditional RouterLink -->
+          <a
+            [routerLink]="user?.id === album.author.id ? ['/profile'] : ['/profile', album.author.id]"
+            [queryParams]="user?.id === album.author.id ? { my: true } : null"
+            class="ml-2 text-yellow-600 hover:text-yellow-500 transition duration-300">
             {{ album.author.username }}
           </a>
         </div>
-      </div>
 
-    </div>
+
+
+      </div>
   </div>
 </div>
+</div>

src/CoinyProject.Client/src/app/album/album-view/album-view.component.ts

@@ -4,6 +4,8 @@ import {AlbumViewGetDto} from "./album-view-get.model";
 import {DatePipe, NgClass, NgForOf} from "@angular/common";
 import {FormsModule} from "@angular/forms";
 import {ActivatedRoute, RouterLink} from "@angular/router";
+import {UserModel} from "../../services/user.model";
+import {AuthService} from "../../services/auth.service";
 
 @Component({
   selector: 'app-album-view',
@@ -30,9 +32,14 @@ export class AlbumViewComponent implements OnInit {
   userId: string | null = null;
   isCurrentUser: boolean = false;
 
-  constructor(private albumService: AlbumService, private route: ActivatedRoute) {}
+  user: UserModel | undefined;
+
+  constructor(private authService:AuthService, private albumService: AlbumService, private route: ActivatedRoute) {}
 
   ngOnInit(): void {
+    this.authService.user().subscribe(user => {
+      this.user = user;
+    });
     // Отримання параметрів із маршруту або queryParams
     this.route.params.subscribe(params => {
       this.userId = params['id'] || null; // якщо передається userId

src/CoinyProject.Client/src/app/login/login-response.module.ts

@@ -1,4 +1,5 @@
 export interface LoginResponseModel{
+  id: string;
   username: string;
   email: string;
   token: string;

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

@@ -33,6 +33,7 @@ export class LoginComponent  {
           this.cookieService.set('Authorization', `Bearer  ${response.token}`,
             undefined, '/', undefined, true, 'Strict');
           this.authService.setUser({
+            id: response.id,
             username: response.username,
             email: response.email,
             roles: response.roles

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

@@ -54,6 +54,7 @@ export class RegisterComponent {
         this.cookieService.set('Authorization', `Bearer  ${response.token}`,
         undefined, '/', undefined, true, 'Strict');
         this.authService.setUser({
+          id: response.id,
           username: response.username,
           email: response.email,
           roles: response.roles

src/CoinyProject.Client/src/app/section-bar/section-bar.component.html

@@ -1,16 +1,44 @@
 <div class="container mx-auto px-4 py-8">
   <!-- Main Content Wrapper -->
-      <div class="bg-pastel-red-light shadow-md rounded-lg p-4">
-        <h3 class="text-lg font-bold mb-4">Колекціонування</h3>
-        <h4 class="text-md font-bold mb-2">Нумізматика</h4>
-        <ul class="space-y-2">
-          <li><a href="#" class="text-blue-500 hover:underline">Золоті, платинові і паладієві монети</a></li>
-          <li><a href="#" class="text-blue-500 hover:underline">Монети Київської Русі</a></li>
-          <li><a href="#" class="text-blue-500 hover:underline">Монети Російської Імперії</a></li>
-          <li><a href="#" class="text-blue-500 hover:underline">Монети Польщі</a></li>
-          <li><a href="#" class="text-blue-500 hover:underline">Монети України</a></li>
-          <li><a href="#" class="text-blue-500 hover:underline">Монети незалежних Держав Азії</a></li>
-          <li><a href="#" class="text-blue-500 hover:underline">Монети античних держав</a></li>
-        </ul>
-      </div>
-    </div>
+  <div class="bg-yellow-50 shadow-lg rounded-lg p-6">
+    <h3 class="text-xl font-bold mb-6 text-yellow-600">Колекціонування</h3>
+    <h4 class="text-lg font-bold mb-4 text-yellow-600">Нумізматика</h4>
+    <ul class="space-y-4">
+      <li>
+        <a href="#" class="text-gray-700 font-semibold transition-colors duration-300 hover:text-white hover:bg-yellow-500 rounded-md px-3 py-2 inline-block">
+          Золоті, платинові і паладієві монети
+        </a>
+      </li>
+      <li>
+        <a href="#" class="text-gray-700 font-semibold transition-colors duration-300 hover:text-white hover:bg-yellow-500 rounded-md px-3 py-2 inline-block">
+          Монети Київської Русі
+        </a>
+      </li>
+      <li>
+        <a href="#" class="text-gray-700 font-semibold transition-colors duration-300 hover:text-white hover:bg-yellow-500 rounded-md px-3 py-2 inline-block">
+          Монети Російської Імперії
+        </a>
+      </li>
+      <li>
+        <a href="#" class="text-gray-700 font-semibold transition-colors duration-300 hover:text-white hover:bg-yellow-500 rounded-md px-3 py-2 inline-block">
+          Монети Польщі
+        </a>
+      </li>
+      <li>
+        <a href="#" class="text-gray-700 font-semibold transition-colors duration-300 hover:text-white hover:bg-yellow-500 rounded-md px-3 py-2 inline-block">
+          Монети України
+        </a>
+      </li>
+      <li>
+        <a href="#" class="text-gray-700 font-semibold transition-colors duration-300 hover:text-white hover:bg-yellow-500 rounded-md px-3 py-2 inline-block">
+          Монети незалежних Держав Азії
+        </a>
+      </li>
+      <li>
+        <a href="#" class="text-gray-700 font-semibold transition-colors duration-300 hover:text-white hover:bg-yellow-500 rounded-md px-3 py-2 inline-block">
+          Монети античних держав
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>

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

@@ -4,7 +4,7 @@ import {BehaviorSubject, Observable} from "rxjs";
 import {RegisterDto} from "../register/register.module";
 import {LoginRequestDto} from "../login/login-request.module";
 import {CookieService} from "ngx-cookie-service";
-import {UserModel} from "./user.module";
+import {UserModel} from "./user.model";
 import {LoginResponseModel} from "../login/login-response.module";
 
 @Injectable({
@@ -27,6 +27,7 @@ export class AuthService {
   }
 
   setUser(user: UserModel): void {
+    localStorage.setItem('user-id', user.id);
     localStorage.setItem('user-name', user.username);
     localStorage.setItem('user-email', user.email);
     localStorage.setItem('user-roles', user.roles.join());
@@ -43,12 +44,14 @@ export class AuthService {
   }
 
   getUser(): UserModel | undefined {
+    const id = localStorage.getItem('user-id');
     const username = localStorage.getItem('user-name');
     const email = localStorage.getItem('user-email');
     const roles = localStorage.getItem('user-roles');
 
-    if (username && email && roles) {
+    if (id && username && email && roles) {
       return {
+        id,
         username,
         email,
         roles: roles.split(',')

src/CoinyProject.Client/src/app/services/user.module.ts src/CoinyProject.Client/src/app/services/user.model.ts

@@ -1,4 +1,5 @@
 export interface UserModel{
+  id: string;
   username: string;
   email: string;
   roles: string[];

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

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import {Observable} from "rxjs";
 import {UserStatsModel} from "../profile/stats/stats.module";
 import {HttpClient, HttpParams} from "@angular/common/http";
+import {UsernameModel} from "./username.model";
 
 @Injectable({
   providedIn: 'root'
@@ -23,4 +24,7 @@ export class UserService {
     return this.http.get<UserStatsModel>(`${this.baseUrl}/stats`, {params} ); // Adjust the endpoint accordingly
   }
 
+  getUsernameById(id: string): Observable<UsernameModel> {
+    return this.http.get<UsernameModel>(`${this.baseUrl}/${id}/name`);
+  }
 }

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

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {NgClass, NgForOf, NgIf, NgOptimizedImage} from "@angular/common";
 import {Router, RouterLink} from "@angular/router";
-import {UserModel} from "../services/user.module";
+import {UserModel} from "../services/user.model";
 import {AuthService} from "../services/auth.service";
 
 @Component({

src/CoinyProject.Client/src/main.ts

@@ -10,6 +10,6 @@ bootstrapApplication(AppComponent, {
   providers: [
     provideRouter(routes),
     importProvidersFrom(HttpClientModule),
-    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
+    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
   ]
 }).catch(err => console.error(err));