From 59f8acff1cd78c9e9c67eed98f895d1cb0195676 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Sat, 6 Jul 2024 14:33:36 -0400 Subject: [PATCH 1/7] Refactored Alert component --- Client/src/Components/Alert/index.css | 9 +++++ Client/src/Components/Alert/index.jsx | 40 +++++++++++++++++++ .../TabPanels/Account/PasswordPanel.jsx | 19 +++------ Client/src/Pages/Account/index.css | 6 +-- Client/src/Pages/Demo/Demo.jsx | 29 +++++++++++++- Client/src/Utils/Theme.js | 24 +++++++++-- 6 files changed, 106 insertions(+), 21 deletions(-) create mode 100644 Client/src/Components/Alert/index.css create mode 100644 Client/src/Components/Alert/index.jsx diff --git a/Client/src/Components/Alert/index.css b/Client/src/Components/Alert/index.css new file mode 100644 index 000000000..9f0c397e3 --- /dev/null +++ b/Client/src/Components/Alert/index.css @@ -0,0 +1,9 @@ +.alert { + margin: 0; + width: fit-content; + padding: var(--env-var-spacing-1-plus); + font-size: var(--env-var-font-size-medium); +} +.alert .MuiStack-root { + max-width: 85%; +} diff --git a/Client/src/Components/Alert/index.jsx b/Client/src/Components/Alert/index.jsx new file mode 100644 index 000000000..5cf8b7ddb --- /dev/null +++ b/Client/src/Components/Alert/index.jsx @@ -0,0 +1,40 @@ +import { useTheme } from "@emotion/react"; +import { Box, Stack } from "@mui/material"; +import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; +import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined"; +import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined"; +import "./index.css"; + +const icons = { + info: , + error: , + warning: , +}; + +const Alert = ({ variant, title, body }) => { + const theme = useTheme(); + const { bg, border, color } = theme.alert[variant]; + const icon = icons[variant]; + + return ( + + {icon && {icon}} + + {title && {title}} + {body && {body}} + + + ); +}; + +export default Alert; diff --git a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx index 1e04ecaea..ebd0743e8 100644 --- a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx +++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx @@ -1,14 +1,11 @@ import TabPanel from "@mui/lab/TabPanel"; import React, { useState } from "react"; -// import AnnouncementsDualButtonWithIcon from "../../Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon"; -import AnnouncementsDualButtonWithIcon from "../../Toast/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon"; import { useTheme } from "@emotion/react"; import { Box, Divider, Stack, Typography } from "@mui/material"; -import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; -import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined"; import ButtonSpinner from "../../ButtonSpinner"; import PasswordTextField from "../../TextFields/Password/PasswordTextField"; import { editPasswordValidation } from "../../../Validation/validation"; +import Alert from "../../Alert"; /** * PasswordPanel component manages the form for editing password. @@ -96,13 +93,9 @@ const PasswordPanel = () => { spellCheck="false" >
- - } - subject="SSO login" +
@@ -181,8 +174,8 @@ const PasswordPanel = () => {
- } + diff --git a/Client/src/Pages/Account/index.css b/Client/src/Pages/Account/index.css index 212292d9b..0c537a30b 100644 --- a/Client/src/Pages/Account/index.css +++ b/Client/src/Pages/Account/index.css @@ -42,9 +42,9 @@ justify-content: space-between; align-items: flex-start; } -.edit-profile-form__wrapper .MuiStack-root:not(.row-stack), -.edit-password-form__wrapper .MuiStack-root:not(.row-stack), -.edit-organization-form__wrapper .MuiStack-root:not(.row-stack) { +.edit-profile-form__wrapper>.MuiStack-root:not(.row-stack), +.edit-password-form__wrapper>.MuiStack-root:not(.row-stack), +.edit-organization-form__wrapper>.MuiStack-root:not(.row-stack) { flex-direction: column; gap: 8px; margin-right: 10px; diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx index 552c65ad2..42e30b6d2 100644 --- a/Client/src/Pages/Demo/Demo.jsx +++ b/Client/src/Pages/Demo/Demo.jsx @@ -15,6 +15,7 @@ import { Tabs, Typography, Stack, + Box, } from "@mui/material"; import { ColoredLabel, StatusLabel } from "../../Components/Label/"; import Avatar from "../../Components/Avatar/"; @@ -29,7 +30,7 @@ import AddIcon from "@mui/icons-material/Add"; import Divider from "@mui/material/Divider"; import UploadIcon from "@mui/icons-material/Upload"; import SendIcon from "@mui/icons-material/Send"; -import ImageIcon from '@mui/icons-material/Image'; +import ImageIcon from "@mui/icons-material/Image"; // Redux import { useSelector } from "react-redux"; @@ -38,6 +39,7 @@ import { getMonitors } from "../../Features/Monitors/monitorsSlice"; import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice"; import ImageField from "../../Components/TextFields/Image"; import ProgressUpload from "../../Components/ProgressBars"; +import Alert from "../../Components/Alert"; const cols = [ { @@ -423,7 +425,30 @@ const Demo = () => { - } label="image.jpg" size="2 MB"/> + } label="image.jpg" size="2 MB" /> + + + + + + + + + + + +
diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js index c9f20126f..e4ab491a3 100644 --- a/Client/src/Utils/Theme.js +++ b/Client/src/Utils/Theme.js @@ -88,14 +88,32 @@ const theme = createTheme({ }, content: { pX: "80px", - pY: "40px" + pY: "40px", }, gap: { small: "8px", medium: "12px", + ml: "16px", large: "24px", - xl: "40px" - } + xl: "40px", + }, + alert: { + info: { + color: secondaryMain, + bg: otherColorsWhite, + border: "#d0d5dd", + }, + error: { + color: "#d92d20", + bg: "#fffaef", + border: "#f04438", + }, + warning: { + color: "#f79009", + bg: "#fffaef", + border: "#fecf60" + }, + }, }); export default theme; From bf62404247459765a4f3ee94e2482b5459b0f2a5 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Sat, 6 Jul 2024 14:36:27 -0400 Subject: [PATCH 2/7] Removed redundant css --- Client/src/Pages/Account/index.css | 30 +++--------------------------- 1 file changed, 3 insertions(+), 27 deletions(-) diff --git a/Client/src/Pages/Account/index.css b/Client/src/Pages/Account/index.css index 0c537a30b..d85ada5a7 100644 --- a/Client/src/Pages/Account/index.css +++ b/Client/src/Pages/Account/index.css @@ -28,8 +28,7 @@ margin: 50px 0; } .account .MuiDivider-root, -.account .MuiOutlinedInput-root fieldset, -.account .announcement-tile { +.account .MuiOutlinedInput-root fieldset { border-color: var(--env-var-color-29); } .account [class$="-form"] { @@ -74,36 +73,13 @@ #input-team-member { padding: 10px; } -.edit-password-form__wrapper > .announcement-tile { - width: 100%; -} -.edit-password-form__wrapper - > .announcement-tile - .announcement-content-subject { - margin-bottom: 2px; -} #edit-new-password + div > button > svg, #edit-confirm-password + div > button > svg, #edit-current-password + div > button > svg { color: var(--env-var-color-29); } -.edit-password-form__wrapper .announcement-tile { - margin: 0; -} -.edit-password-form__wrapper .announcement-tile .announcement-close { - margin-left: auto; -} -.MuiBox-root > .announcement-tile { - border-color: var(--env-var-color-27); - background-color: var(--lighter-env-var-color-27); -} -.MuiBox-root > .announcement-tile .announcement-content-body { - color: var(--env-var-color-28); -} -.MuiBox-root > .announcement-tile .announcement-close svg, -.edit-password-form__wrapper > .announcement-tile .announcement-close svg { - display: none; -} + + #org-name-flex-container .Mui-disabled { color: var(--env-var-color-2) !important; } From 49f8958418ef93352dc511ee4e5daa486de9d36d Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Sat, 6 Jul 2024 14:44:04 -0400 Subject: [PATCH 3/7] Added proptypes and jsdocs, and color fix --- Client/src/Components/Alert/index.jsx | 20 ++++++++++++++++++++ Client/src/Utils/Theme.js | 2 +- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/Client/src/Components/Alert/index.jsx b/Client/src/Components/Alert/index.jsx index 5cf8b7ddb..bf2531bba 100644 --- a/Client/src/Components/Alert/index.jsx +++ b/Client/src/Components/Alert/index.jsx @@ -1,3 +1,4 @@ +import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; import { Box, Stack } from "@mui/material"; import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; @@ -5,12 +6,25 @@ import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined"; import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined"; import "./index.css"; +/** + * Icons mapping for different alert variants. + * @type {Object} + */ + const icons = { info: , error: , warning: , }; +/** + * @param {Object} props + * @param {'info' | 'error' | 'warning'} props.variant - The type of alert. + * @param {string} [props.title] - The title of the alert. + * @param {string} [props.body] - The body text of the alert. + * @returns {JSX.Element} + */ + const Alert = ({ variant, title, body }) => { const theme = useTheme(); const { bg, border, color } = theme.alert[variant]; @@ -37,4 +51,10 @@ const Alert = ({ variant, title, body }) => { ); }; +Alert.propTypes = { + variant: PropTypes.oneOf(["info", "error", "warning"]).isRequired, + title: PropTypes.string, + body: PropTypes.string, +}; + export default Alert; diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js index e4ab491a3..60273cd95 100644 --- a/Client/src/Utils/Theme.js +++ b/Client/src/Utils/Theme.js @@ -105,7 +105,7 @@ const theme = createTheme({ }, error: { color: "#d92d20", - bg: "#fffaef", + bg: "hsla(0, 100%, 52%, 0.03)", border: "#f04438", }, warning: { From d88ac3c5c454c45585770d2031a8954ee9b3a077 Mon Sep 17 00:00:00 2001 From: Alexander Holliday Date: Sat, 6 Jul 2024 22:18:23 -0700 Subject: [PATCH 4/7] Update authRoute.js Added userID param back to delete route, needed for middleware functionality --- Server/routes/authRoute.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Server/routes/authRoute.js b/Server/routes/authRoute.js index fdf04230c..e47a52cf7 100644 --- a/Server/routes/authRoute.js +++ b/Server/routes/authRoute.js @@ -26,7 +26,7 @@ router.post( userEditController ); router.get("/users/admin", checkAdminController); -router.delete("/user", verifyJWT, verifyOwnership(User, "userId") , deleteUserController); +router.delete("/user/:userId", verifyJWT, verifyOwnership(User, "userId") , deleteUserController); //Recovery routes router.post("/recovery/request", recoveryRequestController); From ad26d1ba1954086477912def7da552ee00a1a03a Mon Sep 17 00:00:00 2001 From: Alexander Holliday Date: Sat, 6 Jul 2024 22:19:02 -0700 Subject: [PATCH 5/7] Update authController.js Removed log statement --- Server/controllers/authController.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/Server/controllers/authController.js b/Server/controllers/authController.js index 530ba2319..757d8f78b 100644 --- a/Server/controllers/authController.js +++ b/Server/controllers/authController.js @@ -278,8 +278,6 @@ const deleteUserController = async (req, res, next) => { const decodedToken = jwt.decode(token) const { _id, email } = decodedToken; - console.log("USERID: ", _id, " Email: ", email) - const decodedTokenCastedAsRequest = { params: { userId: _id From 89c0ccac566be064978d7bc14d2c7b6d535afe1e Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Sun, 7 Jul 2024 18:25:03 -0400 Subject: [PATCH 6/7] Added navigation button --- Client/src/Pages/CreateNewMonitor/index.css | 1 + Client/src/Pages/CreateNewMonitor/index.jsx | 17 ++++++++++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/Client/src/Pages/CreateNewMonitor/index.css b/Client/src/Pages/CreateNewMonitor/index.css index 26b41fb83..4702127f5 100644 --- a/Client/src/Pages/CreateNewMonitor/index.css +++ b/Client/src/Pages/CreateNewMonitor/index.css @@ -10,6 +10,7 @@ font-size: var(--env-var-font-size-large); } .create-monitor-form p.MuiTypography-root, +.create-monitor-form button.MuiButtonBase-root, #monitor-frequencies { font-size: var(--env-var-font-size-medium); } diff --git a/Client/src/Pages/CreateNewMonitor/index.jsx b/Client/src/Pages/CreateNewMonitor/index.jsx index dd94f907a..805aa6426 100644 --- a/Client/src/Pages/CreateNewMonitor/index.jsx +++ b/Client/src/Pages/CreateNewMonitor/index.jsx @@ -11,6 +11,7 @@ import { createMonitorValidation } from "../../Validation/validation"; import { createMonitor } from "../../Features/Monitors/monitorsSlice"; import { useNavigate } from "react-router-dom"; import { useTheme } from "@emotion/react"; +import WestRoundedIcon from "@mui/icons-material/WestRounded"; const CreateNewMonitor = () => { const MS_PER_MINUTE = 60000; @@ -133,6 +134,20 @@ const CreateNewMonitor = () => { padding: `${theme.content.pY} ${theme.content.pX}`, }} > +