update with login hashing not working

Sean/models/User.js

@@ -0,0 +1,35 @@
+// models/User.js
+
+const { Sequelize, DataTypes } = require('sequelize');
+const sequelize = new Sequelize(process.env.database, process.env.user, process.env.password, {
+  host: process.env.host,
+  dialect: 'mysql',
+  timezone: 'Z', // Set the timezone to UTC
+});
+
+const User = sequelize.define('User', {
+  name: {
+    type: DataTypes.STRING,
+    allowNull: false,
+  },
+  username: {
+    type: DataTypes.STRING,
+    allowNull: false,
+    unique: true,
+  },
+  email: {
+    type: DataTypes.STRING,
+    allowNull: false,
+    unique: true,
+  },
+  password: {
+    type: DataTypes.STRING,
+    allowNull: false,
+  },
+  jobTitle: {
+    type: DataTypes.STRING,
+    allowNull: false,
+  },
+});
+
+module.exports = User;

Sean/server.js

@@ -2,6 +2,8 @@ const express = require('express');
 const session = require('express-session');
 const mysql = require('mysql');
 const bodyParser = require('body-parser');
+const bcrypt = require('bcrypt');
+
 
 const app = express();
 const PORT = process.env.PORT || 3000;
@@ -16,6 +18,13 @@ const mysqlConfig = {
 };
 
 const mysqlConnection = mysql.createConnection(mysqlConfig);
+mysqlConnection.connect((err) => {
+  if (err) {
+    console.error('Error connecting to MySQL:', err);
+    return;
+  }
+  console.log('Connected to MySQL');
+});
 
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(session({ secret: 'your_session_secret', resave: false, saveUninitialized: true }));
@@ -119,6 +128,64 @@ app.get('/inusers', isAuthenticated, (req, res) => {
   });
 });
 
+app.post('/createUser', async (req, res) => {
+  try {
+    const { name, username, email, password, jobTitle } = req.body;
+
+    // Hash the password using bcrypt
+    const hashedPassword = await bcrypt.hash(password, 10);
+
+    // Start a transaction
+    mysqlConnection.beginTransaction((transactionErr) => {
+      if (transactionErr) {
+        console.error('Error starting transaction:', transactionErr);
+        res.status(500).json({ error: 'Internal Server Error' });
+        return;
+      }
+
+      // Define the insert query
+      const insertUserQuery = 'INSERT INTO users (name, username, email, password, lastLogin, jobTitle) VALUES (?, ?, ?, ?, NULL, ?)';
+
+      // Log the query and its parameters
+      console.log('Insert Query:', insertUserQuery);
+      console.log('Query Parameters:', [name, username, email, hashedPassword, jobTitle]);
+
+      // Execute the query with user data
+      mysqlConnection.query(insertUserQuery, [name, username, email, hashedPassword, jobTitle], (queryErr, results) => {
+        if (queryErr) {
+          console.error('Error executing query:', queryErr);
+
+          // Rollback the transaction in case of an error
+          mysqlConnection.rollback((rollbackErr) => {
+            if (rollbackErr) {
+              console.error('Error rolling back transaction:', rollbackErr);
+            }
+            res.status(500).json({ error: 'Internal Server Error' });
+          });
+          return;
+        }
+
+        // Commit the transaction
+        mysqlConnection.commit((commitErr) => {
+          if (commitErr) {
+            console.error('Error committing transaction:', commitErr);
+            res.status(500).json({ error: 'Internal Server Error' });
+            return;
+          }
+
+          // Log the results of the query
+          console.log('Query Results:', results);
+
+          // Respond with a success message
+          res.status(201).json({ message: 'User created successfully' });
+        });
+      });
+    });
+  } catch (error) {
+    console.error('Error creating user:', error);
+    res.status(500).json({ error: 'Internal Server Error' });
+  }
+});
 
 
 

Sean/views/inusers.ejs

@@ -9,6 +9,9 @@
   <title>In-House Users</title>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css">
   <link rel="stylesheet" href="/style.css">
+  <link rel="stylesheet" href="/user-creation.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
+
   
 </head>
 
@@ -65,55 +68,33 @@
         </tbody>
       </table>
     </div>
-    <div class="container">
+    <div id="createUserForm" class="user-creation-container" style="display: none;">
       <div class="title">Registration</div>
       <div class="content">
-        <form action="#">
+        <form action="/createUser" id="userForm" method="post">
           <div class="user-details">
             <div class="input-box">
               <span class="details">Full Name</span>
-              <input type="text" placeholder="Enter your name" required>
+              <input type="text" name="name" placeholder="Enter your name" required>
             </div>
             <div class="input-box">
               <span class="details">Username</span>
-              <input type="text" placeholder="Enter your username" required>
+              <input type="text" name="username" placeholder="Enter your username" required>
             </div>
-            <div class="user-creation-container">
             <div class="input-box">
               <span class="details">Email</span>
-              <input type="text" placeholder="Enter your email" required>
+              <input type="text" name="email" placeholder="Enter your email" required>
-            </div>
-            <div class="input-box">
-              <span class="details">Phone Number</span>
-              <input type="text" placeholder="Enter your number" required>
             </div>
             <div class="input-box">
               <span class="details">Password</span>
-              <input type="text" placeholder="Enter your password" required>
+              <input type="password" name="password" placeholder="Enter your password" required>
             </div>
             <div class="input-box">
-              <span class="details">Confirm Password</span>
+              <span class="details">Job Title</span>
-              <input type="text" placeholder="Confirm your password" required>
+              <select name="jobTitle">
-            </div>
+                <option value="admin">Admin</option>
-          </div>
+                <option value="dataAnalyst">Data Analyst</option>
-          <div class="gender-details">
+              </select>
-            <input type="radio" name="gender" id="dot-1">
-            <input type="radio" name="gender" id="dot-2">
-            <input type="radio" name="gender" id="dot-3">
-            <span class="gender-title">Gender</span>
-            <div class="category">
-              <label for="dot-1">
-              <span class="dot one"></span>
-              <span class="gender">Male</span>
-            </label>
-            <label for="dot-2">
-              <span class="dot two"></span>
-              <span class="gender">Female</span>
-            </label>
-            <label for="dot-3">
-              <span class="dot three"></span>
-              <span class="gender">Prefer not to say</span>
-              </label>
             </div>
           </div>
           <div class="button">
@@ -130,7 +111,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.2.1/exceljs.min.js"></script>
-
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
   <script>
      const allUsers = <%- JSON.stringify(allUsers) %>;
 
@@ -158,9 +139,29 @@
   formData.forEach((value, key) => {
     newUser[key] = value;
   });
-      console.log('New User:', newUser);
+
-      // You can send the newUser data to your server here
+  console.log('Form Data Before Sending:', newUser);
+
+  fetch('/createUser', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(newUser),
+  })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+      return response.json();
+    })
+    .then(data => {
+      console.log('Success:', data);
+    })
+    .catch(error => {
+      console.error('Fetch Error:', error);
     });
+})
 
     function downloadExcel(allUsers) {
       if (allUsers && allUsers.length > 0) {

Sean/views/style.css

@@ -1,3 +1,6 @@
+/* style.css */
+
+/* Sidebar Styles */
 body {
 	margin: 0;
 	font-family: 'Arial', sans-serif;
@@ -81,6 +84,7 @@ body {
 	margin-top: 20px;
   }
   
+  /* Table Styles */
   table {
 	border-collapse: collapse;
 	width: 100%;
@@ -106,6 +110,7 @@ body {
 	white-space: nowrap;
   }
   
+  /* Dropdown Styles */
   .dropdown {
 	display: block;
 	margin-top: 20px;
@@ -158,11 +163,11 @@ body {
 	background-color: #0056b3;
 	border-color: #0056b3;
   }
-  /* style.css */
   
+  /* User Creation Form Styles */
   .user-creation-container .input-box {
-	margin-bottom: 15px;
+	margin-bottom: 20px;
-	width: calc(100% / 2 - 20px);
+	width: 100%;
   }
   
   .user-creation-container .input-box span.details {
@@ -195,7 +200,7 @@ body {
   
   .user-creation-container form .category {
 	display: flex;
-	width: 80%;
+	width: 100%;
 	margin: 14px 0;
 	justify-content: space-between;
   }
@@ -252,7 +257,7 @@ body {
   
   @media (max-width: 584px) {
 	.user-creation-container .user-details .input-box {
-	  margin-bottom: 15px;
+	  margin-bottom: 20px;
 	  width: 100%;
 	}
 	.user-creation-container form .category {
@@ -273,3 +278,30 @@ body {
 	}
   }
   
+  #createUserForm {
+	display: none;
+  }
+  
+  #createUserForm .container {
+	margin-top: 20px;
+  }
+  
+  #createUserForm form {
+	max-width: 400px;
+	margin: auto;
+  }
+  
+  #createUserForm .mb-3 {
+	margin-bottom: 1rem;
+  }
+  
+  #createUserForm .btn-primary {
+	background-color: #007bff;
+	border-color: #007bff;
+  }
+  
+  #createUserForm .btn-primary:hover {
+	background-color: #0056b3;
+	border-color: #0056b3;
+  }
+  

Sean/views/user-creation.css

@@ -0,0 +1,101 @@
+/* user-creation.css */
+
+.user-creation-container {
+    margin-top: 20px;
+}
+
+.user-creation-container form {
+    max-width: 400px;
+    margin: auto;
+}
+
+.user-creation-container .user-details .input-box {
+    margin-bottom: 15px;
+    width: 100%;
+}
+
+.user-creation-container .user-details .input-box input,
+.user-creation-container .user-details .input-box select {
+    height: 45px;
+    width: 100%;
+    outline: none;
+    font-size: 16px;
+    border-radius: 5px;
+    padding-left: 15px;
+    border: 1px solid #ccc;
+    border-bottom-width: 2px;
+    transition: all 0.3s ease;
+}
+
+.user-creation-container .user-details .input-box input:focus,
+.user-creation-container .user-details .input-box input:valid,
+.user-creation-container .user-details .input-box select:focus {
+    border-color: #9b59b6;
+}
+
+.user-creation-container form .category {
+    display: flex;
+    width: 100%;
+    margin: 14px 0;
+    justify-content: space-between;
+}
+
+.user-creation-container form .category select {
+    height: 45px;
+    width: 100%; /* Adjusted width to match other input boxes */
+    outline: none;
+    font-size: 16px;
+    border-radius: 5px;
+    padding-left: 15px;
+    border: 1px solid #ccc;
+    transition: all 0.3s ease;
+}
+
+.user-creation-container form .button {
+    height: 45px;
+    margin: 35px 0;
+}
+
+.user-creation-container form .button input {
+    height: 100%;
+    width: 100%;
+    border-radius: 5px;
+    border: none;
+    color: #fff;
+    font-size: 18px;
+    font-weight: 500;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: linear-gradient(135deg, #71b7e6, #9b59b6);
+}
+
+.user-creation-container form .button input:hover {
+    background: linear-gradient(-135deg, #71b7e6, #9b59b6);
+}
+
+@media (max-width: 584px) {
+    .user-creation-container .user-details .input-box {
+        margin-bottom: 15px;
+        width: 100%;
+    }
+
+    .user-creation-container form .category {
+        width: 100%;
+    }
+
+    .user-creation-container .content form .user-details {
+        max-height: 300px;
+        overflow-y: scroll;
+    }
+
+    .user-creation-container .user-details::-webkit-scrollbar {
+        width: 5px;
+    }
+}
+
+@media (max-width: 459px) {
+    .user-creation-container .container .content .category {
+        flex-direction: column;
+    }
+}

package.json

@@ -17,6 +17,7 @@
   },
   "homepage": "https://github.com/Newtbot/MP#readme",
   "dependencies": {
+    "bcrypt": "^5.1.1",
     "body-parser": "^1.20.2",
     "coap": "^1.3.0",
     "dotenv": "^16.3.1",