get user photo

postrify-backend/src/main/java/com/postrify/postrifybackend/controller/UserController.java

@@ -0,0 +1,34 @@
+package com.postrify.postrifybackend.controller;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PutMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import com.postrify.postrifybackend.service.UserService;
+
+@RestController
+@RequestMapping("/api/users")
+public class UserController {
+
+  @Autowired
+  private UserService userService;
+
+  @GetMapping("/{username}/image")
+  public ResponseEntity<String> getUserImage(@PathVariable String username) {
+    String base64Image = userService.getUserImage(username);
+    return ResponseEntity.ok(base64Image);
+  }
+
+  @PutMapping("/{username}/image")
+  public ResponseEntity<String> updateUserImage(
+      @PathVariable String username,
+      @RequestBody String base64Image) {
+    userService.updateUserImage(username, base64Image);
+    return ResponseEntity.ok("User image updated successfully!");
+  }
+}

postrify-backend/src/main/java/com/postrify/postrifybackend/model/User.java

@@ -20,6 +20,9 @@ public class User {
   @Column(nullable = false, unique = true)
   private String email;
 
+  @Column(columnDefinition = "TEXT")
+  private String image;
+
   @OneToMany(mappedBy = "user", cascade = CascadeType.ALL, orphanRemoval = true)
   @JsonIgnore
   private List<Post> posts;
@@ -59,4 +62,13 @@ public List<Post> getPosts() {
   public void setPosts(final List<Post> posts) {
     this.posts = posts;
   }
+
+  public String getImage() {
+    return image;
+  }
+
+  public void setImage(final String image) {
+    this.image = image;
+  }
+
 }

postrify-backend/src/main/java/com/postrify/postrifybackend/service/UserService.java

@@ -29,6 +29,17 @@ public User registerUser(final User user) {
     return userRepository.save(user);
   }
 
+  public String getUserImage(String username) {
+    User user = findByUsername(username);
+    return user.getImage();
+  }
+
+  public void updateUserImage(String username, String base64Image) {
+    User user = findByUsername(username);
+    user.setImage(base64Image);
+    userRepository.save(user);
+  }
+
   public User findByUsername(final String username) {
     return userRepository
         .findByUsername(username)

postrify-frontend/src/app/components/header/header.component.ts

@@ -70,6 +70,11 @@ import { AuthService } from '../../services/auth.service';
       </a>
       <div class="auth-container">
         @if (authService.isAuthenticated()) {
+          @if (userImage) {
+            <img [src]="userImage" alt="User Image" class="user-image" />
+          } @else {
+            <img src="assets/placeholder.jpg" alt="User Image" class="user-image" />
+          }
           <span class="username">{{ authService.getUsername() }}</span>
           <button class="logout-button" (click)="logout()">
             <svg
@@ -146,9 +151,11 @@ import { AuthService } from '../../services/auth.service';
         color: var(--header-text);
         font-weight: 500;
         padding-bottom: 5px;
+        margin-top: 5px;
       }
 
       .logout-button {
+        margin-top: 5px;
         color: var(--header-text);
       }
 
@@ -191,6 +198,19 @@ import { AuthService } from '../../services/auth.service';
           margin-right: 0rem;
         }
       }
+
+      @media (max-width: 400px) {
+        .username {
+          display: none;
+        }
+      }
+
+      .user-image {
+        width: 35px;
+        height: 35px;
+        border-radius: 10%;
+        margin-right: 0.5rem;
+      }
     `,
   ],
 })
@@ -199,6 +219,7 @@ export class HeaderComponent implements OnInit {
   logoSrc = 'assets/logo-light.png';
   isAuthenticated = false;
   username: string | null = null;
+  userImage: string | null = null;
 
   constructor(public authService: AuthService) {}
 
@@ -239,6 +260,9 @@ export class HeaderComponent implements OnInit {
     this.isAuthenticated = this.authService.isAuthenticated();
     if (this.isAuthenticated) {
       this.username = this.authService.getUsername();
+      this.authService.getUserImage().subscribe((image: string) => {
+        this.userImage = image;
+      });
     }
   }
 

postrify-frontend/src/app/services/auth.service.ts

@@ -10,6 +10,7 @@ import { RegisterResponse } from '../models/register-response';
 })
 export class AuthService {
   private apiUrl = environment.apiUrl + '/api/auth';
+  private userApiUrl = environment.apiUrl + '/api/users';
 
   constructor(private http: HttpClient) {}
 
@@ -55,4 +56,15 @@ export class AuthService {
   isAuthenticated(): boolean {
     return !!this.getToken();
   }
+
+  uploadUserImage(base64Image: string) {
+    const username = this.getUsername();
+    return this.http.put(`${this.userApiUrl}/${username}/image`, base64Image).subscribe();
+  }
+
+  getUserImage() {
+    const username = this.getUsername();
+    return this.http.get(`${this.userApiUrl}/${username}/image`, { responseType: 'text' });
+  }
+
 }