498 lines
16 KiB
Plaintext
498 lines
16 KiB
Plaintext
<!-- views/inusers.ejs -->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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>
|
|
|
|
<body>
|
|
|
|
<div id="navbar">
|
|
<h1>Eco Saver</h1>
|
|
<a href="#" id="userDataLink">User Data</a>
|
|
<a href="#" id="addUserLink">Add User</a>
|
|
<a href="#" id="deleteUserLink">Delete User</a>
|
|
<a href="#" id="resetPasswordLink">Reset Password</a>
|
|
<a href="/home" id="homeLink">Home</a>
|
|
</div>
|
|
|
|
<div id="content">
|
|
<h2>Welcome to the In-House Users Page</h2>
|
|
<div id="downloadButtonContainer">
|
|
<button id="downloadButton">Download as Excel</button>
|
|
</div>
|
|
<div id="userDataContainer">
|
|
<h3>All Users</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Username</th>
|
|
<th>Email</th>
|
|
<th>Last Login</th>
|
|
<th>Job Title</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% if (allUsers && allUsers.length > 0) { %>
|
|
<% allUsers.forEach(user => { %>
|
|
<tr>
|
|
<td><%= user.name %></td>
|
|
<td><%= user.username %></td>
|
|
<td><%= user.email %></td>
|
|
<td><%= new Date(user.lastLogin).toLocaleString('en-US', { timeZone: 'Asia/Singapore' }) %></td>
|
|
<td><%= user.jobTitle %></td>
|
|
</tr>
|
|
<% }); %>
|
|
<% } else { %>
|
|
<tr>
|
|
<td colspan="6">No users available.</td>
|
|
</tr>
|
|
<% } %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="createUserForm" class="user-creation-container" style="display: none;">
|
|
<div class="title">Registration</div>
|
|
<div class="content">
|
|
<form action="/createUser" id="userForm" method="post">
|
|
<div class="user-details">
|
|
<div class="input-box">
|
|
<span class="details">Full Name</span>
|
|
<input type="text" name="name" id="name" placeholder="Enter your name" required>
|
|
</div>
|
|
<div class="input-box">
|
|
<span class="details">Username</span>
|
|
<input type="text" name="username" id="username" placeholder="Enter your username" required>
|
|
</div>
|
|
<div class="input-box">
|
|
<span class="details">Email</span>
|
|
<input type="text" name="email" id="email" placeholder="Enter your email" required>
|
|
</div>
|
|
<div class="input-box">
|
|
<span class="details">Password</span>
|
|
<input type="password" name="password" id="password" placeholder="Enter your password" required>
|
|
</div>
|
|
<div class="input-box">
|
|
<span class="details">Confirm Password</span>
|
|
<input type="password" name="confirmPassword" id="confirmPassword" placeholder="Confirm your password" required>
|
|
</div>
|
|
<div class="input-box">
|
|
<span class="details">Job Title</span>
|
|
<select name="jobTitle" id="jobTitle">
|
|
<option value="admin">Admin</option>
|
|
<option value="dataAnalyst">Data Analyst</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="button">
|
|
<input type="submit" value="Register">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div id="resetPasswordFormContainer" style="display: none;">
|
|
<div id="resetPasswordForm" class="user-creation-container">
|
|
<div class="title">Reset Password</div>
|
|
<div class="content">
|
|
<form id="resetPasswordForm">
|
|
<div class="user-details">
|
|
<div class="input-box">
|
|
<span class="details">Username</span>
|
|
<input type="text" name="username" id="resetUsername" placeholder="Enter username" required>
|
|
</div>
|
|
<div class="input-box">
|
|
<span class="details">New Password</span>
|
|
<input type="password" name="password" id="resetPassword" placeholder="Enter new password" required>
|
|
</div>
|
|
<div class="input-box">
|
|
<span class="details">Confirm Password</span>
|
|
<input type="password" name="confirmPassword" id="resetConfirmPassword" placeholder="Confirm new password" required>
|
|
</div>
|
|
</div>
|
|
<div class="button">
|
|
<input type="submit" value="Reset Password">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="deleteUserContainer" style="display: none;">
|
|
<h3>Delete User</h3>
|
|
<div class="search-container">
|
|
<input type="text" id="searchUserInput" placeholder="Search by username">
|
|
<button id="searchUserButton">Search</button>
|
|
</div>
|
|
<div id="searchResultsContainer" style="display: none;">
|
|
<h4>Search Results</h4>
|
|
<ul id="searchResultsList"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Your existing script tags -->
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
|
<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) %>;
|
|
|
|
$(document).ready(function () {
|
|
$('#resetPasswordLink').on('click', function () {
|
|
$('#resetPasswordFormContainer').show();
|
|
$('#createUserForm').hide();
|
|
$('#userDataContainer').hide();
|
|
$('#downloadButtonContainer').hide();
|
|
$('#deleteUserContainer').hide();
|
|
});
|
|
|
|
$('#addUserLink').on('click', function () {
|
|
$('#resetPasswordFormContainer').hide();
|
|
$('#createUserForm').show();
|
|
$('#userDataContainer').hide();
|
|
$('#downloadButtonContainer').hide();
|
|
$('#deleteUserContainer').hide();
|
|
});
|
|
|
|
$('#userDataLink').on('click', function () {
|
|
$('#resetPasswordFormContainer').hide();
|
|
$('#createUserForm').hide();
|
|
$('#userDataContainer').show();
|
|
$('#downloadButtonContainer').show();
|
|
$('#deleteUserContainer').hide();
|
|
});
|
|
|
|
$('#searchUserButton').on('click', function () {
|
|
console.log('Search button clicked');
|
|
const searchUsername = $('#searchUserInput').val();
|
|
// Call the function to search for the user
|
|
searchUser(searchUsername);
|
|
});
|
|
|
|
$('#deleteUserLink').on('click', function () {
|
|
$('#deleteUserContainer').show();
|
|
$('#resetPasswordFormContainer').hide();
|
|
$('#createUserForm').hide();
|
|
$('#userDataContainer').hide();
|
|
$('#downloadButtonContainer').hide();
|
|
});
|
|
|
|
$('#downloadButton').on('click', function () {
|
|
// Call the downloadExcel function with the allUsers data
|
|
downloadExcel(allUsers);
|
|
});
|
|
});
|
|
|
|
function searchUser(username) {
|
|
fetch(`/api/searchUser?username=${username}`) // Add the /api prefix here
|
|
.then(response => {
|
|
if (response.ok) {
|
|
return response.json();
|
|
} else {
|
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
}
|
|
})
|
|
.then(users => {
|
|
// Display search results
|
|
displaySearchResults(users);
|
|
})
|
|
.catch(error => {
|
|
console.error('Search error:', error);
|
|
// Handle errors, e.g., display an alert
|
|
});
|
|
}
|
|
|
|
// Function to display search results
|
|
function displaySearchResults(users) {
|
|
const searchResultsList = $('#searchResultsList');
|
|
|
|
// Clear previous results
|
|
searchResultsList.empty();
|
|
|
|
if (users && users.length > 0) {
|
|
users.forEach(user => {
|
|
const listItem = `<li>${user.username} - <button class="deleteUserButton" data-username="${user.username}">Delete</button></li>`;
|
|
searchResultsList.append(listItem);
|
|
});
|
|
|
|
// Show the search results container
|
|
$('#searchResultsContainer').show();
|
|
} else {
|
|
// Hide the search results container if no results
|
|
$('#searchResultsContainer').hide();
|
|
}
|
|
}
|
|
// Event listener for delete user button in search results
|
|
$('#searchResultsList').on('click', '.deleteUserButton', function () {
|
|
const usernameToDelete = $(this).data('username');
|
|
console.log('Before fetch for user deletion');
|
|
// Make a fetch request to delete the user
|
|
fetch(`/api/deleteUser/${usernameToDelete}`, {
|
|
method: 'DELETE',
|
|
})
|
|
.then(response => {
|
|
console.log('Inside fetch response handler');
|
|
if (response.ok) {
|
|
// Assuming your server sends a JSON response
|
|
return response.json();
|
|
} else {
|
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
}
|
|
})
|
|
.then(data => {
|
|
console.log('User deletion success:', data);
|
|
alert('User deleted successfully');
|
|
$('#searchResultsContainer').hide();
|
|
})
|
|
.catch(error => {
|
|
console.error('User deletion error:', error);
|
|
alert('Failed to delete user. Please try again.');
|
|
// Handle errors, e.g., display an alert
|
|
});
|
|
});
|
|
|
|
|
|
function downloadExcel(allUsers) {
|
|
if (allUsers && allUsers.length > 0) {
|
|
const workbook = new ExcelJS.Workbook();
|
|
const worksheet = workbook.addWorksheet('All Users');
|
|
const headers = ['Name', 'Username', 'Email', 'Last Login', 'Job Title'];
|
|
worksheet.addRow(headers);
|
|
allUsers.forEach(user => {
|
|
const rowData = [
|
|
user.name || '',
|
|
user.username || '',
|
|
user.email || '',
|
|
user.lastLogin ? new Date(user.lastLogin).toLocaleString('en-US', { timeZone: 'Asia/Singapore' }) : '',
|
|
user.jobTitle || ''
|
|
];
|
|
worksheet.addRow(rowData);
|
|
});
|
|
workbook.xlsx.writeBuffer().then(buffer => {
|
|
const currentDate = new Date();
|
|
const formattedDate = currentDate.toISOString().split('T')[0];
|
|
const formattedTime = currentDate.toTimeString().split(' ')[0].replace(/:/g, '-');
|
|
const fileName = `user_data_${formattedDate}_${formattedTime}.xlsx`;
|
|
const blob = new Blob([buffer], {
|
|
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
|
});
|
|
saveAs(blob, fileName);
|
|
});
|
|
} else {
|
|
console.error('No data available for download.');
|
|
}
|
|
}
|
|
|
|
function isStrongPassword(password) {
|
|
// Password must be at least 10 characters long
|
|
if (password.length < 10) {
|
|
return false;
|
|
}
|
|
|
|
// Password must contain at least one uppercase letter
|
|
if (!/[A-Z]/.test(password)) {
|
|
return false;
|
|
}
|
|
|
|
// Password must contain at least one lowercase letter
|
|
if (!/[a-z]/.test(password)) {
|
|
return false;
|
|
}
|
|
|
|
// Password must contain at least one digit
|
|
if (!/\d/.test(password)) {
|
|
return false;
|
|
}
|
|
|
|
// Password must contain at least one symbol
|
|
if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
|
|
|
|
function resetFormFields() {
|
|
$('#name').val('');
|
|
$('#username').val('');
|
|
$('#email').val('');
|
|
$('#password').val('');
|
|
$('#confirmPassword').val('');
|
|
$('#jobTitle').val('');
|
|
}
|
|
|
|
|
|
$('#userForm').on('submit', function (e) {
|
|
e.preventDefault();
|
|
|
|
const name = $('#name').val();
|
|
const username = $('#username').val();
|
|
const email = $('#email').val();
|
|
const password = $('#password').val();
|
|
const confirmPassword = $('#confirmPassword').val();
|
|
const jobTitle = $('#jobTitle').val();
|
|
|
|
if (password !== confirmPassword) {
|
|
alert('Passwords do not match. Please enter the same password in both fields.');
|
|
return;
|
|
}
|
|
|
|
if (!isStrongPassword(password)) {
|
|
alert('Password does not meet complexity requirements. It must be at least 10 characters long and include at least one uppercase letter, one lowercase letter, one digit, and one symbol.');
|
|
return;
|
|
}
|
|
|
|
fetch('/createUser', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
name: name,
|
|
username: username,
|
|
email: email,
|
|
password: password,
|
|
jobTitle: jobTitle,
|
|
}),
|
|
})
|
|
.then(response => {
|
|
if (response.status === 201) {
|
|
// Status 201 indicates successful creation
|
|
return response.json();
|
|
} else {
|
|
return response.json().then(data => {
|
|
throw new Error(data.error || `HTTP error! Status: ${response.status}`);
|
|
});
|
|
}
|
|
})
|
|
.then(data => {
|
|
console.log('User registration success:', data);
|
|
alert('User registered successfully!');
|
|
resetFormFields();
|
|
})
|
|
.catch(error => {
|
|
console.error('User registration error:', error);
|
|
handleRegistrationError(error);
|
|
});
|
|
});
|
|
|
|
function handleRegistrationError(error) {
|
|
console.error('Registration error:', error); // Log the full error object for debugging
|
|
|
|
let errorMessage;
|
|
|
|
if (typeof error === 'string') {
|
|
errorMessage = error;
|
|
} else if (error instanceof Error) {
|
|
errorMessage = error.message;
|
|
} else if (error.response && error.response.data && error.response.data.error) {
|
|
errorMessage = error.response.data.error;
|
|
} else {
|
|
errorMessage = 'Unknown error';
|
|
}
|
|
|
|
if (errorMessage.includes('Username is already taken')) {
|
|
alert('Username is already taken. Please choose a different username.');
|
|
} else if (errorMessage.includes('Email is already in use')) {
|
|
alert('Email is already in use. Please choose a different email.');
|
|
} else if (errorMessage.includes('Password does not meet complexity requirements')) {
|
|
alert('Password does not meet complexity requirements. It must be at least 10 characters long and include at least one uppercase letter, one lowercase letter, one digit, and one symbol.');
|
|
} else if (errorMessage.includes('User registration failed')) {
|
|
alert('User registration failed. Please try again.');
|
|
} else {
|
|
alert(`Unknown error: ${errorMessage}`);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
$('#resetPasswordForm').on('submit', function (e) {
|
|
e.preventDefault();
|
|
|
|
// Get values from the form
|
|
const username = $('#resetUsername').val();
|
|
const password = $('#resetPassword').val();
|
|
const confirmPassword = $('#resetConfirmPassword').val();
|
|
|
|
console.log('Username:', username);
|
|
console.log('New Password:', password);
|
|
|
|
// Validate passwords
|
|
if (password !== confirmPassword) {
|
|
alert('Error: Passwords do not match. Please enter the same password in both fields.');
|
|
return;
|
|
}
|
|
|
|
// Check if the new password meets complexity requirements
|
|
if (!isStrongPassword(password)) {
|
|
alert('Error: Password does not meet complexity requirements. It must be at least 10 characters long and include at least one uppercase letter, one lowercase letter, one digit, and one symbol.');
|
|
return;
|
|
}
|
|
|
|
// Make a fetch request
|
|
fetch('/reset-password', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
username: username,
|
|
password: password,
|
|
confirmPassword: confirmPassword,
|
|
}),
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
return response.text().then(errorText => {
|
|
throw new Error(`HTTP error! Status: ${response.status}, Error: ${errorText}`);
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log('Success:', data);
|
|
|
|
// Show an alert with the received data
|
|
alert(data.success || data.error || 'Password change status unknown');
|
|
|
|
// Optionally, you can clear the form or take other actions after the password change
|
|
$('#resetUsername').val('');
|
|
$('#resetPassword').val('');
|
|
$('#resetConfirmPassword').val('');
|
|
|
|
// You might want to hide the reset password form after submission
|
|
$('#resetPasswordFormContainer').hide();
|
|
})
|
|
.catch(error => {
|
|
// Handle 404 error separately to show an alert
|
|
if (error.message.includes('HTTP error! Status: 404')) {
|
|
alert('Error: User not found. Please enter a valid username.');
|
|
} else {
|
|
console.error('Fetch Error:', error);
|
|
}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|