From 2365ea9edea744e694da17f4d4de657acfa8d926 Mon Sep 17 00:00:00 2001 From: BIG2EYEZ Date: Sat, 20 Jan 2024 18:05:42 +0800 Subject: [PATCH] design change --- Sean/server.js | 10 +- Sean/views/3.jpg | Bin 0 -> 8780 bytes Sean/views/home.ejs | 64 +--- Sean/views/inusers.ejs | 60 ++-- Sean/views/inusers.js | 24 +- Sean/views/style.css | 619 ++++++++++++++++++++++++++--------- Sean/views/user-creation.css | 101 ------ 7 files changed, 548 insertions(+), 330 deletions(-) create mode 100644 Sean/views/3.jpg delete mode 100644 Sean/views/user-creation.css 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 0000000000000000000000000000000000000000..9e7cdf568e2841aed64c46196bf1c42c3b0a2806 GIT binary patch literal 8780 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 literal 0 HcmV?d00001 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 %>!

- +
+
+ Any Issue faced, Please contact the administrator at 11111111 or ecosaverAdmin@gmail.com +
\ 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}