feat: enhance user management functionality with detailed feedback and improved error handling

backend/database.js

@@ -2,6 +2,7 @@ import mysql from "mysql2";
 import dotenv from "dotenv";
 dotenv.config();
 
+// Create a MySQL connection pool using environment variables for configuration
 const pool = mysql
   .createPool({
     host: process.env.DB_HOST,
@@ -11,21 +12,26 @@ const pool = mysql
   })
   .promise();
 
+// Function to authenticate a user by username and password
 export async function loginUser(username, password) {
+  // Query the users table for a matching username and password
   const [result] = await pool.query(
     "SELECT * FROM users WHERE username = ? AND password = ?",
     [username, password]
   );
 
+  // If a user is found, return success and user data
   if (result.length > 0) {
     console.log("User found: ", result[0].username, " ", result[0].id);
     return { success: true, user: result[0] };
   } else {
+    // If no user is found, return failure message
     console.error(`Invalid username or password!; ${result[0]}`);
     return { success: false, message: "Invalid username or password" };
   }
 }
 
+// Function to create a new user in the database
 export async function createUser(
   username,
   first_name,
@@ -34,19 +40,22 @@ export async function createUser(
   email
 ) {
   try {
+    // Insert a new user record into the users table
     const [result] = await pool.query(
       "INSERT INTO users (username, first_name, last_name, password, email) VALUES (?, ?, ?, ?, ?)",
       [username, first_name, last_name, password, email]
     );
 
     console.log("User created successfully!");
-    return { success: true };
+    return { success: true, message: "User created successfully!" };
   } catch (error) {
-    console.error("Error creating user: ", error);
+    // Handle errors during user creation
-    return { success: false, message: "Error creating user" };
+    console.log("Error creating user: ", error);
+    return { success: false, message: "Error creating user!" };
   }
 }
 
+// Function to update an existing user's information
 export async function updateUser(
   username,
   first_name,
@@ -55,25 +64,36 @@ export async function updateUser(
   email
 ) {
   try {
+    // Update user details based on username
     const [result] = await pool.query(
       "UPDATE users SET first_name = ?, last_name = ?, password = ?, email = ? WHERE username = ?",
       [first_name, last_name, password, email, username]
     );
-    return {
+    const resultOfquery = result.affectedRows;
-      success: true,
+
-      message: "User updated successfully",
+    // If a user was updated, return success
-      resultOfquery: result,
+    if (resultOfquery > 0) {
-    };
+      console.log("User updated successfully!");
-  } catch (error) {
+      return {
-    console.error("Error updating user: ", error);
+        success: true,
-    return {
+        message: "User updated successfully!",
-      success: false,
+        resultOfquery: result,
-      message: "Error updating user",
+      };
-      resultOfquery: result,
+    }
-    };
+
-  }
+    // If no user was updated, return failure
+    if (resultOfquery === 0) {
+      console.log("Error updating user!");
+      return {
+        success: false,
+        message: "Error updating user!",
+        resultOfquery: null,
+      };
+    }
+  } catch (err) {}
 }
 
+// Function to delete a user from the database
 export async function deleteUser(
   username,
   first_name,
@@ -82,26 +102,29 @@ export async function deleteUser(
   email
 ) {
   try {
+    // Delete user based on username and password
     const [result] = await pool.query(
       "DELETE FROM users WHERE username = ?  AND password = ?",
       [username, password]
     );
     const resultOfquery = result.affectedRows;
 
+    // If a user was deleted, return success
     if (resultOfquery > 0) {
       console.log("User deleted successfully!");
       return {
         success: true,
-        message: "User deleted successfully",
+        message: "User deleted successfully!",
         resultOfquery: result,
       };
     }
 
+    // If no user was deleted, return failure
     if (resultOfquery === 0) {
-      console.log("Error deleting user.");
+      console.log("Error deleting user!");
       return {
         success: false,
-        message: "Error deleting user",
+        message: "Error deleting user!",
         resultOfquery: null,
       };
     }

backend/server.js

@@ -3,17 +3,22 @@ import express from "express";
 const app = express();
 const port = 4000;
 
+// Importing database functions for user operations
 import { loginUser, createUser, updateUser, deleteUser } from "./database.js";
 
+// Middleware to parse URL-encoded bodies (form submissions)
 app.use(express.urlencoded({ extended: true }));
+// Set EJS as the view engine for rendering templates
 app.set("view engine", "ejs");
 
 import path from "path";
 import { fileURLToPath } from "url";
 
+// Setup for __dirname and __filename in ES modules
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+// Start the server and listen on the specified port
 app.listen(port, () => {
   console.log(`Server is running on http://localhost:${port}`);
 });
@@ -26,18 +31,21 @@ app.use(express.static("public"));
 
 // Main code below
 
-// Route to handle GET requests to the root URL
+// Route to handle GET requests to the root URL (login page)
 app.get("/", (req, res) => {
   res.render("login.ejs", { error: null, reload: false });
   console.log("Frontend user requested frontend login page.");
 });
 
+// Variable to keep track of the latest logged-in user
 let latestUser;
 
 // Route to handle user login
 app.post("/login", (req, res) => {
+  // Attempt to log in the user with provided credentials
   loginUser(req.body.username, req.body.password).then((result) => {
     if (result.success) {
+      // On successful login, render the dashboard and update latestUser
       res.status(200).render("dashboard.ejs", {
         sqlResult: result,
         newLink: `/dashboard/${result.user.id}`,
@@ -46,6 +54,7 @@ app.post("/login", (req, res) => {
       });
       latestUser = result;
     } else {
+      // On failure, re-render login page with error message
       res
         .status(401)
         .render("login.ejs", { error: result.message, reload: true });
@@ -53,18 +62,22 @@ app.post("/login", (req, res) => {
   });
 });
 
+// Route to handle user creation, update, and deletion
 app.post(["/createUser", "/updateUser", "/deleteUser"], (req, res) => {
   let action = req.path;
   let funcName;
 
+  // Determine which database function to use based on the route
   if (action === "/createUser") {
     funcName = createUser;
   } else if (action === "/updateUser") {
     funcName = updateUser;
   } else if (action === "/deleteUser") {
+    // Prevent deleting the currently logged-in user
     if (latestUser && req.body.username !== latestUser.user.username) {
       funcName = deleteUser;
     } else {
+      // Render dashboard with alert if trying to delete logged-in user
       res.status(400).render("dashboard.ejs", {
         sqlResult: latestUser,
         newLink: latestUser ? `/dashboard/${latestUser.id}` : "#",
@@ -74,9 +87,11 @@ app.post(["/createUser", "/updateUser", "/deleteUser"], (req, res) => {
       return;
     }
   } else {
+    // Handle invalid actions
     res.status(400).send("Invalid action");
     return;
   }
+  // Call the selected database function with user data
   funcName(
     req.body.username,
     req.body.first_name,
@@ -85,6 +100,7 @@ app.post(["/createUser", "/updateUser", "/deleteUser"], (req, res) => {
     req.body.email
   ).then((result) => {
     if (result.success === true) {
+      // On success, render dashboard with success message
       res.status(201).render("dashboard.ejs", {
         sqlResult: latestUser,
         newLink: `/dashboard/${latestUser.id}`,
@@ -92,6 +108,7 @@ app.post(["/createUser", "/updateUser", "/deleteUser"], (req, res) => {
         success: "User action successful!",
       });
     } else {
+      // On failure, render dashboard with alert
       res.status(400).render("dashboard.ejs", {
         sqlResult: latestUser,
         newLink: `/dashboard/${latestUser.id}`,
@@ -104,6 +121,7 @@ app.post(["/createUser", "/updateUser", "/deleteUser"], (req, res) => {
 
 // error handling code
 app.use((err, req, res, next) => {
+  // Log the error stack and send a generic error response
   console.error(err.stack);
   res.status(500).send("Something broke!");
 });

backend/views/dashboard.ejs

@@ -1,14 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <!--
-    <script>
-      window.history.pushState({}, "", "<%=// newLink %>");
-    </script>    
-    -->
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Dashboard</title>
+    <!-- Bootstrap CSS for styling -->
     <link
       href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
       rel="stylesheet"
@@ -16,12 +12,16 @@
       crossorigin="anonymous"
     />
 
-    <!-- Set the right attributes for form -->
+    <!--
+      setAction JS function dynamically sets the form action and required fields
+      based on which button is clicked (Create, Update, Delete)
+    -->
     <script>
       function setAction(action) {
         const form = document.getElementById("myForm");
         form.action = action;
 
+        // For deleteUser, only username and password are required
         if (action === "/deleteUser") {
           const first_name = document.getElementById("first_name");
           const last_name = document.getElementById("last_name");
@@ -32,6 +32,7 @@
           email.removeAttribute("required");
         }
 
+        // For createUser and updateUser, all fields are required
         if (action === "/createUser" || action === "/updateUser") {
           const first_name = document.getElementById("first_name");
           const last_name = document.getElementById("last_name");
@@ -50,20 +51,22 @@
   </head>
   <body class="bg-dark text-light">
     <div class="container py-5">
-      <!-- Header -->
+      <!-- Header with greeting and logout button -->
       <div class="d-flex justify-content-between align-items-center mb-4">
         <div>
+          <!-- Displays user's first name from server-side variable -->
           <h2>Hello, <%= sqlResult.user.first_name %>!</h2>
         </div>
         <div>
           <h3>Welcome to your dashboard</h3>
         </div>
         <div>
+          <!-- Logout button -->
           <a href="/" class="btn btn-info">Logout</a>
         </div>
       </div>
 
-      <!-- User creation form -->
+      <!-- Card containing the user form for create, update, delete -->
       <div class="card text-dark shadow">
         <div class="card-body">
           <h4 class="card-title mb-4">
@@ -76,8 +79,10 @@
             >
             a user
           </h4>
+          <!-- Main user form, method POST, action set dynamically -->
           <form id="myForm" method="post">
             <div class="row g-3">
+              <!-- First Name input -->
               <div class="col-md-6">
                 <label for="first_name" class="form-label"
                   ><strong>First Name</strong></label
@@ -92,6 +97,7 @@
                 />
               </div>
 
+              <!-- Last Name input -->
               <div class="col-md-6">
                 <label for="last_name" class="form-label"
                   ><strong>Last Name</strong></label
@@ -106,6 +112,7 @@
                 />
               </div>
 
+              <!-- Username input (cannot be changed) -->
               <div class="col-md-6">
                 <label for="username" class="form-label"
                   ><strong
@@ -123,6 +130,7 @@
                 />
               </div>
 
+              <!-- Email input -->
               <div class="col-md-6">
                 <label for="email" class="form-label"
                   ><strong>Email</strong></label
@@ -137,6 +145,7 @@
                 />
               </div>
 
+              <!-- Password input -->
               <div class="col-12">
                 <label for="password" class="form-label"
                   ><strong>Password</strong></label
@@ -150,6 +159,10 @@
                   required
                 />
               </div>
+              <!--
+                Alert and success messages, shown conditionally
+                Uses EJS to check for alert or success variables
+              -->
               <% if (alert !== null) { %>
               <div class="col-12 d-flex align-items-center">
                 <div
@@ -183,6 +196,7 @@
               <% } %>
             </div>
 
+            <!-- Action buttons for Create, Update, Delete -->
             <div class="row text-center gy-1 mt-4">
               <div class="col-sm">
                 <button
@@ -216,6 +230,7 @@
             </div>
           </form>
         </div>
+        <!-- Card footer with note about delete requirements -->
         <div class="card-footer">
           <p class="text-center mb-0">
             <strong>Note:</strong> When <strong>deleting a user</strong>, you
@@ -226,6 +241,7 @@
       </div>
     </div>
 
+    <!-- Bootstrap JS Bundle -->
     <script
       src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"

backend/views/login.ejs

@@ -12,15 +12,18 @@
     />
   </head>
   <body class="bg-dark">
-    <div class="container d-flex justify-content-center align-items-center" style="min-height: 100vh;">
+    <div
-      <div class="card shadow-lg" style="width: 100%; max-width: 400px;">
+      class="container d-flex justify-content-center align-items-center"
+      style="min-height: 100vh"
+    >
+      <div class="card shadow-lg" style="width: 100%; max-width: 400px">
         <div class="card-body">
           <h2 class="card-title text-center mb-4">Login</h2>
 
           <% if (error) { %>
-            <div class="alert alert-danger text-center" role="alert">
+          <div class="alert alert-danger text-center" role="alert">
-              <%= error %>
+            <%= error %>
-            </div>
+          </div>
           <% } %>
 
           <form action="/login" method="post">
@@ -61,4 +64,3 @@
     ></script>
   </body>
 </html>
-