Changeset c1d2f07

Timestamp:

01/27/26 15:56:00 (6 months ago)

Author:

Dimitar Arsov <dimitararsov04@…>

Branches:

main

Children:

6de2873

Parents:

77e572b (diff), 16aed54 (diff)
Note: this is a merge changeset, the changes displayed below correspond to the merge itself.
Use the (diff) links above to see all the changes relative to each parent.

Message:

Merge branch 'main' into follow-user

Files:

• finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/AuthController.java (modified) (6 diffs)
• finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/GlobalExceptionHandler.java (modified) (1 diff)
• finkwave/src/main/java/com/ukim/finki/develop/finkwave/exceptions/AuthException.java (added)
• finkwave/src/main/java/com/ukim/finki/develop/finkwave/exceptions/InvalidCredentialsException.java (added)
• finkwave/src/main/java/com/ukim/finki/develop/finkwave/exceptions/InvalidFileException.java (added)
• finkwave/src/main/java/com/ukim/finki/develop/finkwave/exceptions/InvalidTokenException.java (added)
• finkwave/src/main/java/com/ukim/finki/develop/finkwave/exceptions/UnauthenticatedException.java (added)
• finkwave/src/main/java/com/ukim/finki/develop/finkwave/exceptions/UserAlreadyExistsException.java (added)
• finkwave/src/main/java/com/ukim/finki/develop/finkwave/exceptions/UserNotFoundException.java (added)
• finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/RefreshToken.java (modified) (1 diff)
• finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/AuthService.java (modified) (9 diffs)
• finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/RefreshTokenService.java (modified) (3 diffs)
• frontend/package-lock.json (modified) (3 diffs)
• frontend/package.json (modified) (1 diff)
• frontend/src/App.tsx (modified) (2 diffs)
• frontend/src/api/axiosInstance.ts (modified) (1 diff)
• frontend/src/pages/Login.tsx (modified) (2 diffs)
• frontend/src/pages/Nav.tsx (modified) (2 diffs)
• frontend/src/pages/Register.tsx (modified) (6 diffs)

finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/AuthController.java

@@ -1 +1 @@
 package com.ukim.finki.develop.finkwave.controller;
 
+import java.io.IOException;
 import java.util.Map;
 
-import com.ukim.finki.develop.finkwave.config.AuthProperties;
-import org.springframework.http.HttpStatus;
 import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
@@ -10 +9 @@
 import org.springframework.security.core.context.SecurityContextHolder;
 import org.springframework.security.core.userdetails.UserDetails;
-import org.springframework.web.bind.annotation.*;
-import org.springframework.web.server.ResponseStatusException;
+import org.springframework.web.bind.annotation.CookieValue;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.ModelAttribute;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
 
+import com.ukim.finki.develop.finkwave.config.AuthProperties;
+import com.ukim.finki.develop.finkwave.exceptions.InvalidTokenException;
+import com.ukim.finki.develop.finkwave.exceptions.UnauthenticatedException;
 import com.ukim.finki.develop.finkwave.model.dto.AuthRequestDto;
 import com.ukim.finki.develop.finkwave.model.dto.LoginRequestDto;
@@ -31 +38 @@
     public ResponseEntity<Map<String, Object>> register(
             @ModelAttribute AuthRequestDto authRequestDto,
-            HttpServletResponse httpServletResponse){
-        try {
-            UserResponseDto userResponseDto = authService.registerAndLogIn(httpServletResponse, authRequestDto);
-            return ResponseEntity.ok(Map.of(
-                    "user", userResponseDto,
-                    "tokenExpiresIn", authProperties.getAccessTokenMaxAge()
-            ));
-        } catch (Exception e){
-            return ResponseEntity
-                    .status(HttpStatus.BAD_REQUEST)
-                    .body(Map.of("error", e.getMessage()));
-        }
+            HttpServletResponse httpServletResponse) throws IOException {
+        UserResponseDto userResponseDto = authService.registerAndLogIn(httpServletResponse, authRequestDto);
+        return ResponseEntity.ok(Map.of(
+                "user", userResponseDto,
+                "tokenExpiresIn", authProperties.getAccessTokenMaxAge()
+        ));
     }
 
@@ -48 +49 @@
     public ResponseEntity<Map<String, Object>> login(
             @RequestBody LoginRequestDto loginRequestDto,
-            HttpServletResponse httpServletResponse){
-        try {
-            UserResponseDto userResponseDto = authService.login(httpServletResponse, loginRequestDto);
-            return ResponseEntity.ok(Map.of(
-                    "user", userResponseDto,
-                    "tokenExpiresIn", authProperties.getAccessTokenMaxAge()
-                    )
-            );
-        } catch (Exception e){
-            return ResponseEntity
-                    .status(HttpStatus.BAD_REQUEST)
-                    .body(Map.of("error", e.getMessage()));
-        }
+            HttpServletResponse httpServletResponse) {
+        UserResponseDto userResponseDto = authService.login(httpServletResponse, loginRequestDto);
+        return ResponseEntity.ok(Map.of(
+                "user", userResponseDto,
+                "tokenExpiresIn", authProperties.getAccessTokenMaxAge()
+        ));
     }
-
 
     @PostMapping("/refresh")
     public ResponseEntity<Map<String, Integer>> refresh(
             HttpServletResponse httpServletResponse,
-            @CookieValue(name = "refreshToken", required = false) String refreshToken){
-        if (refreshToken == null){
-            throw new ResponseStatusException(HttpStatus.UNAUTHORIZED, "No credentials");
+            @CookieValue(name = "refreshToken", required = false) String refreshToken) {
+        if (refreshToken == null) {
+            throw new InvalidTokenException("No refresh token provided.");
         }
         authService.refreshAccessTokenAndAddCookie(httpServletResponse, refreshToken);
@@ -80 +73 @@
     public ResponseEntity<Map<String, String>> logout(
             HttpServletResponse httpServletResponse,
-            @CookieValue(name = "refreshToken", required = false) String refreshToken){
+            @CookieValue(name = "refreshToken", required = false) String refreshToken) {
         authService.clearCookies(httpServletResponse, refreshToken);
         SecurityContextHolder.clearContext();
@@ -87 +80 @@
 
     @GetMapping("/user")
-    public ResponseEntity<Map<String, Object>> getUser(){
+    public ResponseEntity<Map<String, Object>> getUser() {
         Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
-        if (authentication == null || !authentication.isAuthenticated()){
-            throw new ResponseStatusException(HttpStatus.UNAUTHORIZED, "Not authenticated");
+        if (authentication == null || !authentication.isAuthenticated()) {
+            throw new UnauthenticatedException();
         }
         Object principal = authentication.getPrincipal();

finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/GlobalExceptionHandler.java

@@ -1 +1 @@
 package com.ukim.finki.develop.finkwave.controller;
 
+import java.util.Map;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.userdetails.UsernameNotFoundException;
 import org.springframework.web.bind.annotation.ExceptionHandler;
 import org.springframework.web.bind.annotation.RestControllerAdvice;
+import org.springframework.web.multipart.MaxUploadSizeExceededException;
+import org.springframework.web.server.ResponseStatusException;
 
-import java.util.HashMap;
-import java.util.Map;
+import com.ukim.finki.develop.finkwave.exceptions.AuthException;
 
 @RestControllerAdvice
 public class GlobalExceptionHandler {
+    private static final Logger logger = LoggerFactory.getLogger(GlobalExceptionHandler.class);
 
-    @ExceptionHandler(RuntimeException.class)
-    public ResponseEntity<Map<String, String>> handleRuntimeException(RuntimeException ex) {
-        Map<String, String> errorMap = new HashMap<>();
-        errorMap.put("error", ex.getMessage());
+    @ExceptionHandler(AuthException.class)
+    public ResponseEntity<Map<String, String>> handleAuthException(AuthException ex) {
+        return ResponseEntity
+                .status(ex.getStatus())
+                .body(Map.of("error", ex.getMessage()));
+    }
 
-        return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(errorMap);
+    @ExceptionHandler(UsernameNotFoundException.class)
+    public ResponseEntity<Map<String, String>> handleUsernameNotFound(UsernameNotFoundException ex) {
+        return ResponseEntity
+                .status(HttpStatus.UNAUTHORIZED)
+                .body(Map.of("error", "Invalid credentials."));
+    }
+
+    @ExceptionHandler(ResponseStatusException.class)
+    public ResponseEntity<Map<String, String>> handleResponseStatusException(ResponseStatusException ex) {
+        logger.error("Response status error: {}", ex.getMessage());
+        return ResponseEntity
+                .status(ex.getStatusCode())
+                .body(Map.of("error", ex.getReason() != null ? ex.getReason() : "An error occurred."));
+    }
+
+    @ExceptionHandler(MaxUploadSizeExceededException.class)
+    public ResponseEntity<Map<String, Object>> handleMaxSize(MaxUploadSizeExceededException ex) {
+        logger.error("Max upload size error: {}", ex.getMessage());
+        return ResponseEntity
+                .status(HttpStatus.PAYLOAD_TOO_LARGE)
+                .body(Map.of(
+                        "error", "File too large.",
+                        "maxSize", "2MB"
+                ));
+    }
+
+    @ExceptionHandler(Exception.class)
+    public ResponseEntity<Map<String, String>> handleGenericException(Exception ex) {
+        logger.error("Unexpected error occurred: {}", ex.getMessage());
+        return ResponseEntity
+                .status(HttpStatus.INTERNAL_SERVER_ERROR)
+                .body(Map.of("error", "An unexpected error occurred."));
     }
 }

finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/RefreshToken.java

@@ -9 +9 @@
 @Entity
 @Getter @Setter
+@Table(name = "refresh_token")
 public class RefreshToken {
     @Id

finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/AuthService.java

@@ -1 +1 @@
 package com.ukim.finki.develop.finkwave.service;
+
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.nio.file.Paths;
+import java.util.UUID;
 
 import org.springframework.security.core.Authentication;
@@ -5 +11 @@
 import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.stereotype.Service;
+import org.springframework.web.multipart.MultipartFile;
 
 import com.ukim.finki.develop.finkwave.config.AuthProperties;
-import com.ukim.finki.develop.finkwave.model.dto.AuthRequestDto;
-import com.ukim.finki.develop.finkwave.model.dto.LoginRequestDto;
-import com.ukim.finki.develop.finkwave.model.dto.UserResponseDto;
+import com.ukim.finki.develop.finkwave.exceptions.InvalidCredentialsException;
+import com.ukim.finki.develop.finkwave.exceptions.InvalidFileException;
+import com.ukim.finki.develop.finkwave.exceptions.UnauthenticatedException;
+import com.ukim.finki.develop.finkwave.exceptions.UserAlreadyExistsException;
+import com.ukim.finki.develop.finkwave.exceptions.UserNotFoundException;
 import com.ukim.finki.develop.finkwave.model.NonAdminUser;
 import com.ukim.finki.develop.finkwave.model.RefreshToken;
 import com.ukim.finki.develop.finkwave.model.Role;
 import com.ukim.finki.develop.finkwave.model.User;
+import com.ukim.finki.develop.finkwave.model.dto.AuthRequestDto;
+import com.ukim.finki.develop.finkwave.model.dto.LoginRequestDto;
+import com.ukim.finki.develop.finkwave.model.dto.UserResponseDto;
 import com.ukim.finki.develop.finkwave.repository.NonAdminUserRepository;
 import com.ukim.finki.develop.finkwave.repository.UserRepository;
@@ -21 +33 @@
 import jakarta.transaction.Transactional;
 import lombok.RequiredArgsConstructor;
-import org.springframework.web.multipart.MultipartFile;
-
-import java.io.IOException;
-import java.nio.file.Files;
-import java.nio.file.Path;
-import java.nio.file.Paths;
-import java.util.UUID;
 
 @Service
@@ -39 +44 @@
     private final AuthProperties authProperties;
 
+    private static final long MAX_FILE_SIZE = 2_000_000;
 
     @Transactional
@@ -44 +50 @@
     throws IOException {
         if (userRepository.findByUsername(authRequestDto.username()).isPresent()){
-            throw new RuntimeException("User already exists");
+            throw new UserAlreadyExistsException();
         }
         User user = createNonAdminUser(authRequestDto);
@@ -52 +58 @@
     public UserResponseDto login(HttpServletResponse response, LoginRequestDto loginRequestDto){
         User user = userRepository.findByUsername(loginRequestDto.username())
-                .orElseThrow(() -> new RuntimeException("Invalid credentials"));
+                .orElseThrow(InvalidCredentialsException::new);
 
         if (!passwordEncoder.matches(loginRequestDto.password(), user.getPassword())){
-            throw new RuntimeException("Invalid credentials");
+            throw new InvalidCredentialsException();
         }
 
@@ -74 +80 @@
     public UserResponseDto getUserDtoByUsername(String username){
         User user = userRepository.findByUsername(username)
-                .orElseThrow(() -> new RuntimeException("Invalid credentials"));
+                .orElseThrow(UserNotFoundException::new);
 
         return userResponseFromUser(user);
@@ -103 +109 @@
         Authentication authentication= SecurityContextHolder.getContext().getAuthentication();
         if (authentication == null || !authentication.isAuthenticated()) {
-            throw new RuntimeException("User not authenticated");
+            throw new UnauthenticatedException();
         }
 
         String username=authentication.getName();
 
-
         return userRepository.findByUsername(username).map(User::getId)
-                .orElseThrow(()->new RuntimeException("User not found"));
+                .orElseThrow(UserNotFoundException::new);
     }
 
@@ -124 +129 @@
 
         MultipartFile profilePhoto = authRequestDto.profilePhoto();
-        if (profilePhoto != null) {
-            if (profilePhoto.getContentType() != null && !profilePhoto.getContentType().startsWith("image/"))
-                throw new IllegalArgumentException("Invalid fyle type");
+        if (profilePhoto != null && !profilePhoto.isEmpty()) {
+            String contentType = profilePhoto.getContentType();
+            if (contentType == null || !contentType.startsWith("image/")) {
+                throw InvalidFileException.invalidType();
+            }
 
-            if (profilePhoto.getSize() > 5_000_000) {
-                throw new IllegalArgumentException(("File too large."));
+            if (profilePhoto.getSize() > MAX_FILE_SIZE) {
+                throw InvalidFileException.tooLarge(MAX_FILE_SIZE);
             }
 

finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/RefreshTokenService.java

@@ -1 +1 @@
 package com.ukim.finki.develop.finkwave.service;
-
-import com.ukim.finki.develop.finkwave.config.AuthProperties;
-import com.ukim.finki.develop.finkwave.model.RefreshToken;
-import com.ukim.finki.develop.finkwave.model.User;
-import com.ukim.finki.develop.finkwave.repository.RefreshTokenRepository;
-import lombok.RequiredArgsConstructor;
-import org.springframework.stereotype.Service;
 
 import java.time.Instant;
@@ -12 +5 @@
 import java.util.Optional;
 import java.util.UUID;
+
+import org.springframework.stereotype.Service;
+
+import com.ukim.finki.develop.finkwave.config.AuthProperties;
+import com.ukim.finki.develop.finkwave.exceptions.InvalidTokenException;
+import com.ukim.finki.develop.finkwave.model.RefreshToken;
+import com.ukim.finki.develop.finkwave.model.User;
+import com.ukim.finki.develop.finkwave.repository.RefreshTokenRepository;
+
+import lombok.RequiredArgsConstructor;
 
 @Service
@@ -32 +35 @@
 
     public RefreshToken validateRefreshToken(String token){
-        RefreshToken refreshToken = findByToken(token).orElseThrow(() -> new RuntimeException("Invalid token"));
-        if (refreshToken.isRevoked() || refreshToken.getExpiresAt().isBefore(Instant.now())){
-            throw new RuntimeException("Invalid refresh token");
+        RefreshToken refreshToken = findByToken(token)
+                .orElseThrow(() -> new InvalidTokenException("Invalid refresh token."));
+        if (refreshToken.isRevoked()){
+            throw new InvalidTokenException("Refresh token has been revoked.");
+        }
+        if (refreshToken.getExpiresAt().isBefore(Instant.now())){
+            throw new InvalidTokenException("Refresh token has expired.");
         }
         return refreshToken;

frontend/package-lock.json

@@ -15 +15 @@
                                 "react-dom": "^19.2.0",
                                 "react-router-dom": "^7.13.0",
+                                "react-toastify": "^11.0.5",
                                 "tailwindcss": "^4.1.18"
                         },
@@ -2152 +2153 @@
                         "funding": {
                                 "url": "https://github.com/chalk/chalk?sponsor=1"
+                        }
+                },
+                "node_modules/clsx": {
+                        "version": "2.1.1",
+                        "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+                        "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+                        "license": "MIT",
+                        "engines": {
+                                "node": ">=6"
                         }
                 },
@@ -3683 +3693 @@
                         }
                 },
+                "node_modules/react-toastify": {
+                        "version": "11.0.5",
+                        "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
+                        "integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
+                        "license": "MIT",
+                        "dependencies": {
+                                "clsx": "^2.1.1"
+                        },
+                        "peerDependencies": {
+                                "react": "^18 || ^19",
+                                "react-dom": "^18 || ^19"
+                        }
+                },
                 "node_modules/resolve-from": {
                         "version": "4.0.0",

frontend/package.json

@@ -17 +17 @@
                 "react-dom": "^19.2.0",
                 "react-router-dom": "^7.13.0",
+                "react-toastify": "^11.0.5",
                 "tailwindcss": "^4.1.18"
         },

frontend/src/App.tsx

@@ -1 +1 @@
 import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import AllUsers from "./pages/AllUsers";
 import LandingPage from "./pages/LandingPage";
@@ -11 +13 @@
                 <div className="flex flex-col min-h-screen">
                         <Nav />
+                        <ToastContainer
+                                position="top-right"
+                                autoClose={2000}
+                                hideProgressBar={false}
+                                newestOnTop={false}
+                                closeOnClick
+                                rtl={false}
+                                pauseOnFocusLoss
+                                draggable
+                                pauseOnHover
+                                theme="light"
+                        />
                         <main className="grow">
                                 <Outlet />

frontend/src/api/axiosInstance.ts

@@ -70 +70 @@
                         [401, 403].includes(error.response?.status) &&
                         !originalConfig._retry &&
-                        originalConfig.url !== "/auth/refresh"
+                        originalConfig.url !== "/auth/refresh" &&
+                        originalConfig.url !== "/auth/login" &&
+                        originalConfig.url !== "/auth/register"
                 ) {
                         originalConfig._retry = true;

frontend/src/pages/Login.tsx

@@ -1 +1 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
 import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance";
 import { useAuth } from "../context/authContext";
@@ -22 +23 @@
                         setUser(response.data.user);
                         navigate("/");
-                } catch (error) {
-                        setError("Login failed. Please check your credentials.");
+                        toast.success("Login successful!");
+                } catch (error: any) {
+                        const errorMessage =
+                                error.response?.data?.error ||
+                                "Login failed. Please check your credentials.";
+                        setError(`Login failed: ${errorMessage}`);
                 }
         };

frontend/src/pages/Nav.tsx

@@ -1 +1 @@
 import { Link } from "react-router-dom";
+import { toast } from "react-toastify";
 import axiosInstance, { baseURL } from "../api/axiosInstance";
 import Logo from "../assets/logo-finkwave.png";
@@ -12 +13 @@
                         await axiosInstance.post("/auth/logout");
                         setUser(undefined);
+                        toast.success("Logout successful!");
                 } catch (error) {
                         console.error("Logout failed:", error);
+                        toast.error("Logout failed!");
                 }
         };

frontend/src/pages/Register.tsx

@@ -1 +1 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
 import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance";
 import { useAuth } from "../context/authContext";
@@ -15 +16 @@
                 null,
         );
+        const [error, setError] = useState<string | null>(null);
 
         const navigate = useNavigate();
@@ -26 +28 @@
         }, [previewProfilePhoto]);
 
+        const handleRemoveFile = () => {
+                if (previewProfilePhoto) {
+                        URL.revokeObjectURL(previewProfilePhoto);
+                }
+                setProfilePhotoFile(null);
+                setPreviewProfilePhoto(null);
+        };
+
         const handleRegister = async (e: React.FormEvent) => {
                 e.preventDefault();
-                // todo: add proper error handling
                 if (profilePhotoFile && profilePhotoFile.size > 5 * 1024 * 1024) {
                         alert("Max file size is 5MB");
+                        return;
+                }
+
+                if (username === "" || password === "" || fullname === "" || email === "") {
+                        setError("Please fill in all required fields.");
                         return;
                 }
@@ -53 +67 @@
                         setUser(response.data.user);
                         navigate("/");
-                } catch (error) {
-                        console.error("Registration failed:", error);
+                        toast.success("Registration successful!");
+                } catch (error: any) {
+                        const errorMessage = error.response?.data?.error || "Please try again.";
+                        setError(`Registration failed: ${errorMessage}`);
                 }
         };
@@ -61 +77 @@
                 <div className="flex flex-col items-center justify-center min-h-[90vh] bg-gray-100">
                         <h2 className="text-2xl mb-4">Register</h2>
-                        <form className="bg-white p-6 rounded shadow-md w-80">
+                        <form className="bg-white p-6 rounded shadow-md w-full max-w-md">
+                                {error && <p className="text-red-500 mb-4">{error}</p>}
                                 <div className="mb-4">
                                         <label className="block text-gray-700 mb-2" htmlFor="username">
@@ -115 +132 @@
                                                 <label
                                                         htmlFor="profilePhoto"
-                                                        className="px-4 py-2 bg-blue-500 text-white rounded cursor-pointer hover:bg-blue-600 transition-colors text-sm font-medium"
+                                                        className="px-4 py-2 bg-blue-500 text-white rounded cursor-pointer hover:bg-blue-600 transition-colors text-sm font-medium text-center"
                                                 >
                                                         Choose File
                                                 </label>
-                                                <span className="text-gray-600 text-sm">
+                                                <span className="text-gray-600 text-sm flex-1">
                                                         {profilePhotoFile ? profilePhotoFile.name : "No file chosen"}
                                                 </span>
+                                                {profilePhotoFile && (
+                                                        <button
+                                                                type="button"
+                                                                onClick={handleRemoveFile}
+                                                                className="px-3 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-colors text-sm font-medium"
+                                                        >
+                                                                Remove
+                                                        </button>
+                                                )}
                                         </div>
                                         <input