update with login hashing not working

This commit is contained in:
BIG2EYEZ 2023-12-19 16:31:35 +08:00
parent e8bc6f9e82
commit e9ed0144aa
7 changed files with 1238 additions and 733 deletions

35
Sean/models/User.js Normal file
View File

@ -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;

View File

@ -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' });
}
});

View File

@ -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>
</div>
<div class="input-box">
<span class="details">Phone Number</span>
<input type="text" placeholder="Enter your number" required>
<input type="text" name="email" placeholder="Enter your email" 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>
<input type="text" placeholder="Confirm your password" required>
</div>
</div>
<div class="gender-details">
<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>
<span class="details">Job Title</span>
<select name="jobTitle">
<option value="admin">Admin</option>
<option value="dataAnalyst">Data Analyst</option>
</select>
</div>
</div>
<div class="button">
@ -130,37 +111,57 @@
<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) %>;
const allUsers = <%- JSON.stringify(allUsers) %>;
document.getElementById('downloadButton').addEventListener('click', function () {
console.log('Download button clicked');
downloadExcel(allUsers);
});
document.getElementById('downloadButton').addEventListener('click', function () {
console.log('Download button clicked');
downloadExcel(allUsers);
});
document.getElementById('addUserLink').addEventListener('click', function () {
document.getElementById('downloadButtonContainer').style.display = 'none';
document.getElementById('userDataContainer').style.display = 'none';
document.getElementById('createUserForm').style.display = 'block';
});
document.getElementById('addUserLink').addEventListener('click', function () {
document.getElementById('downloadButtonContainer').style.display = 'none';
document.getElementById('userDataContainer').style.display = 'none';
document.getElementById('createUserForm').style.display = 'block';
});
document.getElementById('userDataLink').addEventListener('click', function () {
document.getElementById('downloadButtonContainer').style.display = 'block';
document.getElementById('userDataContainer').style.display = 'block';
document.getElementById('createUserForm').style.display = 'none';
});
document.getElementById('userDataLink').addEventListener('click', function () {
document.getElementById('downloadButtonContainer').style.display = 'block';
document.getElementById('userDataContainer').style.display = 'block';
document.getElementById('createUserForm').style.display = 'none';
});
document.getElementById('userForm').addEventListener('submit', function (event) {
event.preventDefault();
const formData = new FormData(this);
const newUser = {};
formData.forEach((value, key) => {
newUser[key] = value;
});
console.log('New User:', newUser);
// You can send the newUser data to your server here
document.getElementById('userForm').addEventListener('submit', function (event) {
event.preventDefault();
const formData = new FormData(this);
const newUser = {};
formData.forEach((value, key) => {
newUser[key] = value;
});
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) {

View File

@ -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-container .input-box {
margin-bottom: 15px;
width: calc(100% / 2 - 20px);
/* User Creation Form Styles */
.user-creation-container .input-box {
margin-bottom: 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;
}

View File

@ -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;
}
}

1548
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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",