feat: add user management functions and update dashboard for create, update, and delete actions

backend/database.js

@@ -18,7 +18,7 @@ export async function loginUser(username, password) {
   );
 
   if (result.length > 0) {
-    console.log("User found: ", result[0]);
+    console.log("User found: ", result[0].username, " ", result[0].id);
     return { success: true, user: result[0] };
   } else {
     console.error(`Invalid username or password!; ${result[0]}`);
@@ -34,7 +34,6 @@ export async function createUser(
   email
 ) {
   try {
-
     const [result] = await pool.query(
       "INSERT INTO users (username, first_name, last_name, password, email) VALUES (?, ?, ?, ?, ?)",
       [username, first_name, last_name, password, email]
@@ -42,9 +41,69 @@ export async function createUser(
 
     console.log("User created successfully!");
     return { success: true };
-
   } catch (error) {
     console.error("Error creating user: ", error);
     return { success: false, message: "Error creating user" };
   }
 }
+
+export async function updateUser(
+  username,
+  first_name,
+  last_name,
+  password,
+  email
+) {
+  try {
+    const [result] = await pool.query(
+      "UPDATE users SET first_name = ?, last_name = ?, password = ?, email = ? WHERE username = ?",
+      [first_name, last_name, password, email, username]
+    );
+    return {
+      success: true,
+      message: "User updated successfully",
+      resultOfquery: result,
+    };
+  } catch (error) {
+    console.error("Error updating user: ", error);
+    return {
+      success: false,
+      message: "Error updating user",
+      resultOfquery: result,
+    };
+  }
+}
+
+export async function deleteUser(
+  username,
+  first_name,
+  last_name,
+  password,
+  email
+) {
+  try {
+    const [result] = await pool.query(
+      "DELETE FROM users WHERE username = ?  AND password = ?",
+      [username, password]
+    );
+    const resultOfquery = result.affectedRows;
+
+    if (resultOfquery > 0) {
+      console.log("User deleted successfully!");
+      return {
+        success: true,
+        message: "User deleted successfully",
+        resultOfquery: result,
+      };
+    }
+
+    if (resultOfquery === 0) {
+      console.log("Error deleting user.");
+      return {
+        success: false,
+        message: "Error deleting user",
+        resultOfquery: null,
+      };
+    }
+  } catch (err) {}
+}

backend/server.js

@@ -3,7 +3,7 @@ import express from "express";
 const app = express();
 const port = 4000;
 
-import { loginUser, createUser } from "./database.js";
+import { loginUser, createUser, updateUser, deleteUser } from "./database.js";
 
 app.use(express.urlencoded({ extended: true }));
 app.set("view engine", "ejs");
@@ -29,6 +29,7 @@ app.use(express.static("public"));
 // Route to handle GET requests to the root URL
 app.get("/", (req, res) => {
   res.render("login.ejs", { error: null, reload: false });
+  console.log("Frontend user requested frontend login page.");
 });
 
 let latestUser;
@@ -40,9 +41,10 @@ app.post("/login", (req, res) => {
       res.status(200).render("dashboard.ejs", {
         sqlResult: result,
         newLink: `/dashboard/${result.user.id}`,
+        alert: null,
+        success: null,
       });
       latestUser = result;
-      console.log(latestUser);
     } else {
       res
         .status(401)
@@ -51,26 +53,51 @@ app.post("/login", (req, res) => {
   });
 });
 
-app.post("/createUser", (req, res) => {
-  createUser(
+app.post(["/createUser", "/updateUser", "/deleteUser"], (req, res) => {
+  let action = req.path;
+  let funcName;
+
+  if (action === "/createUser") {
+    funcName = createUser;
+  } else if (action === "/updateUser") {
+    funcName = updateUser;
+  } else if (action === "/deleteUser") {
+    if (latestUser && req.body.username !== latestUser.user.username) {
+      funcName = deleteUser;
+    } else {
+      res.status(400).render("dashboard.ejs", {
+        sqlResult: latestUser,
+        newLink: latestUser ? `/dashboard/${latestUser.id}` : "#",
+        alert: "Cannot delete the currently logged-in user!",
+        success: null,
+      });
+      return;
+    }
+  } else {
+    res.status(400).send("Invalid action");
+    return;
+  }
+  funcName(
     req.body.username,
     req.body.first_name,
     req.body.last_name,
     req.body.password,
     req.body.email
   ).then((result) => {
-    if (result.success) {
+    if (result.success === true) {
       res.status(201).render("dashboard.ejs", {
         sqlResult: latestUser,
         newLink: `/dashboard/${latestUser.id}`,
+        alert: null,
+        success: "User action successful!",
       });
-      console.log(latestUser);
     } else {
       res.status(400).render("dashboard.ejs", {
         sqlResult: latestUser,
         newLink: `/dashboard/${latestUser.id}`,
+        alert: "User action failed!",
+        success: null,
       });
-      console.log(latestUser);
     }
   });
 });

backend/views/dashboard.ejs

@@ -15,6 +15,38 @@
       integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr"
       crossorigin="anonymous"
     />
+
+    <!-- Set the right attributes for form -->
+    <script>
+      function setAction(action) {
+        const form = document.getElementById("myForm");
+        form.action = action;
+
+        if (action === "/deleteUser") {
+          const first_name = document.getElementById("first_name");
+          const last_name = document.getElementById("last_name");
+          const email = document.getElementById("email");
+
+          first_name.removeAttribute("required");
+          last_name.removeAttribute("required");
+          email.removeAttribute("required");
+        }
+
+        if (action === "/createUser" || action === "/updateUser") {
+          const first_name = document.getElementById("first_name");
+          const last_name = document.getElementById("last_name");
+          const username = document.getElementById("username");
+          const password = document.getElementById("password");
+          const email = document.getElementById("email");
+
+          first_name.setAttribute("required", "required");
+          last_name.setAttribute("required", "required");
+          username.setAttribute("required", "required");
+          password.setAttribute("required", "required");
+          email.setAttribute("required", "required");
+        }
+      }
+    </script>
   </head>
   <body class="bg-dark text-light">
     <div class="container py-5">
@@ -27,18 +59,29 @@
           <h3>Welcome to your dashboard</h3>
         </div>
         <div>
-          <a href="/" class="btn btn-danger">Logout</a>
+          <a href="/" class="btn btn-info">Logout</a>
         </div>
       </div>
 
       <!-- User creation form -->
       <div class="card text-dark shadow">
         <div class="card-body">
-          <h4 class="card-title mb-4">Create a new user</h4>
-          <form action="/createUser" method="post">
+          <h4 class="card-title mb-4">
+            <strong
+              ><i
+                ><span class="text-primary">Create</span> /
+                <span class="text-warning">Update</span> /
+                <span class="text-danger">Delete</span></i
+              ></strong
+            >
+            a user
+          </h4>
+          <form id="myForm" method="post">
             <div class="row g-3">
               <div class="col-md-6">
-                <label for="first_name" class="form-label">First Name</label>
+                <label for="first_name" class="form-label"
+                  ><strong>First Name</strong></label
+                >
                 <input
                   type="text"
                   name="first_name"
@@ -50,7 +93,9 @@
               </div>
 
               <div class="col-md-6">
-                <label for="last_name" class="form-label">Last Name</label>
+                <label for="last_name" class="form-label"
+                  ><strong>Last Name</strong></label
+                >
                 <input
                   type="text"
                   name="last_name"
@@ -62,7 +107,12 @@
               </div>
 
               <div class="col-md-6">
-                <label for="username" class="form-label">Username</label>
+                <label for="username" class="form-label"
+                  ><strong
+                    >Username -
+                    <span class="text-danger">CANNOT BE CHANGED</span></strong
+                  ></label
+                >
                 <input
                   type="text"
                   name="username"
@@ -74,7 +124,9 @@
               </div>
 
               <div class="col-md-6">
-                <label for="email" class="form-label">Email</label>
+                <label for="email" class="form-label"
+                  ><strong>Email</strong></label
+                >
                 <input
                   type="email"
                   name="email"
@@ -85,8 +137,10 @@
                 />
               </div>
 
-              <div class="col-md-6">
-                <label for="password" class="form-label">Password</label>
+              <div class="col-12">
+                <label for="password" class="form-label"
+                  ><strong>Password</strong></label
+                >
                 <input
                   type="password"
                   name="password"
@@ -96,20 +150,78 @@
                   required
                 />
               </div>
+              <% if (alert !== null) { %>
+              <div class="col-12 d-flex align-items-center">
+                <div
+                  class="alert alert-danger text-center w-100 mb-0 py-0 px-2"
+                  role="alert"
+                  style="
+                    height: 38px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                  "
+                >
+                  <%= alert %>
+                </div>
+              </div>
+              <% } else if (success !== null) { %>
+              <div class="col-12 d-flex align-items-center">
+                <div
+                  class="alert alert-success text-center w-100 mb-0 py-0 px-2"
+                  role="alert"
+                  style="
+                    height: 38px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                  "
+                >
+                  <%= success %>
+                </div>
+              </div>
+              <% } %>
+            </div>
 
-              <div class="col-12">
-                <button type="submit" class="btn btn-primary w-100">
+            <div class="row text-center gy-1 mt-4">
+              <div class="col-sm">
+                <button
+                  type="submit"
+                  onclick="setAction('/createUser')"
+                  class="btn btn-primary w-100"
+                >
                   Create User
                 </button>
               </div>
+
+              <div class="col-sm">
+                <button
+                  type="submit"
+                  onclick="setAction('/updateUser')"
+                  class="btn btn-warning w-100"
+                >
+                  Update User
+                </button>
+              </div>
+
+              <div class="col-sm">
+                <button
+                  type="submit"
+                  onclick="setAction('/deleteUser')"
+                  class="btn btn-danger w-100"
+                >
+                  Delete User
+                </button>
+              </div>
             </div>
           </form>
-          <% if (typeof status !== 'undefined') { %> <% if (status ===
-          'success') { %>
-          <div class="alert alert-success">User created successfully!</div>
-          <% } else if (status === 'error') { %>
-          <div class="alert alert-danger">User creation failed.</div>
-          <% } %> <% } %>
+        </div>
+        <div class="card-footer">
+          <p class="text-center mb-0">
+            <strong>Note:</strong> When <strong>deleting a user</strong>, you
+            only need to provide the username and password. Other fields are not
+            required.
+          </p>
         </div>
       </div>
     </div>