Add ability to delete users.

packages/server/src/api.ts

@@ -212,6 +212,23 @@ router.get("/users/:userId", async (req, res) => {
   }
 });
 
+router.delete("/users/:userId", async (req, res) => {
+  if ((req.user as UserResponse).role !== "admin") {
+    res.status(401);
+    res.json("You are not authorized to delete users");
+    return;
+  }
+
+  try {
+    // TODO: we should probably make deleteUser async so that we can report DB errors to the API caller
+    deleteUser(req.params.userId);
+    res.json("success");
+  } catch (e) {
+    res.status(500);
+    res.json(e.message);
+  }
+});
+
 function make_auth_cb(
   req: express.Request,
   res: express.Response,

packages/server/src/index.ts

@@ -75,7 +75,9 @@ passport.deserializeUser<string>(function (id, callback) {
       if (user) {
         callback(null, user);
       } else {
-        callback(new Error(`No user with ID: ${id}`));
+        // This may be the case if a user has been deleted, but the user session persists.
+        // Sending null as the second argument invalidates the session.
+        callback(null, null);
       }
     })
     .catch((err) => {

packages/vue-client/package.json

@@ -31,6 +31,7 @@
     "npm-run-all2": "^6.1.2",
     "pinia": "^2.1.4",
     "socket.io-client": "^4.8.1",
+    "sweetalert2": "^11.15.3",
     "vue": "^3.4.25",
     "vue-error-boundary": "^2.0.3",
     "vue-router": "^4.2.2",

packages/vue-client/src/views/UserView.vue

@@ -3,6 +3,8 @@ import { UserResponse, UserRole } from "@ogfcommunity/variants-shared";
 import { ref, watchEffect } from "vue";
 import * as requests from "../requests";
 import { useCurrentUser } from "@/stores/user";
+import Swal from "sweetalert2";
+import router from "@/router";
 
 const props = defineProps<{ userId: string }>();
 
@@ -24,6 +26,41 @@ function setRole(role: UserRole) {
     .then(() => (user.value = user.value ? { ...user.value, role } : undefined))
     .catch(alert);
 }
+
+async function launchDeleteUserDialog() {
+  if (!user.value) {
+    Swal.fire({ icon: "error", text: "User is undefined!" });
+    return;
+  }
+
+  const userToDelete = user.value;
+  const { value: nameForVerification } = await Swal.fire({
+    title: "Delete User",
+    text: `Are you sure you want to delete user '${userToDelete.username}'`,
+    input: "text",
+    inputPlaceholder: "To confirm, type the username here",
+    showCancelButton: true,
+  });
+
+  if (nameForVerification !== userToDelete.username) {
+    Swal.fire({
+      icon: "error",
+      text: "Name did not match!",
+    });
+  } else {
+    try {
+      await requests.del(`/users/${props.userId}`);
+      Swal.fire(`Successfully deleted user: ${userToDelete.username}`);
+      router.push("/");
+    } catch (error) {
+      Swal.fire({
+        icon: "error",
+        title: "Could not delete user...",
+        text: `${(error as Error).message}`,
+      });
+    }
+  }
+}
 </script>
 
 <template>
@@ -37,6 +74,7 @@ function setRole(role: UserRole) {
           <button v-if="user.role !== 'admin'" @click="setRole('admin')">
             Make Admin
           </button>
+          <button @click="launchDeleteUserDialog()">Delete User</button>
         </div>
       </div>
       <div v-if="err">{{ err }}</div>

yarn.lock

@@ -1185,6 +1185,7 @@ __metadata:
     prettier: ^2.8.8
     rimraf: ^5.0.5
     socket.io-client: ^4.8.1
+    sweetalert2: ^11.15.3
     typescript: ^5.1.6
     vite: ^4.5.2
     vitest: ^0.32.4
@@ -7590,6 +7591,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sweetalert2@npm:^11.15.3":
+  version: 11.15.3
+  resolution: "sweetalert2@npm:11.15.3"
+  checksum: 8d75654fddd76ef5317b555a93e5f4648c74a0c19d95d9ecbf230e9640ce910bd29474d2b64e495ac886d2b3e087e1fe2d83ce3b0259f2ebac0a0f0bf8535f08
+  languageName: node
+  linkType: hard
+
 "tar-fs@npm:^2.0.0":
   version: 2.1.1
   resolution: "tar-fs@npm:2.1.1"