From 4252e7a1c563682371f01fdc5f73e98ad5bac21a Mon Sep 17 00:00:00 2001 From: M M Date: Thu, 27 Jun 2024 21:13:21 -0700 Subject: [PATCH 01/19] Initial commit for the table of the incidents page. --- Client/src/Pages/Incidents/index.jsx | 78 +++++++++++++++++++++++++--- 1 file changed, 72 insertions(+), 6 deletions(-) diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index e1aa44740..579c64815 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -1,9 +1,75 @@ -import React from 'react' +import * as React from 'react'; +import { styled } from '@mui/material/styles'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell, { tableCellClasses } from '@mui/material/TableCell'; +import TableContainer from '@mui/material/TableContainer'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import Paper from '@mui/material/Paper'; -const Incidents = () => { - return ( -
Incidents
- ) + +const StyledTableCell = styled(TableCell)(({ theme }) => ({ + [`&.${tableCellClasses.head}`]: { + backgroundColor: theme.palette.action.hover, + color: theme.palette.common.black, + }, + [`&.${tableCellClasses.body}`]: { + fontSize: 14, + }, +})); + +const StyledTableRow = styled(TableRow)(({ theme }) => ({ + '&:nth-of-type(1)': { + backgroundColor: theme.palette.action.hover, + }, + '&:nth-of-type(n+1)': { + backgroundColor: theme.palette.common.white, + }, + '&:last-child td, &:last-child th': { + border: 0, + }, +})); + +function createData(name, calories, fat, carbs, protein) { + return { name, calories, fat, carbs, protein }; } -export default Incidents \ No newline at end of file +const rows = [ + createData('Frozen yoghurt', 159, 6.0, 24, 4.0), + createData('Ice cream sandwich', 237, 9.0, 37, 4.3), + createData('Eclair', 262, 16.0, 24, 6.0), + createData('Cupcake', 305, 3.7, 67, 4.3), + createData('Gingerbread', 356, 16.0, 49, 3.9), +]; + +export default function CustomizedTables() { + return ( + + + + + Dessert (100g serving) + Calories + Fat (g) + Carbs (g) + Protein (g) + + + + {rows.map((row, index) => ( + + + {row.name} + + {row.calories} + {row.fat} + {row.carbs} + {row.protein} + + ))} + +
+ + ); +} From ecd3b6f8dbc0cca2977c4acc561cba2ce588aa63 Mon Sep 17 00:00:00 2001 From: M M Date: Fri, 28 Jun 2024 16:41:27 -0700 Subject: [PATCH 02/19] Change table to 3 rows. --- Client/src/Pages/Incidents/index.jsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 579c64815..f104e29ff 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -49,11 +49,9 @@ export default function CustomizedTables() { - Dessert (100g serving) - Calories - Fat (g) - Carbs (g) - Protein (g) + Status + Date & Time + Message @@ -64,8 +62,6 @@ export default function CustomizedTables() { {row.calories} {row.fat} - {row.carbs} - {row.protein} ))} From b254c9058e68db1bed90747558d087e3a4e9e58e Mon Sep 17 00:00:00 2001 From: M M Date: Fri, 28 Jun 2024 17:00:33 -0700 Subject: [PATCH 03/19] Added status labels to table. --- Client/src/Pages/Incidents/index.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index f104e29ff..31840c915 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { styled } from '@mui/material/styles'; import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; @@ -7,6 +6,7 @@ import TableContainer from '@mui/material/TableContainer'; import TableHead from '@mui/material/TableHead'; import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; +import { ColoredLabel, StatusLabel } from "../../Components/Label/"; const StyledTableCell = styled(TableCell)(({ theme }) => ({ @@ -36,11 +36,11 @@ function createData(name, calories, fat, carbs, protein) { } const rows = [ - createData('Frozen yoghurt', 159, 6.0, 24, 4.0), - createData('Ice cream sandwich', 237, 9.0, 37, 4.3), - createData('Eclair', 262, 16.0, 24, 6.0), - createData('Cupcake', 305, 3.7, 67, 4.3), - createData('Gingerbread', 356, 16.0, 49, 3.9), + createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), + createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), + createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), + createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), + createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), ]; export default function CustomizedTables() { From d954b5876611570a311656e4c0974565d7fe30ad Mon Sep 17 00:00:00 2001 From: M M Date: Fri, 28 Jun 2024 17:42:28 -0700 Subject: [PATCH 04/19] Added styling to the labels. --- Client/src/Components/Label/index.jsx | 7 +++++-- Client/src/Pages/Incidents/index.jsx | 11 ++++++----- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx index c47b53cb8..984b45da2 100644 --- a/Client/src/Components/Label/index.jsx +++ b/Client/src/Components/Label/index.jsx @@ -124,7 +124,7 @@ ColoredLabel.propTypes = { * */ -const StatusLabel = ({ status }) => { +const StatusLabel = ({ status, customStyles }) => { const theme = useTheme(); const colorLookup = { @@ -132,13 +132,15 @@ const StatusLabel = ({ status }) => { Waiting: theme.palette.labelRed.color, New: theme.palette.labelOrange.color, Active: theme.palette.labelGreen.color, + Down: theme.palette.error.main, // Assuming theme.palette.error.main is red + }; // Look up the color for the status, default to labelGray if not found const color = colorLookup[status] || theme.palette.labelGray.color; return ( - + { StatusLabel.propTypes = { status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active"]), + customStyles: PropTypes.object, }; export { ColoredLabel, StatusLabel }; diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 31840c915..9246b882f 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -36,13 +36,14 @@ function createData(name, calories, fat, carbs, protein) { } const rows = [ - createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), - createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), - createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), - createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), - createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), + createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), + createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), + createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), + createData(, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'), + createData(, '2024-03-14 21:41:09', 'HTTP 350 - NOK'), ]; + export default function CustomizedTables() { return ( From e4c29e77aa19d4b84b324686490c0d7293f618f8 Mon Sep 17 00:00:00 2001 From: M M Date: Fri, 28 Jun 2024 18:00:09 -0700 Subject: [PATCH 05/19] quick fix for eslint. --- Client/src/Pages/Incidents/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 9246b882f..e07890e20 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -6,7 +6,7 @@ import TableContainer from '@mui/material/TableContainer'; import TableHead from '@mui/material/TableHead'; import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; -import { ColoredLabel, StatusLabel } from "../../Components/Label/"; +import StatusLabel from "../../Components/Label/"; const StyledTableCell = styled(TableCell)(({ theme }) => ({ From 264410ca91e7336ec30f886456a6d1dfbf3d8c27 Mon Sep 17 00:00:00 2001 From: M M Date: Sat, 29 Jun 2024 17:07:04 -0700 Subject: [PATCH 06/19] Fixed import statement. --- Client/src/Pages/Incidents/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index e07890e20..c2d40428e 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -6,7 +6,7 @@ import TableContainer from '@mui/material/TableContainer'; import TableHead from '@mui/material/TableHead'; import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; -import StatusLabel from "../../Components/Label/"; +import { StatusLabel } from "../../Components/Label/"; const StyledTableCell = styled(TableCell)(({ theme }) => ({ From b7a35a67b18eca1a98562f85144d784094de5e02 Mon Sep 17 00:00:00 2001 From: M M Date: Sat, 29 Jun 2024 17:26:19 -0700 Subject: [PATCH 07/19] Added statuses to label prop types and fixed console errors. --- Client/src/Components/Label/index.jsx | 2 +- Client/src/Pages/Incidents/index.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx index 984b45da2..d6c6adbd5 100644 --- a/Client/src/Components/Label/index.jsx +++ b/Client/src/Components/Label/index.jsx @@ -153,7 +153,7 @@ const StatusLabel = ({ status, customStyles }) => { }; StatusLabel.propTypes = { - status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active"]), + status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active", "Down", "Cannot resolve"]), customStyles: PropTypes.object, }; diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index c2d40428e..a2cb59517 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -57,7 +57,7 @@ export default function CustomizedTables() { {rows.map((row, index) => ( - + {row.name} From 6c543ffa9c46451b0ed4ec5ef6f5e61da4233691 Mon Sep 17 00:00:00 2001 From: "Gorkem Cetin (BWL)" <167266851+gorkem-bwl@users.noreply.github.com> Date: Sun, 30 Jun 2024 21:17:07 -0400 Subject: [PATCH 08/19] Create PULLREQUESTS.md --- PULLREQUESTS.md | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 PULLREQUESTS.md diff --git a/PULLREQUESTS.md b/PULLREQUESTS.md new file mode 100644 index 000000000..725a175b7 --- /dev/null +++ b/PULLREQUESTS.md @@ -0,0 +1,32 @@ +## The Importance of Small Pull Requests + + +Pull requests are an integral part of our workflow, but does the scope of your pull request matter? In my opinion yes it does, and here’s why I think so + +### Smaller PRs make you spend more time thinking about your code before you write it + +Spend some time thinking about the PR you are going to open. If you think about the scope of the PR you will be forced to limit the scope of your feature, and that will force you to plan your code out. + +### Smaller PRs are easier to review + +If a PR is massive and complicated it is very difficult to review. Reviewers are busy working on their own features and can quickly run into cognitive limits when a large PR comes in. A PR should be simple enough that a busy dev can jump on the review without fatiguing themself. + +### Smaller PRs get better reviews + +The smaller your PR, the greater the amount of quality feedback a reviewer can give you. If you have 600 lines of codes you are not going to get decent feedback at line 500. Try to limit your PRs to 200 lines of code at the most in order to get quality feedback from your reviewers. + +### Smaller PRs get reviewed faster and merged faster + +If your PR is short and sweet your reviewers can get you feedback ASAP, this reduces the turnaround time for the whole pull request. If it takes your reviewer a whole day to review your pull request you are looking at 2 days for the + + Pull Request -> Review -> Revise -> Review -> Merge + +Process. If more revisions are required after the second review we’re looking at almost a week to get the feature reviewed, revised, and merged in. + +### Smaller PRs lead to better quality code + +If PRs are small and manageable it is far more likely that a dev will catch bugs during the review process. If our eyes glaze over at line 400 of a 700 line PR since we’ve reached our cognitive limit we’re not going to likely miss bugs in the last 300 lines of code. + +### Bonus Topic: Keep PRs focused + +It may be tempting to address a bug you suddenly remembered or make some tiny adjustments in some component that bothers you, but don’t! Keep all commits in your pull request fully focused on the specific feature you are working on. Open up another PR if you want to fix a big or work on another feature. From 8e7c6ceb991f5af866cc6945a211f9b56dd0441c Mon Sep 17 00:00:00 2001 From: "Gorkem Cetin (BWL)" <167266851+gorkem-bwl@users.noreply.github.com> Date: Sun, 30 Jun 2024 21:30:46 -0400 Subject: [PATCH 09/19] Updates to CONTRIBUTING.md --- CONTRIBUTING.md | 27 +++++++++------------------ 1 file changed, 9 insertions(+), 18 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index fd4a3f373..213744a30 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -3,7 +3,7 @@ First off, thanks for taking the time to contribute! ❤️ -All types of contributions are encouraged and valued. See the [Table of Contents](#table-of-contents) for different ways to help and details about how Uptime Manager project handles them. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉 +All types of contributions are encouraged and valued. See the [Table of Contents](#table-of-contents) for different ways to help and details about how the Uptime Manager project handles them. Please make sure to read the relevant section before making your contribution. It will make it much easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉 > And if you like the project, but don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about: > - Star the project @@ -15,23 +15,19 @@ All types of contributions are encouraged and valued. See the [Table of Contents - [I Have a Question](#i-have-a-question) - [I Want To Contribute](#i-want-to-contribute) -- [Reporting Bugs](#reporting-bugs) - [Suggesting Enhancements](#suggesting-enhancements) -- [Design Guidelines][#design-guidelines] -- [Styleguides](#Developer-guide-for-issue-lifecycle-process) - ## I Have a Question -> If you want to ask a question, we assume that you have read the available readme.md files. In the near future we'll come up with a proper installation and usage document. +If you'd like to ask a question, we assume that you have read the available readme.md files. In the near future we'll come up with a proper installation and usage document. -Before you ask a question, it is best to search for existing [Issues](/issues) that might help you. In case you have found a suitable issue and still need clarification, you can write your question in this issue. It is also advisable to search the internet for answers first. +Before you ask a question, search for existing [Issues](/issues) that might help you. In case you have found a suitable issue and still need clarification, you can write your question in this issue. It is also advisable to search the internet for answers first. If you then still feel the need to ask a question and need clarification, we recommend the following: - Open an [Issue](/issues/new). - Provide as much context as you can about what you're running into. -- Provide project and platform versions (nodejs, MongoDB, etc), depending on what seems relevant. +- Provide project and platform versions (NodeJs, MongoDB, etc), depending on what seems relevant. We will then take care of the issue as soon as possible. @@ -43,7 +39,6 @@ We will then take care of the issue as soon as possible. ### Reporting Bugs - #### Before Submitting a Bug Report A good bug report shouldn't leave others needing to chase you up for more information. Therefore, we ask you to investigate carefully, collect information and describe the issue in detail in your report. Please complete the following steps in advance to help us fix any potential bug as fast as possible. @@ -67,8 +62,8 @@ A good bug report shouldn't leave others needing to chase you up for more inform We use GitHub issues to track bugs and errors. If you run into an issue with the project: - Open an [Issue](/issues/new). (Since we can't be sure at this point whether it is a bug or not, we ask you not to talk about a bug yet and not to label the issue.) -- Explain the behavior you would expect and the actual behavior. -- Please provide as much context as possible and describe the *reproduction steps* that someone else can follow to recreate the issue on their own. This usually includes your code. For good bug reports you should isolate the problem and create a reduced test case. +- Explain the behaviour you would expect and the actual behaviour. +- Please provide as much context as possible and describe the *reproduction steps* that someone else can follow to recreate the issue on their own. This usually includes your code. For good bug reports, you should isolate the problem and create a reduced test case. - Provide the information you collected in the previous section. Once it's filed: @@ -77,9 +72,9 @@ Once it's filed: - A team member will try to reproduce the issue with your provided steps. If there are no reproduction steps or no obvious way to reproduce the issue, the team will ask you for those steps and mark the issue as `needs-repro`. Bugs with the `needs-repro` tag will not be addressed until they are reproduced. - If the team is able to reproduce the issue, it will be marked `needs-fix`, as well as possibly other tags (such as `critical`), and the issue will be left to be [implemented by someone](#your-first-code-contribution). -### Suggesting Enhancements +## Suggesting Enhancements -This section guides you through submitting an enhancement suggestion for CONTRIBUTING.md, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community to understand your suggestion and find related suggestions. +This section guides you through submitting an enhancement suggestion for CONTRIBUTING.md, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community understand your enhancements and find related suggestions. - Make sure that you are using the latest version. - Find out if the functionality is already covered, maybe by an individual configuration. @@ -96,18 +91,14 @@ Enhancement suggestions are tracked as [GitHub issues](/issues). - You may want to **include screenshots and animated GIFs** which help you demonstrate the steps or point out the part which the suggestion is related to. - **Explain why this enhancement would be useful** to most CONTRIBUTING.md users. You may also want to point out the other projects that solved it better and which could serve as inspiration. -### Design guidelines - We have a Figma file that includes: - All the dashboard elements and components - The design guideline for the app You can see it [here](https://www.figma.com/design/RPSfaw66HjzSwzntKcgDUV/Uptime-Genie?node-id=0-1&t=WqOFv9jqNTFGItpL-1). Since it is read-only, we encourage you to copy to your own Figma page, then work on it. - -### Developer Guide for Issue Lifecycle Process -[This document](https://docs.google.com/document/d/1Gy3LiimGUNoSiWAMbwyK3SeMADcCMjCLu6cQYoawtSE/edit#heading=h.1lj2lgut6m7h) outlines the process every developer should follow for managing the issues lifecycle. +[This document](https://docs.google.com/document/d/1Gy3LiimGUNoSiWAMbwyK3SeMADcCMjCLu6cQYoawtSE/edit#heading=h.1lj2lgut6m7h) outlines the process every developer should follow for managing the issues lifecycle. Also make sure you read the [document about how to make a good pull request](/PULLREQUESTS.md). ## Attribution This guide is based on the **contributing.md**. [Make your own](https://contributing.md/)! From 9fef75e82495d1af3150711fcc0422f5cb983a6b Mon Sep 17 00:00:00 2001 From: "Gorkem Cetin (BWL)" <167266851+gorkem-bwl@users.noreply.github.com> Date: Sun, 30 Jun 2024 21:36:29 -0400 Subject: [PATCH 10/19] Fix for contributing.md --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 213744a30..60cd78fc0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -74,7 +74,7 @@ Once it's filed: ## Suggesting Enhancements -This section guides you through submitting an enhancement suggestion for CONTRIBUTING.md, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community understand your enhancements and find related suggestions. +This section guides you through submitting an enhancement suggestion for the application, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community understand your enhancements and find related suggestions. - Make sure that you are using the latest version. - Find out if the functionality is already covered, maybe by an individual configuration. From e8d4a5d86875b4420bfa8151b14939b8c6b4dab2 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Mon, 1 Jul 2024 11:48:56 -0700 Subject: [PATCH 11/19] Add profileImage to schema, controllers, and routes --- Server/db/MongoDB.js | 10 +- Server/middleware/handleErrors.js | 1 + Server/models/user.js | 5 +- Server/package-lock.json | 149 ++++++++++++++++++++++++++++++ Server/package.json | 1 + Server/routes/authRoute.js | 4 +- Server/validation/joi.js | 1 + 7 files changed, 167 insertions(+), 4 deletions(-) diff --git a/Server/db/MongoDB.js b/Server/db/MongoDB.js index ef53863ee..0c9061594 100644 --- a/Server/db/MongoDB.js +++ b/Server/db/MongoDB.js @@ -32,7 +32,15 @@ const connect = async () => { */ const insertUser = async (req, res) => { try { - const newUser = new UserModel({ ...req.body }); + const userData = { ...req.body }; + console.log(req.file); + if (req.file) { + userData.profileImage = { + data: req.file.buffer, + contentType: req.file.mimetype, + }; + } + const newUser = new UserModel(userData); await newUser.save(); return await UserModel.findOne({ _id: newUser._id }).select("-password"); // .select() doesn't work with create, need to save then find } catch (error) { diff --git a/Server/middleware/handleErrors.js b/Server/middleware/handleErrors.js index 1e1e955c5..106100f41 100644 --- a/Server/middleware/handleErrors.js +++ b/Server/middleware/handleErrors.js @@ -2,6 +2,7 @@ const logger = require("../utils/logger"); const { errorMessages } = require("../utils/messages"); const handleErrors = (error, req, res, next) => { + console.log(error); const status = error.status || 500; const message = error.message || errorMessages.FRIENDLY_ERROR; const service = error.service || errorMessages.UNKNOWN_SERVICE; diff --git a/Server/models/user.js b/Server/models/user.js index a40824399..f13665cc1 100644 --- a/Server/models/user.js +++ b/Server/models/user.js @@ -20,8 +20,9 @@ const UserSchema = mongoose.Schema( type: String, required: true, }, - profilePicUrl: { - type: String, + profileImage: { + data: Buffer, + contentType: String, }, isActive: { type: Boolean, diff --git a/Server/package-lock.json b/Server/package-lock.json index edfb2ef44..bef07d2cf 100644 --- a/Server/package-lock.json +++ b/Server/package-lock.json @@ -21,6 +21,7 @@ "jsonwebtoken": "9.0.2", "mailersend": "^2.2.0", "mongoose": "^8.3.3", + "multer": "1.4.5-lts.1", "ping": "0.4.4", "winston": "^3.13.0" }, @@ -333,6 +334,12 @@ "node": ">= 8" } }, + "node_modules/append-field": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz", + "integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw==", + "license": "MIT" + }, "node_modules/aproba": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz", @@ -476,6 +483,12 @@ "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==", "license": "BSD-3-Clause" }, + "node_modules/buffer-from": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", + "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", + "license": "MIT" + }, "node_modules/bullmq": { "version": "5.7.15", "resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.7.15.tgz", @@ -491,6 +504,17 @@ "uuid": "^9.0.0" } }, + "node_modules/busboy": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", + "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==", + "dependencies": { + "streamsearch": "^1.1.0" + }, + "engines": { + "node": ">=10.16.0" + } + }, "node_modules/bytes": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", @@ -634,6 +658,51 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "license": "MIT" }, + "node_modules/concat-stream": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", + "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==", + "engines": [ + "node >= 0.8" + ], + "license": "MIT", + "dependencies": { + "buffer-from": "^1.0.0", + "inherits": "^2.0.3", + "readable-stream": "^2.2.2", + "typedarray": "^0.0.6" + } + }, + "node_modules/concat-stream/node_modules/readable-stream": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", + "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==", + "license": "MIT", + "dependencies": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "node_modules/concat-stream/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "license": "MIT" + }, + "node_modules/concat-stream/node_modules/string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "license": "MIT", + "dependencies": { + "safe-buffer": "~5.1.0" + } + }, "node_modules/console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", @@ -676,6 +745,12 @@ "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==", "license": "MIT" }, + "node_modules/core-util-is": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", + "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==", + "license": "MIT" + }, "node_modules/cors": { "version": "2.8.5", "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", @@ -1460,6 +1535,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==", + "license": "MIT" + }, "node_modules/isomorphic-unfetch": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz", @@ -1743,6 +1824,15 @@ "node": "*" } }, + "node_modules/minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/minipass": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz", @@ -1954,6 +2044,36 @@ "@msgpackr-extract/msgpackr-extract-win32-x64": "3.0.2" } }, + "node_modules/multer": { + "version": "1.4.5-lts.1", + "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.5-lts.1.tgz", + "integrity": "sha512-ywPWvcDMeH+z9gQq5qYHCCy+ethsk4goepZ45GLD63fOu0YcNecQxi64nDs3qluZB+murG3/D4dJ7+dGctcCQQ==", + "license": "MIT", + "dependencies": { + "append-field": "^1.0.0", + "busboy": "^1.0.0", + "concat-stream": "^1.5.2", + "mkdirp": "^0.5.4", + "object-assign": "^4.1.1", + "type-is": "^1.6.4", + "xtend": "^4.0.0" + }, + "engines": { + "node": ">= 6.0.0" + } + }, + "node_modules/multer/node_modules/mkdirp": { + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz", + "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==", + "license": "MIT", + "dependencies": { + "minimist": "^1.2.6" + }, + "bin": { + "mkdirp": "bin/cmd.js" + } + }, "node_modules/negotiator": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", @@ -2215,6 +2335,12 @@ "node": ">=4.0.0" } }, + "node_modules/process-nextick-args": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", + "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", + "license": "MIT" + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -2559,6 +2685,14 @@ "node": ">= 0.8" } }, + "node_modules/streamsearch": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", + "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==", + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/string_decoder": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", @@ -2702,6 +2836,12 @@ "node": ">= 0.6" } }, + "node_modules/typedarray": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", + "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==", + "license": "MIT" + }, "node_modules/undefsafe": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz", @@ -2834,6 +2974,15 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "license": "ISC" }, + "node_modules/xtend": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", + "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", + "license": "MIT", + "engines": { + "node": ">=0.4" + } + }, "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", diff --git a/Server/package.json b/Server/package.json index 3df37cda6..2133afd4d 100644 --- a/Server/package.json +++ b/Server/package.json @@ -23,6 +23,7 @@ "jsonwebtoken": "9.0.2", "mailersend": "^2.2.0", "mongoose": "^8.3.3", + "multer": "1.4.5-lts.1", "ping": "0.4.4", "winston": "^3.13.0" }, diff --git a/Server/routes/authRoute.js b/Server/routes/authRoute.js index 1049659fa..0ccddc3d2 100644 --- a/Server/routes/authRoute.js +++ b/Server/routes/authRoute.js @@ -1,5 +1,7 @@ const router = require("express").Router(); const { verifyJWT } = require("../middleware/verifyJWT"); +const multer = require("multer"); +const upload = multer(); const { registerController, @@ -11,7 +13,7 @@ const { } = require("../controllers/authController"); //Auth routes -router.post("/register", registerController); +router.post("/register", upload.single("profileImage"), registerController); router.post("/login", loginController); router.post("/user/:userId", verifyJWT, userEditController); diff --git a/Server/validation/joi.js b/Server/validation/joi.js index 4316939b4..9f0a97510 100644 --- a/Server/validation/joi.js +++ b/Server/validation/joi.js @@ -14,6 +14,7 @@ const registerValidation = joi.object({ lastname: joi.string().required(), email: joi.string().email().required(), password: joi.string().min(8).required(), + profileImage: joi.any(), }); const editUserParamValidation = joi.object({ From 20301d19333aad2d3a521a7846a55429251929f8 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Mon, 1 Jul 2024 11:50:35 -0700 Subject: [PATCH 12/19] removed stub method --- Client/src/Features/Auth/authSlice.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/Client/src/Features/Auth/authSlice.js b/Client/src/Features/Auth/authSlice.js index cf808b431..ef41c1b46 100644 --- a/Client/src/Features/Auth/authSlice.js +++ b/Client/src/Features/Auth/authSlice.js @@ -63,15 +63,6 @@ export const update = createAsyncThunk( } ); -export const deleteAccount = createAsyncThunk( - "auth/delete", - async (form, thunkApi) => { - try { - //TODO - } catch (error) {} - } -); - const handleAuthFulfilled = (state, action) => { state.isLoading = false; state.success = action.payload.success; From 50f219249b7a44bcc08661661d0502a31ac12b1f Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 2 Jul 2024 10:20:10 -0700 Subject: [PATCH 13/19] Added special case for User document --- Server/middleware/verifyOwnership.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/Server/middleware/verifyOwnership.js b/Server/middleware/verifyOwnership.js index 950d0a6e4..766e5545b 100644 --- a/Server/middleware/verifyOwnership.js +++ b/Server/middleware/verifyOwnership.js @@ -18,6 +18,17 @@ const verifyOwnership = (Model, paramName) => { throw error; } + // Special case for User model, as it will not have a `userId` field as other docs will + if (Model.modelName === "User") { + if (userId.toString() !== doc._id.toString()) { + const error = new Error(errorMessages.VERIFY_OWNER_UNAUTHORIZED); + error.status = 403; + throw error; + } + next(); + return; + } + // If the userID does not match the document's userID, return a 403 error if (userId.toString() !== doc.userId.toString()) { console.log(userId.toString(), doc.userId.toString()); @@ -26,9 +37,11 @@ const verifyOwnership = (Model, paramName) => { throw error; } next(); + return; } catch (error) { error.service = SERVICE_NAME; next(error); + return; } }; }; From 898738e287f8040bc2828169e55dcb82735228d0 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 2 Jul 2024 10:24:06 -0700 Subject: [PATCH 14/19] Added role field to User model --- Server/models/user.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/Server/models/user.js b/Server/models/user.js index a40824399..46157cce4 100644 --- a/Server/models/user.js +++ b/Server/models/user.js @@ -31,6 +31,11 @@ const UserSchema = mongoose.Schema( type: Boolean, default: false, }, + role: { + type: String, + default: "user", + enum: ["user", "admin"], + }, }, { timestamps: true, From d7d6effdda6c00dffe783d9d080595a89567c0c8 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 2 Jul 2024 10:38:02 -0700 Subject: [PATCH 15/19] Add route and controller --- Server/controllers/authController.js | 19 +++++++++++++++++++ Server/db/MongoDB.js | 10 ++++++++++ Server/routes/authRoute.js | 2 ++ 3 files changed, 31 insertions(+) diff --git a/Server/controllers/authController.js b/Server/controllers/authController.js index 16eb6eb00..be39851ab 100644 --- a/Server/controllers/authController.js +++ b/Server/controllers/authController.js @@ -151,6 +151,24 @@ const userEditController = async (req, res, next) => { } }; +/** + * Checks to see if an admin account exists + * @async + * @param {Express.Request} req + * @param {Express.Response} res + * @returns {Promise} + */ + +const checkAdminController = async (req, res) => { + try { + await req.db.checkAdmin(req, res); + } catch (error) { + error.service = SERVICE_NAME; + next(error); + return; + } +}; + /** * Returns a recovery token * @async @@ -238,6 +256,7 @@ module.exports = { registerController, loginController, userEditController, + checkAdminController, recoveryRequestController, validateRecoveryTokenController, resetPasswordController, diff --git a/Server/db/MongoDB.js b/Server/db/MongoDB.js index ef53863ee..0b7aa0c87 100644 --- a/Server/db/MongoDB.js +++ b/Server/db/MongoDB.js @@ -163,6 +163,15 @@ const resetPassword = async (req, res) => { } }; +const checkAdmin = async (req, res) => { + try { + const admin = await UserModel.findOne({ role: "admin" }); + console.log(admin); + } catch (error) { + throw error; + } +}; + //**************************************** // Monitors //**************************************** @@ -502,6 +511,7 @@ module.exports = { requestRecoveryToken, validateRecoveryToken, resetPassword, + checkAdmin, getAllMonitors, getMonitorById, getMonitorsByUserId, diff --git a/Server/routes/authRoute.js b/Server/routes/authRoute.js index 1049659fa..492f0d534 100644 --- a/Server/routes/authRoute.js +++ b/Server/routes/authRoute.js @@ -8,12 +8,14 @@ const { recoveryRequestController, validateRecoveryTokenController, resetPasswordController, + checkAdminController, } = require("../controllers/authController"); //Auth routes router.post("/register", registerController); router.post("/login", loginController); router.post("/user/:userId", verifyJWT, userEditController); +router.get("/users/admin", checkAdminController); //Recovery routes router.post("/recovery/request", recoveryRequestController); From c469a01ec5d567b0efacb7b12eac7e0551f3301d Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 2 Jul 2024 10:39:22 -0700 Subject: [PATCH 16/19] Updated validation --- Server/validation/joi.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Server/validation/joi.js b/Server/validation/joi.js index 4316939b4..64865a6c2 100644 --- a/Server/validation/joi.js +++ b/Server/validation/joi.js @@ -14,6 +14,7 @@ const registerValidation = joi.object({ lastname: joi.string().required(), email: joi.string().email().required(), password: joi.string().min(8).required(), + role: joi.string().required(), }); const editUserParamValidation = joi.object({ @@ -24,6 +25,7 @@ const editUserBodyValidation = joi.object({ firstname: joi.string(), lastname: joi.string(), profilePicUrl: joi.string(), + role: joi.string(), }); const recoveryValidation = joi.object({ From ec632812022503ca132a184c6b2773d58afa87b4 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 2 Jul 2024 10:45:38 -0700 Subject: [PATCH 17/19] Return admin account status on check --- Server/controllers/authController.js | 7 ++++++- Server/db/MongoDB.js | 5 ++++- Server/utils/messages.js | 1 + Server/validation/joi.js | 2 ++ 4 files changed, 13 insertions(+), 2 deletions(-) diff --git a/Server/controllers/authController.js b/Server/controllers/authController.js index be39851ab..bbf676e8a 100644 --- a/Server/controllers/authController.js +++ b/Server/controllers/authController.js @@ -161,7 +161,12 @@ const userEditController = async (req, res, next) => { const checkAdminController = async (req, res) => { try { - await req.db.checkAdmin(req, res); + const adminExists = await req.db.checkAdmin(req, res); + return res.status(200).json({ + success: true, + msg: successMessages.AUTH_ADMIN_EXISTS, + data: adminExists, + }); } catch (error) { error.service = SERVICE_NAME; next(error); diff --git a/Server/db/MongoDB.js b/Server/db/MongoDB.js index 0b7aa0c87..a789966d9 100644 --- a/Server/db/MongoDB.js +++ b/Server/db/MongoDB.js @@ -166,7 +166,10 @@ const resetPassword = async (req, res) => { const checkAdmin = async (req, res) => { try { const admin = await UserModel.findOne({ role: "admin" }); - console.log(admin); + if (admin !== null) { + return true; + } + return false; } catch (error) { throw error; } diff --git a/Server/utils/messages.js b/Server/utils/messages.js index cb435757c..9ed03fdb6 100644 --- a/Server/utils/messages.js +++ b/Server/utils/messages.js @@ -56,6 +56,7 @@ const successMessages = { AUTH_CREATE_RECOVERY_TOKEN: "Recovery token created successfully", AUTH_VERIFY_RECOVERY_TOKEN: "Recovery token verified successfully", AUTH_RESET_PASSWORD: "Password reset successfully", + AUTH_ADMIN_CHECK: "Admin check completed successfully", // Check Controller CHECK_CREATE: "Check created successfully", diff --git a/Server/validation/joi.js b/Server/validation/joi.js index 4316939b4..64865a6c2 100644 --- a/Server/validation/joi.js +++ b/Server/validation/joi.js @@ -14,6 +14,7 @@ const registerValidation = joi.object({ lastname: joi.string().required(), email: joi.string().email().required(), password: joi.string().min(8).required(), + role: joi.string().required(), }); const editUserParamValidation = joi.object({ @@ -24,6 +25,7 @@ const editUserBodyValidation = joi.object({ firstname: joi.string(), lastname: joi.string(), profilePicUrl: joi.string(), + role: joi.string(), }); const recoveryValidation = joi.object({ From 92c78166236d6033b0b7ca935aa54ca53dcae5bc Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Tue, 2 Jul 2024 14:51:31 -0400 Subject: [PATCH 18/19] Added validation to picture uploads --- Client/src/Components/ProgressBars/index.css | 27 +++- Client/src/Components/ProgressBars/index.jsx | 107 +++++++++----- .../TabPanels/Account/ProfilePanel.jsx | 41 +++++- .../src/Components/TextFields/Image/index.css | 18 ++- .../src/Components/TextFields/Image/index.jsx | 134 +++++++++--------- Client/src/Validation/validation.js | 16 +++ 6 files changed, 222 insertions(+), 121 deletions(-) diff --git a/Client/src/Components/ProgressBars/index.css b/Client/src/Components/ProgressBars/index.css index 37317228f..8bd3fc966 100644 --- a/Client/src/Components/ProgressBars/index.css +++ b/Client/src/Components/ProgressBars/index.css @@ -1,6 +1,6 @@ -.progress-bar-container{ - background-color: #fafafa; - padding: var(--env-var-spacing-1-plus); +.progress-bar-container { + background-color: #fafafa; + padding: var(--env-var-spacing-1-plus); } .progress-bar-container h2.MuiTypography-root, .progress-bar-container p.MuiTypography-root { @@ -10,9 +10,22 @@ .progress-bar-container p.MuiTypography-root { opacity: 0.6; } -.progress-bar-container p.MuiTypography-root:has(span){ - font-size: 12px; +.progress-bar-container p.MuiTypography-root:has(span) { + font-size: 12px; } .progress-bar-container p.MuiTypography-root span { - padding-left: 2px; -} \ No newline at end of file + padding-left: 2px; +} +.progress-bar-container:has(p.input-error){ + border-color: var(--env-var-color-24); + padding: 8px var(--env-var-spacing-1-plus); +} +.progress-bar-container p.input-error{ + color: var(--env-var-color-24); + opacity: 0.8; +} +.progress-bar-container:has(p.input-error)>.MuiStack-root>svg{ + fill: var(--env-var-color-24); + width: 20px; + height: 20px; +} diff --git a/Client/src/Components/ProgressBars/index.jsx b/Client/src/Components/ProgressBars/index.jsx index 211777080..0f0affd0d 100644 --- a/Client/src/Components/ProgressBars/index.jsx +++ b/Client/src/Components/ProgressBars/index.jsx @@ -9,6 +9,7 @@ import { Typography, } from "@mui/material"; import CloseIcon from "@mui/icons-material/Close"; +import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined"; import "./index.css"; /** @@ -21,7 +22,14 @@ import "./index.css"; * @returns {JSX.Element} The rendered component. */ -const ProgressUpload = ({ icon, label, size, progress = 0, onClick }) => { +const ProgressUpload = ({ + icon, + label, + size, + progress = 0, + onClick, + error, +}) => { const theme = useTheme(); return ( { border: `solid 1px ${theme.palette.otherColors.graishWhite}`, }} > - - {icon ? ( + + {error ? ( + + ) : icon ? ( { ) : ( "" )} - - - {label} + {error ? ( + + {error} - - {size} - - + ) : ( + + + {error ? error : label} + + {!error && size} + + )} { /> - - - - - - {progress} - % - - + {!error ? ( + + + + + + {progress} + % + + + ) : ( + "" + )} ); }; diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx index dd6398911..2208fd646 100644 --- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx +++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx @@ -7,7 +7,10 @@ import Button from "../../Button"; import EmailTextField from "../../TextFields/Email/EmailTextField"; import StringTextField from "../../TextFields/Text/TextField"; import Avatar from "../../Avatar"; -import { editProfileValidation } from "../../../Validation/validation"; +import { + editProfileValidation, + imageValidation, +} from "../../../Validation/validation"; import { useDispatch, useSelector } from "react-redux"; import { update } from "../../../Features/Auth/authSlice"; import ImageField from "../../TextFields/Image"; @@ -76,12 +79,30 @@ const ProfilePanel = () => { const [uploadProgress, setUploadProgress] = useState(0); const [isUploading, setIsUploading] = useState(false); const handlePicture = (event) => { + clearError("picture"); const pic = event.target.files[0]; console.log(pic); //TODO - add setPicture state to localData setPicture({ name: pic.name, type: pic.type, size: formatBytes(pic.size) }); setIsUploading(true); + const { error } = imageValidation.validate( + { + type: pic.type, + size: pic.size, + }, + { abortEarly: false } + ); + + if (error) { + setErrors((prev) => { + const updatedErrors = { ...prev }; + updatedErrors["picture"] = error.details[0].message; + return updatedErrors; + }); + return; + } + setTimeout(() => { //TODO - add setPicture state to localData setPicture((prev) => ({ ...prev, src: URL.createObjectURL(pic) })); @@ -98,20 +119,28 @@ const ProfilePanel = () => { }; const formatBytes = (bytes) => { if (bytes === 0) return "0 Bytes"; - const k = 1024; - const i = Math.floor(Math.log(bytes) / Math.log(k)); - return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " MB"; + const megabytes = bytes / (1024 * 1024); + return megabytes.toFixed(2) + " MB"; + }; + const clearError = (err) => { + setErrors((prev) => { + const updatedErrors = { ...prev }; + if (updatedErrors[err]) delete updatedErrors[err]; + return updatedErrors; + }); }; const handleCancelUpload = () => { //TODO - add setPicture state to localData - setPicture(null); + setPicture(); setUploadProgress(0); setIsUploading(false); + clearError("picture"); }; const handleClosePictureModal = () => { setIsOpen(""); setUploadProgress(0); setIsUploading(false); + clearError("picture"); }; //TODO - revisit once localData is set up properly @@ -353,7 +382,6 @@ const ProfilePanel = () => { aria-describedby="update-profile-picture" open={isModalOpen("picture")} onClose={handleClosePictureModal} - disablePortal > { size={picture?.size} progress={uploadProgress} onClick={handleCancelUpload} + error={errors["picture"]} /> ) : ( "" diff --git a/Client/src/Components/TextFields/Image/index.css b/Client/src/Components/TextFields/Image/index.css index 48b1a82ff..96a730bf0 100644 --- a/Client/src/Components/TextFields/Image/index.css +++ b/Client/src/Components/TextFields/Image/index.css @@ -1,13 +1,27 @@ .image-field-wrapper h2.MuiTypography-root, -.image-field-wrapper p.MuiTypography-root { +.image-field-wrapper p.MuiTypography-root, +.image-field-wrapper + p.MuiTypography-root, +.MuiStack-root:has(#modal-update-picture) h1.MuiTypography-root { color: var(--env-var-color-2); +} +.MuiStack-root:has(#modal-update-picture) h1.MuiTypography-root { + font-weight: 600; +} +.image-field-wrapper h2.MuiTypography-root, +.MuiStack-root:has(#modal-update-picture) button, +.MuiStack-root:has(#modal-update-picture) h1.MuiTypography-root { font-size: var(--env-var-font-size-medium); } .image-field-wrapper h2.MuiTypography-root { margin-top: 10px; } +.image-field-wrapper + p.MuiTypography-root { + margin-top: 8px; +} +.image-field-wrapper + p.MuiTypography-root, .image-field-wrapper p.MuiTypography-root { - opacity: 0.8; + opacity: 0.6; + font-size: var(--env-var-font-size-small-plus); } .image-field-wrapper h2.MuiTypography-root span { color: var(--env-var-color-3); diff --git a/Client/src/Components/TextFields/Image/index.jsx b/Client/src/Components/TextFields/Image/index.jsx index 5a3a35089..ae0a50c7d 100644 --- a/Client/src/Components/TextFields/Image/index.jsx +++ b/Client/src/Components/TextFields/Image/index.jsx @@ -27,77 +27,78 @@ const ImageField = ({ id, picture, onChange }) => { return ( <> {!picture ? ( - - + - - + - - - - Click to upload or drag and drop - - - (max. 800x400px) - - - + + + + + Click to upload or drag and drop + + (maximum size: 3MB) + + + Supported formats: JPG, PNG + ) : ( { borderRadius: "50%", overflow: "hidden", backgroundImage: `url(${picture})`, - backgroundSize: "cover" + backgroundSize: "cover", }} - > - + > )} diff --git a/Client/src/Validation/validation.js b/Client/src/Validation/validation.js index 4aea7e48e..00903fdb7 100644 --- a/Client/src/Validation/validation.js +++ b/Client/src/Validation/validation.js @@ -150,7 +150,23 @@ const createMonitorValidation = joi.object({ }), }); +const imageValidation = joi.object({ + type: joi.string().valid("image/jpeg", "image/png").messages({ + "any.only": "Invalid file format.", + "string.empty": "File type required.", + }), + size: joi + .number() + .max(3 * 1024 * 1024) + .messages({ + "number.base": "File size must be a number.", + "number.max": "File size must be less than 3 MB.", + "number.empty": "File size required.", + }), +}); + export { + imageValidation, createMonitorValidation, registerValidation, loginValidation, From 5cbe916a946831713064c987e45eabce5a9827eb Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Tue, 2 Jul 2024 14:56:02 -0400 Subject: [PATCH 19/19] Added missing proptype and jsdocs --- Client/src/Components/ProgressBars/index.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Client/src/Components/ProgressBars/index.jsx b/Client/src/Components/ProgressBars/index.jsx index 0f0affd0d..2d60683ef 100644 --- a/Client/src/Components/ProgressBars/index.jsx +++ b/Client/src/Components/ProgressBars/index.jsx @@ -19,6 +19,7 @@ import "./index.css"; * @param {string} props.size - The size information for the progress item. * @param {number} props.progress - The current progress value (0-100). * @param {function} props.onClick - The function to handle click events on the remove button. + * @param {string} props.error - Error message to display if there's an error (optional). * @returns {JSX.Element} The rendered component. */ @@ -136,6 +137,7 @@ ProgressUpload.propTypes = { size: PropTypes.string.isRequired, // Size information for the progress item progress: PropTypes.number.isRequired, // Current progress value (0-100) onClick: PropTypes.func.isRequired, // Function to handle click events on the remove button + error: PropTypes.string, // Error message to display if there's an error (optional) }; export default ProgressUpload;