diff --git a/Sean/server.js b/Sean/server.js index 4e13a02..ea3ead6 100644 --- a/Sean/server.js +++ b/Sean/server.js @@ -370,14 +370,15 @@ app.post( } // Hash the password - const hashedPassword = await bcrypt.hash(password, 10); + const saltRounds = 10; + const hashedPassword = await bcrypt.hash(password, saltRounds); // Start a transaction const t = await sequelize.transaction(); try { // Create the user - const newUser = await User.create({ + await User.create({ name, username, email, @@ -535,8 +536,9 @@ app.post("/forgot-password", async (req, res) => { }); } - // Hash the new password - const hashedPassword = await bcrypt.hash(sanitizedPassword, 10); + // Hash the new password + const saltRounds = 10; + const hashedPassword = await bcrypt.hash(sanitizedPassword, saltRounds); // Update user's password and clear reset token const updateQuery = { diff --git a/Sean/views/3.jpg b/Sean/views/3.jpg new file mode 100644 index 0000000..9e7cdf5 Binary files /dev/null and b/Sean/views/3.jpg differ diff --git a/Sean/views/home.ejs b/Sean/views/home.ejs index cff55e4..31a082a 100644 --- a/Sean/views/home.ejs +++ b/Sean/views/home.ejs @@ -7,69 +7,29 @@ Home - - - + + +
+

ECOSAVER MANAGEMENT

+
- + -
+

Welcome to the Home Page, <%= username %>!

- +
+ \ No newline at end of file diff --git a/Sean/views/inusers.ejs b/Sean/views/inusers.ejs index 4962a64..10ade93 100644 --- a/Sean/views/inusers.ejs +++ b/Sean/views/inusers.ejs @@ -7,35 +7,34 @@ In-House Users - - - - - + - - + -
+

Welcome to the In-House Users Page

+
+ +
-

All Users

- +
@@ -63,7 +62,7 @@
Name
- + + diff --git a/Sean/views/inusers.js b/Sean/views/inusers.js index 975ed5b..ad9f951 100644 --- a/Sean/views/inusers.js +++ b/Sean/views/inusers.js @@ -1,3 +1,4 @@ + $(document).ready(function () { $('#resetPasswordLink').on('click', function () { $('#resetPasswordFormContainer').show(); @@ -6,15 +7,21 @@ $(document).ready(function () { $('#downloadButtonContainer').hide(); $('#deleteUserContainer').hide(); $('#logsContainer').hide(); + $('#additional-text').hide(); + $('#additional-text2').show(); + $('#additional-text3').hide(); }); $('#addUserLink').on('click', function () { $('#resetPasswordFormContainer').hide(); $('#createUserForm').show(); + $('#additional-text').show(); $('#userDataContainer').hide(); $('#downloadButtonContainer').hide(); $('#deleteUserContainer').hide(); $('#logsContainer').hide(); + $('#additional-text2').hide(); + $('#additional-text3').hide(); }); $('#userDataLink').on('click', function () { @@ -24,6 +31,9 @@ $(document).ready(function () { $('#downloadButtonContainer').show(); $('#deleteUserContainer').hide(); $('#logsContainer').hide(); + $('#additional-text').hide(); + $('#additional-text2').hide(); + $('#additional-text2').hide(); }); $('#searchUserButton').on('click', function () { @@ -41,6 +51,9 @@ $('#deleteUserContainer').show(); $('#userDataContainer').hide(); $('#downloadButtonContainer').hide(); $('#logsContainer').hide(); + $('#additional-text').hide(); + $('#additional-text2').hide(); + $('#additional-text3').show(); }); $('#downloadButton').on('click', function () { @@ -54,10 +67,10 @@ $('#logsLink').on('click', function () { $('#userDataContainer').hide(); $('#downloadButtonContainer').hide(); $('#deleteUserContainer').hide(); - - // Show logs container + $('#additional-text').hide(); $('#logsContainer').show(); - + $('#additional-text2').hide(); + $('#additional-text3').hide(); fetchLogs(); }); @@ -69,6 +82,7 @@ function searchUser(username) { if (response.ok) { return response.json(); } else { + alert('No user found with the given username.'); throw new Error(`HTTP error! Status: ${response.status}`); } }) @@ -393,12 +407,12 @@ function displayLogs(logs) { // Create the table and header row const table = $('').addClass('logs-table'); - const headerRow = ''; + const headerRow = ''; table.append(headerRow); // Add each log as a row in the table logs.forEach(log => { - const row = ``; + const row = ``; table.append(row); }); diff --git a/Sean/views/style.css b/Sean/views/style.css index 1d9d4d9..f39a774 100644 --- a/Sean/views/style.css +++ b/Sean/views/style.css @@ -1,35 +1,63 @@ /* style.css */ body { - margin: 0; - font-family: 'Arial', sans-serif; - } - - #navbar { - background-color: #333; - overflow: hidden; - text-align: center; - } - - #navbar h1 { - color: white; - padding: 14px 16px; - margin: 0; - font-size: 24px; - } - - #navbar a { - display: inline-block; - color: white; - text-align: center; - padding: 14px 16px; - text-decoration: none; - font-size: 18px; - } - - #navbar a:hover { - background-color: #555; - } + font-family: 'Open Sans', sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + min-height: 100vh; /* Ensure the body takes at least the full height of the viewport */ +} + +header { + background-color: #333; + color: #fff; + text-align: center; + padding: 1em; + + text-align: left; /* Adjust text alignment to the left */ +} + +nav { + background-color: #444; + padding: 0.5em; +} + +nav a { + color: #fff; + text-decoration: none; + padding: 0.5em 1em; + margin: 0 0.5em; + border-radius: 3px; +} + +nav a:hover { + background-color: #555; +} + +main { + max-width: 800px; + margin: 20px auto; + padding: 20px; + background-image: url('3.jpg'); + background-size: cover; + background-repeat: no-repeat; + background-position: center ; + color: #000; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + border-radius: 5px; + margin-left: 20px; /* Adjust the margin-left to shift the entire content to the left */ + +} + +footer { + text-align: center; + padding: 1em; + background-color: #333; + color: #fff; + margin-top: auto; /* Push the footer to the bottom */ +} #content { padding: 16px; @@ -60,7 +88,41 @@ body { td { white-space: nowrap; } - + .nice-table { + width: 100%; + border-collapse: collapse; + margin-top: 20px; +} + +.nice-table th, .nice-table td { + border: 1px solid #ddd; + padding: 12px; + text-align: left; +} + +.nice-table th { + background-color: #333; + color: #fff; +} + +.nice-table tbody tr:nth-child(even) { + background-color: #f9f9f9; +} + +.nice-table tbody tr:hover { + background-color: #ddd; +} + +.nice-table td:last-child { + text-align: left; +} + +/* Style for the "No users available" message */ +.nice-table td[colspan="4"] { + text-align: center; + font-style: italic; + color: #888; +} /* Additional styles for Bootstrap form */ form { max-width: 400px; @@ -81,146 +143,346 @@ body { border-color: #0056b3; } - /* User Creation Form Styles */ - .user-creation-container .input-box { - margin-bottom: 20px; - width: 100%; - } - - .user-creation-container .input-box span.details { - display: block; - font-weight: 500; - margin-bottom: 5px; - } - - .user-creation-container .user-details .input-box input { - 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 { - border-color: #9b59b6; - } - - .user-creation-container form .gender-details .gender-title { - font-size: 20px; - font-weight: 500; - } - - .user-creation-container form .category { + /* User Creation Form Styles */ + form#createUserForm { + margin-left: 20px; +} +.user-creation-container { display: flex; - width: 100%; - margin: 14px 0; justify-content: space-between; + align-items: flex-start; /* Add this line to align items at the start of the cross-axis */ } - .user-creation-container form .category label { + .form-container { + width: 70%; + } + + .user-creation-container .user-details { display: flex; - align-items: center; - cursor: pointer; + flex-wrap: wrap; /* Allow items to wrap to the next line if needed */ } - .user-creation-container form .category label .dot { - height: 18px; - width: 18px; - border-radius: 50%; - margin-right: 10px; - background: #d9d9d9; - border: 5px solid transparent; - transition: all 0.3s ease; + .user-creation-container .user-details .input-box { + width: 48%; /* Adjust as needed, leave some space for margins */ + margin-bottom: 10px; /* Add margin between input boxes */ } - #dot-1:checked ~ .user-creation-container form .category label .one, - #dot-2:checked ~ .user-creation-container form .category label .two, - #dot-3:checked ~ .user-creation-container form .category label .three { - background: #9b59b6; - border-color: #d9d9d9; + .user-creation-container .user-details .input-box select { + width: calc(100% - 6px); /* Adjust as needed, considering the select border */ + } + +/* Add this to your existing styles */ + +.user-creation-container { + display: flex; } - .user-creation-container form input[type="radio"] { - display: none; + #additional-text { + width: 30%; /* Adjust the width as needed */ + margin-left: 800px; /* Push it to the right */ + margin-top: -750px; /* Adjust the negative margin to move it up */ + padding: 10px; /* Add padding for spacing */ + background-color: #f4f4f4; /* Add background color if desired */ + border-radius: 5px; /* Add border-radius for rounded corners */ + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add box shadow for a subtle effect */ + border: 1px solid #ddd; /* Add a 1px solid border with light gray color */ + font-family: 'Open Sans', sans-serif; } - .user-creation-container form .button { - height: 45px; - margin: 35px 0; + #additional-text p { + font-size: 16px; /* Adjust font size as needed */ + line-height: 1.6; /* Adjust line height for better readability */ } - .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); + #additional-text .condition { + margin-bottom: 10px; /* Add space between conditions */ } - .user-creation-container form .button input:hover { - background: linear-gradient(-135deg, #71b7e6, #9b59b6); + #additional-text .condition span { + font-weight: bold; /* Make condition labels bold */ } - @media (max-width: 584px) { - .user-creation-container .user-details .input-box { - margin-bottom: 20px; - 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; - } + #additional-text .condition.error { + color: red; /* Change text color for error conditions */ } - @media (max-width: 459px) { - .user-creation-container .container .content .category { - flex-direction: column; - } - } - - #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; + #additional-text .condition.success { + color: green; /* Change text color for success conditions */ } + +.user-creation-container .input-box { + margin-bottom: 20px; + width: 100%; +} + +.user-creation-container .input-box span.details { + display: block; + font-weight: 500; + margin-bottom: 5px; +} + +.user-creation-container .user-details .input-box input { + 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 { + border-color: #9b59b6; +} + +.user-creation-container form .gender-details .gender-title { + font-size: 20px; + font-weight: 500; +} + +.user-creation-container form .category { + display: flex; + width: 100%; + margin: 14px 0; + justify-content: space-between; +} + +.user-creation-container form .category label { + display: flex; + align-items: center; + cursor: pointer; +} + +.user-creation-container form .category label .dot { + height: 18px; + width: 18px; + border-radius: 50%; + margin-right: 10px; + background: #d9d9d9; + border: 5px solid transparent; + transition: all 0.3s ease; +} + +#dot-1:checked ~ .user-creation-container form .category label .one, +#dot-2:checked ~ .user-creation-container form .category label .two, +#dot-3:checked ~ .user-creation-container form .category label .three { + background: #9b59b6; + border-color: #d9d9d9; +} + +.user-creation-container form input[type="radio"] { + display: none; +} + +.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: 20px; + 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; + } +} + +#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; +} + +/* Shift the form to the left */ +#createUserForm { + margin-left: 20px; +} +#createUserForm.user-creation-container { + margin-left: 0; /* Reset the margin-left */ + max-width: 400px; /* Set a maximum width to the form container */ + margin: 20px; /* Add margin for spacing */ +} + +#createUserForm h3 { + text-align: left; /* Align the heading to the left */ + margin-bottom: 20px; /* Add spacing below the heading */ +} + +#createUserForm .content { + padding: 16px; /* Add padding to the form content */ + text-align: left; /* Align the form content to the left */ +} + +#createUserForm .user-details { + width: 100%; /* Make the user-details section full-width */ +} + +#createUserForm .input-box { + margin-bottom: 20px; + width: 100%; +} + +#createUserForm .input-box span.details { + display: block; + font-weight: 500; + margin-bottom: 5px; +} + +#createUserForm .user-details .input-box input { + 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; +} +#resetPasswordFormContainer { + margin-left: 20px; /* Adjust the margin-left to shift the form container to the left */ + max-width: 400px; /* Set a maximum width to the form container */ + margin: 20px; /* Add margin for spacing */ +} + +#resetPasswordFormContainer h3 { + text-align: left; /* Align the heading to the left */ + margin-bottom: 20px; /* Add spacing below the heading */ +} + +#resetPasswordFormContainer .content { + padding: 16px; /* Add padding to the form content */ + text-align: left; /* Align the form content to the left */ +} + +#resetPasswordFormContainer .user-details { + width: 100%; /* Make the user-details section full-width */ +} + +#resetPasswordFormContainer .input-box { + margin-bottom: 20px; + width: 100%; +} + +#resetPasswordFormContainer .input-box span.details { + display: block; + font-weight: 500; + margin-bottom: 5px; +} + +#resetPasswordFormContainer .user-details .input-box input { + 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; +} +#deleteUserContainer { + margin-left: 20px; /* Adjust the margin-left to shift the container to the left */ + max-width: 400px; /* Set a maximum width to the container */ + margin: 20px; /* Add margin for spacing */ +} + +#deleteUserContainer h3 { + text-align: left; /* Align the heading to the left */ + margin-bottom: 20px; /* Add spacing below the heading */ +} + +#deleteUserContainer .search-container { + text-align: left; /* Align the search container to the left */ + margin-bottom: 20px; /* Add spacing below the search container */ +} + +#deleteUserContainer .search-container input { + width: 80%; /* Adjust the width of the search input */ + padding: 10px; /* Add padding to the search input */ + margin-right: 10px; /* Add spacing to the right of the search input */ +} + +#deleteUserContainer .search-container button { + padding: 10px; + background-color: #007bff; /* Set background color to match other buttons */ + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + + /* Hover styles */ + &:hover { + background-color: #0056b3; /* Change background color on hover */ + } +} +#searchResultsContainer { + display: none; + text-align: left; /* Align the search results container to the left */ +} + +#searchResultsContainer h4 { + margin-bottom: 10px; /* Add spacing below the search results heading */ +} + .logs-table { width: 100%; border-collapse: collapse; @@ -235,4 +497,63 @@ body { .logs-table th { background-color: #f2f2f2; - } \ No newline at end of file + } + #additional-text2 { + width: 30%; /* Adjust the width as needed */ + margin-left: 800px; /* Push it to the right */ + margin-top: -500px; /* Adjust the negative margin to move it up */ + padding: 10px; /* Add padding for spacing */ + background-color: #f4f4f4; /* Add background color if desired */ + border-radius: 5px; /* Add border-radius for rounded corners */ + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add box shadow for a subtle effect */ + border: 1px solid #ddd; /* Add a 1px solid border with light gray color */ + font-family: 'Open Sans', sans-serif; + } + + #additional-text2 p { + font-size: 16px; /* Adjust font size as needed */ + line-height: 1.6; /* Adjust line height for better readability */ + } + + #additional-text2 .condition { + margin-bottom: 10px; /* Add space between conditions */ + } + + #additional-text2 .condition span { + font-weight: bold; /* Make condition labels bold */ + } + + #additional-text2 .condition.error { + color: red; /* Change text color for error conditions */ + } + + #additional-text2 .condition.success { + color: green; /* Change text color for success conditions */ + } + + #additional-text3 { + width: 30%; /* Adjust the width as needed */ + margin-left: 800px; /* Push it to the right */ + margin-top: -150px; /* Adjust the negative margin to move it up */ + padding: 10px; /* Add padding for spacing */ + background-color: #f4f4f4; /* Add background color if desired */ + border-radius: 5px; /* Add border-radius for rounded corners */ + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add box shadow for a subtle effect */ + border: 1px solid #ddd; /* Add a 1px solid border with light gray color */ + font-family: 'Open Sans', sans-serif; + } + + #additional-text3 p { + font-size: 16px; /* Adjust font size as needed */ + line-height: 1.6; /* Adjust line height for better readability */ + } + + #additional-text3 .condition { + margin-bottom: 10px; /* Add space between conditions */ + } + + #additional-text3 .condition span { + font-weight: bold; /* Make condition labels bold */ + } + + \ No newline at end of file diff --git a/Sean/views/user-creation.css b/Sean/views/user-creation.css deleted file mode 100644 index 339b484..0000000 --- a/Sean/views/user-creation.css +++ /dev/null @@ -1,101 +0,0 @@ -/* 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; - } -}
IDUsernameActivityTimestamp
IDUsernameActivityTimestamp
${log.id}${log.username}${log.activity}${log.timestamp}
${log.id}${log.username}${log.activity}${log.timestamp}