TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into feat/issue-225-Maintenance-page

Browse Source
This commit is contained in:
Alexander Holliday authored and GitHub committed 2024-07-07 21:57:44 -07:00
2 parents 31c16e8d3d feb4a8899d
commit 4de1e71344
95 files changed
+3630 -1384
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.dockerignore
+3
View File
@@ -0,0 +1,3 @@
Client/node_modules/
Server/node_modules/
*.env
CONTRIBUTING.md
+9 -18
View File
@@ -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 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.
@@ -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/)!
Client/package-lock.json
Generated
+535 -70
View File
File diff suppressed because it is too large. Load diff
Client/package.json
+3 -1
View File
@@ -31,7 +31,9 @@
"react-router": "^6.23.0",
"react-router-dom": "^6.23.1",
"react-toastify": "^10.0.5",
"redux-persist": "6.0.0"
"recharts": "2.12.7",
"redux-persist": "6.0.0",
"vite-plugin-svgr": "^4.2.0"
},
"devDependencies": {
"@types/react": "^18.2.66",
Client/src/App.jsx
+19 -2
View File
@@ -1,4 +1,4 @@
import { Routes, Route } from "react-router-dom";
import { Routes, Route, Navigate } from "react-router-dom";
// import "./App.css";
import NotFound from "./Pages/NotFound";
import Login from "./Pages/Login";
@@ -6,7 +6,9 @@ import Register from "./Pages/Register";
import HomeLayout from "./Layouts/HomeLayout";
import Demo from "./Pages/Demo/Demo";
import PlayGround from "./Pages/PlayGround/PlayGround";
import Account from "./Pages/Account";
import Monitors from "./Pages/Monitors";
import CreateNewMonitor from "./Pages/CreateNewMonitor";
import Incidents from "./Pages/Incidents";
import Status from "./Pages/Status";
import Integrations from "./Pages/Integrations";
@@ -15,7 +17,6 @@ import ForgotPassword from "./Pages/ForgotPassword";
import CheckEmail from "./Pages/CheckEmail";
import SetNewPassword from "./Pages/SetNewPassword";
import NewPasswordConfirmed from "./Pages/NewPasswordConfirmed";
import ToastComponent from "./Components/Toast";
import ProtectedRoute from "./Components/ProtectedRoute";
import Maintenance from "./Pages/Maintenance";
@@ -33,6 +34,10 @@ function App() {
path="/monitors"
element={<ProtectedRoute Component={Monitors} />}
/>
<Route
path="/monitors/create"
element={<ProtectedRoute Component={CreateNewMonitor} />}
/>
<Route
path="incidents"
element={<ProtectedRoute Component={Incidents} />}
@@ -53,6 +58,18 @@ function App() {
path="settings"
element={<ProtectedRoute Component={Settings} />}
/>
<Route
path="account/profile"
element={<ProtectedRoute Component={Account} open="profile" />}
/>
<Route
path="account/password"
element={<ProtectedRoute Component={Account} open="password" />}
/>
<Route
path="account/team"
element={<ProtectedRoute Component={Account} open="team" />}
/>
</Route>
<Route exact path="/login" element={<Login />} />
Client/src/Components/Alert/index.css
+9
View File
@@ -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%;
}
Client/src/Components/Alert/index.jsx
+60
View File
@@ -0,0 +1,60 @@
import PropTypes from "prop-types";
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";
/**
* Icons mapping for different alert variants.
* @type {Object<string, JSX.Element>}
*/
const icons = {
info: <InfoOutlinedIcon />,
error: <ErrorOutlineOutlinedIcon />,
warning: <WarningAmberOutlinedIcon />,
};
/**
* @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];
const icon = icons[variant];
return (
<Stack
direction="row"
justifyContent="flex-start"
className="alert row-stack"
gap={theme.gap.ml}
sx={{
backgroundColor: bg,
border: `solid 1px ${border}`,
borderRadius: `${theme.shape.borderRadius}px`,
}}
>
{icon && <Box sx={{ color: color }}>{icon}</Box>}
<Stack direction="column" gap="2px" sx={{ flex: 1, color: color }}>
{title && <Box sx={{ fontWeight: "700" }}>{title}</Box>}
{body && <Box sx={{ fontWeight: "400" }}>{body}</Box>}
</Stack>
</Stack>
);
};
Alert.propTypes = {
variant: PropTypes.oneOf(["info", "error", "warning"]).isRequired,
title: PropTypes.string,
body: PropTypes.string,
};
export default Alert;
Client/src/Components/Button/index.jsx
+3 -1
View File
@@ -48,10 +48,11 @@ const levelConfig = {
* <Button type="submit" level="error" label="Error" disabled sx={{marginTop: "1rem"}}/>
*/
const Button = ({ type, level, label, disabled, img, onClick, sx }) => {
const Button = ({ id, type, level, label, disabled, img, onClick, sx }) => {
const { variant, color } = levelConfig[level];
return (
<MuiButton
id={id}
type={type}
variant={variant}
color={color}
@@ -72,6 +73,7 @@ const Button = ({ type, level, label, disabled, img, onClick, sx }) => {
};
Button.propTypes = {
id: PropTypes.string,
type: PropTypes.string,
level: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
Client/src/Components/Charts/BarChart/BarChart.jsx
-63
View File
@@ -1,63 +0,0 @@
import "./barChart.css";
import PropTypes from "prop-types";
const RANGE_MAX = 100;
const RANGE_MIN = 1;
/**
* Normalizes the response times of a set of checks to a specified range.
* This function calculates the minimum and maximum response times from the input,
* then scales each check's response time linearly between `RANGE_MIN` and `RANGE_MAX`.
*
* @param {Array<Checks>} checks - An array of check objects. Each check should have a `responseTime` property.
* @returns {Array<Checks>} An array of check objects with normalized `responseTime` values.
*/
const normalizeData = (checks) => {
const min = checks.reduce((accum, cur) => {
return Math.min(accum, cur.responseTime);
}, Infinity);
const max = checks.reduce((accum, cur) => {
return Math.max(accum, cur.responseTime);
}, 0);
const normalizedChecks = checks.map((check) => {
let normailzedResponseTime =
RANGE_MIN +
((check.responseTime - min) * (RANGE_MAX - RANGE_MIN)) / (max - min);
const normalizedCheck = { ...check, responseTime: normailzedResponseTime };
return normalizedCheck;
});
return normalizedChecks;
};
/**
* BarChart renders a bar chart visualization for a set of checks. Each bar represents a check's response time,
* with the color indicating the check's status (green for successful checks, red for failed ones).
*
* @component
* @param {Array<Checks>} checks - An array of check objects to be visualized. Each check object should have an `_id`,
* a `status` indicating success (true) or failure (false), and a `responseTime` representing the height of the bar in percentage.
*/
const BarChart = ({ checks = [] }) => {
const normailzedChecks = normalizeData(checks);
return (
<div className="bar-chart">
{normailzedChecks.map((check) => {
return (
<div
key={check._id}
className={`bar ${check.status ? "green" : "red"}`}
style={{ height: `${check.responseTime}%` }}
/>
);
})}
</div>
);
};
BarChart.propTypes = {
checks: PropTypes.array,
};
export default BarChart;
Client/src/Components/Charts/BarChart/barChart.css
-20
View File
@@ -1,20 +0,0 @@
.bar-chart {
display: flex;
justify-content: space-around;
align-items: flex-end;
height: 50px;
width: 300px;
}
.bar {
width: 7%;
transition: height 0.3s ease;
}
.green {
background-color: var(--env-var-color-23);
}
.red {
background-color: var(--env-var-color-24);
}
Client/src/Components/Charts/ResponseTimeChart/index.css
+7
View File
@@ -0,0 +1,7 @@
.chart-container {
display: flex;
justify-content: space-around;
align-items: flex-end;
height: 50px;
width: 300px;
}
Client/src/Components/Charts/ResponseTimeChart/index.jsx
+78
View File
@@ -0,0 +1,78 @@
import "./index.css";
import PropTypes from "prop-types";
import { BarChart, Bar, ResponsiveContainer, Cell } from "recharts";
const RANGE_MAX = 100;
const RANGE_MIN = 1;
const calculatePercentile = (arr, percentile) => {
const sorted = arr.slice().sort((a, b) => a.responseTime - b.responseTime);
const index = (percentile / 100) * (sorted.length - 1);
const lower = Math.floor(index);
const upper = lower + 1;
const weight = index % 1;
if (upper >= sorted.length) return sorted[lower].responseTime;
return (
sorted[lower].responseTime * (1 - weight) +
sorted[upper].responseTime * weight
);
};
const normalizeData = (checks) => {
if (checks.length > 1) {
// Get the 5th and 95th percentile
const min = calculatePercentile(checks, 5);
const max = calculatePercentile(checks, 95);
const normalizedChecks = checks.map((check) => {
// Normalize the response time between 1 and 100
let normalizedResponseTime =
RANGE_MIN +
((check.responseTime - min) * (RANGE_MAX - RANGE_MIN)) / (max - min);
// Put a floor on the response times so we don't have extreme outliers
// Better visuals
normalizedResponseTime = Math.max(
RANGE_MIN,
Math.min(RANGE_MAX, normalizedResponseTime)
);
return {
...check,
responseTime: normalizedResponseTime,
};
});
return normalizedChecks;
} else {
return checks;
}
};
const ResponseTimeChart = ({ checks = [] }) => {
const normalizedChecks = normalizeData(checks);
return (
<div className="chart-container">
<ResponsiveContainer width="100%" height="100%">
<BarChart width={150} height={40} data={normalizedChecks}>
<Bar maxBarSize={10} dataKey="responseTime">
{normalizedChecks.map((check, index) => (
<Cell
key={`cell-${index}`}
fill={
check.status === true
? "var(--env-var-color-23)"
: "var(--env-var-color-24)"
}
/>
))}
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
);
};
ResponseTimeChart.propTypes = {
checks: PropTypes.array,
};
export default ResponseTimeChart;
Client/src/Components/Checkbox/Checkbox.css
+15
View File
@@ -12,6 +12,14 @@
cursor: pointer;
}
.custom-checkbox {
width: var(--env-var-img-width-1);
height: var(--env-var-img-width-1);
margin: 0;
padding: 0;
cursor: pointer;
}
.checkbox-label {
margin-left: 5px;
font-size: var(--env-var-font-size-medium);
@@ -19,3 +27,10 @@
font-weight: 600;
cursor: pointer;
}
.custom-checkbox-label {
margin-left: var(--env-var-font-size-large);
font-size: var(--env-var-font-size-medium);
color: var(--env-var-color-5);
font-weight: 500;
}
Client/src/Components/Checkbox/CustomizableCheckbox.jsx
+24
View File
@@ -0,0 +1,24 @@
import React from "react";
import "./Checkbox.css";
import PropsTypes from "prop-types";
const CustomizableCheckbox = (props) => {
return (
<div className="checkbox-holder">
<input
checked={props.isChecked}
onChange={props.handleChange}
className="custom-checkbox"
type="checkbox"
id={props.id}
/>
<label className="custom-checkbox-label" htmlFor={props.id}>{props.title}</label>
</div>
);
};
CustomizableCheckbox.propsTypes = {
title: PropsTypes.string.isRequired,
};
export default CustomizableCheckbox;
Client/src/Components/ConfigBox/index.css
+8 -17
View File
@@ -1,24 +1,15 @@
.config-box {
display: flex;
padding: 30px 40px;
padding: var(--env-var-spacing-4) 50px;
padding-bottom: 60px;
border: 1px solid var(--env-var-color-16);
border-radius: var(--env-var-radius-1);
justify-content: space-between;
padding-bottom: 50px;
}
.config-box-desc {
width: 35%;
}
.config-box-desc-title {
color: var(--env-var-color-5);
font-size: var(--env-var-font-size-large);
font-weight: 700;
margin-bottom: var(--env-var-spacing-1);
}
.config-box-desc-text {
color: var(--env-var-color-5);
font-size: var(--env-var-font-size-medium);
.config-box>.MuiStack-root{
flex-direction: column;
flex: 1;
}
.config-box>.MuiStack-root:first-of-type{
margin-right: var(--env-var-spacing-3);
}
Client/src/Components/CurrentMonitors/index.jsx
-38
View File
@@ -1,38 +0,0 @@
import SearchTextField from "../TextFields/Search/SearchTextField";
import "./index.css";
import HostsTable from "../HostsTable";
import Pagination from "../Pagination";
import PropTypes from "prop-types";
/**
* CurrentMonitors displays the current status of monitor
*
* @component
* @param {Array<Monitor>} monitors - An array of monitor objects to be displayed.
*/
const CurrentMonitors = ({ monitors }) => {
return (
<div className="current-monitors">
<div className="current-monitors-bar">
<div className="current-monitors-title-holder">
<div className="current-monitors-title">Current monitors</div>
<div className="current-monitors-counter">{monitors.length}</div>
</div>
<div className="current-monitors-search-bar">
<SearchTextField />
</div>
</div>
<div className="monitors-v-gaping"></div>
<HostsTable monitors={monitors} />
<div className="monitors-v-gaping"></div>
<Pagination />
</div>
);
};
CurrentMonitors.propTypes = {
monitors: PropTypes.arrayOf(PropTypes.object).isRequired,
};
export default CurrentMonitors;
Client/src/Components/Dropdown/index.jsx
+21 -20
View File
@@ -1,28 +1,29 @@
import PropTypes from 'prop-types';
import PropTypes from "prop-types";
import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
const Dropdown = ({ id, label, options, onChange, value }) => {
return (
<Autocomplete
id={id}
options={options}
getOptionLabel={(option) => option.name}
value={value}
onChange={onChange}
renderInput={(params) => <TextField {...params} label={label} />}
/>
);
const Dropdown = (props) => {
return (
<Autocomplete
id={props.id}
options={props.options}
getOptionLabel={(option) => (option.name ? option.name : "")}
value={props.value}
onChange={props.onChange}
// Add isOptionEqualToValue prop
isOptionEqualToValue={(option, value) => option.name === value}
renderInput={(params) => <TextField {...params} label={props.label} />}
/>
);
};
// Define PropTypes for DropDown component
Dropdown.propTypes = {
id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
options: PropTypes.array.isRequired,
onChange: PropTypes.func.isRequired,
value: PropTypes.object.isRequired,
id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
options: PropTypes.array.isRequired,
onChange: PropTypes.func.isRequired,
value: PropTypes.string.isRequired,
};
export default Dropdown;
Client/src/Components/HostsTable/index.jsx
+2 -2
View File
@@ -1,7 +1,7 @@
import BarChart from "../Charts/BarChart/BarChart";
import PropTypes from "prop-types";
import Host from "../Host/";
import HostStatus from "../HostStatus";
import ResponseTimeChart from "../Charts/ResponseTimeChart";
/**
* HostsTable displays the current status of monitor
*
@@ -59,7 +59,7 @@ const HostsTable = ({ monitors }) => {
<td className="tbody-row-cell">{host}</td>
<td className="tbody-row-cell">{status}</td>
<td className="tbody-row-cell">
<BarChart checks={monitor.checks} />
<ResponseTimeChart checks={monitor.checks} />
</td>
<td className="tbody-row-cell actions-cell">
{monitor.actions}
Client/src/Components/Label/index.jsx
+6 -3
View File
@@ -124,7 +124,7 @@ ColoredLabel.propTypes = {
* <StatusLabel status="Active" />
*/
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 (
<BaseLabel label={status}>
<BaseLabel label={status} styles={customStyles}>
<Box
width={12}
height={12}
@@ -151,7 +153,8 @@ const StatusLabel = ({ status }) => {
};
StatusLabel.propTypes = {
status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active"]),
status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active", "Down", "Cannot resolve"]),
customStyles: PropTypes.object,
};
export { ColoredLabel, StatusLabel };
Client/src/Components/NavBar/index.css
+6
View File
@@ -30,3 +30,9 @@
box-shadow: none;
background-color: transparent;
}
#menu-appbar svg {
width: 16px;
height: 16px;
color: var(--env-var-color-25);
}
Client/src/Components/NavBar/index.jsx
+18 -5
View File
@@ -18,8 +18,18 @@ import { clearMonitorState } from "../../Features/Monitors/monitorsSlice";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import LockSvg from "../../assets/icons/lock.svg?react";
import UserSvg from "../../assets/icons/user.svg?react";
import TeamSvg from "../../assets/icons/user-two.svg?react";
import LogoutSvg from "../../assets/icons/logout.svg?react";
const settings = ["Profile", "Team", "Invite Colleagues", "Logout"];
const settings = ["Profile", "Password", "Team", "Logout"];
const icons = {
Profile: <UserSvg />,
Team: <TeamSvg />,
Password: <LockSvg />,
Logout: <LogoutSvg />,
};
/**
* NavBar component
@@ -66,13 +76,13 @@ function NavBar() {
setAnchorElUser(null);
switch (setting) {
case "Profile":
console.log("Profile");
navigate("/account/profile");
break;
case "Team":
console.log("Team");
navigate("/account/team");
break;
case "Invite Colleagues":
console.log("Invite Colleagues");
case "Password":
navigate("/account/password");
break;
case "Logout":
logout();
@@ -189,10 +199,13 @@ function NavBar() {
id="menu-item"
key={setting}
onClick={() => handleCloseUserMenu(setting)}
sx={{ width: "150px" }}
>
{icons[setting]}
<Typography
fontSize="var(--env-var-font-size-medium)"
textAlign="center"
marginLeft="8px"
>
{setting}
</Typography>
Client/src/Components/ProgressBars/index.css
+31
View File
@@ -0,0 +1,31 @@
.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 {
color: var(--env-var-color-2);
font-size: var(--env-var-font-size-medium);
}
.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 span {
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;
}
Client/src/Components/ProgressBars/index.jsx
+143
View File
@@ -0,0 +1,143 @@
import React from "react";
import { useTheme } from "@emotion/react";
import PropTypes from "prop-types";
import {
Box,
IconButton,
LinearProgress,
Stack,
Typography,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined";
import "./index.css";
/**
* @param {Object} props - The component props.
* @param {JSX.Element} props.icon - The icon element to display (optional).
* @param {string} props.label - The label text for the progress item.
* @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.
*/
const ProgressUpload = ({
icon,
label,
size,
progress = 0,
onClick,
error,
}) => {
const theme = useTheme();
return (
<Box
className="progress-bar-container"
mt="20px"
sx={{
minWidth: "200px",
height: "fit-content",
borderRadius: `${theme.shape.borderRadius}px`,
border: `solid 1px ${theme.palette.otherColors.graishWhite}`,
}}
>
<Stack
direction="row"
mb={error ? "0" : "10px"}
gap="10px"
alignItems={error ? "center" : "flex-end"}
>
{error ? (
<ErrorOutlineOutlinedIcon />
) : icon ? (
<IconButton
sx={{
backgroundColor: theme.palette.otherColors.white,
pointerEvents: "none",
borderRadius: `${theme.shape.borderRadius}px`,
border: `solid ${theme.shape.borderThick}px ${theme.palette.otherColors.graishWhite}`,
boxShadow: theme.shape.boxShadow,
}}
>
{icon}
</IconButton>
) : (
""
)}
{error ? (
<Typography component="p" className="input-error">
{error}
</Typography>
) : (
<Box>
<Typography component="h2" mb="5px">
{error ? error : label}
</Typography>
<Typography component="p">{!error && size}</Typography>
</Box>
)}
<IconButton
onClick={onClick}
sx={
!error
? {
alignSelf: "flex-start",
ml: "auto",
mr: "-5px",
mt: "-5px",
padding: "5px",
"&:focus": {
outline: "none",
},
}
: {
ml: "auto",
}
}
>
<CloseIcon
sx={{
fontSize: "20px",
}}
/>
</IconButton>
</Stack>
{!error ? (
<Stack direction="row" alignItems="center">
<Box sx={{ width: "100%", mr: "10px" }}>
<LinearProgress
variant="determinate"
value={progress}
sx={{
width: "100%",
height: "10px",
borderRadius: `${theme.shape.borderRadius}px`,
maxWidth: "500px",
backgroundColor: theme.palette.otherColors.graishWhite,
}}
/>
</Box>
<Typography component="p" sx={{ minWidth: "max-content" }}>
{progress}
<span>%</span>
</Typography>
</Stack>
) : (
""
)}
</Box>
);
};
ProgressUpload.propTypes = {
icon: PropTypes.element, // JSX element for the icon (optional)
label: PropTypes.string.isRequired, // Label text for the progress item
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;
Client/src/Components/RadioButton/index.css
+16
View File
@@ -0,0 +1,16 @@
.create-monitor-form .custom-radio-button.MuiFormControlLabel-root {
padding: 5px;
margin: -5px;
border-radius: var(--env-var-radius-1);
}
.create-monitor-form .custom-radio-button.MuiFormControlLabel-root:hover {
background-color: var(--env-var-color-13);
}
.create-monitor-form .custom-radio-button.MuiFormControlLabel-root svg{
stroke-width: 0;
}
.custom-radio-button.MuiFormControlLabel-root .MuiButtonBase-root {
margin-right: var(--env-var-spacing-1);
padding: 0;
}
Client/src/Components/RadioButton/index.jsx
+28 -19
View File
@@ -11,31 +11,44 @@
* />
*
* @param {Object} props - The component props.
* @param {string} props.id - The id of the radio button.
* @param {string} props.title - The title of the radio button.
* @param {string} [props.desc] - The description of the radio button.
* @param {string} [props.size="small"] - The size of the radio button.
* @returns {JSX.Element} - The rendered RadioButton component.
*/
import { FormControlLabel, Radio } from "@mui/material";
import React from "react";
import PropTypes from "prop-types";
import { FormControlLabel, Radio, Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
import "./index.css";
function RadioButton(props) {
const theme = useTheme();
return (
<div className="custom-radio-button">
<FormControlLabel
value="check"
control={<Radio size={props.size} />}
label={
<div>
<div className="service-check-list-title">{props.title}</div>
<div className="service-check-list-desc">{props.desc}</div>
</div>
}
labelPlacement="end"
/>
</div>
<FormControlLabel
className="custom-radio-button"
checked={props.checked}
value={props.value}
control={
<Radio
id={props.id}
size={props.size}
sx={{ color: theme.palette.secondary.main }}
/>
}
onChange={props.onChange}
label={
<>
<Typography component="p">{props.title}</Typography>
<Typography component="h6" mt="2px">
{props.desc}
</Typography>
</>
}
labelPlacement="end"
sx={{ margin: 0, alignItems: "flex-start" }}
/>
);
}
@@ -45,8 +58,4 @@ RadioButton.propTypes = {
size: PropTypes.string,
};
RadioButton.defaultProps = {
size: "small",
};
export default RadioButton;
Client/src/Components/TabPanels/ProfileSettings/PasswordPanel.jsx → Client/src/Components/TabPanels/Account/PasswordPanel.jsx
+13 -25
View File
@@ -1,13 +1,11 @@
import TabPanel from "@mui/lab/TabPanel";
import React, { useState } from "react";
import AnnouncementsDualButtonWithIcon from "../../Announcements/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.
@@ -87,7 +85,7 @@ const PasswordPanel = () => {
};
return (
<TabPanel value="1">
<TabPanel value="password">
<form
onSubmit={handleSubmit}
className="edit-password-form"
@@ -95,21 +93,15 @@ const PasswordPanel = () => {
spellCheck="false"
>
<div className="edit-password-form__wrapper">
<AnnouncementsDualButtonWithIcon
icon={
<InfoOutlinedIcon
style={{ fill: theme.palette.secondary.main }}
/>
}
subject="SSO login"
<Alert
variant="info"
title="SSO login"
body="Since you logged in via SSO, you cannot reset or modify your password."
/>
</div>
<div className="edit-password-form__wrapper">
<Stack>
<Typography variant="h4" component="h1">
Current password
</Typography>
<Typography component="h1">Current password</Typography>
</Stack>
<Stack>
<PasswordTextField
@@ -123,7 +115,7 @@ const PasswordPanel = () => {
error={errors[idToName["edit-current-password"]] ? true : false}
/>
{errors[idToName["edit-current-password"]] ? (
<Typography variant="h5" component="p" className="input-error">
<Typography component="p" className="input-error">
{errors[idToName["edit-current-password"]]}
</Typography>
) : (
@@ -133,9 +125,7 @@ const PasswordPanel = () => {
</div>
<div className="edit-password-form__wrapper">
<Stack>
<Typography variant="h4" component="h1">
New password
</Typography>
<Typography component="h1">New password</Typography>
</Stack>
<Stack>
<PasswordTextField
@@ -149,7 +139,7 @@ const PasswordPanel = () => {
error={errors[idToName["edit-new-password"]] ? true : false}
/>
{errors[idToName["edit-new-password"]] ? (
<Typography variant="h5" component="p" className="input-error">
<Typography component="p" className="input-error">
{errors[idToName["edit-new-password"]]}
</Typography>
) : (
@@ -159,9 +149,7 @@ const PasswordPanel = () => {
</div>
<div className="edit-password-form__wrapper">
<Stack>
<Typography variant="h4" component="h1">
Confirm new password
</Typography>
<Typography component="h1">Confirm new password</Typography>
</Stack>
<Stack>
<PasswordTextField
@@ -175,7 +163,7 @@ const PasswordPanel = () => {
error={errors[idToName["edit-confirm-password"]] ? true : false}
/>
{errors[idToName["edit-confirm-password"]] ? (
<Typography variant="h5" component="p" className="input-error">
<Typography component="p" className="input-error">
{errors[idToName["edit-confirm-password"]]}
</Typography>
) : (
@@ -186,8 +174,8 @@ const PasswordPanel = () => {
<div className="edit-password-form__wrapper">
<Stack></Stack>
<Box sx={{ flex: 1 }}>
<AnnouncementsDualButtonWithIcon
icon={<WarningAmberOutlinedIcon style={{ fill: "#f79009" }} />}
<Alert
variant="warning"
body="New password must contain at least 8 characters and must have at least one uppercase letter, one number and one symbol."
/>
</Box>
Client/src/Components/TabPanels/ProfileSettings/ProfilePanel.jsx → Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+212 -71
View File
@@ -7,7 +7,15 @@ 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";
import ImageIcon from "@mui/icons-material/Image";
import ProgressUpload from "../../ProgressBars";
/**
* ProfilePanel component displays a form for editing user profile information
@@ -19,22 +27,27 @@ import { editProfileValidation } from "../../../Validation/validation";
const ProfilePanel = () => {
const theme = useTheme();
//TODO - use redux loading state
//!! - currently all loading buttons are tied to the same state
const [isLoading, setIsLoading] = useState(false);
const dispatch = useDispatch();
//for testing, will tweak when I implement redux slice
const { user, authToken, isLoading } = useSelector((state) => state.auth);
const idToName = {
"edit-first-name": "firstname",
"edit-last-name": "lastname",
"edit-email": "email",
//Disabled for now, will revisit in the future
// "edit-email": "email",
};
const [localData, setLocalData] = useState({
firstname: "",
lastname: "",
email: "",
firstname: user.firstname,
lastname: user.lastname,
//Disabled for now, will revisit in the future
// email: user.email,
//TODO - upload picture
profilePicUrl: "placeholder",
});
const [errors, setErrors] = useState({});
const [isOpen, setIsOpen] = useState("");
const isModalOpen = (name) => isOpen === name;
const [loading, setLoading] = useState(false);
const handleChange = (event) => {
const { value, id } = event.target;
@@ -43,7 +56,7 @@ const ProfilePanel = () => {
...prev,
[name]: value,
}));
const validation = editProfileValidation.validate(
{ [name]: value },
{ abortEarly: false }
@@ -61,53 +74,127 @@ const ProfilePanel = () => {
});
};
//TODO - implement delete profile picture function
const handleDeletePicture = () => {
setIsLoading(true);
//TODO - add setPicture state to localData
const [picture, setPicture] = useState();
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(() => {
setIsLoading(false);
//TODO - add setPicture state to localData
setPicture((prev) => ({ ...prev, src: URL.createObjectURL(pic) }));
}, 1500);
let progress = 0;
const interval = setInterval(() => {
progress += 10;
setUploadProgress(progress);
if (progress >= 100) {
clearInterval(interval);
}
}, 150);
};
const formatBytes = (bytes) => {
if (bytes === 0) return "0 Bytes";
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();
setUploadProgress(0);
setIsUploading(false);
clearError("picture");
};
const handleClosePictureModal = () => {
setIsOpen("");
setUploadProgress(0);
setIsUploading(false);
clearError("picture");
};
//TODO - revisit once localData is set up properly
const handleDeletePicture = () => {
setLoading(true);
setTimeout(() => {
//TODO - add setPicture state to localData
setPicture(null);
setLoading(false);
}, 2000);
};
//TODO - implement update profile function
const handleUpdatePicture = () => {};
const [isOpen, setIsOpen] = useState(false);
//TODO - implement delete account function
const handleDeleteAccount = () => {
setIsLoading(true);
setTimeout(() => {
setIsLoading(false);
setIsOpen(false);
}, 2000);
const handleUpdatePicture = () => {
setIsOpen("");
setUploadProgress(0);
setIsUploading(false);
};
//TODO - implement delete account function
const handleDeleteAccount = () => {};
//TODO - implement save profile function
const handleSaveProfile = () => {
setIsLoading(true);
setTimeout(() => {
setIsLoading(false);
setIsOpen(false);
}, 2000);
const handleSaveProfile = (event) => {
event.preventDefault();
if (
localData.firstname === user.firstname &&
localData.lastname === user.lastname &&
localData.profilePicUrl === user.profilePicUrl
) {
//TODO - add toast(profile data is unchanged) and maybe disable button
return;
}
dispatch(update({ authToken, localData }));
//TODO - add toast confirmation
};
return (
<TabPanel value="0">
<TabPanel value="profile">
<form className="edit-profile-form" noValidate spellCheck="false">
<div className="edit-profile-form__wrapper">
<Stack>
<Typography variant="h4" component="h1">
First Name
</Typography>
<Typography component="h1">First name</Typography>
</Stack>
<Stack>
<StringTextField
id="edit-first-name"
label={null}
value={localData.firstname}
placeholder="Enter your first name"
autoComplete="given-name"
onChange={handleChange}
error={errors[idToName["edit-first-name"]] ? true : false}
/>
{errors[idToName["edit-first-name"]] ? (
<Typography variant="h5" component="p" className="input-error">
<Typography component="p" className="input-error">
{errors[idToName["edit-first-name"]]}
</Typography>
) : (
@@ -117,21 +204,20 @@ const ProfilePanel = () => {
</div>
<div className="edit-profile-form__wrapper">
<Stack>
<Typography variant="h4" component="h1">
Last Name
</Typography>
<Typography component="h1">Last name</Typography>
</Stack>
<Stack>
<StringTextField
id="edit-last-name"
label={null}
value={localData.lastname}
placeholder="Enter your last name"
autoComplete="family-name"
onChange={handleChange}
error={errors[idToName["edit-last-name"]] ? true : false}
/>
{errors[idToName["edit-last-name"]] ? (
<Typography variant="h5" component="p" className="input-error">
<Typography component="p" className="input-error">
{errors[idToName["edit-last-name"]]}
</Typography>
) : (
@@ -141,24 +227,24 @@ const ProfilePanel = () => {
</div>
<div className="edit-profile-form__wrapper">
<Stack>
<Typography variant="h4" component="h1">
Email
</Typography>
<Typography variant="h5" component="p">
After updating, you'll receive a confirmation email.
<Typography component="h1">Email</Typography>
<Typography component="p">
This is your current email address — it cannot be changed.
</Typography>
</Stack>
<Stack>
<EmailTextField
id="edit-email"
label={null}
value={user.email}
placeholder="Enter your email"
autoComplete="email"
onChange={handleChange}
error={errors[idToName["edit-email"]] ? true : false}
// onChange={handleChange}
// error={errors[idToName["edit-email"]] ? true : false}
disabled={true}
/>
{errors[idToName["edit-email"]] ? (
<Typography variant="h5" component="p" className="input-error">
<Typography component="p" className="input-error">
{errors[idToName["edit-email"]]}
</Typography>
) : (
@@ -168,19 +254,16 @@ const ProfilePanel = () => {
</div>
<div className="edit-profile-form__wrapper">
<Stack>
<Typography variant="h4" component="h1">
Your Photo
</Typography>
<Typography variant="h5" component="p">
<Typography component="h1">Your photo</Typography>
<Typography component="p">
This photo will be displayed in your profile page.
</Typography>
</Stack>
<Stack className="row-stack" direction="row" alignItems="center">
{/* TODO - Update placeholder values with redux data */}
<Avatar
src="/static/images/avatar/2.jpg"
firstName="Jackie"
lastName="Dawn"
src={picture ? picture.src : "/static/images/avatar/2.jpg"}
firstName={user?.firstname}
lastName={user?.lastname}
sx={{
width: "64px",
height: "64px",
@@ -192,13 +275,12 @@ const ProfilePanel = () => {
level="tertiary"
label="Delete"
onClick={handleDeletePicture}
isLoading={isLoading}
isLoading={loading}
/>
{/* TODO - modal popup for update pfp? */}
<Button
level="tertiary"
label="Update"
onClick={handleUpdatePicture}
onClick={() => setIsOpen("picture")}
sx={{
color: theme.palette.primary.main,
}}
@@ -231,10 +313,8 @@ const ProfilePanel = () => {
<form className="delete-profile-form" noValidate spellCheck="false">
<div className="delete-profile-form__wrapper">
<Stack direction="column" gap="15px">
<Typography variant="h4" component="h1">
Delete account
</Typography>
<Typography variant="h5" component="p">
<Typography component="h1">Delete account</Typography>
<Typography component="p">
Note that deleting your account will remove all data from our
system. This is permanent and non-recoverable.
</Typography>
@@ -242,7 +322,7 @@ const ProfilePanel = () => {
<Button
level="error"
label="Delete account"
onClick={() => setIsOpen(true)}
onClick={() => setIsOpen("delete")}
/>
</Box>
</Stack>
@@ -252,8 +332,8 @@ const ProfilePanel = () => {
<Modal
aria-labelledby="modal-delete-account"
aria-describedby="delete-account-confirmation"
open={isOpen}
onClose={() => setIsOpen(false)}
open={isModalOpen("delete")}
onClose={() => setIsOpen("")}
disablePortal
>
<Stack
@@ -274,14 +354,10 @@ const ProfilePanel = () => {
},
}}
>
<Typography id="modal-delete-account" variant="h4" component="h1">
<Typography id="modal-delete-account" component="h1">
Really delete this account?
</Typography>
<Typography
id="delete-account-confirmation"
variant="h5"
component="p"
>
<Typography id="delete-account-confirmation" component="p">
If you delete your account, you will no longer be able to sign in,
and all of your data will be deleted. Deleting your account is
permanent and non-recoverable action.
@@ -290,7 +366,7 @@ const ProfilePanel = () => {
<Button
level="tertiary"
label="Cancel"
onClick={() => setIsOpen(false)}
onClick={() => setIsOpen("")}
/>
<ButtonSpinner
level="error"
@@ -301,6 +377,71 @@ const ProfilePanel = () => {
</Stack>
</Stack>
</Modal>
<Modal
aria-labelledby="modal-update-picture"
aria-describedby="update-profile-picture"
open={isModalOpen("picture")}
onClose={handleClosePictureModal}
>
<Stack
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "white",
border: "solid 1px #f2f2f2",
borderRadius: `${theme.shape.borderRadius}px`,
boxShadow: 24,
p: "30px",
"&:focus": {
outline: "none",
},
}}
>
<Typography id="modal-update-picture" component="h1">
Upload Image
</Typography>
<ImageField
id="update-profile-picture"
picture={picture?.src}
onChange={handlePicture}
/>
{isUploading ? (
<ProgressUpload
icon={<ImageIcon />}
label={picture?.name}
size={picture?.size}
progress={uploadProgress}
onClick={handleCancelUpload}
error={errors["picture"]}
/>
) : (
""
)}
<Stack direction="row" mt="20px" gap="10px" justifyContent="flex-end">
<Button
level="secondary"
label="Edit"
disabled
sx={{ mr: "auto" }}
/>
<ButtonSpinner
level="tertiary"
label="Remove"
onClick={handleCancelUpload}
isLoading={loading}
/>
<ButtonSpinner
level="primary"
label="Update"
onClick={handleUpdatePicture}
isLoading={isLoading}
/>
</Stack>
</Stack>
</Modal>
</TabPanel>
);
};
Client/src/Components/TabPanels/ProfileSettings/TeamPanel.jsx → Client/src/Components/TabPanels/Account/TeamPanel.jsx
+7 -13
View File
@@ -184,15 +184,11 @@ const TeamPanel = () => {
return count;
};
return (
<TabPanel value="2">
<TabPanel value="team">
<form className="edit-organization-form">
<div
className="edit-organization-form__wrapper"
>
<div className="edit-organization-form__wrapper">
<Stack>
<Typography variant="h4" component="h1">
Organization name
</Typography>
<Typography component="h1">Organization name</Typography>
</Stack>
<Stack
id="org-name-flex-container"
@@ -247,7 +243,7 @@ const TeamPanel = () => {
},
}}
>
<Typography id="modal-edit-org-name" variant="h4" component="h1">
<Typography id="modal-edit-org-name" component="h1">
Rename this organization?
</Typography>
<TextField
@@ -280,9 +276,7 @@ const TeamPanel = () => {
</Modal>
<form className="edit-team-form" noValidate spellCheck="false">
<div className="edit-team-form__wrapper">
<Typography variant="h4" component="h1">
Team members
</Typography>
<Typography component="h1">Team members</Typography>
</div>
<div className="edit-team-form__wrapper compact">
<Stack
@@ -488,10 +482,10 @@ const TeamPanel = () => {
},
}}
>
<Typography id="modal-invite-member" variant="h4" component="h1">
<Typography id="modal-invite-member" component="h1">
Invite new team member
</Typography>
<Typography id="invite-member-to-team" variant="h5" component="p">
<Typography id="invite-member-to-team" component="p">
When you add a new team member, they will get access to all
monitors.
</Typography>
Client/src/Components/TextFields/Email/EmailTextField.jsx
+8 -2
View File
@@ -13,12 +13,14 @@ import { useTheme } from "@mui/material";
* @param {function} props.onChange - The function to call when the text field changes.
* @param {string} props.id - The id of the text field.
* @param {string} [props.label="Email"] - The label of the text field.
* @param {string} props.value - The value of the text field.
* @param {string} props.variant - The variant of the text field.
* @param {string} props.placeholder - The placeholder of the text field.
* @param {React.Element} props.icon - The icon to be displayed in the text field.
* @param {string} props.helperText - The helper text to be displayed below the text field.
* @param {boolean} props.error - If true, the text field will indicate an error state.
*
* @param {boolean} props.disabled - If true, the text field will be disabled and cannot be interacted with.
*
* @example
* // To use this component, import it and use it in your JSX like this:
* <EmailTextField id="email" variant="outlined" placeholder="Enter your email" />
@@ -30,12 +32,14 @@ const EmailTextField = ({
onChange,
id,
label = "Email",
value = undefined,
variant,
placeholder,
autoComplete,
icon,
helperText,
error,
disabled
}) => {
const theme = useTheme();
@@ -59,9 +63,11 @@ const EmailTextField = ({
error={error}
className="email-text-field-input"
id={id}
value={value}
variant={variant}
placeholder={placeholder}
autoComplete={autoComplete}
disabled={disabled}
InputProps={{
endAdornment: (
<InputAdornment position="end">
@@ -78,7 +84,7 @@ const EmailTextField = ({
style={{ fill: "red", width: "16px", height: "16px" }}
/>
)}
{!error && showIcon && (
{!error && showIcon && !disabled && (
<HelpOutlineIcon
className="text-field-icon"
style={{ width: "16px", height: "16px" }}
Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx
+48 -6
View File
@@ -1,17 +1,59 @@
import PropTypes from "prop-types";
import { Stack, Typography } from "@mui/material";
import "./flexibileTextField.css";
import React from "react";
import { useTheme } from "@emotion/react";
const FlexibileTextField = ({ title, type, placeholder }) => {
/**
* @param {Object} props - The component props.
* @param {string} props.id - The ID of the input field.
* @param {string} props.title - The title or label for the input field.
* @param {string} props.type - The type of the input field (e.g., 'text', 'password').
* @param {string} props.placeholder - The placeholder text for the input field.
* @param {string} props.value - The current value of the input field.
* @param {function} props.onChange - The function to call when the input field value changes.
* @param {string} [props.error] - Optional. Error message to display if there's an error with the input.
* @returns {JSX.Element} JSX Element representing the flexible text input field.
*/
const FlexibileTextField = ({
id,
title,
type,
placeholder,
value,
onChange,
error,
}) => {
const theme = useTheme();
return (
<div className="flexibile-textfield">
<div className="flexibile-textfield-title">{title}</div>
<Stack className="flexible-textfield" gap={theme.gap.small}>
<Typography component="h2">{title}</Typography>
<input
id={id}
type={type}
className="flexibile-textfield-input"
placeholder={placeholder}
value={value}
onChange={onChange}
/>
</div>
{error ? (
<Typography component="p" className="input-error">
{error}
</Typography>
) : (
""
)}
</Stack>
);
};
FlexibileTextField.propTypes = {
id: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
placeholder: PropTypes.string,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
onChange: PropTypes.func.isRequired,
error: PropTypes.string,
};
export default FlexibileTextField;
Client/src/Components/TextFields/Flexibile/flexibileTextField.css
+23 -15
View File
@@ -1,22 +1,30 @@
.flexibile-textfield-title {
.flexible-textfield{
position: relative;
}
.flexible-textfield h2.MuiTypography-root{
color: var(--env-var-color-5);
font-size: var(--env-var-font-size-medium);
font-weight: 400;
}
.flexibile-textfield-input {
width: 292.8px;
height: 6.8px;
padding: var(--env-var-spacing-1);
margin-top: 10px;
.flexible-textfield h2.MuiTypography-root span{
opacity: 0.6;
}
.flexible-textfield input {
min-width: 300px;
height: 34px;
padding: 0 var(--env-var-spacing-1);
border: 1px solid var(--env-var-color-4);
border-radius: var(--env-var-radius-1);
}
.flexibile-textfield-input:focus {
.flexible-textfield p.MuiTypography-root.input-error {
color: var(--env-var-color-24);
opacity: 0.8;
position: absolute;
top: calc(100% + 5px);
}
.flexible-textfield:has(p.MuiTypography-root.input-error) input{
border-color: var(--env-var-color-24);
}
.flexible-textfield input:focus {
outline: none;
}
.flexibile-textfield-input::placeholder {
color: var(--env-var-color-25);
font-size: var(--env-var-font-size-medium);
}
}
Client/src/Components/TextFields/Image/index.css
+29
View File
@@ -0,0 +1,29 @@
.image-field-wrapper h2.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.6;
font-size: var(--env-var-font-size-small-plus);
}
.image-field-wrapper h2.MuiTypography-root span {
color: var(--env-var-color-3);
font-weight: 500;
}
Client/src/Components/TextFields/Image/index.jsx
+126
View File
@@ -0,0 +1,126 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import { Box, IconButton, Stack, TextField, Typography } from "@mui/material";
import { useTheme } from "@emotion/react";
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import "./index.css";
/**
* @param {Object} props - The component props.
* @param {string} props.id - The unique identifier for the input field.
* @param {string} props.picture - The URL of the image to display.
* @param {function} props.onChange - The function to handle file input change.
* @returns {JSX.Element} The rendered component.
*/
const ImageField = ({ id, picture, onChange }) => {
const theme = useTheme();
const [isDragging, setIsDragging] = useState(false);
const handleDragEnter = () => {
setIsDragging(true);
};
const handleDragLeave = () => {
setIsDragging(false);
};
return (
<>
{!picture ? (
<>
<Box
className="image-field-wrapper"
mt="20px"
sx={{
position: "relative",
height: "fit-content",
border: "dashed",
borderRadius: `${theme.shape.borderRadius}px`,
borderColor: isDragging
? theme.palette.primary.main
: theme.palette.otherColors.graishWhite,
borderWidth: "2px",
transition: "0.2s",
"&:hover": {
borderColor: theme.palette.primary.main,
backgroundColor: "hsl(215, 87%, 51%, 0.05)",
},
}}
onDragEnter={handleDragEnter}
onDragLeave={handleDragLeave}
onDrop={handleDragLeave}
>
<TextField
id={id}
type="file"
onChange={onChange}
sx={{
width: "100%",
"& .MuiInputBase-input[type='file']": {
opacity: 0,
cursor: "pointer",
maxWidth: "500px",
minHeight: "175px",
},
"& fieldset": {
padding: 0,
border: "none",
},
}}
/>
<Stack
className="custom-file-text"
alignItems="center"
gap="4px"
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
zIndex: "-1",
width: "100%",
}}
>
<IconButton
sx={{
pointerEvents: "none",
borderRadius: `${theme.shape.borderRadius}px`,
border: `solid ${theme.shape.borderThick}px ${theme.palette.otherColors.graishWhite}`,
boxShadow: theme.shape.boxShadow,
}}
>
<CloudUploadIcon />
</IconButton>
<Typography component="h2">
<span>Click to upload</span> or drag and drop
</Typography>
<Typography component="p">(maximum size: 3MB)</Typography>
</Stack>
</Box>
<Typography component="p">Supported formats: JPG, PNG</Typography>
</>
) : (
<Stack direction="row" justifyContent="center">
<Box
sx={{
width: "250px",
height: "250px",
borderRadius: "50%",
overflow: "hidden",
backgroundImage: `url(${picture})`,
backgroundSize: "cover",
}}
></Box>
</Stack>
)}
</>
);
};
ImageField.propTypes = {
id: PropTypes.string.isRequired,
picture: PropTypes.string,
onChange: PropTypes.func.isRequired,
};
export default ImageField;
Client/src/Components/TextFields/Text/TextField.jsx
+3
View File
@@ -10,6 +10,7 @@ import { useTheme } from "@mui/material";
* @param {function} props.onChange - The function to call when the text field changes.
* @param {string} props.id - The ID of the text field.
* @param {string} props.label - The label text for the text field.
* @param {string} props.value - The value of the text field.
* @param {string} props.variant - The variant of the text field.
* @param {string} props.placeholder - The placeholder text for the text field.
* @param {ReactNode} props.icon - The icon to display in the text field.
@@ -22,6 +23,7 @@ const StringTextField = ({
autoComplete,
id,
label,
value = undefined,
variant,
placeholder,
icon,
@@ -51,6 +53,7 @@ const StringTextField = ({
className="email-text-field-input"
id={id}
variant={variant}
value={value}
placeholder={placeholder}
autoComplete={autoComplete}
InputProps={{
Client/src/Components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx → Client/src/Components/Toast/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx
View File
File renamed without changes.
Client/src/Components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css → Client/src/Components/Toast/AnnouncementUpdateSubscription/announcementUpdateSubscription.css
View File
File renamed without changes.
Client/src/Components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx → Client/src/Components/Toast/AnnouncementsDualButton/AnnouncementsDualButton.jsx
View File
File renamed without changes.
Client/src/Components/Announcements/AnnouncementsDualButton/announcementsDualButton.css → Client/src/Components/Toast/AnnouncementsDualButton/announcementsDualButton.css
View File
File renamed without changes.
Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx → Client/src/Components/Toast/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx
View File
File renamed without changes.
Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css → Client/src/Components/Toast/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css
View File
File renamed without changes.
Client/src/Components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx → Client/src/Components/Toast/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx
View File
File renamed without changes.
Client/src/Components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css → Client/src/Components/Toast/AnnouncementsMessageBar/announcementsMessageBar.css
View File
File renamed without changes.
Client/src/Components/Toast/index.jsx
+1 -1
View File
@@ -1,6 +1,6 @@
import PropTypes from "prop-types";
import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert";
import AnnouncementsDualButtonWithIcon from "../../Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
import AnnouncementsDualButtonWithIcon from "./AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
import "react-toastify/dist/ReactToastify.css";
import { toast, ToastContainer } from "react-toastify";
import "./index.css";
Client/src/Features/Auth/authSlice.js
+57 -7
View File
@@ -18,7 +18,10 @@ export const register = createAsyncThunk(
const res = await axios.post(`${BASE_URL}/auth/register`, form);
return res.data;
} catch (error) {
return thunkApi.rejectWithValue(error.response.data);
if (error.response.data) {
return thunkApi.rejectWithValue(error.response.data);
}
return thunkApi.rejectWithValue(error.message);
}
}
);
@@ -28,23 +31,64 @@ export const login = createAsyncThunk("auth/login", async (form, thunkApi) => {
const res = await axios.post(`${BASE_URL}/auth/login`, form);
return res.data;
} catch (error) {
return thunkApi.rejectWithValue(error.response.data);
if (error.response && error.response.data) {
return thunkApi.rejectWithValue(error.response.data);
}
return thunkApi.rejectWithValue(error.message);
}
});
export const update = createAsyncThunk(
"auth/update",
async (data, thunkApi) => {
const { authToken: token, localData: form } = data;
const user = jwtDecode(token);
try {
//1.5s delay to show loading spinner
await new Promise((resolve) => setTimeout(resolve, 1500));
const res = await axios.post(`${BASE_URL}/auth/user/${user._id}`, form, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
});
return res.data;
} catch (error) {
if (error.response && error.response.data) {
return thunkApi.rejectWithValue(error.response.data);
}
return thunkApi.rejectWithValue(error.message);
}
}
);
const handleAuthFulfilled = (state, action) => {
state.isLoading = false;
state.success = action.payload.success;
state.msg = action.payload.msg;
state.authToken = action.payload.data;
const decodedToken = jwtDecode(action.payload.data);
const user = { ...decodedToken };
state.user = user;
state.authToken = action.payload.data.token;
state.user = action.payload.data.user;
};
const handleAuthRejected = (state, action) => {
state.isLoading = false;
state.success = false;
state.msg = action.payload
? action.payload.msg
: "Failed to login or register";
};
const handleUpdateFulfilled = (state, action) => {
state.isLoading = false;
state.success = action.payload.success;
state.msg = action.payload.msg;
state.user = action.payload.data;
};
const handleUpdateRejected = (state, action) => {
state.isLoading = false;
state.success = false;
state.msg = action.payload
? action.payload.msg
: "Failed to update profile data.";
};
const authSlice = createSlice({
@@ -72,7 +116,13 @@ const authSlice = createSlice({
state.isLoading = true;
})
.addCase(login.fulfilled, handleAuthFulfilled)
.addCase(login.rejected, handleAuthRejected);
.addCase(login.rejected, handleAuthRejected)
// Update thunk
.addCase(update.pending, (state) => {
state.isLoading = true;
})
.addCase(update.fulfilled, handleUpdateFulfilled)
.addCase(update.rejected, handleUpdateRejected);
},
});
Client/src/Features/Monitors/monitorsSlice.js
+56 -5
View File
@@ -1,6 +1,7 @@
import axios from "axios";
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { jwtDecode } from "jwt-decode";
const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL;
const initialState = {
isLoading: false,
@@ -9,6 +10,28 @@ const initialState = {
msg: null,
};
export const createMonitor = createAsyncThunk(
"monitors/createMonitor",
async (data, thunkApi) => {
try {
const { authToken, monitor } = data;
const res = await axios.post(`${BASE_URL}/monitors`, monitor, {
headers: {
Authorization: `Bearer ${authToken}`,
"Content-Type": "application/json",
},
});
return res.data;
} catch (error) {
if (error.response && error.response.data) {
return thunkApi.rejectWithValue(error.response.data);
}
return thunkApi.rejectWithValue(error.message);
}
}
);
export const getMonitors = createAsyncThunk(
"monitors/getMonitors",
async (token, thunkApi) => {
@@ -18,7 +41,10 @@ export const getMonitors = createAsyncThunk(
);
return res.data;
} catch (error) {
return thunkApi.rejectWithValue(error.response.data);
if (error.response && error.response.data) {
return thunkApi.rejectWithValue(error.response.data);
}
return thunkApi.rejectWithValue(error.message);
}
}
);
@@ -38,7 +64,10 @@ export const getMonitorsByUserId = createAsyncThunk(
);
return res.data;
} catch (error) {
return thunkApi.rejectWithValue(error.response.data);
if (error.response && error.response.data) {
return thunkApi.rejectWithValue(error.response.data);
}
return thunkApi.rejectWithValue(error.message);
}
}
);
@@ -70,8 +99,10 @@ const monitorsSlice = createSlice({
})
.addCase(getMonitors.rejected, (state, action) => {
state.isLoading = false;
state.success = action.payload.success;
state.msg = action.payload.msg;
state.success = false;
state.msg = action.payload
? action.payload.msg
: "Getting montiors failed";
})
// *****************************************************
// Monitors by userId
@@ -86,10 +117,30 @@ const monitorsSlice = createSlice({
state.monitors = action.payload.data;
})
.addCase(getMonitorsByUserId.rejected, (state, action) => {
console.log(action);
state.isLoading = false;
state.success = false;
state.msg = action.payload
? action.payload.msg
: "Getting montiors failed";
})
// *****************************************************
// Create Monitor
// *****************************************************
.addCase(createMonitor.pending, (state) => {
state.isLoading = true;
})
.addCase(createMonitor.fulfilled, (state, action) => {
state.isLoading = false;
state.success = action.payload.success;
state.msg = action.payload.msg;
})
.addCase(createMonitor.rejected, (state, action) => {
state.isLoading = false;
state.success = false;
state.msg = action.payload
? action.payload.msg
: "Failed to create monitor";
});
},
});
Client/src/Pages/Account/index.css
+176
View File
@@ -0,0 +1,176 @@
.account h1.MuiTypography-root,
.account p.MuiTypography-root,
.account input,
.account button,
.account td,
.account .MuiSelect-select {
font-size: var(--env-var-font-size-medium);
}
.account h1.MuiTypography-root,
.account p.MuiTypography-root,
.account input,
.account .MuiSelect-select {
color: var(--env-var-color-2);
}
.account h1.MuiTypography-root {
font-weight: 600;
}
.account .MuiStack-root:not(.table-stack) {
flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
}
.account .MuiTabPanel-root {
padding: 0;
margin-top: 50px;
}
.account .MuiDivider-root:not(.short-divider) {
margin: 50px 0;
}
.account .MuiDivider-root,
.account .MuiOutlinedInput-root fieldset {
border-color: var(--env-var-color-29);
}
.account [class$="-form"] {
width: inherit;
}
.account [class$="__wrapper"],
.account [class$="__wrapper compact"] {
display: flex;
flex-direction: row;
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) {
flex-direction: column;
gap: 8px;
margin-right: 10px;
}
.edit-profile-form__wrapper p.MuiTypography-root,
.delete-profile-form__wrapper p.MuiTypography-root {
opacity: 0.6;
}
#modal-delete-account,
#modal-edit-org-name,
#modal-invite-member {
font-size: var(--env-var-font-size-large);
}
.edit-profile-form__wrapper:not(:first-of-type),
.edit-password-form__wrapper:not(:first-of-type),
.edit-team-form__wrapper:not(:first-of-type) {
margin-top: var(--env-var-spacing-4);
}
.edit-team-form__wrapper.compact {
margin-top: var(--env-var-spacing-3);
justify-content: flex-start;
align-items: center;
}
.edit-profile-form__wrapper input,
.edit-password-form__wrapper input,
#edit-organization-name,
#input-team-member {
padding: 10px;
}
#edit-new-password + div > button > svg,
#edit-confirm-password + div > button > svg,
#edit-current-password + div > button > svg {
color: var(--env-var-color-29);
}
#org-name-flex-container .Mui-disabled {
color: var(--env-var-color-2) !important;
}
.edit-team-form__wrapper td {
padding: 10px 0;
padding-top: 20px;
vertical-align: text-top;
}
.edit-team-form__wrapper th {
padding: var(--env-var-spacing-1) 0;
}
.edit-team-form__wrapper th:first-of-type {
padding-left: 20px;
}
.edit-team-form__wrapper td {
color: var(--env-var-color-25);
}
#select-actions,
#select-role {
padding: 5px 0;
padding-left: 15px;
padding-right: 50px;
line-height: 1.75;
}
.MuiInputBase-root:has(#select-actions) fieldset,
.MuiInputBase-root:has(#select-role) fieldset {
border-color: #a1a7b1;
margin: -1px;
border-width: 1px;
}
.MuiInputBase-root:has(#select-actions):hover fieldset,
.MuiInputBase-root:has(#select-role):hover fieldset {
border-color: var(--env-var-color-2);
}
.MuiStack-root:has(.MuiBox-root > .members-query) .MuiBox-root {
cursor: pointer;
}
.members-query {
display: inline-flex;
justify-content: center;
align-items: center;
margin-left: 6px;
padding: 2px;
font-size: 12px;
font-weight: 500;
color: var(--env-var-color-3);
background-color: #e0e9fd;
min-width: 22px;
min-height: 22px;
border-radius: 50%;
}
/* for testing, will remove later */
@media only screen and (max-width: 1600px) {
.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) {
margin-right: 30px;
}
}
.account .MuiStack-root:has(p.MuiTypography-root.input-error) {
position: relative;
}
.account .text-field-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 18px !important;
height: 18px !important;
opacity: 0.8;
}
.account p.MuiTypography-root.input-error {
color: var(--env-var-color-24);
opacity: 0.8;
position: absolute;
top: calc(100% + 5px);
}
.account .email-text-field,
.account .password-text-field {
margin: 0;
}
.edit-profile-form__wrapper .MuiFormControl-root,
.edit-password-form__wrapper .MuiFormControl-root {
width: 100%;
}
.edit-profile-form__wrapper .MuiStack-root:has(.MuiFormControl-root),
.edit-password-form__wrapper .MuiStack-root:has(.MuiFormControl-root) {
margin: 0;
}
Client/src/Pages/Account/index.jsx
+84
View File
@@ -0,0 +1,84 @@
import PropTypes from "prop-types";
import { useState } from "react";
import { Box, Tab, useTheme } from "@mui/material";
import TabContext from "@mui/lab/TabContext";
import TabList from "@mui/lab/TabList";
import "./index.css";
import ProfilePanel from "../../Components/TabPanels/Account/ProfilePanel";
import PasswordPanel from "../../Components/TabPanels/Account/PasswordPanel";
import TeamPanel from "../../Components/TabPanels/Account/TeamPanel";
import { useNavigate } from "react-router";
/**
* Account component renders a settings page with tabs for Profile, Password, and Team settings.
* @param {string} [props.open] - Specifies the initially open tab: 'profile', 'password', or 'team'.
* @returns {JSX.Element}
*/
const tabList = ["Profile", "Password", "Team"];
const Account = ({ open = "profile" }) => {
const theme = useTheme();
const navigate = useNavigate();
const tab = open;
const handleTabChange = (event, newTab) => {
navigate(`/account/${newTab}`);
};
return (
<Box
//TODO - breakpoints for responsive design
minWidth={theme.spacing(55)}
maxWidth="1200px"
py={theme.content.pY}
px={theme.content.pX}
className="account"
>
<TabContext value={tab}>
<Box
sx={{
borderBottom: 1,
borderColor: theme.palette.section.borderColor,
"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
}}
>
<TabList onChange={handleTabChange} aria-label="account tabs">
{tabList.map((label, index) => (
<Tab
label={label}
key={index}
value={label.toLowerCase()}
sx={{
fontSize: "13px",
color: theme.palette.secondary.main,
textTransform: "none",
minWidth: "fit-content",
minHeight: 0,
paddingLeft: "0",
paddingY: "10px",
marginRight: "20px",
"&:focus": {
outline: "none",
},
"& .MuiTouchRipple-root": {
pointerEvents: "none",
display: "none",
},
}}
/>
))}
</TabList>
</Box>
<ProfilePanel />
<PasswordPanel />
<TeamPanel />
</TabContext>
</Box>
);
};
Account.propTypes = {
open: PropTypes.oneOf(["profile", "password", "team"]),
};
export default Account;
Client/src/Pages/CreateNewMonitor/index.css
+69
View File
@@ -0,0 +1,69 @@
.create-monitor-form h1.MuiTypography-root {
font-size: var(--env-var-font-size-large-plus);
color: var(--env-var-color-1);
}
.create-monitor-form h1.MuiTypography-root,
.create-monitor-form h2.MuiTypography-root {
font-weight: 600;
}
.create-monitor-form h2.MuiTypography-root {
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);
}
.create-monitor-form h2.MuiTypography-root,
.create-monitor-form h6.MuiTypography-root,
.create-monitor-form p.MuiTypography-root,
#monitor-frequencies {
color: var(--env-var-color-2);
}
.create-monitor-form h6.MuiTypography-root {
font-size: var(--env-var-font-size-small-plus);
opacity: 0.8;
}
.create-monitor-form .error-container {
position: relative;
}
.create-monitor-form .error-container p.MuiTypography-root.input-error {
color: var(--env-var-color-24);
opacity: 0.8;
position: absolute;
top: 0;
}
/* for testing, will remove later */
/* .config-box:has(.error-container):has(.input-error) {
border-color: var(--env-var-color-24);
} */
.create-monitor-form .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input {
padding: var(--env-var-spacing-1);
}
.create-monitor-form .MuiInputBase-root:has(#monitor-frequencies) {
min-width: 300px;
width: 100%;
height: 34px;
border: 1px solid var(--env-var-color-4);
border-radius: var(--env-var-radius-1);
overflow: hidden;
}
.create-monitor-form .MuiInputBase-root:has(#monitor-frequencies) fieldset {
outline: none;
border: none;
}
.monitors-gaps-medium {
height: var(--env-var-spacing-2);
}
.monitors-gaps-small-plus {
height: var(--env-var-spacing-1-plus);
}
.monitors-create-button-holder {
display: flex;
justify-content: end;
}
Client/src/Pages/CreateNewMonitor/index.jsx
+454
View File
@@ -0,0 +1,454 @@
import "./index.css";
import ConfigBox from "../../Components/ConfigBox";
import FlexibileTextField from "../../Components/TextFields/Flexibile/FlexibileTextField";
import React, { useState } from "react";
import RadioButton from "../../Components/RadioButton";
import CustomizableCheckBox from "../../Components/Checkbox/CustomizableCheckbox";
import Button from "../../Components/Button";
import { Box, MenuItem, Select, Stack, Typography } from "@mui/material";
import { useSelector, useDispatch } from "react-redux";
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;
const { user, authToken } = useSelector((state) => state.auth);
const dispatch = useDispatch();
const navigate = useNavigate();
const theme = useTheme();
const [errors, setErrors] = useState({});
//General Settings Form
const [generalSettings, setGeneralSettings] = useState({ url: "", name: "" });
//Checks Form
const [checks, setChecks] = useState({
type: "",
// port: ""
});
//Incidents Form
// const [notifications, setNotifications] = useState({
// viaSms: false,
// viaEmail: false,
// viaOther: false,
// email: "",
// });
//Advanced Settings Form
const [advancedSettings, setAdvancedSettings] = useState({
frequency: 1,
// retries: "",
// codes: "",
// redirects: "",
});
//Proxy Settings Form
// const [proxy, setProxy] = useState({
// enabled: false,
// protocol: "",
// address: "",
// proxy_port: "",
// });
const handleChange = (event, id, setState, checkbox) => {
const { value } = event.target;
setState((prev) => ({
...prev,
[id]: checkbox ? true : value,
}));
const validation = createMonitorValidation.validate(
{ [id]: value },
{ abortEarly: false }
);
setErrors((prev) => {
const updatedErrors = { ...prev };
if (validation.error) {
updatedErrors[id] = validation.error.details[0].message;
} else {
delete updatedErrors[id];
}
return updatedErrors;
});
};
// const handleCheck = (id, setState) => {
// setState((prev) => ({
// ...prev,
// [id]: !prev[id],
// }));
// };
const handleCreateNewMonitor = async (event) => {
event.preventDefault();
//obj to submit
let monitor = {
...generalSettings,
...checks,
};
const { error } = createMonitorValidation.validate(monitor, {
abortEarly: false,
});
if (error) {
const newErrors = {};
error.details.forEach((err) => {
newErrors[err.path[0]] = err.message;
});
setErrors(newErrors);
} else {
monitor = {
...monitor,
description: monitor.name,
userId: user._id,
// ...advancedSettings, // TODO frequency should be interval, then we can use spread
interval: advancedSettings.frequency * MS_PER_MINUTE,
};
try {
const action = await dispatch(createMonitor({ authToken, monitor }));
if (action.meta.requestStatus === "fulfilled") {
navigate("/monitors");
}
} catch (error) {
alert(error);
}
}
};
//select values
// const ports = ["Port 1", "Port 2", "Port 3"];
const frequencies = [1, 2, 3, 4, 5];
return (
<form
className="create-monitor-form"
onSubmit={handleCreateNewMonitor}
noValidate
spellCheck="false"
style={{
maxWidth: "1200px",
flex: 1,
padding: `${theme.content.pY} ${theme.content.pX}`,
}}
>
<Button
level="tertiary"
label="Back"
img={<WestRoundedIcon />}
onClick={() => navigate("/monitors")}
sx={{
backgroundColor: "#f4f4f4",
mb: theme.gap.medium,
px: theme.gap.ml,
"& svg.MuiSvgIcon-root": {
pr: theme.gap.small,
},
}}
/>
<Typography component="h1">Create new monitor</Typography>
<div className="monitors-gaps-medium"></div>
<ConfigBox
leftLayout={
<Stack gap={theme.gap.small}>
<Typography component="h2">General settings</Typography>
<Typography component="p">
Here you can select the URL of the host, together with the type of
monitor.
</Typography>
</Stack>
}
rightLayout={
<Stack gap={theme.gap.xl}>
<FlexibileTextField
id="monitor-url"
title="URL to monitor"
type="url"
placeholder="https://google.com"
value={generalSettings.url}
onChange={(event) =>
handleChange(event, "url", setGeneralSettings)
}
error={errors["url"]}
/>
<FlexibileTextField
id="monitor-name"
title={
<>
Friendly name <span>(optional)</span>
</>
}
type="text"
placeholder="Google"
value={generalSettings.name}
onChange={(event) =>
handleChange(event, "name", setGeneralSettings)
}
error={errors["name"]}
/>
</Stack>
}
/>
<div className="monitors-gaps-medium"></div>
<div className="monitors-gaps-medium"></div>
<ConfigBox
leftLayout={
<Stack gap={theme.gap.small}>
<Typography component="h2">Checks to perform</Typography>
<Typography component="p">
You can always add or remove checks after adding your site.
</Typography>
</Stack>
}
rightLayout={
<Stack gap={theme.gap.large}>
<RadioButton
id="monitor-checks-http"
title="HTTP/website monitoring"
desc="Use HTTP(s) to monitor your website or API endpoint."
size="small"
value="http"
checked={checks.type === "http"}
onChange={(event) => handleChange(event, "type", setChecks)}
/>
<RadioButton
id="monitor-checks-ping"
title="Ping monitoring"
desc="Check whether your server is available or not."
size="small"
value="ping"
checked={checks.type === "ping"}
onChange={(event) => handleChange(event, "type", setChecks)}
/>
{/* TODO */}
{/* <RadioButton
id="monitor-checks-port"
title="Port monitoring"
desc="Monitor a specific service on your server."
value="port"
checked={checks.type === "port"}
onChange={(event) => handleChange(event, "type", setChecks)}
/>
<div className="monitors-gaps-small-plus"></div>
<div className="monitors-dropdown-holder">
<Select
id="monitor-ports"
value={checks.port || "placeholder"}
inputProps={{ id: "monitor-ports-select" }}
onChange={(event) => handleChange(event, "port", setChecks)}
>
<MenuItem id="port-placeholder" value="placeholder">
Select a port to check
</MenuItem>
{ports.map((port, index) => (
<MenuItem key={`port-${index}`} value={port}>
{port}
</MenuItem>
))}
</Select>
</div> */}
<Box className="error-container">
{errors["type"] ? (
<Typography component="p" className="input-error">
{errors["type"]}
</Typography>
) : (
""
)}
</Box>
</Stack>
}
/>
{/* TODO */}
{/* <div className="monitors-gaps-medium"></div>
<div className="monitors-gaps-medium"></div>
<ConfigBox
leftLayout={
<div className="config-box-desc">
<div className="config-box-desc-title">Incident notifications</div>
<div className="config-box-desc-text">
When there is an incident, notify users.
</div>
</div>
}
rightLayout={
<div className="incident-notif-config">
<div className="incident-notif-config-title">
When there is a new incident,
</div>
<div className="monitors-gaps-medium"></div>
<div className="incident-notif-config-checks">
<CustomizableCheckBox
id="monitor-notify-sms"
title="Notify via SMS (to be implemented)"
isChecked={notifications.viaSms}
handleChange={() => handleCheck("viaSms", setNotifications)}
/>
<div className="monitors-gaps-medium"></div>
<CustomizableCheckBox
id="monitor-notify-email"
title="Notify via email (to current email address)"
isChecked={notifications.viaEmail}
handleChange={() => handleCheck("viaEmail", setNotifications)}
/>
<div className="monitors-gaps-medium"></div>
<CustomizableCheckBox
id="monitor-notify-other"
title="Notify via email (to another email address below)"
isChecked={notifications.viaOther}
handleChange={() => handleCheck("viaOther", setNotifications)}
/>
<div className="monitors-gaps-small-plus"></div>
<div className="monitors-dropdown-holder">
<FlexibileTextField
id="monitor-notify-other-email"
placeholder="notifications@gmail.com"
type="email"
value={notifications.email}
onChange={(event) =>
handleChange(event, "email", setNotifications)
}
/>
</div>
</div>
</div>
}
/> */}
<div className="monitors-gaps-medium"></div>
<div className="monitors-gaps-medium"></div>
<ConfigBox
leftLayout={
<Stack gap={theme.gap.small}>
<Typography component="h2">Advanced settings</Typography>
</Stack>
}
rightLayout={
<Stack gap={theme.gap.large}>
{/* TODO - refactor select component */}
<Box>
<Typography component="p" mb={theme.gap.small}>
Check frequency
</Typography>
<Select
id="monitor-frequencies"
value={advancedSettings.frequency || 1}
inputProps={{ id: "monitor-frequencies-select" }}
onChange={(event) =>
handleChange(event, "frequency", setAdvancedSettings)
}
MenuProps={{
PaperProps: {
style: {
marginTop: "10px",
},
},
}}
>
{frequencies.map((freq) => (
<MenuItem
key={`port-${freq}`}
value={freq}
sx={{
fontSize: "13px",
borderRadius: `${theme.shape.borderRadius}px`,
margin: "5px",
}}
>
{freq} {freq === 1 ? "minute" : "minutes"}
</MenuItem>
))}
</Select>
</Box>
{/* TODO */}
{/* <FlexibileTextField
id="monitor-settings-retries"
title="Maximum retries before the service is marked as down"
type="number"
value={advancedSettings.retries}
onChange={(event) =>
handleChange(event, "retries", setAdvancedSettings)
}
/>
<div className="monitors-gaps-medium"></div>
<FlexibileTextField
id="monitor-settings-codes"
title="Accepted status codes"
type="number"
value={advancedSettings.codes}
onChange={(event) =>
handleChange(event, "codes", setAdvancedSettings)
}
/>
<div className="monitors-gaps-medium"></div>
<FlexibileTextField
id="monitor-settings-redirects"
title="Maximum redirects"
type="number"
value={advancedSettings.redirects}
onChange={(event) =>
handleChange(event, "redirects", setAdvancedSettings)
}
/> */}
</Stack>
}
/>
{/* TODO */}
{/* <div className="monitors-gaps-medium"></div>
<div className="monitors-gaps-medium"></div>
<ConfigBox
leftLayout={
<div className="config-box-desc">
<div className="config-box-desc-title">Proxy settings</div>
</div>
}
rightLayout={
<div className="proxy-setting-config">
<CustomizableCheckBox
id="monitor-proxy-enable"
title="Enable proxy"
isChecked={proxy.enabled}
handleChange={() => handleCheck("enabled", setProxy)}
/>
<div className="monitors-gaps-medium"></div>
<FlexibileTextField
id="monitor-proxy-protocol"
title="Proxy protocol"
value={proxy.protocol}
onChange={(event) => handleChange(event, "protocol", setProxy)}
/>
<div className="monitors-gaps-medium"></div>
<FlexibileTextField
id="monitor-proxy-address"
title="Proxy address"
value={proxy.address}
onChange={(event) => handleChange(event, "address", setProxy)}
/>
<div className="monitors-gaps-medium"></div>
<FlexibileTextField
id="monitor-proxy-port"
title="Proxy port"
value={proxy.proxy_port}
onChange={(event) => handleChange(event, "proxy_port", setProxy)}
/>
</div>
}
/> */}
<div className="monitors-gaps-medium"></div>
<div className="monitors-gaps-small"></div>
<div className="monitors-create-button-holder">
<Button
id="create-new-monitor-btn"
level="primary"
label="Create new monitor"
sx={{ width: "210px", fontSize: "var(--env-var-font-size-medium)" }}
onClick={handleCreateNewMonitor}
disabled={Object.keys(errors).length !== 0 && true}
/>
</div>
</form>
);
};
export default CreateNewMonitor;
Client/src/Pages/Demo/Demo.jsx
+36
View File
@@ -15,6 +15,7 @@ import {
Tabs,
Typography,
Stack,
Box,
} from "@mui/material";
import { ColoredLabel, StatusLabel } from "../../Components/Label/";
import Avatar from "../../Components/Avatar/";
@@ -29,12 +30,16 @@ 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";
// Redux
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
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 = [
{
@@ -415,6 +420,37 @@ const Demo = () => {
/>
</Stack>
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
<Stack justifyContent="center" alignItems="center">
<ImageField />
</Stack>
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
<Stack justifyContent="center" alignItems="center">
<ProgressUpload icon={<ImageIcon />} label="image.jpg" size="2 MB" />
</Stack>
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
<Stack justifyContent="center" alignItems="center">
<Box width="500px">
<Alert
variant="info"
title="SSO login"
body="Since you logged in via SSO, you cannot reset or modify your password."
/>
</Box>
<Box width="500px" mt="5px">
<Alert
variant="warning"
body="New password must contain at least 8 characters and must have at least one uppercase letter, one number and one symbol."
/>
</Box>
<Box width="500px" mt="5px">
<Alert
variant="error"
title="Error"
body="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
/>
</Box>
</Stack>
<Divider sx={{ margin: `${theme.spacing(2)}` }} />
</div>
);
};
Client/src/Pages/Incidents/index.jsx
+165 -5
View File
@@ -1,7 +1,167 @@
import React from "react";
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
import { styled, useTheme } 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';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { StatusLabel } from "../../Components/Label/";
import TuneIcon from '@mui/icons-material/Tune';
const Incidents = () => {
return <div>Incidents</div>;
};
/**
* Creates a styled TableCell component.
* @param {object} theme - The theme object.
* @returns {JSX.Element} The styled TableCell component.
*/
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: theme.palette.action.hover,
color: theme.palette.common.black,
},
[`&.${tableCellClasses.body}`]: {
fontSize: 14,
},
}));
export default Incidents;
/**
* Creates a styled TableRow component.
* @param {object} theme - The theme object.
* @returns {JSX.Element} The styled TableRow component.
*/
const StyledTableRow = styled(TableRow)(({ theme }) => ({
'&:nth-of-type(odd)': {
backgroundColor: theme.palette.action.hover,
},
'&:nth-of-type(even)': {
backgroundColor: theme.palette.common.white,
},
'&:last-child td, &:last-child th': {
border: 0,
},
}));
const filterOptions = createFilterOptions({
matchFrom: 'start',
stringify: (option) => option.title,
});
const titles = [
{ title: 'Down' },
{ title: 'Cannot resolve' },
{ title: 'Clear / show all' },
];
/**
* Creates a data object for the table row.
* @param {JSX.Element} name - The status label JSX element.
* @param {string} date - The date and time string.
* @param {string} message - The message string.
* @returns {object} The data object containing name, date, and message.
*/
function createData(name, date, message) {
return { name, date, message };
}
/**
* Customized table component displaying incident history.
* @returns {JSX.Element} The JSX element representing the customized table.
*/
export default function CustomizedTables() {
const theme = useTheme();
const rows = [
createData(<StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
createData(<StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
createData(<StatusLabel status="Cannot resolve" customStyles={{ backgroundColor: '#f2f4f7', borderColor: '#d2d6de', color: '#344054' }} />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
createData(<StatusLabel status="Cannot resolve" customStyles={{ backgroundColor: '#f2f4f7', borderColor: '#d2d6de', color: '#344054' }} />, '2024-03-14 21:41:09', 'timeout of 48000ms exceeded'),
createData(<StatusLabel status="Down" customStyles={{ backgroundColor: '#fff9f9', borderColor: '#ffcac6', color: '#344054' }} />, '2024-03-14 21:41:09', 'HTTP 350 - NOK'),
];
return (
<Box
sx={{
marginTop: theme.spacing(4),
marginX: 'auto',
width: '80%',
paddingX: theme.spacing(6),
[theme.breakpoints.down('md')]: {
width: '100%',
},
}}
>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: theme.spacing(2) }}>
<Typography variant="h6" component="div" sx={{ fontWeight: 600, fontSize: 16 }}>
Incident History
</Typography>
<Filter />
</Box>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 700 }} aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell>Status</StyledTableCell>
<StyledTableCell align="right">Date & Time</StyledTableCell>
<StyledTableCell align="right">Message</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, index) => (
<StyledTableRow key={index}>
<StyledTableCell component="th" scope="row">
{row.name}
</StyledTableCell>
<StyledTableCell align="right">{row.date}</StyledTableCell>
<StyledTableCell align="right">{row.message}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
);
}
/**
* Filter component with autocomplete for status filtering.
* @returns {JSX.Element} The JSX element representing the filter component.
*/
function Filter() {
return (
<Autocomplete
id="filter-demo"
options={titles}
getOptionLabel={(option) => option.title}
filterOptions={filterOptions}
sx={{
width: 170,
'& .MuiAutocomplete-inputRoot': {
height: '50px',
},
'& .MuiAutocomplete-listbox': {
maxHeight: '200px',
},
}}
disableClearable
renderInput={(params) => (
<TextField
{...params}
size="small"
label={
<React.Fragment>
<TuneIcon sx={{ marginRight: '0.5rem', position: 'relative', top: '6px' }} />
Filter by status
</React.Fragment>
}
InputProps={{ ...params.InputProps, endAdornment: null }}
/>
)}
/>
);
}
Client/src/Pages/Login/index.css
+7 -1
View File
@@ -41,7 +41,13 @@
#login-email-input {
width: 308px;
height: 11px;
height: 1px;
font-size: var(--env-var-font-size-medium);
}
#login-password-input {
width: 308px;
height: 1px;
font-size: var(--env-var-font-size-medium);
}
Client/src/Pages/Login/index.jsx
+16
View File
@@ -13,6 +13,8 @@ import PasswordTextField from "../../Components/TextFields/Password/PasswordText
import { loginValidation } from "../../Validation/validation";
import { login } from "../../Features/Auth/authSlice";
import { useDispatch } from "react-redux";
import axios from "axios";
const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL;
const Login = () => {
const dispatch = useDispatch();
@@ -30,6 +32,19 @@ const Login = () => {
password: "",
});
useEffect(() => {
axios
.get(BASE_URL + "/auth/users/admin")
.then((response) => {
if (response.data.data === false) {
navigate("/register");
}
})
.catch((error) => {
console.log(error);
});
}, [navigate]);
useEffect(() => {
const { error } = loginValidation.validate(form, {
abortEarly: false,
@@ -83,6 +98,7 @@ const Login = () => {
const handleSignupClick = () => {
navigate("/register");
};
return (
<div className="login-page">
<BackgroundPattern></BackgroundPattern>
Client/src/Pages/Monitors/CreateNewMonitor.jsx
-105
View File
@@ -1,105 +0,0 @@
import ConfigBox from "../../Components/ConfigBox";
import FlexibileTextField from "../../Components/TextFields/Flexibile/FlexibileTextField";
import "./index.css";
import React from "react";
import RadioButton from "../../Components/RadioButton";
const CreateNewMonitor = () => {
return (
<div>
<div className="monitors-gaps-medium"></div>
<div className="monitors-gaps-medium"></div>
<div className="new-monitor-header">Create new monitor</div>
<div className="monitors-gaps-medium"></div>
<ConfigBox
leftLayout={
<div className="config-box-desc">
<div className="config-box-desc-title">General settings</div>
<div className="config-box-desc-text">
Here you can select the URL of the host, together with the type of
monitor.
</div>
</div>
}
rightLayout={
<div className="config-box-inputs">
<FlexibileTextField
title="URL to monitor"
type="url"
placeholder="https://google.com"
/>
<div className="monitors-gaps-medium"></div>
<FlexibileTextField
title="Friendly name (optional)"
type="text"
placeholder="Google"
/>
</div>
}
/>
<div className="monitors-gaps-medium"></div>
<div className="monitors-gaps-medium"></div>
<ConfigBox
leftLayout={
<div className="config-box-desc">
<div className="config-box-desc-title">Checks to perform</div>
<div className="config-box-desc-text">
You can always add or remove checks after adding your site.
</div>
</div>
}
rightLayout={
<div className="service-check-list">
<RadioButton
title="HTTP/website monitoring"
desc="Use HTTP(s) to monitor your website or API endpoint."
/>
<div className="monitors-gaps-medium"></div>
<RadioButton
title="Ping monitoring"
desc="Check whether your server is available or not."
/>
<div className="monitors-gaps-medium"></div>
<RadioButton
title="Port monitoring"
desc="Monitor a specific service on your server."
/>
<div className="monitors-gaps-medium"></div>
</div>
}
/>
<div className="monitors-gaps-medium"></div>
<div className="monitors-gaps-medium"></div>
<ConfigBox
leftLayout={
<div className="config-box-desc">
<div className="config-box-desc-title">Incident notifications</div>
<div className="config-box-desc-text">
When there is an incident, notify users.
</div>
</div>
}
/>
<div className="monitors-gaps-medium"></div>
<div className="monitors-gaps-medium"></div>
<ConfigBox
leftLayout={
<div className="config-box-desc">
<div className="config-box-desc-title">Advanced settings</div>
</div>
}
/>
<div className="monitors-gaps-medium"></div>
<div className="monitors-gaps-medium"></div>
<ConfigBox
leftLayout={
<div className="config-box-desc">
<div className="config-box-desc-title">Proxy settings</div>
</div>
}
/>
</div>
);
};
export default CreateNewMonitor;
Client/src/Pages/Monitors/CurrentStats.jsx
-56
View File
@@ -1,56 +0,0 @@
import Button from "../../Components/Button";
import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
import CurrentMonitors from "../../Components/CurrentMonitors";
import PropTypes from "prop-types";
/**
* CurrentStats displays the current status of monitor
*
* @component
* @param {Array<Monitor>} monitors - An array of monitor objects to be displayed.
*/
const CurrentStats = ({ monitors }) => {
const up = monitors.reduce((acc, cur) => {
if (cur.checks.length > 0) {
return cur.checks[cur.checks.length - 1].status === true ? acc + 1 : acc;
}
return 0;
}, 0);
const down = monitors.reduce((acc, cur) => {
if (cur.checks.length > 0) {
return cur.checks[cur.checks.length - 1].status === false ? acc + 1 : acc;
}
return 0;
}, 0);
return (
<div>
<div className="monitors-gaps-medium"></div>
<div className="monitors-gaps-medium"></div>
<div className="monitors-bar">
<div className="monitors-bar-title">Hello, Jackie</div>
<Button
level="primary"
label="Create new monitor"
sx={{ padding: "10px 20px", fontSize: "13px" }}
/>
</div>
<div className="monitors-gaps-medium"></div>
<div className="monitors-stats">
<ServerStatus title="Up" value={up} state="up" />
<ServerStatus title="Down" value={down} state="down" />
<ServerStatus title="Paused" value={0} state="pause" />
</div>
<div className="monitors-gaps-medium"></div>
<CurrentMonitors monitors={monitors} />
</div>
);
};
CurrentStats.propTypes = {
monitors: PropTypes.arrayOf(PropTypes.object).isRequired,
};
export default CurrentStats;
Client/src/Pages/Monitors/index.css
+59
View File
@@ -4,7 +4,12 @@
padding: 4vw;
}
.monitors {
font-family: var(--env-var-font-familt-1);
}
.monitors-bar {
margin-top: calc(2 * var(--env-var-spacing-2));
display: flex;
justify-content: space-between;
align-items: center;
@@ -16,6 +21,7 @@
}
.monitors-stats {
margin-top: var(--env-var-spacing-2);
display: flex;
gap: 24px;
}
@@ -24,6 +30,14 @@
height: var(--env-var-spacing-2);
}
.monitors-gaps-small-plus {
height: var(--env-var-spacing-1-plus);
}
.monitors-gaps-small {
height: 6px;
}
.new-monitor-header {
color: var(--env-var-color-1);
font-size: var(--env-var-font-size-large-plus);
@@ -43,3 +57,48 @@
.host-status-box-text {
font-size: var(--env-var-font-size-medium);
}
.monitors-dropdown-holder {
padding-left: 30px;
}
#ports-list {
width: 172.92px;
height: 12px;
font-size: var(--env-var-font-size-small);
align-items: center;
}
.incident-notif-config-title,
.adv-setting-title {
color: var(--env-var-color-5);
font-size: var(--env-var-font-size-medium);
}
.adv-setting-title {
font-weight: 500;
}
.config-box-inputs,
.service-check-list,
.incident-notif-config,
.advanced-setting-config,
.proxy-setting-config {
min-width: 350px;
padding-right: 40px;
}
.monitors-create-button-holder {
display: flex;
justify-content: end;
}
#create-new-monitor-btn {
padding-top: 6px;
}
#ports-dropdown,
#freq-dropdown {
width: 226.8px;
height: 20px;
}
Client/src/Pages/Monitors/index.jsx
+54 -7
View File
@@ -1,23 +1,70 @@
// import CreateNewMonitor from "./CreateNewMonitor";
import CurrentStats from "./CurrentStats";
import "./index.css";
import "./monitors.css";
import { useEffect } from "react";
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { useSelector, useDispatch } from "react-redux";
import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice";
import { useNavigate } from "react-router-dom";
import Button from "../../Components/Button";
import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
import SearchTextField from "../../Components/TextFields/Search/SearchTextField";
import HostsTable from "../../Components/HostsTable";
import Pagination from "../../Components/Pagination";
const Monitors = () => {
const navigate = useNavigate();
const monitorState = useSelector((state) => state.monitors);
const authstate = useSelector((state) => state.auth);
const authState = useSelector((state) => state.auth);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getMonitorsByUserId(authstate.authToken));
dispatch(getMonitorsByUserId(authState.authToken));
}, []);
const up = monitorState.monitors.reduce((acc, cur) => {
return cur.status === true ? acc + 1 : acc;
}, 0);
const down = monitorState.monitors.length - up;
return (
<div className="monitors">
<CurrentStats monitors={monitorState.monitors} />
<div className="monitors-bar">
<div className="monitors-bar-title">
Hello, {authState.user.firstname}
</div>
<Button
level="primary"
label="Create new monitor"
onClick={() => {
navigate("/monitors/create");
}}
sx={{ padding: "10px 20px", fontSize: "13px" }}
/>
</div>
<div className="monitors-stats">
<ServerStatus title="Up" value={up} state="up" />
<ServerStatus title="Down" value={down} state="down" />
<ServerStatus title="Paused" value={0} state="pause" />
</div>
<div className="current-monitors">
<div className="current-monitors-bar">
<div className="current-monitors-title-holder">
<div className="current-monitors-title">Current monitors</div>
<div className="current-monitors-counter">
{monitorState.monitors.length}
</div>
</div>
<div className="current-monitors-search-bar">
<SearchTextField />
</div>
</div>
<div className="monitors-v-gaping"></div>
<HostsTable monitors={monitorState.monitors} />
<div className="monitors-v-gaping"></div>
<Pagination />
</div>
</div>
);
};
Client/src/Components/CurrentMonitors/index.css → Client/src/Pages/Monitors/monitors.css
+1
View File
@@ -1,4 +1,5 @@
.current-monitors {
margin-top: var(--env-var-spacing-2);
border: 1px solid #eaecf0;
padding: 40px;
border-radius: 4px;
Client/src/Pages/PlayGround/PlayGround.jsx
+4 -4
View File
@@ -4,12 +4,12 @@ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
import WebsiteTextField from "../../Components/TextFields/Website/WebsiteTextField";
import DescriptionTextField from "../../Components/TextFields/Description/DescriptionTextField";
import AnnouncementsDualButton from "../../Components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton";
import AnnouncementsDualButtonWithIcon from "../../Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
import AnnouncementsDualButton from "../../Components/Toast/AnnouncementsDualButton/AnnouncementsDualButton";
import AnnouncementsDualButtonWithIcon from "../../Components/Toast/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert";
import AnnouncementsMessageBar from "../../Components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar";
import AnnouncementUpdateSubscription from "../../Components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription";
import AnnouncementsMessageBar from "../../Components/Toast/AnnouncementsMessageBar/AnnouncementsMessageBar";
import AnnouncementUpdateSubscription from "../../Components/Toast/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription";
import PlayGroundCharts from "./PlayGround-Charts";
import PlayGroundPopupModals from "./PlayGround-Popup-Modals";
import PlayGroundTooltips from "./PlayGround-Tooltips";
Client/src/Pages/Register/index.jsx
+18 -2
View File
@@ -14,6 +14,7 @@ import { registerValidation } from "../../Validation/validation";
import { useDispatch } from "react-redux";
import { register } from "../../Features/Auth/authSlice";
import axios from "axios";
const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL;
@@ -36,8 +37,22 @@ const Register = () => {
lastname: "",
email: "",
password: "",
role: "",
});
useEffect(() => {
axios
.get(BASE_URL + "/auth/users/admin")
.then((response) => {
if (response.data.data === true) {
navigate("/login");
}
})
.catch((error) => {
console.log(error);
});
}, [form, navigate]);
useEffect(() => {
const { error } = registerValidation.validate(form, {
abortEarly: false,
@@ -62,8 +77,9 @@ const Register = () => {
const handleSubmit = async (e) => {
e.preventDefault();
try {
await registerValidation.validateAsync(form, { abortEarly: false });
const action = await dispatch(register(form));
const adminForm = { ...form, role: "admin" };
await registerValidation.validateAsync(adminForm, { abortEarly: false });
const action = await dispatch(register(adminForm));
if (action.meta.requestStatus === "fulfilled") {
const token = action.payload.data;
Client/src/Pages/Settings/index.css
-196
View File
@@ -1,196 +0,0 @@
.settings h1.MuiTypography-root,
.settings p.MuiTypography-root,
.settings input,
.settings button,
.settings td,
.settings .MuiSelect-select {
font-size: var(--env-var-font-size-medium);
}
.settings h1.MuiTypography-root,
.settings p.MuiTypography-root,
.settings input,
.settings .MuiSelect-select {
color: var(--env-var-color-2);
}
.settings h1.MuiTypography-root {
font-weight: 600;
}
.settings .MuiStack-root:not(.table-stack) {
flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
}
.settings .MuiTabPanel-root {
padding: 0;
margin-top: 50px;
}
.settings .MuiDivider-root:not(.short-divider) {
margin: 50px 0;
}
.settings .MuiDivider-root,
.settings .MuiOutlinedInput-root fieldset,
.announcement-tile {
border-color: var(--env-var-color-29);
}
[class$="-form"] {
width: inherit;
}
[class$="__wrapper"],
[class$="__wrapper compact"] {
display: flex;
flex-direction: row;
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) {
flex-direction: column;
gap: 8px;
margin-right: 10px;
}
.edit-profile-form__wrapper p.MuiTypography-root,
.delete-profile-form__wrapper p.MuiTypography-root {
opacity: 0.6;
}
#modal-delete-account,
#modal-edit-org-name,
#modal-invite-member {
font-size: var(--env-var-font-size-large);
}
.edit-profile-form__wrapper:not(:first-of-type),
.edit-password-form__wrapper:not(:first-of-type),
.edit-team-form__wrapper:not(:first-of-type) {
margin-top: var(--env-var-spacing-4);
}
.edit-team-form__wrapper.compact {
margin-top: var(--env-var-spacing-3);
justify-content: flex-start;
align-items: center;
}
.edit-profile-form__wrapper input,
.edit-password-form__wrapper input,
#edit-organization-name,
#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;
}
.edit-team-form__wrapper td {
padding: 10px 0;
padding-top: 20px;
vertical-align: text-top;
}
.edit-team-form__wrapper th {
padding: var(--env-var-spacing-1) 0;
}
.edit-team-form__wrapper th:first-of-type {
padding-left: 20px;
}
.edit-team-form__wrapper td {
color: var(--env-var-color-25);
}
#select-actions,
#select-role {
padding: 5px 0;
padding-left: 15px;
padding-right: 50px;
line-height: 1.75;
}
.MuiInputBase-root:has(#select-actions) fieldset,
.MuiInputBase-root:has(#select-role) fieldset {
border-color: #a1a7b1;
margin: -1px;
border-width: 1px;
}
.MuiInputBase-root:has(#select-actions):hover fieldset,
.MuiInputBase-root:has(#select-role):hover fieldset {
border-color: var(--env-var-color-2);
}
.MuiStack-root:has(.MuiBox-root > .members-query) .MuiBox-root {
cursor: pointer;
}
.members-query {
display: inline-flex;
justify-content: center;
align-items: center;
margin-left: 6px;
padding: 2px;
font-size: 12px;
font-weight: 500;
color: var(--env-var-color-3);
background-color: #e0e9fd;
min-width: 22px;
min-height: 22px;
border-radius: 50%;
}
/* for testing, will remove later */
@media only screen and (max-width: 1600px) {
.settings {
max-width: calc(90vw - 250px) !important;
}
.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) {
margin-right: 30px;
}
}
.settings .MuiStack-root:has(p.MuiTypography-root.input-error){
position: relative;
margin-bottom: 8px;
}
.settings p.MuiTypography-root.input-error{
color: var(--env-var-color-24);
opacity: 0.8;
position: absolute;
top: calc(100% + 5px);
}
.settings .email-text-field,
.settings .password-text-field {
margin: 0;
}
.edit-profile-form__wrapper .MuiFormControl-root,
.edit-password-form__wrapper .MuiFormControl-root{
width: 100%;
}
.edit-profile-form__wrapper .MuiStack-root:has(.MuiFormControl-root),
.edit-password-form__wrapper .MuiStack-root:has(.MuiFormControl-root){
margin: 0;
}
Client/src/Pages/Settings/index.jsx
+2 -81
View File
@@ -1,86 +1,7 @@
import PropTypes from "prop-types";
import { useState } from "react";
import { Box, Tab, useTheme } from "@mui/material";
import TabContext from "@mui/lab/TabContext";
import TabList from "@mui/lab/TabList";
import "./index.css";
import ProfilePanel from "../../Components/TabPanels/ProfileSettings/ProfilePanel";
import PasswordPanel from "../../Components/TabPanels/ProfileSettings/PasswordPanel";
import TeamPanel from "../../Components/TabPanels/ProfileSettings/TeamPanel";
/**
* Settings component renders a settings page with tabs for Profile, Password, and Team settings.
*
* @returns {JSX.Element}
*/
const tabList = ["Profile", "Password", "Team"];
import React from "react";
const Settings = () => {
const theme = useTheme();
//(tab) 0 - Profile
//(tab) 1 - Password
//(tab) 2 - Team
const [tab, setTab] = useState("0");
const handleTabChange = (event, newTab) => {
setTab(newTab);
};
return (
<Box
//TODO - breakpoints for responsive design
minWidth={theme.spacing(55)}
width="100vw"
maxWidth="calc(100vw - 800px)"
py={theme.spacing(5)}
px={theme.spacing(10)}
className="settings"
>
<TabContext value={tab}>
<Box
sx={{
borderBottom: 1,
borderColor: theme.palette.section.borderColor,
"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
}}
>
<TabList onChange={handleTabChange} aria-label="settings tabs">
{tabList.map((label, index) => (
<Tab
label={label}
key={index}
value={index.toString()}
sx={{
fontSize: "13px",
color: theme.palette.secondary.main,
textTransform: "none",
minWidth: "fit-content",
minHeight: 0,
paddingLeft: "0",
paddingY: "10px",
marginRight: "20px",
"&:focus": {
outline: "none",
},
"& .MuiTouchRipple-root": {
pointerEvents: "none",
display: "none",
},
}}
/>
))}
</TabList>
</Box>
<ProfilePanel />
<PasswordPanel />
<TeamPanel />
</TabContext>
</Box>
);
};
Settings.propTypes = {
// No props are being passed to this component, hence no specific PropTypes are defined.
return <div>Settings</div>;
};
export default Settings;
Client/src/Utils/Theme.js
+34 -1
View File
@@ -27,6 +27,9 @@ const otherColorsGraishWhiteLight = "#f2f2f2";
const otherColorsStrongBlue = "#f2f2f2";
const otherColorsSlateGray = "#667085";
//box shadow
const shadow =
"0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)";
// Global Font Family
const fontFamilyDefault = '"Roboto", "Helvetica", "Arial", sans-serif';
@@ -73,13 +76,43 @@ const theme = createTheme({
slateGray: otherColorsSlateGray,
},
},
font :{
font: {
default: {
font: fontFamilyDefault,
},
},
shape: {
borderRadius: 4,
borderThick: 2,
boxShadow: shadow,
},
content: {
pX: "80px",
pY: "40px",
},
gap: {
small: "8px",
medium: "12px",
ml: "16px",
large: "24px",
xl: "40px",
},
alert: {
info: {
color: secondaryMain,
bg: otherColorsWhite,
border: "#d0d5dd",
},
error: {
color: "#d92d20",
bg: "hsla(0, 100%, 52%, 0.03)",
border: "#f04438",
},
warning: {
color: "#f79009",
bg: "#fffaef",
border: "#fecf60"
},
},
});
Client/src/Validation/validation.js
+73 -37
View File
@@ -22,6 +22,9 @@ const registerValidation = joi.object({
"string.min": "Password must be at least 8 characters",
"string.empty": "Password is required",
}),
role: joi.string().required().messages({
"string.empty": "Role is required",
}),
});
const loginValidation = joi.object({
@@ -82,43 +85,41 @@ const editProfileValidation = joi.object({
}),
});
const passwordSchema = joi
.string()
.trim()
.min(8)
.messages({
"string.empty": "*Password is required.",
"string.min": "*Password must be at least 8 characters long.",
})
.custom((value, helpers) => {
if (!/[A-Z]/.test(value)) {
return helpers.message(
"*Password must contain at least one uppercase letter."
);
}
if (!/[a-z]/.test(value)) {
return helpers.message(
"*Password must contain at least one lowercase letter."
);
}
if (!/\d/.test(value)) {
return helpers.message("*Password must contain at least one number.");
}
if (!/[!@#$%^&*]/.test(value)) {
return helpers.message(
"*Password must contain at least one special character."
);
}
return value;
});
const editPasswordValidation = joi.object({
// TBD - validation for current password ?
password : joi
.string().trim()
.messages({
"string.empty": "*Current password is required.",
}),
newpassword: joi
.string()
.trim()
.min(8)
.messages({
"string.empty": "*Password is required.",
"string.min": "*Password must be at least 8 characters long.",
})
.custom((value, helpers) => {
if (!/[A-Z]/.test(value)) {
return helpers.message(
"*Password must contain at least one uppercase letter."
);
}
if (!/[a-z]/.test(value)) {
return helpers.message(
"*Password must contain at least one lowercase letter."
);
}
if (!/\d/.test(value)) {
return helpers.message("*Password must contain at least one number.");
}
if (!/[!@#$%^&*]/.test(value)) {
return helpers.message(
"*Password must contain at least one special character."
);
}
return value;
}),
password: passwordSchema,
newpassword: passwordSchema,
confirm: joi
.string()
.trim()
@@ -126,15 +127,50 @@ const editPasswordValidation = joi.object({
"string.empty": "*Password confirmation is required.",
})
.custom((value, helpers) => {
const { password } = helpers.prefs.context;
if (value !== password) {
const { newpassword } = helpers.prefs.context;
if (value !== newpassword) {
return helpers.message("*Passwords do not match.");
}
return value;
}),
});
const createMonitorValidation = joi.object({
url: joi
.string()
.trim()
.messages({ "string.empty": "*This field is required." }),
name: joi.string().trim().max(50).allow("").messages({
"string.max": "*This field should not exceed the 50 characters limit.",
}),
type: joi
.string()
.trim()
.messages({ "string.empty": "*This field is required." }),
frequency: joi.number().messages({
"number.base": "*Frequency must be a number.",
"any.required": "*Frequency is required.",
}),
});
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,
recoveryValidation,
Client/src/assets/icons/lock.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3337 5.66667V4.33333C10.3337 2.49238 8.84127 1 7.00033 1C5.15938 1 3.66699 2.49238 3.66699 4.33333V5.66667M7.00033 8.66667V10M4.86699 13H9.13366C10.2538 13 10.8138 13 11.2416 12.782C11.618 12.5903 11.9239 12.2843 12.1157 11.908C12.3337 11.4802 12.3337 10.9201 12.3337 9.8V8.86667C12.3337 7.74656 12.3337 7.18651 12.1157 6.75869C11.9239 6.38236 11.618 6.0764 11.2416 5.88465C10.8138 5.66667 10.2538 5.66667 9.13366 5.66667H4.86699C3.74689 5.66667 3.18683 5.66667 2.75901 5.88465C2.38269 6.0764 2.07673 6.38236 1.88498 6.75869C1.66699 7.18651 1.66699 7.74656 1.66699 8.86667V9.8C1.66699 10.9201 1.66699 11.4802 1.88498 11.908C2.07673 12.2843 2.38269 12.5903 2.75901 12.782C3.18683 13 3.74689 13 4.86699 13Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 907 B

Client/src/assets/icons/logout.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.6667 11.3333L14 8M14 8L10.6667 4.66667M14 8H6M6 2H5.2C4.0799 2 3.51984 2 3.09202 2.21799C2.7157 2.40973 2.40973 2.71569 2.21799 3.09202C2 3.51984 2 4.07989 2 5.2V10.8C2 11.9201 2 12.4802 2.21799 12.908C2.40973 13.2843 2.71569 13.5903 3.09202 13.782C3.51984 14 4.0799 14 5.2 14H6" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 481 B

Client/src/assets/icons/user-two.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.6663 14V12.6667C14.6663 11.4241 13.8165 10.38 12.6663 10.084M10.333 2.19384C11.3103 2.58943 11.9997 3.54754 11.9997 4.66667C11.9997 5.78579 11.3103 6.7439 10.333 7.13949M11.333 14C11.333 12.7575 11.333 12.1362 11.13 11.6462C10.8594 10.9928 10.3402 10.4736 9.68683 10.203C9.19677 10 8.57552 10 7.33301 10H5.33301C4.0905 10 3.46924 10 2.97919 10.203C2.32578 10.4736 1.80665 10.9928 1.536 11.6462C1.33301 12.1362 1.33301 12.7575 1.33301 14M8.99967 4.66667C8.99967 6.13943 7.80577 7.33333 6.33301 7.33333C4.86025 7.33333 3.66634 6.13943 3.66634 4.66667C3.66634 3.19391 4.86025 2 6.33301 2C7.80577 2 8.99967 3.19391 8.99967 4.66667Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 830 B

Client/src/assets/icons/user.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3337 14C13.3337 13.0696 13.3337 12.6044 13.2188 12.2259C12.9603 11.3736 12.2934 10.7067 11.4411 10.4482C11.0626 10.3333 10.5974 10.3333 9.66699 10.3333H6.33366C5.40328 10.3333 4.93809 10.3333 4.55956 10.4482C3.7073 10.7067 3.04035 11.3736 2.78182 12.2259C2.66699 12.6044 2.66699 13.0696 2.66699 14M11.0003 5C11.0003 6.65685 9.65718 8 8.00033 8C6.34347 8 5.00033 6.65685 5.00033 5C5.00033 3.34315 6.34347 2 8.00033 2C9.65718 2 11.0003 3.34315 11.0003 5Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 655 B

Client/src/index.css
+4
View File
@@ -14,6 +14,8 @@
/* Generalized Stylings */
--env-var-font-familt-1: "Roboto", "Helvetica", "Arial", sans-serif;
--env-var-color-1: #101828;
--env-var-color-2: #475467;
--env-var-color-3: #1570ef;
@@ -56,11 +58,13 @@
--env-var-height-1: 100vh;
--env-var-spacing-1: 12px;
--env-var-spacing-1-plus: 16px;
--env-var-spacing-2: 24px;
--env-var-spacing-3: 32px;
--env-var-spacing-4: 40px;
--env-var-font-size-small: 11px;
--env-var-font-size-small-plus: 12px;
--env-var-font-size-medium: 13px;
--env-var-font-size-medium-plus: 14px;
--env-var-font-size-large: 16px;
Client/src/store.js
+13 -1
View File
@@ -2,12 +2,24 @@ import { configureStore, combineReducers } from "@reduxjs/toolkit";
import monitorsReducer from "./Features/Monitors/monitorsSlice";
import authReducer from "./Features/Auth/authSlice";
import storage from "redux-persist/lib/storage";
import { persistReducer, persistStore } from "redux-persist";
import { persistReducer, persistStore, createTransform } from "redux-persist";
const authTransform = createTransform(
(inboundState) => {
const { profileImage, ...rest } = inboundState;
return rest;
},
// No transformation on rehydration
null,
// Only applies to auth
{ whitelist: ["auth"] }
);
const persistConfig = {
key: "root",
storage,
whitielist: ["auth", "monitors"],
transforms: [authTransform],
};
const rootReducer = combineReducers({
Client/vite.config.js
+2 -1
View File
@@ -1,9 +1,10 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
plugins: [svgr(), react()],
optimizeDeps: {
include: ['@mui/material/Tooltip', '@emotion/styled'],
},
Docker/.gitignore
+5
View File
@@ -0,0 +1,5 @@
*.sh
!build_images.sh
mongo/data/*
redis/data/*
*.env
Server/docker/build_images.sh → Docker/build_images.sh
+7 -3
View File
@@ -4,15 +4,19 @@
# Change directory to root Server directory for correct Docker Context
cd ..
#Client
client="./Docker/client.Dockerfile"
# MongoDB
mongoDB="./docker/mongoDB.Dockerfile"
mongoDB="./Docker/mongoDB.Dockerfile"
# Redis
redis="./docker/redis.Dockerfile"
redis="./Docker/redis.Dockerfile"
# Server
server="./docker/server.Dockerfile"
server="./Docker/server.Dockerfile"
docker build -f $client -t uptime_client .
docker build -f $mongoDB -t uptime_database_mongo .
docker build -f $redis -t uptime_redis .
docker build -f $server -t uptime_server .
Docker/client.Dockerfile
+17
View File
@@ -0,0 +1,17 @@
FROM node:20
WORKDIR /app
COPY ./Client/package*.json ./
RUN npm install
COPY ./Client .
RUN npm run build
RUN npm install -g serve
CMD ["serve","-s", "dist", "-l", "5173"]
EXPOSE 5000
Server/docker/docker-compose.yaml → Docker/docker-compose.yaml
+9 -1
View File
@@ -1,11 +1,19 @@
version: "3"
services:
client:
image: uptime_client:latest
ports:
- "5173:5173"
env_file:
- client.env
depends_on:
- server
server:
image: uptime_server:latest
ports:
- "5000:5000"
env_file:
- .env
- server.env
depends_on:
- redis
- mongodb
Server/docker/mongoDB.Dockerfile → Docker/mongoDB.Dockerfile
View File
File renamed without changes.
Server/docker/redis.Dockerfile → Docker/redis.Dockerfile
View File
File renamed without changes.
Server/docker/server.Dockerfile → Docker/server.Dockerfile
+2 -2
View File
@@ -2,11 +2,11 @@ FROM node:20
WORKDIR /app
COPY ../../package*.json ./
COPY ./Server/package*.json ./
RUN npm install
COPY ../../ ./
COPY ./Server/ ./
EXPOSE 5000
PULLREQUESTS.md
+32
View File
@@ -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.
README.md
+88 -63
View File
@@ -27,18 +27,17 @@ You can see the designs [here](https://www.figma.com/design/RPSfaw66HjzSwzntKcgD
- Clone this repository to your local machine
1. [Docker Quickstart](#docker-quickstart)
1. [Installation (Client)](#client)
2. [Configuration(Client)](#config-client)
1. [Configuration(Client)](#config-client)
- [Environment](#env-vars-client)
3. [Getting Started (Server)](#server)
- [Docker Compose Quickstart](#docker-quickstart)
- [Manual Installation](#manual-install)
- [Install Server](#install-server)
- [Environment](#env-vars-server)
- [Database](#databases)
- [(Optional) Dockerised Databases](#optional-docker-databases)
- [Start Server](#start-server)
4. [Endpoints](#endpoints)
1. [Getting Started (Server)](#server)
- [Install Server](#install-server)
- [Environment](#env-vars-server)
- [Database](#databases)
- [(Optional) Dockerised Databases](#optional-docker-databases)
- [Start Server](#start-server)
1. [Endpoints](#endpoints)
###### Auth
- <code>POST</code> [/api/v1/auth/register](#post-register)
- <code>POST</code> [/api/v1/auth/login](#post-login)
@@ -64,11 +63,45 @@ You can see the designs [here](https://www.figma.com/design/RPSfaw66HjzSwzntKcgD
- <code>GET</code> [/api/v1/alerts/{alertId}](#get-alert-alert-id)
- <code>POST</code> [/api/v1/alerts/edit/{alertId}](#edit-alert)
- <code>POST</code> [/api/v1/alerts/delete/{alertId}](#delete-alert)
5. [Error Handling](#error-handling)
6. [Contributors](#contributors)
1. [Error Handling](#error-handling)
1. [Contributors](#contributors)
---
### Docker Quick Start
#### <u>Docker Quickstart</u> <a id="docker-quickstart"></a>
The fastest way to start the application is to use our Dockerfiles and [Docker Compose](https://docs.docker.com/compose/).
To get the application up and running you need to:
1. In the `Docker` directory run the build script `build_images.sh` to build docker images for the client, server, Redis database, and MongoDB database.
2. In the `Docker` directory, create a `server.env` file with the [requried environtmental variables](#env-vars-server) for the server. Sample file:
```
CLIENT_HOST="http://localhost:5173"
JWT_SECRET="my_secret"
DB_TYPE="MongoDB"
DB_CONNECTION_STRING="mongodb://mongodb:27017/uptime_db"
REDIS_HOST="redis"
REDIS_PORT=6379
SYSTEM_EMAIL_ADDRESS="<email>"
SENDGRID_API_KEY="<api_key>"
LOGIN_PAGE_URL="<login_page"
```
3. In the `Docker` directory, create a `client.env` file with the [required environtmental variables](#env-vars-client) for the client. Sample file:
```
VITE_APP_API_BASE_URL="http://localhost:5000/api/v1"
```
4. In the `Docker` directory run `docker compose up` to run the `docker-compose.yaml` file and start all four images.
That's it, the application is ready to use on port 5173.
<br/>
### Client
#### <u>Installation</u>
@@ -94,33 +127,7 @@ You can see the designs [here](https://www.figma.com/design/RPSfaw66HjzSwzntKcgD
---
### Getting Started (Server)
#### <u>Docker Quickstart</u> <a id="docker-quickstart"></a>
The fastest way to start the server is to use our Dockerfiles and [Docker Compose](https://docs.docker.com/compose/).
To get the server up and running you need to:
1. In the `Server/docker` directory run the build script `build_images.sh` to build docker images for the server, Redis database, and MongoDB database.
2. In the `Server/docker` directory, create a `.env` file with the [requried environtmental variables](#env-vars-server). Sample file:
```
CLIENT_HOST="http://localhost:5173"
JWT_SECRET="my_secret"
DB_TYPE="MongoDB"
DB_CONNECTION_STRING="mongodb://mongodb:27017/uptime_db"
REDIS_HOST="redis"
REDIS_PORT=6379
SYSTEM_EMAIL_ADDRESS="<email>"
SENDGRID_API_KEY="<api_key>"
LOGIN_PAGE_URL="<login_page"
```
3. In the `Server/docker` directory run `docker compose up` to run the `docker-compose.yaml` file and start all three images.
That's it, the server is ready to use.
<br/>
### Getting Started (Server) <a id="server"></a>
#### <u>Manual Install</u> <a id="manual-install"></a>
@@ -135,18 +142,19 @@ That's it, the server is ready to use.
Configure the server with the following environmental variables:
| ENV Variable Name | Required/Optional | Type | Description | Accepted Values |
| -------------------- | ----------------- | --------- | ------------------------------------------------------------------------------------------- | ------------------- |
| CLIENT_HOST | Required | `string` | Frontend Host | |
| JWT_SECRET | Required | `string` | JWT secret | |
| DB_TYPE | Optional | `string` | Specify DB to use | `MongoDB \| FakeDB` |
| DB_CONNECTION_STRING | Required | `string` | Specifies URL for MongoDB Database | |
| PORT | Optional | `integer` | Specifies Port for Server | |
| SENDGRID_API_KEY | Required | `string` | Specifies API KEY for SendGrid email service | |
| SYSTEM_EMAIL_ADDRESS | Required | `string` | Specifies System email to be used in emailing service, must be a verified email by sendgrid | |
| LOGIN_PAGE_URL | Required | `string` | Login url to be used in emailing service | |
| REDIS_HOST | Required | `string` | Host address for Redis database | |
| REDIS_PORT | Required | `integer` | Port for Redis database | |
| ENV Variable Name | Required/Optional | Type | Description | Accepted Values |
| -------------------- | ----------------- | --------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------ |
| CLIENT_HOST | Required | `string` | Frontend Host | |
| JWT_SECRET | Required | `string` | JWT secret | |
| DB_TYPE | Optional | `string` | Specify DB to use | `MongoDB \| FakeDB` |
| DB_CONNECTION_STRING | Required | `string` | Specifies URL for MongoDB Database | |
| PORT | Optional | `integer` | Specifies Port for Server | |
| SENDGRID_API_KEY | Required | `string` | Specifies API KEY for SendGrid email service | |
| SYSTEM_EMAIL_ADDRESS | Required | `string` | Specifies System email to be used in emailing service, must be a verified email by sendgrid | |
| LOGIN_PAGE_URL | Required | `string` | Login url to be used in emailing service | |
| REDIS_HOST | Required | `string` | Host address for Redis database | |
| REDIS_PORT | Required | `integer` | Port for Redis database | |
| TOKEN_TTL | Optional | string | Time for token to live | In vercel/ms format https://github.com/vercel/ms |
<br/>
@@ -161,15 +169,16 @@ You may use the included Dockerfiles to spin up databases quickly if you wish.
###### (Optional) Dockerised Databases <a id="optional-docker-databases"></a>
Dockerfiles for the server and databases are located in the `./Server/docker` directory
Dockerfiles for the server and databases are located in the `Docker` directory
<details>
<summary><b>MongoDB Image</b></summary>
Location: `./Server/docker/mongoDB.Dockerfile`
The `./Server/docker/mongo/data` directory should be mounted to the MongoDB container in order to persist data.
Location: `Docker/mongoDB.Dockerfile`
From the `Server/docker` directory run
The `Docker/mongo/data` directory should be mounted to the MongoDB container in order to persist data.
From the `Docker` directory run
1. Build the image: `docker build -f mongoDB.Dockerfile -t uptime_database_mongo .`
2. Run the docker image: `docker run -d -p 27017:27017 -v $(pwd)/mongo/data:/data/db --name uptime_database_mongo uptime_database_mongo`
@@ -177,11 +186,12 @@ From the `Server/docker` directory run
</details>
<details>
<summary><b>Redis Image</b></summary>
Location `./Server/docker/redislDockerfile`
the `./Server/docker/redis/data` directory should be mounted to the Redis container in order to persist data.
Location `Docker/redis.Dockerfile`
From the `Server/docker` directory run
the `Docker/redis/data` directory should be mounted to the Redis container in order to persist data.
From the `Docker` directory run
1. Build the image: `docker build -f redis.Dockerfile -t uptime_redis .`
2. Run the image: `docker run -d -p 6379:6379 -v $(pwd)/redis/data:/data --name uptime_redis uptime_redis`
@@ -809,6 +819,18 @@ curl --request GET \
> | -------------- | ----- |
> | Method | POST |
##### Body
> | Name | Type | Notes | Accepted Values |
> | ----------- | --------- | ---------------------- | ---------------------- |
> | userId | `string` | UserId of current user | |
> | name | `string` | Monitor name | |
> | description | `string` | Monitor Description | |
> | type | `string` | Valid email address | `"ping"`&#124;`"http"` |
> | url | `string` | URL of service or IP | |
> | isActive | `boolean` | | |
> | interval | `number` | In ms | |
###### Response Payload
> | Type | Notes |
@@ -822,12 +844,15 @@ curl --request POST \
--url http://localhost:5000/api/v1/monitors \
--header <bearer_token> \
--header 'Content-Type: application/json' \
--data '{"userId": "6645079aae0b439371913972",
"name": "Inserting a new Monitor",
"description": "Description",
"url": "https://monitor0.com",
--header 'User-Agent: insomnia/2023.5.8' \
--data '{
"userId": "66675891cb17336d84c25d9f",
"name": "Ping Google",
"description": "Google",
"type": "ping",
"url": "8.8.8.8",
"isActive": true,
"interval": 60000}'
"interval": 5000}'
```
##### Sample Response
Server/.dockerignore
-1
View File
@@ -1 +0,0 @@
./docker
Server/.gitignore
-3
View File
@@ -2,6 +2,3 @@ node_modules
.env
*.log
*.sh
docker/mongo/data/*
docker/redis/data/*
!docker/build_images.sh
Server/controllers/authController.js
+120 -11
View File
@@ -7,6 +7,7 @@ const {
recoveryValidation,
recoveryTokenValidation,
newPasswordValidation,
deleteUserParamValidation
} = require("../validation/joi");
const logger = require("../utils/logger");
require("dotenv").config();
@@ -26,7 +27,8 @@ const {
*/
const issueToken = (payload) => {
//TODO Add proper expiration date
return jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: "99d" });
const tokenTTL = process.env.TOKEN_TTL ? process.env.TOKEN_TTL : "2h";
return jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: tokenTTL });
};
/**
@@ -54,7 +56,11 @@ const registerController = async (req, res, next) => {
service: SERVICE_NAME,
userId: newUser._id,
});
const token = issueToken(newUser._doc);
const userForToken = { ...newUser._doc };
delete userForToken.profileImage;
const token = issueToken(userForToken);
// Sending email to user with pre defined template
const template = registerTemplate("https://www.bluewavelabs.ca");
@@ -68,7 +74,7 @@ const registerController = async (req, res, next) => {
return res.status(200).json({
success: true,
msg: successMessages.AUTH_CREATE_USER,
data: token,
data: { user: newUser, token: token },
});
} catch (error) {
error.service = SERVICE_NAME;
@@ -107,7 +113,7 @@ const loginController = async (req, res, next) => {
return res.status(200).json({
success: true,
msg: successMessages.AUTH_LOGIN_USER,
data: token,
data: { user: userWithoutPassword, token: token },
});
} catch (error) {
error.status = 500;
@@ -150,6 +156,29 @@ 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<Express.Response>}
*/
const checkAdminController = async (req, res) => {
try {
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);
return;
}
};
/**
* Returns a recovery token
* @async
@@ -223,23 +252,103 @@ const resetPasswordController = async (req, res, next) => {
try {
await newPasswordValidation.validateAsync(req.body);
user = await req.db.resetPassword(req, res);
res
.status(200)
.json({
success: true,
msg: successMessages.AUTH_RESET_PASSWORD,
data: user,
});
res.status(200).json({
success: true,
msg: successMessages.AUTH_RESET_PASSWORD,
data: user,
});
} catch (error) {
error.service = SERVICE_NAME;
next(error);
}
};
/**
* Deletes a user and all associated monitors, checks, and alerts.
*
* @param {Object} req - The request object.
* @param {Object} res - The response object.
* @param {Function} next - The next middleware function.
* @returns {Object} The response object with success status and message.
* @throws {Error} If user validation fails or user is not found in the database.
*/
const deleteUserController = async (req, res, next) => {
try {
const token = req.headers.authorization.split(' ')[1];
const decodedToken = jwt.decode(token)
const { _id, email } = decodedToken;
const decodedTokenCastedAsRequest = {
params: {
userId: _id
},
body: {
email
}
}
// Validate user
await deleteUserParamValidation.validateAsync(decodedTokenCastedAsRequest.body);
// Check if the user exists
const user = await req.db.getUserByEmail(decodedTokenCastedAsRequest);
if (!user) {
throw new Error(errorMessages.DB_USER_NOT_FOUND);
}
// 1. Find all the monitors associated with the user id
const monitors = await req.db.getMonitorsByUserId(decodedTokenCastedAsRequest);
if (monitors) {
// 2. Delete jobs associated with each monitor
for (const monitor of monitors) {
await req.jobQueue.deleteJob(monitor);
}
// 3. Delete all checks associated with each monitor
for (const monitor of monitors) {
await req.db.deleteChecks(monitor._id);
}
// 4. Delete all alerts associated with each monitor
for (const monitor of monitors) {
await req.db.deleteAlertByMonitorId(monitor._id);
}
// 5. Delete each monitor
await req.db.deleteMonitorsByUserId(user._id);
// 6. Delete the user by id
await req.db.deleteUser(decodedTokenCastedAsRequest);
return res.status(200).json({
success: true,
msg: successMessages.AUTH_DELETE_USER,
});
} else {
return res.status(404).json({
success: false,
msg: errorMessages.MONITOR_GET_BY_USER_ID,
});
}
} catch (error) {
error.service = SERVICE_NAME;
next(error);
}
};
module.exports = {
registerController,
loginController,
userEditController,
checkAdminController,
recoveryRequestController,
validateRecoveryTokenController,
resetPasswordController,
deleteUserController,
};
Server/controllers/monitorController.js
+4
View File
@@ -214,6 +214,10 @@ const editMonitor = async (req, res, next) => {
try {
const editedMonitor = await req.db.editMonitor(req, res);
// Delete the old job(editedMonitor has the same ID as the old monitor)
await req.jobQueue.deleteJob(editedMonitor);
// Add the new job back to the queue
await req.jobQueue.addJob(editedMonitor._id, editedMonitor);
return res.status(200).json({
success: true,
msg: successMessages.MONITOR_EDIT,
Server/db/MongoDB.js
+88 -6
View File
@@ -32,9 +32,19 @@ 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
return await UserModel.findOne({ _id: newUser._id })
.select("-password")
.select("-profileImage"); // .select() doesn't work with create, need to save then find
} catch (error) {
if (error.code === DUPLICATE_KEY_CODE) {
throw new Error(errorMessages.DB_USER_EXISTS);
@@ -58,7 +68,9 @@ const getUserByEmail = async (req, res) => {
try {
// Need the password to be able to compare, removed .select()
// We can strip the hash before returing the user
const user = await UserModel.findOne({ email: req.body.email });
const user = await UserModel.findOne({ email: req.body.email }).select(
"-profileImage"
);
if (user) {
return user;
} else {
@@ -80,20 +92,51 @@ const getUserByEmail = async (req, res) => {
const updateUser = async (req, res) => {
const candidateUserId = req.params.userId;
const candidateUser = req.body;
try {
const candidateUser = { ...req.body };
if (req.file) {
candidateUser.profileImage = {
data: req.file.buffer,
contentType: req.file.mimetype,
};
}
const updatedUser = await UserModel.findByIdAndUpdate(
candidateUserId,
candidateUser,
{ new: true } // Returns updated user instead of pre-update user
).select("-password");
)
.select("-password")
.select("-profileImage");
return updatedUser;
} catch (error) {
throw error;
}
};
/**
* Delete a user by ID
* @async
* @param {Express.Request} req
* @param {Express.Response} res
* @returns {Promise<UserModel>}
* @throws {Error}
*/
const deleteUser = async (req, res) => {
const userId = req.params.userId;
try {
const deletedUser = await UserModel.findByIdAndDelete(userId);
if (!deletedUser) {
throw new Error(errorMessages.DB_USER_NOT_FOUND);
}
return deletedUser;
} catch (error) {
throw error;
}
};
/**
* Request a recovery token
* @async
@@ -153,7 +196,9 @@ const resetPassword = async (req, res) => {
// Fetch the user again without the password
const userWithoutPassword = await UserModel.findOne({
email: recoveryToken.email,
}).select("-password");
})
.select("-password")
.select("-profileImage");
return userWithoutPassword;
} else {
throw new Error(errorMessages.DB_USER_NOT_FOUND);
@@ -163,6 +208,18 @@ const resetPassword = async (req, res) => {
}
};
const checkAdmin = async (req, res) => {
try {
const admin = await UserModel.findOne({ role: "admin" });
if (admin !== null) {
return true;
}
return false;
} catch (error) {
throw error;
}
};
//****************************************
// Monitors
//****************************************
@@ -284,6 +341,21 @@ const deleteAllMonitors = async (req, res) => {
}
};
/**
* Delete all monitors associated with a user ID
* @async
* @param {string} userId - The ID of the user whose monitors are to be deleted.
* @returns {Promise} A promise that resolves when the operation is complete.
*/
const deleteMonitorsByUserId = async (userId) => {
try {
const result = await Monitor.deleteMany({ userId: userId });
return result;
} catch (error) {
throw error;
}
};
/**
* Edit a monitor by ID
* @async
@@ -485,6 +557,13 @@ const deleteAlert = async (alertId) => {
}
};
/**
* Deletes alerts by monitor ID.
*
* @param {string} monitorId - The ID of the monitor.
* @returns {Promise} A promise that resolves to the result of the delete operation.
* @throws {Error} If an error occurs while deleting the alerts.
*/
const deleteAlertByMonitorId = async (monitorId) => {
try {
const result = await Alert.deleteMany({ monitorId });
@@ -499,9 +578,11 @@ module.exports = {
insertUser,
getUserByEmail,
updateUser,
deleteUser,
requestRecoveryToken,
validateRecoveryToken,
resetPassword,
checkAdmin,
getAllMonitors,
getMonitorById,
getMonitorsByUserId,
@@ -519,4 +600,5 @@ module.exports = {
editAlert,
deleteAlert,
deleteAlertByMonitorId,
deleteMonitorsByUserId
};
Server/middleware/handleErrors.js
+1
View File
@@ -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;
Server/middleware/verifyOwnership.js
+13
View File
@@ -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;
}
};
};
Server/models/Check.js
+29
View File
@@ -31,4 +31,33 @@ const CheckSchema = mongoose.Schema(
}
);
/**
* When a check is created, we should update the stauts of the associated monitor
* if it has changed. Monitor starts with default status: true
* @param {function} next - Callback to proceed to the next middleware.
*/
CheckSchema.pre("save", async function (next) {
try {
const monitor = await mongoose.model("Monitor").findById(this.monitorId);
if (monitor && monitor.status !== this.status) {
if (monitor.status === true && this.status === false) {
// TODO issue alert
console.log("Monitor went down");
}
if (monitor.status === false && this.status === true) {
// TODO issue alert
console.log("Monitor went up");
}
monitor.status = this.status;
await monitor.save();
}
} catch (error) {
console.log(error);
} finally {
next();
}
});
module.exports = mongoose.model("Check", CheckSchema);
Server/models/Monitor.js
+4
View File
@@ -14,6 +14,10 @@ const MonitorSchema = mongoose.Schema(
description: {
type: String,
},
status: {
type: Boolean,
default: true,
},
type: {
type: String,
required: true,
Server/models/user.js
+8 -2
View File
@@ -20,8 +20,9 @@ const UserSchema = mongoose.Schema(
type: String,
required: true,
},
profilePicUrl: {
type: String,
profileImage: {
data: Buffer,
contentType: String,
},
isActive: {
type: Boolean,
@@ -31,6 +32,11 @@ const UserSchema = mongoose.Schema(
type: Boolean,
default: false,
},
role: {
type: String,
default: "user",
enum: ["user", "admin"],
},
},
{
timestamps: true,
Server/package-lock.json
Generated
+266 -368
View File
File diff suppressed because it is too large. Load diff
Server/package.json
+1
View File
@@ -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"
},
Server/routes/authRoute.js
+15 -2
View File
@@ -1,5 +1,9 @@
const router = require("express").Router();
const { verifyJWT } = require("../middleware/verifyJWT");
const { verifyOwnership } = require("../middleware/verifyOwnership");
const multer = require("multer");
const upload = multer();
const User = require("../models/user");
const {
registerController,
@@ -8,12 +12,21 @@ const {
recoveryRequestController,
validateRecoveryTokenController,
resetPasswordController,
checkAdminController,
deleteUserController
} = 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);
router.post(
"/user/:userId",
upload.single("profileImage"),
verifyJWT,
userEditController
);
router.get("/users/admin", checkAdminController);
router.delete("/user/:userId", verifyJWT, verifyOwnership(User, "userId") , deleteUserController);
//Recovery routes
router.post("/recovery/request", recoveryRequestController);
Server/utils/messages.js
+2
View File
@@ -56,6 +56,8 @@ 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",
AUTH_DELETE_USER: "User deleted successfully",
// Check Controller
CHECK_CREATE: "Check created successfully",
Server/validation/joi.js
+9 -1
View File
@@ -14,6 +14,8 @@ const registerValidation = joi.object({
lastname: joi.string().required(),
email: joi.string().email().required(),
password: joi.string().min(8).required(),
profileImage: joi.any(),
role: joi.string().required(),
});
const editUserParamValidation = joi.object({
@@ -23,7 +25,8 @@ const editUserParamValidation = joi.object({
const editUserBodyValidation = joi.object({
firstname: joi.string(),
lastname: joi.string(),
profilePicUrl: joi.string(),
profileImage: joi.any(),
role: joi.string(),
});
const recoveryValidation = joi.object({
@@ -43,6 +46,10 @@ const newPasswordValidation = joi.object({
confirm: joi.string(),
});
const deleteUserParamValidation = joi.object({
email: joi.string().email().required(),
});
//****************************************
// Monitors
//****************************************
@@ -158,4 +165,5 @@ module.exports = {
createCheckBodyValidation,
getChecksParamValidation,
deleteChecksParamValidation,
deleteUserParamValidation
};