feat: add & remove users

backend/routes/users.js

@@ -31,4 +31,14 @@ router.post("/new", function (req, res) {
     });
 });
 
+router.delete("/:userId", function (req, res) {
+  UserModel.deleteOne({ _id: req.params.userId })
+    .then(function () {
+      res.status(204).json({ message: "User successfully deleted" });
+    })
+    .catch(function () {
+      res.status(500).json({ message: "Error while deleting the user" });
+    });
+});
+
 module.exports = router;

frontend/src/components/UsersTable.vue

@@ -10,17 +10,37 @@
         <td>{{ user.email }}</td>
         <td>{{ user.firstName }}</td>
         <td>{{ user.lastName }}</td>
+        <td>
+          <button class="delete-button" @click="deleteUser(user._id)">
+            Delete
+          </button>
+        </td>
       </tr>
     </tbody>
   </table>
 </template>
 
 <script>
+import axios from "axios";
+
 export default {
   name: "UsersTable",
   props: {
     users: Array,
   },
+  methods: {
+    deleteUser: function (userId) {
+      axios
+        .delete(`${process.env.VUE_APP_BACKEND_BASE_URL}/users/${userId}`)
+        .then(() => {
+          this.$emit("userDeleted");
+        })
+        .catch((error) => {
+          alert("An error occured while deleting the user.");
+          console.error(error);
+        });
+    },
+  },
 };
 </script>
 
@@ -34,4 +54,8 @@ td {
   border: 1px solid #000000;
   padding: 10px;
 }
+
+.delete-button {
+  cursor: pointer;
+}
 </style>

frontend/src/views/AddUser.vue

+<template>
+  <div class="add-user-title">Add new user:</div>
+  <div class="add-user-form-container">
+    <form ref="addUserForm">
+      <input
+        class="add-user-input"
+        v-model="user.email"
+        type="email"
+        placeholder="Email"
+        required
+      />
+      <input
+        class="add-user-input"
+        v-model="user.firstName"
+        placeholder="First name"
+      />
+      <input
+        class="add-user-input"
+        v-model="user.lastName"
+        placeholder="Last name"
+      />
+    </form>
+    <button class="add-user-button" @click="addUser()">Add user</button>
+    <div v-if="userCreationError">{{ userCreationError }}</div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  name: "AddUser",
+  data: function () {
+    return {
+      user: {
+        email: "",
+        firstName: "",
+        lastName: "",
+      },
+      userCreationError: "",
+    };
+  },
+  methods: {
+    addUser: function () {
+      if (!this.$refs.addUserForm.checkValidity()) {
+        this.$refs.addUserForm.reportValidity();
+        return;
+      }
+
+      axios
+        .post(`${process.env.VUE_APP_BACKEND_BASE_URL}/users/new`, this.user)
+        .then(() => {
+          this.$emit("userAdded");
+          this.user = {
+            email: "",
+            firstName: "",
+            lastName: "",
+          };
+        })
+        .catch((error) => {
+          this.userCreationError = "An error occured while creating new user.";
+          console.error(error);
+        });
+    },
+  },
+};
+</script>
+<style scoped>
+.add-user-title {
+  margin-bottom: 10px;
+}
+
+.add-user-form-container {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.add-user-input {
+  margin-right: 10px;
+  padding: 5px;
+}
+
+.add-user-button {
+  cursor: pointer;
+  padding: 5px;
+}
+</style>

frontend/src/views/Users.vue

 <template>
   <h1>Users</h1>
-  <UsersTable v-if="users.length" :users="users" />
+  <AddUser @userAdded="fetchUsers()" />
+  <UsersTable v-if="users.length" :users="users" @userDeleted="fetchUsers()" />
   <div v-if="usersLoadingError">{{ usersLoadingError }}</div>
 </template>
 
@@ -8,10 +9,12 @@
 // @ is an alias to /src
 import UsersTable from "@/components/UsersTable.vue";
 import axios from "axios";
+import AddUser from "./AddUser.vue";
 
 export default {
   name: "Users",
   components: {
+    AddUser,
     UsersTable,
   },
   data: function () {