diff --git a/frontend/components/admin-user-management/admin-user-management.tsx b/frontend/components/admin-user-management/admin-user-management.tsx index 39bef944b4..996c5d9b61 100644 --- a/frontend/components/admin-user-management/admin-user-management.tsx +++ b/frontend/components/admin-user-management/admin-user-management.tsx @@ -14,6 +14,7 @@ import { } from "@/components/ui/table"; import LoadingScreen from "@/components/common/loading-screen"; import AdminEditUserModal from "@/components/admin-user-management/admin-edit-user-modal"; +import DeleteAccountModal from "@/components/common/delete-account-modal"; import { PencilIcon, Trash2Icon } from "lucide-react"; import { User, UserArraySchema } from "@/lib/schemas/user-schema"; import { userServiceUri } from "@/lib/api-uri"; @@ -51,6 +52,9 @@ export default function AdminUserManagement() { const [users, setUsers] = useState([]); const [showModal, setShowModal] = useState(false); const [selectedUser, setSelectedUser] = useState(); + const [showDeleteModal, setShowDeleteModal] = useState(false); + const [confirmUsername, setConfirmUsername] = useState(""); + const [isDeleteButtonEnabled, setIsDeleteButtonEnabled] = useState(false); useEffect(() => { if (data) { @@ -58,18 +62,23 @@ export default function AdminUserManagement() { } }, [data]); + // Enable delete button in the delete account modal only when the input username matches the original username + useEffect(() => { + setIsDeleteButtonEnabled(confirmUsername === selectedUser?.username); + }, [confirmUsername, selectedUser]); + if (isLoading) { return ; } - const handleDelete = async (userId: string) => { + const handleDelete = async () => { const token = auth?.token; if (!token) { throw new Error("No authentication token found"); } const response = await fetch( - `${userServiceUri(window.location.hostname)}/users/${userId}`, + `${userServiceUri(window.location.hostname)}/users/${selectedUser?.id}`, { method: "DELETE", headers: { @@ -82,7 +91,7 @@ export default function AdminUserManagement() { throw new Error("Failed to delete user"); } - setUsers(users.filter((user) => user.id !== userId)); + setUsers(users.filter((user) => user.id !== selectedUser?.id)); }; const onUserUpdate = () => { @@ -100,6 +109,16 @@ export default function AdminUserManagement() { user={selectedUser} onUserUpdate={onUserUpdate} /> + @@ -130,7 +149,10 @@ export default function AdminUserManagement() { diff --git a/frontend/components/user-settings/delete-account-modal.tsx b/frontend/components/common/delete-account-modal.tsx similarity index 76% rename from frontend/components/user-settings/delete-account-modal.tsx rename to frontend/components/common/delete-account-modal.tsx index ea10b9b5c8..d8e5b5c230 100644 --- a/frontend/components/user-settings/delete-account-modal.tsx +++ b/frontend/components/common/delete-account-modal.tsx @@ -17,6 +17,7 @@ interface DeleteAccountModalProps { handleDeleteAccount: () => void; isDeleteButtonEnabled: boolean; setShowDeleteModal: (show: boolean) => void; + isAdmin: boolean; } const DeleteAccountModal: React.FC = ({ @@ -27,6 +28,7 @@ const DeleteAccountModal: React.FC = ({ handleDeleteAccount, isDeleteButtonEnabled, setShowDeleteModal, + isAdmin, }) => { return ( <> @@ -37,10 +39,18 @@ const DeleteAccountModal: React.FC = ({ Confirm Delete Account
-

To confirm, please type your username ({originalUsername}):

+ {isAdmin ? ( +

+ To delete, please confirm the username ({originalUsername}): +

+ ) : ( +

+ To confirm, please type your username ({originalUsername}): +

+ )} setConfirmUsername(e.target.value)} /> @@ -57,7 +67,11 @@ const DeleteAccountModal: React.FC = ({