Add UI code to handle team member removal (#1022)

* Change `/api/v1/teams/[team_id]/members` from taking `id` to `user_id`.
    * Not even the admin panel was using this endpoint so doesn't seem that drastic of a change
* Add UI to handle team member removal

CTFd/api/v1/teams.py

@@ -167,7 +167,7 @@ class TeamMembers(Resource):
         team = Teams.query.filter_by(id=team_id).first_or_404()
 
         data = request.get_json()
-        user_id = data["id"]
+        user_id = data["user_id"]
         user = Users.query.filter_by(id=user_id).first_or_404()
         if user.team_id is None:
             team.members.append(user)
@@ -197,7 +197,7 @@ class TeamMembers(Resource):
         team = Teams.query.filter_by(id=team_id).first_or_404()
 
         data = request.get_json()
-        user_id = data["id"]
+        user_id = data["user_id"]
         user = Users.query.filter_by(id=user_id).first_or_404()
 
         if user.team_id == team.id:

CTFd/themes/admin/static/js/teams/actions.js

@@ -7,6 +7,42 @@ $(document).ready(function() {
     $("#team-captain-modal").modal("toggle");
   });
 
+  $(".delete-member").click(function(e) {
+    e.preventDefault();
+    var member_id = $(this).attr("member-id");
+    var member_name = $(this).attr("member-name");
+
+    var params = {
+      user_id: member_id
+    };
+
+    var row = $(this)
+      .parent()
+      .parent();
+
+    ezq({
+      title: "Remove Member",
+      body: "Are you sure you want to remove {0} from {1}".format(
+        "<strong>" + htmlentities(member_name) + "</strong>",
+        "<strong>" + htmlentities(TEAM_NAME) + "</strong>"
+      ),
+      success: function() {
+        CTFd.fetch("/api/v1/teams/" + TEAM_ID + "/members", {
+          method: "DELETE",
+          body: JSON.stringify(params)
+        })
+          .then(function(response) {
+            return response.json();
+          })
+          .then(function(response) {
+            if (response.success) {
+              row.remove();
+            }
+          });
+      }
+    });
+  });
+
   $(".delete-team").click(function(e) {
     ezq({
       title: "Delete Team",

CTFd/themes/admin/templates/teams/team.html

@@ -143,7 +143,9 @@
 							</a>
 						</td>
 						<td class="text-center">
-							<span>
+							<span class="delete-member cursor-pointer" member-id="{{ member.id }}"
+								  member-name="{{ member.name }}" data-toggle="tooltip"
+								  data-placement="top" title="Remove {{ member.name }}">
 								<i class="fas fa-times"></i>
 							</span>
 						</td>

tests/api/v1/teams/test_team_members.py

@@ -36,18 +36,18 @@ def test_api_team_remove_members():
 
         gen_user(app.db, name="user1")
         with login_as_user(app, name="user1") as client:
-            r = client.delete("/api/v1/teams/1/members", json={"id": 2})
+            r = client.delete("/api/v1/teams/1/members", json={"user_id": 2})
             assert r.status_code == 403
 
         with login_as_user(app, name="admin") as client:
-            r = client.delete("/api/v1/teams/1/members", json={"id": 2})
+            r = client.delete("/api/v1/teams/1/members", json={"user_id": 2})
             assert r.status_code == 200
 
             resp = r.get_json()
             # The following data is sorted b/c in Postgres data isn't necessarily returned ordered.
             assert sorted(resp["data"]) == sorted([3, 4, 5])
 
-            r = client.delete("/api/v1/teams/1/members", json={"id": 2})
+            r = client.delete("/api/v1/teams/1/members", json={"user_id": 2})
 
             resp = r.get_json()
             assert "User is not part of this team" in resp["errors"]["id"]