mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-01-20 08:39:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into feat/create-monitor-display-name-v2

Browse Source
This commit is contained in:
Peter Carl Pardo
2024-11-30 23:06:06 +08:00
parent 5678771bae fb13fb1d1c
commit 0adc8fd037
39 changed files with 345 additions and 744 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
Client/package-lock.json generated
View File

@@ -11,13 +11,13 @@
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@fontsource/roboto": "^5.0.13",
"@mui/icons-material": "6.1.8",
"@mui/lab": "6.0.0-beta.16",
"@mui/material": "6.1.8",
"@mui/icons-material": "6.1.9",
"@mui/lab": "6.0.0-beta.17",
"@mui/material": "6.1.9",
"@mui/x-charts": "^7.5.1",
"@mui/x-data-grid": "7.22.3",
"@mui/x-date-pickers": "7.22.3",
"@reduxjs/toolkit": "2.3.0",
"@mui/x-data-grid": "7.23.0",
"@mui/x-date-pickers": "7.23.0",
"@reduxjs/toolkit": "2.4.0",
"axios": "^1.7.4",
"chart.js": "^4.4.3",
"dayjs": "1.11.13",
@@ -1078,15 +1078,15 @@
"license": "MIT"
},
"node_modules/@mui/base": {
"version": "5.0.0-beta.62",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.62.tgz",
"integrity": "sha512-TzJLCNlrMkSU4bTCdTT+TVUiGx4sjZLhH673UV6YN+rNNP8wJpkWfRSvjDB5HcbH2T0lUamnz643ZnV+8IiMjw==",
"version": "5.0.0-beta.63",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.63.tgz",
"integrity": "sha512-W6aIqKP9X8VUX0KhSnYWo2+5C7MnKV1IhYVd517L/apvfkVq5KaTdlnxSBVwnaWt46whayVgQ/9KXwUVCXp6+w==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.26.0",
"@floating-ui/react-dom": "^2.1.1",
"@mui/types": "^7.2.19",
"@mui/utils": "^6.1.8",
"@mui/utils": "^6.1.9",
"@popperjs/core": "^2.11.8",
"clsx": "^2.1.1",
"prop-types": "^15.8.1"
@@ -1110,9 +1110,9 @@
}
},
"node_modules/@mui/core-downloads-tracker": {
"version": "6.1.8",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.8.tgz",
"integrity": "sha512-TGAvzwUg9hybDacwfIGFjI2bXYXrIqky+vMfaeay8rvT56/PNAlvIDUJ54kpT5KRc9AWAihOvtDI7/LJOThOmQ==",
"version": "6.1.9",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.9.tgz",
"integrity": "sha512-TWqj7b1w5cmSz4H/uf+y2AHxAH4ldPR7D2bz0XVyn60GCAo/zRbRPx7cF8gTs/i7CiYeHzV6dtat0VpMwOtolw==",
"license": "MIT",
"funding": {
"type": "opencollective",
@@ -1120,9 +1120,9 @@
}
},
"node_modules/@mui/icons-material": {
"version": "6.1.8",
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.8.tgz",
"integrity": "sha512-6frsXcf1TcJKWevWwRup6V4L8lzI33cbHcAjT83YLgKw0vYRZKY0kjMI9fhrJZdRWXgFFgKKvEv3GjoxbqFF7A==",
"version": "6.1.9",
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.9.tgz",
"integrity": "sha512-AzlhIT51rdjkZ/EcUV2dbhNkNSUHIqCnNoUxodpiTw8buyAUBd+qnxg5OBSuPpun/ZEdSSB8Q7Uyh6zqjiMsEQ==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.26.0"
@@ -1135,7 +1135,7 @@
"url": "https://opencollective.com/mui-org"
},
"peerDependencies": {
"@mui/material": "^6.1.8",
"@mui/material": "^6.1.9",
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
@@ -1146,16 +1146,16 @@
}
},
"node_modules/@mui/lab": {
"version": "6.0.0-beta.16",
"resolved": "https://registry.npmjs.org/@mui/lab/-/lab-6.0.0-beta.16.tgz",
"integrity": "sha512-YFeKREMMCiUhp4dGXd6Y/7N3BLepys9bM6xi4aF0WTZOvfl1ksDXPzuXPGiiiIuMgQFJeyN5iUnS1iPu3wH+kQ==",
"version": "6.0.0-beta.17",
"resolved": "https://registry.npmjs.org/@mui/lab/-/lab-6.0.0-beta.17.tgz",
"integrity": "sha512-Ls1pIuYi5D9wq9mUwncky6CWokd6CCqQDCxXbm0TP0e7ksU5DcCPUZXBmTWQgbkldLu14aUXbJHyts63L0rycQ==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.26.0",
"@mui/base": "5.0.0-beta.62",
"@mui/system": "^6.1.8",
"@mui/base": "5.0.0-beta.63",
"@mui/system": "^6.1.9",
"@mui/types": "^7.2.19",
"@mui/utils": "^6.1.8",
"@mui/utils": "^6.1.9",
"clsx": "^2.1.1",
"prop-types": "^15.8.1"
},
@@ -1169,8 +1169,8 @@
"peerDependencies": {
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/material": "^6.1.8",
"@mui/material-pigment-css": "^6.1.8",
"@mui/material": "^6.1.9",
"@mui/material-pigment-css": "^6.1.9",
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -1191,16 +1191,16 @@
}
},
"node_modules/@mui/material": {
"version": "6.1.8",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.8.tgz",
"integrity": "sha512-QZdQFnXct+7NXIzHgT3qt+sQiO7HYGZU2vymP9Xl9tUMXEOA/S1mZMMb7+WGZrk5TzNlU/kP/85K0da5V1jXoQ==",
"version": "6.1.9",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.9.tgz",
"integrity": "sha512-NwqIN0bdsgzSbZd5JFcC+2ez0XW/XNs8uiV2PDHrqQ4qf/FEasFJG1z6g8JbCN0YlTrHZekVb17X0Fv0qcYJfQ==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.26.0",
"@mui/core-downloads-tracker": "^6.1.8",
"@mui/system": "^6.1.8",
"@mui/core-downloads-tracker": "^6.1.9",
"@mui/system": "^6.1.9",
"@mui/types": "^7.2.19",
"@mui/utils": "^6.1.8",
"@mui/utils": "^6.1.9",
"@popperjs/core": "^2.11.8",
"@types/react-transition-group": "^4.4.11",
"clsx": "^2.1.1",
@@ -1219,7 +1219,7 @@
"peerDependencies": {
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/material-pigment-css": "^6.1.8",
"@mui/material-pigment-css": "^6.1.9",
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -1240,13 +1240,13 @@
}
},
"node_modules/@mui/private-theming": {
"version": "6.1.8",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.8.tgz",
"integrity": "sha512-TuKl7msynCNCVvhX3c0ef1sF0Qb3VHcPs8XOGB/8bdOGBr/ynmIG1yTMjZeiFQXk8yN9fzK/FDEKMFxILNn3wg==",
"version": "6.1.9",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.9.tgz",
"integrity": "sha512-7aum/O1RquBYhfwL/7egDyl9GqJgPM6hoJDFFBbhF6Sgv9yI9v4w3ArKUkuVvR0CtVj4NXRVMKEioh1bjUzvuA==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.26.0",
"@mui/utils": "^6.1.8",
"@mui/utils": "^6.1.9",
"prop-types": "^15.8.1"
},
"engines": {
@@ -1267,14 +1267,14 @@
}
},
"node_modules/@mui/styled-engine": {
"version": "6.1.8",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.8.tgz",
"integrity": "sha512-ZvEoT0U2nPLSLI+B4by4cVjaZnPT2f20f4JUPkyHdwLv65ZzuoHiTlwyhqX1Ch63p8bcJzKTHQVGisEoMK6PGA==",
"version": "6.1.9",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.9.tgz",
"integrity": "sha512-xynSLlJRxHLzSfQaiDjkaTx8LiFb9ByVa7aOdwFnTxGWFMY1F+mkXwAUY4jDDE+MAxkWxlzzQE0wOohnsxhdQg==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.26.0",
"@emotion/cache": "^11.13.1",
"@emotion/serialize": "^1.3.2",
"@emotion/cache": "^11.13.5",
"@emotion/serialize": "^1.3.3",
"@emotion/sheet": "^1.4.0",
"csstype": "^3.1.3",
"prop-types": "^15.8.1"
@@ -1301,16 +1301,16 @@
}
},
"node_modules/@mui/system": {
"version": "6.1.8",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.8.tgz",
"integrity": "sha512-i1kLfQoWxzFpXTBQIuPoA3xKnAnP3en4I2T8xIolovSolGQX5k8vGjw1JaydQS40td++cFsgCdEU458HDNTGUA==",
"version": "6.1.9",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.9.tgz",
"integrity": "sha512-8x+RucnNp21gfFYsklCaZf0COXbv3+v0lrVuXONxvPEkESi2rwLlOi8UPJfcz6LxZOAX3v3oQ7qw18vnpgueRg==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.26.0",
"@mui/private-theming": "^6.1.8",
"@mui/styled-engine": "^6.1.8",
"@mui/private-theming": "^6.1.9",
"@mui/styled-engine": "^6.1.9",
"@mui/types": "^7.2.19",
"@mui/utils": "^6.1.8",
"@mui/utils": "^6.1.9",
"clsx": "^2.1.1",
"csstype": "^3.1.3",
"prop-types": "^15.8.1"
@@ -1355,9 +1355,9 @@
}
},
"node_modules/@mui/utils": {
"version": "6.1.8",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.8.tgz",
"integrity": "sha512-O2DWb1kz8hiANVcR7Z4gOB3SvPPsSQGUmStpyBDzde6dJIfBzgV9PbEQOBZd3EBsd1pB+Uv1z5LAJAbymmawrA==",
"version": "6.1.9",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.9.tgz",
"integrity": "sha512-N7uzBp7p2or+xanXn3aH2OTINC6F/Ru/U8h6amhRZEev8bJhKN86rIDIoxZZ902tj+09LXtH83iLxFMjMHyqNA==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.26.0",
@@ -1385,15 +1385,15 @@
}
},
"node_modules/@mui/x-charts": {
"version": "7.22.3",
"resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-7.22.3.tgz",
"integrity": "sha512-w23+AwIK86bpNWkuHewyQwOKi1wYbLDzrvUEqvZ9KVYzZvnqpJmbTKideX1pLVgSNt0On8NDXytzCntV48Nobw==",
"version": "7.23.0",
"resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-7.23.0.tgz",
"integrity": "sha512-lXG+vRMFvisFaj93LlglZij7e5NEHptXQG0x9EshSI8uIm8HN9Xp77qIdE95xLyltImakuFCeJaEk9oaRMBTpA==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.25.7",
"@mui/utils": "^5.16.6 || ^6.0.0",
"@mui/x-charts-vendor": "7.20.0",
"@mui/x-internals": "7.21.0",
"@mui/x-internals": "7.23.0",
"@react-spring/rafz": "^9.7.5",
"@react-spring/web": "^9.7.5",
"clsx": "^2.1.1",
@@ -1407,8 +1407,8 @@
"@emotion/styled": "^11.8.1",
"@mui/material": "^5.15.14 || ^6.0.0",
"@mui/system": "^5.15.14 || ^6.0.0",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@emotion/react": {
@@ -1443,14 +1443,14 @@
}
},
"node_modules/@mui/x-data-grid": {
"version": "7.22.3",
"resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.22.3.tgz",
"integrity": "sha512-O6kBf6yt/GkOcWjHca5xWN10qBQ/MkITvJmBuIOtX+LH7YtOAriMgD2zkhNbXxHChi7QdEud3bNC3jw5RLRVCA==",
"version": "7.23.0",
"resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.23.0.tgz",
"integrity": "sha512-nypSz/7j0HPvW7tRPcZAlQADOiRAE4jTIcxwwJUPLtU17EPJOiw1iB29SRYtUThw4f3aXETPAeT4fzgagpuiKg==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.25.7",
"@mui/utils": "^5.16.6 || ^6.0.0",
"@mui/x-internals": "7.21.0",
"@mui/x-internals": "7.23.0",
"clsx": "^2.1.1",
"prop-types": "^15.8.1",
"reselect": "^5.1.1"
@@ -1467,8 +1467,8 @@
"@emotion/styled": "^11.8.1",
"@mui/material": "^5.15.14 || ^6.0.0",
"@mui/system": "^5.15.14 || ^6.0.0",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@emotion/react": {
@@ -1480,14 +1480,14 @@
}
},
"node_modules/@mui/x-date-pickers": {
"version": "7.22.3",
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.22.3.tgz",
"integrity": "sha512-shNp92IrST5BiVy2f4jbrmRaD32QhyUthjh1Oexvpcn0v6INyuWgxfodoTi5ZCnE5Ue5UVFSs4R9Xre0UbJ5DQ==",
"version": "7.23.0",
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.23.0.tgz",
"integrity": "sha512-Db9ElibVYHluXLVsRLfFwlYkL6/3NNE5AosSZiTx+Gw7uix/Z3pdjyHeA3ab65fU1tCk08XHY0PU6LQFifYB2g==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.25.7",
"@mui/utils": "^5.16.6 || ^6.0.0",
"@mui/x-internals": "7.21.0",
"@mui/x-internals": "7.23.0",
"@types/react-transition-group": "^4.4.11",
"clsx": "^2.1.1",
"prop-types": "^15.8.1",
@@ -1512,8 +1512,8 @@
"moment": "^2.29.4",
"moment-hijri": "^2.1.2 || ^3.0.0",
"moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@emotion/react": {
@@ -1546,9 +1546,9 @@
}
},
"node_modules/@mui/x-internals": {
"version": "7.21.0",
"resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.21.0.tgz",
"integrity": "sha512-94YNyZ0BhK5Z+Tkr90RKf47IVCW8R/1MvdUhh6MCQg6sZa74jsX+x+gEZ4kzuCqOsuyTyxikeQ8vVuCIQiP7UQ==",
"version": "7.23.0",
"resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.23.0.tgz",
"integrity": "sha512-bPclKpqUiJYIHqmTxSzMVZi6MH51cQsn5U+8jskaTlo3J4QiMeCYJn/gn7YbeR9GOZFp8hetyHjoQoVHKRXCig==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.25.7",
@@ -1562,7 +1562,7 @@
"url": "https://opencollective.com/mui-org"
},
"peerDependencies": {
"react": "^17.0.0 || ^18.0.0"
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/@nodelib/fs.scandir": {
@@ -1686,9 +1686,9 @@
}
},
"node_modules/@reduxjs/toolkit": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.3.0.tgz",
"integrity": "sha512-WC7Yd6cNGfHx8zf+iu+Q1UPTfEcXhQ+ATi7CV1hlrSAaQBdlPzg7Ww/wJHNQem7qG9rxmWoFCDCPubSvFObGzA==",
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.4.0.tgz",
"integrity": "sha512-wJZEuSKj14tvNfxiIiJws0tQN77/rDqucBq528ApebMIRHyWpCanJVQRxQ8WWZC19iCDKxDsGlbAir3F1layxA==",
"license": "MIT",
"dependencies": {
"immer": "^10.0.3",

12
Client/package.json
View File

@@ -14,13 +14,13 @@
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@fontsource/roboto": "^5.0.13",
"@mui/icons-material": "6.1.8",
"@mui/lab": "6.0.0-beta.16",
"@mui/material": "6.1.8",
"@mui/icons-material": "6.1.9",
"@mui/lab": "6.0.0-beta.17",
"@mui/material": "6.1.9",
"@mui/x-charts": "^7.5.1",
"@mui/x-data-grid": "7.22.3",
"@mui/x-date-pickers": "7.22.3",
"@reduxjs/toolkit": "2.3.0",
"@mui/x-data-grid": "7.23.0",
"@mui/x-date-pickers": "7.23.0",
"@reduxjs/toolkit": "2.4.0",
"axios": "^1.7.4",
"chart.js": "^4.4.3",
"dayjs": "1.11.13",

6
Client/src/App.jsx
View File

@@ -41,7 +41,6 @@ import { logger } from "./Utils/Logger"; // Import the logger
import { networkService } from "./main";
import { Infrastructure } from "./Pages/Infrastructure";
import InfrastructureDetails from "./Pages/Infrastructure/Details";
import Test from "./Pages/test";
function App() {
const AdminCheckedRegister = withAdminCheck(Register);
const MonitorsWithAdminProp = withAdminProp(Monitors);
@@ -90,11 +89,6 @@ function App() {
path="/"
element={<HomeLayout />}
>
<Route
path="/test"
element={<Test />}
/>
<Route
exact
path="/"

4
Client/src/Components/Charts/BarChart/index.jsx
View File

@@ -158,9 +158,7 @@ const BarChart = ({ checks = [] }) => {
width="100%"
height={`${animate ? check.responseTime : 0}%`}
backgroundColor={
check.status
? theme.palette.success.main
: theme.palette.error.contrastText
check.status ? theme.palette.success.main : theme.palette.error.main
}
sx={{
borderRadius: theme.spacing(1.5),

3
Client/src/Components/Check/Check.jsx
View File

@@ -24,10 +24,9 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) =>
const theme = useTheme();
const colors = {
success: theme.palette.success.main,
error: theme.palette.error.contrastText,
error: theme.palette.error.main,
info: theme.palette.info.border,
};
return (
<Stack
direction="row"

50
Client/src/Components/Inputs/Field/index.css
View File

@@ -1,50 +0,0 @@
.field {
min-width: var(--env-var-width-3);
}
.field-infrastructure-alert{
max-width: var(--env-var-width-4);
}
.field-infrastructure-alert .MuiInputBase-root:has(input) {
/* height: var(--env-var-height-2); */
min-width: unset;
}
.field h3.MuiTypography-root,
.field h5.MuiTypography-root,
.field input,
.field textarea,
.field .input-error {
font-size: var(--env-var-font-size-medium);
}
.field h5.MuiTypography-root {
position: relative;
opacity: 0.8;
padding-right: var(--env-var-spacing-1-minus);
}
.field .MuiInputBase-root:has(input) {
/* height: var(--env-var-height-2); */
}
.field .MuiInputBase-root:has(.MuiInputAdornment-root) {
padding-right: var(--env-var-spacing-1-minus);
}
.field input {
height: 100%;
padding: 0 var(--env-var-spacing-1-minus);
}
.field .MuiInputBase-root:has(textarea) {
padding: var(--env-var-spacing-1-minus);
}
.register-page .field .MuiOutlinedInput-root fieldset,
.register-page .field input,
.login-page .field .MuiOutlinedInput-root fieldset,
.login-page .field input,
.forgot-password-page .field .MuiOutlinedInput-root fieldset,
.forgot-password-page .field input,
.set-new-password-page .field .MuiOutlinedInput-root fieldset,
.set-new-password-page .field input {
border-radius: var(--env-var-radius-2);
}

241
Client/src/Components/Inputs/Field/index.jsx
View File

@@ -1,241 +0,0 @@
import PropTypes from "prop-types";
import { forwardRef, useState } from "react";
import { useTheme } from "@emotion/react";
import { IconButton, InputAdornment, Stack, TextField, Typography } from "@mui/material";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
import Visibility from "@mui/icons-material/Visibility";
import "./index.css";
/**
* Field component for rendering various types of input fields with customizable properties
*
* @param {Object} props
* @param {string} [props.type='text'] - Type of input field (text, password, url, email, description, number).
* @param {string} props.id - Unique identifier for the input field.
* @param {string} props.name - Name attribute for the input field.
* @param {string} [props.label] - Label text displayed above the input field.
* @param {boolean} [props.https=true] - For URL type, determines whether to show https:// or http://.
* @param {boolean} [props.isRequired=false] - Displays a red asterisk if the field is required.
* @param {boolean} [props.isOptional=false] - Displays an optional label next to the field.
* @param {string} [props.optionalLabel='(optional)'] - Custom text for optional label.
* @param {string} [props.autoComplete] - Autocomplete attribute for the input.
* @param {string} [props.placeholder] - Placeholder text for the input field.
* @param {string} props.value - Current value of the input field.
* @param {function} props.onChange - Callback function triggered on input value change.
* @param {function} [props.onBlur] - Callback function triggered when input loses focus.
* @param {function} [props.onInput] - Callback function triggered on input event.
* @param {string} [props.error] - Error message to display below the input field.
* @param {boolean} [props.disabled=false] - Disables the input field if true.
* @param {boolean} [props.hidden=false] - Hides the entire input field if true.
* @param {string} [props.className] - Additional CSS class names for the input container.
* @param {boolean} [props.hideErrorText=false] - Hides the error message if true.
* @param {React.Ref} [ref] - Ref forwarded to the underlying TextField component.
*
* @returns {React.ReactElement} Rendered input field component
*/
const Field = forwardRef(
(
{
type = "text",
id,
name,
label,
https,
isRequired,
isOptional,
optionalLabel,
autoComplete,
placeholder,
value,
onChange,
onBlur,
onInput,
error,
disabled,
hidden,
className,
hideErrorText = false,
},
ref
) => {
const theme = useTheme();
const [isVisible, setVisible] = useState(false);
return (
<Stack
gap={theme.spacing(2)}
className={`field field-${type} ${className}`}
sx={{
"& fieldset": {
borderColor: theme.palette.border.dark,
borderRadius: theme.shape.borderRadius,
},
"&:not(:has(.Mui-disabled)):not(:has(.input-error)) .MuiOutlinedInput-root:hover:not(:has(input:focus)):not(:has(textarea:focus)) fieldset":
{
borderColor: theme.palette.border.dark,
},
"&:has(.input-error) .MuiOutlinedInput-root fieldset": {
borderColor: theme.palette.error.main,
},
display: hidden ? "none" : "",
}}
>
{label && (
<Typography
component="h3"
color={theme.palette.text.secondary}
fontWeight={500}
>
{label}
{isRequired ? (
<Typography
component="span"
ml={theme.spacing(1)}
color={theme.palette.error.main}
>
*
</Typography>
) : (
""
)}
{isOptional ? (
<Typography
component="span"
fontSize="inherit"
fontWeight={400}
ml={theme.spacing(2)}
sx={{ opacity: 0.6 }}
>
{optionalLabel || "(optional)"}
</Typography>
) : (
""
)}
</Typography>
)}
<TextField
type={type === "password" ? (isVisible ? "text" : type) : type}
name={name}
id={id}
autoComplete={autoComplete}
placeholder={placeholder}
multiline={type === "description"}
rows={type === "description" ? 4 : 1}
value={value}
onInput={onInput}
onChange={onChange}
onBlur={onBlur}
disabled={disabled}
inputRef={ref}
inputProps={{
sx: {
color: theme.palette.text.secondary,
"&:-webkit-autofill": {
WebkitBoxShadow: `0 0 0 100px ${theme.palette.other.autofill} inset`,
WebkitTextFillColor: theme.palette.text.secondary,
borderRadius: "0 5px 5px 0",
},
},
}}
sx={
type === "url"
? {
"& .MuiInputBase-root": { padding: 0 },
"& .MuiStack-root": {
borderTopLeftRadius: theme.shape.borderRadius,
borderBottomLeftRadius: theme.shape.borderRadius,
},
}
: {}
}
InputProps={{
startAdornment: type === "url" && (
<Stack
direction="row"
alignItems="center"
height="100%"
sx={{
borderRight: `solid 1px ${theme.palette.border.dark}`,
backgroundColor: theme.palette.background.accent,
pl: theme.spacing(6),
}}
>
<Typography
component="h5"
color={theme.palette.text.secondary}
sx={{ lineHeight: 1 }}
>
{https ? "https" : "http"}://
</Typography>
</Stack>
),
endAdornment: type === "password" && (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={() => setVisible((show) => !show)}
sx={{
color: theme.palette.border.dark,
padding: theme.spacing(1),
"&:focus-visible": {
outline: `2px solid ${theme.palette.primary.main}`,
outlineOffset: `2px`,
},
"& .MuiTouchRipple-root": {
pointerEvents: "none",
display: "none",
},
}}
>
{!isVisible ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
),
}}
/>
{error && (
<Typography
component="span"
className="input-error"
hidden={hideErrorText}
color={theme.palette.error.main}
mt={theme.spacing(2)}
sx={{
opacity: 0.8,
}}
>
{error}
</Typography>
)}
</Stack>
);
}
);
Field.displayName = "Field";
Field.propTypes = {
type: PropTypes.oneOf(["text", "password", "url", "email", "description", "number"]),
id: PropTypes.string.isRequired,
name: PropTypes.string,
label: PropTypes.string,
https: PropTypes.bool,
isRequired: PropTypes.bool,
isOptional: PropTypes.bool,
optionalLabel: PropTypes.string,
autoComplete: PropTypes.string,
placeholder: PropTypes.string,
value: PropTypes.string.isRequired,
onChange: PropTypes.func,
onBlur: PropTypes.func,
onInput: PropTypes.func,
error: PropTypes.string,
disabled: PropTypes.bool,
hidden: PropTypes.bool,
className: PropTypes.string,
hideErrorText: PropTypes.bool,
};
export default Field;

9
Client/src/Components/Inputs/TextInput/Adornments/index.jsx
View File

@@ -29,6 +29,10 @@ export const HttpAdornment = ({ https }) => {
);
};
HttpAdornment.propTypes = {
https: PropTypes.bool.isRequired,
};
export const PasswordEndAdornment = ({ fieldType, setFieldType }) => {
const theme = useTheme();
return (
@@ -55,6 +59,7 @@ export const PasswordEndAdornment = ({ fieldType, setFieldType }) => {
);
};
HttpAdornment.propTypes = {
https: PropTypes.bool.isRequired,
PasswordEndAdornment.propTypes = {
fieldType: PropTypes.string,
setFieldType: PropTypes.func,
};

38
Client/src/Components/Inputs/TextInput/index.jsx
View File

@@ -6,6 +6,11 @@ import PropTypes from "prop-types";
const getSx = (theme, type, maxWidth) => {
const sx = {
maxWidth: maxWidth,
"& .MuiFormHelperText-root": {
position: "absolute",
bottom: `-${theme.spacing(24)}`,
minHeight: theme.spacing(24),
},
};
if (type === "url") {
@@ -56,6 +61,8 @@ Optional.propTypes = {
const TextInput = forwardRef(
(
{
id,
name,
type,
value,
placeholder,
@@ -63,19 +70,34 @@ const TextInput = forwardRef(
isOptional,
optionalLabel,
onChange,
onBlur,
error = false,
helperText = null,
startAdornment = null,
endAdornment = null,
label = null,
maxWidth = "100%",
flex,
marginTop,
marginRight,
marginBottom,
marginLeft,
disabled = false,
hidden = false,
},
ref
) => {
const [fieldType, setFieldType] = useState(type);
const theme = useTheme();
return (
<Stack>
<Stack
flex={flex}
display={hidden ? "none" : ""}
marginTop={marginTop}
marginRight={marginRight}
marginBottom={marginBottom}
marginLeft={marginLeft}
>
<Typography
component="h3"
fontSize={"var(--env-var-font-size-medium)"}
@@ -87,10 +109,13 @@ const TextInput = forwardRef(
{isOptional && <Optional optionalLabel={optionalLabel} />}
</Typography>
<TextField
id={id}
name={name}
type={fieldType}
value={value}
placeholder={placeholder}
onChange={onChange}
onBlur={onBlur}
error={error}
helperText={helperText}
inputRef={ref}
@@ -103,6 +128,7 @@ const TextInput = forwardRef(
: null,
},
}}
disabled={disabled}
/>
</Stack>
);
@@ -113,18 +139,28 @@ TextInput.displayName = "TextInput";
TextInput.propTypes = {
type: PropTypes.string,
id: PropTypes.string.isRequired,
name: PropTypes.string,
value: PropTypes.string,
placeholder: PropTypes.string,
isRequired: PropTypes.bool,
isOptional: PropTypes.bool,
optionalLabel: PropTypes.string,
onChange: PropTypes.func,
onBlur: PropTypes.func,
error: PropTypes.bool,
helperText: PropTypes.string,
startAdornment: PropTypes.node,
endAdornment: PropTypes.node,
label: PropTypes.string,
maxWidth: PropTypes.string,
flex: PropTypes.number,
marginTop: PropTypes.string,
marginRight: PropTypes.string,
marginBottom: PropTypes.string,
marginLeft: PropTypes.string,
disabled: PropTypes.bool,
hidden: PropTypes.bool,
};
export default TextInput;

4
Client/src/Components/Label/index.jsx
View File

@@ -127,11 +127,11 @@ const StatusLabel = ({ status, text, customStyles }) => {
const colors = {
up: {
dotColor: theme.palette.success.main,
bgColor: theme.palette.success./* dark */ contrastText,
bgColor: theme.palette.success.contrastText /* dark */,
borderColor: theme.palette.success.main /* light */,
},
down: {
dotColor: theme.palette.error.contrastText,
dotColor: theme.palette.error.main,
bgColor: theme.palette.error.dark,
borderColor: theme.palette.error.light,
},

12
Client/src/Components/Sidebar/index.jsx
View File

@@ -47,15 +47,9 @@ import Folder from "../../assets/icons/folder.svg?react";
import "./index.css";
const menu = [
{
name: "Dashboard",
icon: <Dashboard />,
nested: [
{ name: "Monitors", path: "monitors", icon: <Monitors /> },
{ name: "Pagespeed", path: "pagespeed", icon: <PageSpeed /> },
{ name: "Infrastructure", path: "infrastructure", icon: <Integrations /> },
],
},
{ name: "Monitors", path: "monitors", icon: <Monitors /> },
{ name: "Pagespeed", path: "pagespeed", icon: <PageSpeed /> },
{ name: "Infrastructure", path: "infrastructure", icon: <Integrations /> },
{ name: "Incidents", path: "incidents", icon: <Incidents /> },
// { name: "Status pages", path: "status", icon: <StatusPages /> },
{ name: "Maintenance", path: "maintenance", icon: <Maintenance /> },

26
Client/src/Components/TabPanels/Account/PasswordPanel.jsx
View File

@@ -3,7 +3,8 @@ import { useState } from "react";
import { useTheme } from "@emotion/react";
import { Box, Stack, Typography } from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton";
import Field from "../../Inputs/Field";
import { PasswordEndAdornment } from "../../Inputs/TextInput/Adornments";
import TextInput from "../../Inputs/TextInput";
import { credentials } from "../../../Validation/validation";
import Alert from "../../Alert";
import { update } from "../../../Features/Auth/authSlice";
@@ -113,7 +114,7 @@ const PasswordPanel = () => {
maxWidth={"80ch"}
marginInline={"auto"}
>
<Field
<TextInput
type="text"
id="hidden-username"
name="username"
@@ -135,14 +136,17 @@ const PasswordPanel = () => {
>
Current password
</Typography>
<Field
<TextInput
type="password"
id="edit-current-password"
placeholder="Enter your current password"
autoComplete="current-password"
value={localData.password}
onChange={handleChange}
error={errors[idToName["edit-current-password"]]}
error={errors[idToName["edit-current-password"]] ? true : false}
helperText={errors[idToName["edit-current-password"]]}
endAdornment={<PasswordEndAdornment />}
flex={1}
/>
</Stack>
<Stack
@@ -158,14 +162,17 @@ const PasswordPanel = () => {
New password
</Typography>
<Field
<TextInput
type="password"
id="edit-new-password"
placeholder="Enter your new password"
autoComplete="new-password"
value={localData.newPassword}
onChange={handleChange}
error={errors[idToName["edit-new-password"]]}
error={errors[idToName["edit-new-password"]] ? true : false}
helperText={errors[idToName["edit-new-password"]]}
endAdornment={<PasswordEndAdornment />}
flex={1}
/>
</Stack>
<Stack
@@ -181,14 +188,17 @@ const PasswordPanel = () => {
Confirm new password
</Typography>
<Field
<TextInput
type="password"
id="edit-confirm-password"
placeholder="Reenter your new password"
autoComplete="new-password"
value={localData.confirm}
onChange={handleChange}
error={errors[idToName["edit-confirm-password"]]}
error={errors[idToName["edit-confirm-password"]] ? true : false}
helperText={errors[idToName["edit-confirm-password"]]}
endAdornment={<PasswordEndAdornment />}
flex={1}
/>
</Stack>
{Object.keys(errors).length > 0 && (

18
Client/src/Components/TabPanels/Account/ProfilePanel.jsx
View File

@@ -3,7 +3,7 @@ import { useRef, useState } from "react";
import TabPanel from "@mui/lab/TabPanel";
import { Box, Button, Divider, Stack, Typography } from "@mui/material";
import Avatar from "../../Avatar";
import Field from "../../Inputs/Field";
import TextInput from "../../Inputs/TextInput";
import ImageField from "../../Inputs/Image";
import { credentials, imageValidation } from "../../../Validation/validation";
import { useDispatch, useSelector } from "react-redux";
@@ -229,26 +229,30 @@ const ProfilePanel = () => {
<Box flex={0.9}>
<Typography component="h1">First name</Typography>
</Box>
<Field
<TextInput
id="edit-first-name"
value={localData.firstName}
placeholder="Enter your first name"
autoComplete="given-name"
onChange={handleChange}
error={errors[idToName["edit-first-name"]]}
error={errors[idToName["edit-first-name"]] ? true : false}
helperText={errors[idToName["edit-first-name"]]}
flex={1}
/>
</Stack>
<Stack direction="row">
<Box flex={0.9}>
<Typography component="h1">Last name</Typography>
</Box>
<Field
<TextInput
id="edit-last-name"
placeholder="Enter your last name"
autoComplete="family-name"
value={localData.lastName}
onChange={handleChange}
error={errors[idToName["edit-last-name"]]}
error={errors[idToName["edit-last-name"]] ? true : false}
helperText={errors[idToName["edit-last-name"]]}
flex={1}
/>
</Stack>
<Stack direction="row">
@@ -261,14 +265,14 @@ const ProfilePanel = () => {
This is your current email address — it cannot be changed.
</Typography>
</Stack>
<Field
<TextInput
id="edit-email"
value={user.email}
placeholder="Enter your email"
autoComplete="email"
onChange={() => logger.warn("disabled")}
// error={errors[idToName["edit-email"]]}
disabled={true}
flex={1}
/>
</Stack>
<Stack direction="row">

8
Client/src/Components/TabPanels/Account/TeamPanel.jsx
View File

@@ -2,7 +2,7 @@ import { useTheme } from "@emotion/react";
import TabPanel from "@mui/lab/TabPanel";
import { Button, ButtonGroup, Stack, Typography } from "@mui/material";
import { useEffect, useState } from "react";
import Field from "../../Inputs/Field";
import TextInput from "../../Inputs/TextInput";
import { credentials } from "../../../Validation/validation";
import { networkService } from "../../../main";
import { createToast } from "../../../Utils/toastUtils";
@@ -338,13 +338,15 @@ const TeamPanel = () => {
onClose={closeInviteModal}
theme={theme}
>
<Field
<TextInput
marginBottom={theme.spacing(12)}
type="email"
id="input-team-member"
placeholder="Email"
value={toInvite.email}
onChange={handleChange}
error={errors.email}
error={errors.email ? true : false}
helperText={errors.email}
/>
<Select
id="team-member-role"

53
Client/src/Pages/AdvancedSettings/index.jsx
View File

@@ -1,6 +1,6 @@
import { useTheme } from "@emotion/react";
import { Box, Stack, Typography } from "@mui/material";
import Field from "../../Components/Inputs/Field";
import TextInput from "../../Components/Inputs/TextInput";
import Link from "../../Components/Link";
import "./index.css";
import { useDispatch, useSelector } from "react-redux";
@@ -160,13 +160,14 @@ const AdvancedSettings = ({ isAdmin }) => {
</Typography>
</Box>
<Stack gap={theme.spacing(20)}>
<Field
<TextInput
id="apiBaseUrl"
label="API URL Host"
value={localSettings.apiBaseUrl}
onChange={handleChange}
onBlur={handleBlur}
error={errors.apiBaseUrl}
error={errors.apiBaseUrl ? true : false}
helperText={errors.apiBaseUrl}
/>
<Select
id="logLevel"
@@ -189,7 +190,7 @@ const AdvancedSettings = ({ isAdmin }) => {
</Typography>
</Box>
<Stack gap={theme.spacing(20)}>
<Field
<TextInput
type="text"
id="systemEmailHost"
label="System email host"
@@ -197,9 +198,10 @@ const AdvancedSettings = ({ isAdmin }) => {
value={localSettings.systemEmailHost}
onChange={handleChange}
onBlur={handleBlur}
error={errors.systemEmailHost}
error={errors.systemEmailHost ? true : false}
helperText={errors.systemEmailHost}
/>
<Field
<TextInput
type="number"
id="systemEmailPort"
label="System email port"
@@ -207,18 +209,21 @@ const AdvancedSettings = ({ isAdmin }) => {
value={localSettings.systemEmailPort?.toString()}
onChange={handleChange}
onBlur={handleBlur}
error={errors.systemEmailPort}
error={errors.systemEmailPort ? true : false}
helperText={errors.systemEmailPort}
/>
<Field
<TextInput
type="email"
id="systemEmailAddress"
label="System email address"
name="systemEmailAddress"
value={localSettings.systemEmailAddress}
onChange={handleChange}
error={errors.systemEmailAddress}
onBlur={handleBlur}
error={errors.systemEmailAddress ? true : false}
helperText={errors.systemEmailAddress}
/>
<Field
<TextInput
type="text"
id="systemEmailPassword"
label="System email password"
@@ -226,7 +231,8 @@ const AdvancedSettings = ({ isAdmin }) => {
value={localSettings.systemEmailPassword}
onChange={handleChange}
onBlur={handleBlur}
error={errors.systemEmailPassword}
error={errors.systemEmailPassword ? true : false}
helperText={errors.systemEmailPassword}
/>
</Stack>
</ConfigBox>
@@ -242,7 +248,7 @@ const AdvancedSettings = ({ isAdmin }) => {
direction="row"
gap={theme.spacing(10)}
>
<Field
<TextInput
type="number"
id="jwtTTLNum"
label="JWT time to live"
@@ -250,7 +256,8 @@ const AdvancedSettings = ({ isAdmin }) => {
value={localSettings.jwtTTLNum.toString()}
onChange={handleChange}
onBlur={handleBlur}
error={errors.jwtTTLNum}
error={errors.jwtTTLNum ? true : false}
helperText={errors.jwtTTLNum}
/>
<Select
id="jwtTTLUnits"
@@ -265,7 +272,7 @@ const AdvancedSettings = ({ isAdmin }) => {
error={errors.jwtTTLUnits}
/>
</Stack>
<Field
<TextInput
type="text"
id="dbType"
label="Database type"
@@ -273,9 +280,10 @@ const AdvancedSettings = ({ isAdmin }) => {
value={localSettings.dbType}
onChange={handleChange}
onBlur={handleBlur}
error={errors.dbType}
error={errors.dbType ? true : false}
helperText={errors.dbType}
/>
<Field
<TextInput
type="text"
id="redisHost"
label="Redis host"
@@ -283,9 +291,10 @@ const AdvancedSettings = ({ isAdmin }) => {
value={localSettings.redisHost}
onChange={handleChange}
onBlur={handleBlur}
error={errors.redisHost}
error={errors.redisHost ? true : false}
helperText={errors.redisHost}
/>
<Field
<TextInput
type="number"
id="redisPort"
label="Redis port"
@@ -293,9 +302,10 @@ const AdvancedSettings = ({ isAdmin }) => {
value={localSettings.redisPort?.toString()}
onChange={handleChange}
onBlur={handleBlur}
error={errors.redisPort}
error={errors.redisPort ? true : false}
helperText={errors.redisPort}
/>
<Field
<TextInput
type="text"
id="pagespeedApiKey"
label="PageSpeed API key"
@@ -303,7 +313,8 @@ const AdvancedSettings = ({ isAdmin }) => {
value={localSettings.pagespeedApiKey}
onChange={handleChange}
onBlur={handleBlur}
error={errors.pagespeedApiKey}
error={errors.pagespeedApiKey ? true : false}
helperText={errors.pagespeedApiKey}
/>
</Stack>
</ConfigBox>

7
Client/src/Pages/Auth/ForgotPassword.jsx
View File

@@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
import { credentials } from "../../Validation/validation";
import { useNavigate } from "react-router-dom";
import { IconBox } from "./styled";
import Field from "../../Components/Inputs/Field";
import TextInput from "../../Components/Inputs/TextInput";
import Logo from "../../assets/icons/bwu-icon.svg?react";
import Key from "../../assets/icons/key.svg?react";
import Background from "../../assets/Images/background-grid.svg?react";
@@ -160,7 +160,7 @@ const ForgotPassword = () => {
spellCheck={false}
onSubmit={handleSubmit}
>
<Field
<TextInput
type="email"
id="forgot-password-email-input"
label="Email"
@@ -168,7 +168,8 @@ const ForgotPassword = () => {
placeholder="Enter your email"
value={form.email}
onChange={handleChange}
error={errors.email}
error={errors.email ? true : false}
helperText={errors.email}
/>
<LoadingButton
variant="contained"

14
Client/src/Pages/Auth/Login.jsx
View File

@@ -7,7 +7,8 @@ import { login } from "../../Features/Auth/authSlice";
import { useDispatch, useSelector } from "react-redux";
import { createToast } from "../../Utils/toastUtils";
import { networkService } from "../../main";
import Field from "../../Components/Inputs/Field";
import TextInput from "../../Components/Inputs/TextInput";
import { PasswordEndAdornment } from "../../Components/Inputs/TextInput/Adornments";
import Background from "../../assets/Images/background-grid.svg?react";
import Logo from "../../assets/icons/bwu-icon.svg?react";
import Mail from "../../assets/icons/mail.svg?react";
@@ -150,7 +151,7 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
display="grid"
gap={{ xs: theme.spacing(12), sm: theme.spacing(16) }}
>
<Field
<TextInput
type="email"
id="login-email-input"
label="Email"
@@ -160,7 +161,8 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
value={form.email}
onInput={(e) => (e.target.value = e.target.value.toLowerCase())}
onChange={onChange}
error={errors.email}
error={errors.email ? true : false}
helperText={errors.email}
ref={inputRef}
/>
<Stack
@@ -268,7 +270,7 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
gap: { xs: theme.spacing(12), sm: theme.spacing(16) },
}}
>
<Field
<TextInput
type="password"
id="login-password-input"
label="Password"
@@ -277,8 +279,10 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
autoComplete="current-password"
value={form.password}
onChange={onChange}
error={errors.password}
error={errors.password ? true : false}
helperText={errors.password}
ref={inputRef}
endAdornment={<PasswordEndAdornment />}
/>
<Stack
direction="row"

13
Client/src/Pages/Auth/Register/StepOne/index.jsx
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
import { Box, Button, Stack, Typography } from "@mui/material";
import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
import Field from "../../../../Components/Inputs/Field";
import TextInput from "../../../../Components/Inputs/TextInput";
StepOne.propTypes = {
form: PropTypes.object,
@@ -60,7 +60,7 @@ function StepOne({ form, errors, onSubmit, onChange, onBack }) {
display="grid"
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
>
<Field
<TextInput
id="register-firstname-input"
label="Name"
isRequired={true}
@@ -68,10 +68,11 @@ function StepOne({ form, errors, onSubmit, onChange, onBack }) {
autoComplete="given-name"
value={form.firstName}
onChange={onChange}
error={errors.firstName}
error={errors.firstName ? true : false}
helperText={errors.firstName}
ref={inputRef}
/>
<Field
<TextInput
id="register-lastname-input"
label="Surname"
isRequired={true}
@@ -79,7 +80,9 @@ function StepOne({ form, errors, onSubmit, onChange, onBack }) {
autoComplete="family-name"
value={form.lastName}
onChange={onChange}
error={errors.lastName}
error={errors.lastName ? true : false}
helperText={errors.lastName}
ref={inputRef}
/>
</Box>
<Stack

11
Client/src/Pages/Auth/Register/StepThree/index.jsx
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
import { Box, Button, Stack, Typography } from "@mui/material";
import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
import Field from "../../../../Components/Inputs/Field";
import TextInput from "../../../../Components/Inputs/TextInput";
import Check from "../../../../Components/Check/Check";
import { useValidatePassword } from "../../hooks/useValidatePassword";
@@ -31,6 +31,7 @@ function StepThree({ onSubmit, onBack }) {
}, []);
const { handleChange, feedbacks, form, errors } = useValidatePassword();
console.log(errors);
return (
<>
<Stack
@@ -59,7 +60,7 @@ function StepThree({ onSubmit, onBack }) {
display="grid"
gap={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
>
<Field
<TextInput
type="password"
id="register-password-input"
name="password"
@@ -69,10 +70,10 @@ function StepThree({ onSubmit, onBack }) {
autoComplete="current-password"
value={form.password}
onChange={handleChange}
error={errors.password && errors.password[0]}
error={errors.password && errors.password[0] ? true : false}
ref={inputRef}
/>
<Field
<TextInput
type="password"
id="register-confirm-input"
name="confirm"
@@ -82,7 +83,7 @@ function StepThree({ onSubmit, onBack }) {
autoComplete="current-password"
value={form.confirm}
onChange={handleChange}
error={errors.confirm && errors.confirm[0]}
error={errors.confirm && errors.confirm[0] ? true : false}
/>
</Box>
<Stack

7
Client/src/Pages/Auth/Register/StepTwo/index.jsx
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
import { useTheme } from "@emotion/react";
import { Box, Button, Stack, Typography } from "@mui/material";
import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
import Field from "../../../../Components/Inputs/Field";
import TextInput from "../../../../Components/Inputs/TextInput";
StepTwo.propTypes = {
form: PropTypes.object,
@@ -55,7 +55,7 @@ function StepTwo({ form, errors, onSubmit, onChange, onBack }) {
display="grid"
gap={{ xs: theme.spacing(12), sm: theme.spacing(16) }}
>
<Field
<TextInput
type="email"
id="register-email-input"
label="Email"
@@ -65,7 +65,8 @@ function StepTwo({ form, errors, onSubmit, onChange, onBack }) {
value={form.email}
onInput={(e) => (e.target.value = e.target.value.toLowerCase())}
onChange={onChange}
error={errors.email}
error={errors.email ? true : false}
helperText={errors.email}
ref={inputRef}
/>
<Stack

16
Client/src/Pages/Auth/SetNewPassword.jsx
View File

@@ -9,7 +9,9 @@ import { setNewPassword } from "../../Features/Auth/authSlice";
import { createToast } from "../../Utils/toastUtils";
import { credentials } from "../../Validation/validation";
import Check from "../../Components/Check/Check";
import Field from "../../Components/Inputs/Field";
import TextInput from "../../Components/Inputs/TextInput";
import { PasswordEndAdornment } from "../../Components/Inputs/TextInput/Adornments";
import { IconBox } from "./styled";
import LockIcon from "../../assets/icons/lock.svg?react";
import Logo from "../../assets/icons/bwu-icon.svg?react";
@@ -147,7 +149,7 @@ const SetNewPassword = () => {
spellCheck={false}
onSubmit={handleSubmit}
>
<Field
<TextInput
id={passwordId}
type="password"
name="password"
@@ -156,7 +158,9 @@ const SetNewPassword = () => {
placeholder="••••••••"
value={form.password}
onChange={handleChange}
error={errors.password}
error={errors.password ? true : false}
helperText={errors.password}
endAdornment={<PasswordEndAdornment />}
/>
</Box>
<Box
@@ -165,7 +169,7 @@ const SetNewPassword = () => {
spellCheck={false}
onSubmit={handleSubmit}
>
<Field
<TextInput
id={confirmPasswordId}
type="password"
name="confirm"
@@ -174,7 +178,9 @@ const SetNewPassword = () => {
placeholder="••••••••"
value={form.confirm}
onChange={handleChange}
error={errors.confirm}
error={errors.confirm ? true : false}
helperText={errors.confirm}
endAdornment={<PasswordEndAdornment />}
/>
</Box>
<Stack

12
Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx
View File

@@ -1,5 +1,5 @@
import { Box, Stack, Typography } from "@mui/material";
import Field from "../../../../Components/Inputs/Field";
import TextInput from "../../../../Components/Inputs/TextInput";
import Checkbox from "../../../../Components/Inputs/Checkbox";
import { useTheme } from "@emotion/react";
import PropTypes from "prop-types";
@@ -57,17 +57,17 @@ export const CustomThreshold = ({
justifyContent: "flex-end",
}}
>
<Field
<TextInput
maxWidth="var(--env-var-width-4)"
type="number"
className="field-infrastructure-alert"
id={fieldId}
value={infrastructureMonitor[fieldId]}
onBlur={onFieldBlur}
onChange={onFieldChange}
error={errors[fieldId]}
error={errors[fieldId] ? true : false}
disabled={!infrastructureMonitor[checkboxId]}
hideErrorText={true}
></Field>
/>
<Typography
component="p"
m={theme.spacing(3)}

25
Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
View File

@@ -12,9 +12,8 @@ import { useNavigate } from "react-router-dom";
import { useTheme } from "@emotion/react";
import { createToast } from "../../../Utils/toastUtils";
import Link from "../../../Components/Link";
import { ConfigBox } from "../../Monitors/styled";
import Field from "../../../Components/Inputs/Field";
import TextInput from "../../../Components/Inputs/TextInput";
import Select from "../../../Components/Inputs/Select";
import Checkbox from "../../../Components/Inputs/Checkbox";
import Breadcrumbs from "../../../Components/Breadcrumbs";
@@ -106,7 +105,6 @@ const CreateInfrastructureMonitor = () => {
event.preventDefault();
const { value, id } = event.target;
let name = appendedId ?? idMap[id] ?? id;
if (name.includes("notification-")) {
name = name.replace("notification-", "");
let hasNotif = infrastructureMonitor.notifications.some(
@@ -263,7 +261,7 @@ const CreateInfrastructureMonitor = () => {
</Stack>
</Box>
<Stack gap={theme.spacing(15)}>
<Field
<TextInput
type="text"
id="url"
label="Server URL"
@@ -271,9 +269,10 @@ const CreateInfrastructureMonitor = () => {
value={infrastructureMonitor.url}
onBlur={handleBlur}
onChange={handleChange}
error={errors["url"]}
error={errors["url"] ? true : false}
helperText={errors["url"]}
/>
<Field
<TextInput
type="text"
id="name"
label="Friendly name"
@@ -283,14 +282,15 @@ const CreateInfrastructureMonitor = () => {
onChange={handleChange}
error={errors["name"]}
/>
<Field
<TextInput
type="text"
id="secret"
label="Authorization secret"
value={infrastructureMonitor.secret}
onBlur={handleBlur}
onChange={handleChange}
error={errors["secret"]}
error={errors["secret"] ? true : false}
helperText={errors["secret"]}
/>
</Stack>
</ConfigBox>
@@ -378,15 +378,6 @@ const CreateInfrastructureMonitor = () => {
onBlur={(e) => handleBlur(e, "interval")}
items={frequencies}
/>
{/* <Field
type={"number"}
id="monitor-retries"
label="Maximum retries before the service is marked as down"
value={infrastructureMonitor.url}
onChange={handleChange}
onBlur={handleBlur}
error={errors["url"]}
/> */}
</Stack>
</ConfigBox>
<Stack

43
Client/src/Pages/Infrastructure/Details/index.jsx
View File

@@ -312,7 +312,7 @@ const InfrastructureDetails = () => {
};
const buildTemps = (checks) => {
let numCores = 0;
let numCores = 1;
if (checks === null) return { temps: [], tempKeys: [] };
for (const check of checks) {
@@ -321,19 +321,16 @@ const InfrastructureDetails = () => {
break;
}
}
if (numCores === 0) return { temps: [], tempKeys: [] };
const temps = checks.map((check) => {
if (check.cpu.temperature.length > numCores) {
numCores = check.cpu.temperature.length;
}
// If there's no data, set the temperature to 0
if (check.cpu.temperature.length === 0) {
if (
check?.cpu?.temperature?.length === 0 ||
check?.cpu?.temperature === undefined ||
check?.cpu?.temperature === null
) {
check.cpu.temperature = Array(numCores).fill(0);
}
return check.cpu.temperature.reduce(
const res = check?.cpu?.temperature?.reduce(
(acc, cur, idx) => {
acc[`core${idx + 1}`] = cur;
return acc;
@@ -342,9 +339,16 @@ const InfrastructureDetails = () => {
createdAt: check.createdAt,
}
);
return res;
});
// Slice to remove `createdAt` key
return { tempKeys: Object.keys(temps[0]).slice(1), temps };
if (temps.length === 0 || !temps[0]) {
return { temps: [], tempKeys: [] };
}
return {
tempKeys: Object.keys(temps[0] || {}).filter((key) => key !== "createdAt"),
temps,
};
};
const buildAreaChartConfigs = (checks) => {
@@ -401,10 +405,13 @@ const InfrastructureDetails = () => {
yLabel: "Temperature",
xTick: <TzTick />,
yDomain: [
Math.min(...tempData.temps.flatMap((t) => tempData.tempKeys.map((k) => t[k]))) *
0.9,
Math.max(...tempData.temps.flatMap((t) => tempData.tempKeys.map((k) => t[k]))) *
1.1,
0,
Math.max(
Math.max(
...tempData.temps.flatMap((t) => tempData.tempKeys.map((k) => t[k]))
) * 1.1,
200
),
],
toolTip: (
<TemperatureTooltip
@@ -537,10 +544,6 @@ const InfrastructureDetails = () => {
}}
>
{areaChartConfigs.map((config) => {
if (config?.data?.length === 0) {
return;
}
return (
<BaseBox key={`${config.type}-${config.diskIndex ?? ""}`}>
<Typography

17
Client/src/Pages/Maintenance/CreateMaintenance/index.jsx
View File

@@ -1,4 +1,4 @@
import { Box, Button, duration, Stack, Typography } from "@mui/material";
import { Box, Button, Stack, Typography } from "@mui/material";
import { useSelector } from "react-redux";
import { useTheme } from "@emotion/react";
import { useEffect, useState } from "react";
@@ -13,7 +13,7 @@ import LoadingButton from "@mui/lab/LoadingButton";
import dayjs from "dayjs";
import Select from "../../../Components/Inputs/Select";
import Field from "../../../Components/Inputs/Field";
import TextInput from "../../../Components/Inputs/TextInput";
import Breadcrumbs from "../../../Components/Breadcrumbs";
import CalendarIcon from "../../../assets/icons/calendar.svg?react";
import "./index.css";
@@ -215,8 +215,7 @@ const CreateMaintenance = () => {
};
const handleSubmit = async () => {
if (hasValidationErrors(form, maintenanceWindowValidation, setErrors))
return;
if (hasValidationErrors(form, maintenanceWindowValidation, setErrors)) return;
// Build timestamp for maintenance window from startDate and startTime
const start = dayjs(form.startDate)
.set("hour", form.startTime.hour())
@@ -467,14 +466,15 @@ const CreateMaintenance = () => {
direction="row"
spacing={theme.spacing(8)}
>
<Field
<TextInput
type="number"
id="duration"
value={form.duration}
onChange={(event) => {
handleFormChange("duration", event.target.value);
}}
error={errors["duration"]}
error={errors["duration"] ? true : false}
helperText={errors["duration"]}
/>
<Select
id="durationUnit"
@@ -511,14 +511,15 @@ const CreateMaintenance = () => {
</Typography>
</Box>
<Box>
<Field
<TextInput
id="name"
placeholder="Maintenance at __ : __ for ___ minutes"
value={form.name}
onChange={(event) => {
handleFormChange("name", event.target.value);
}}
error={errors["name"]}
error={errors["name"] ? true : false}
helperText={errors["name"]}
/>
</Box>
</Stack>

14
Client/src/Pages/Monitors/Configure/index.jsx
View File

@@ -14,7 +14,8 @@ import {
getUptimeMonitorsByTeamId,
deleteUptimeMonitor,
} from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
import Field from "../../../Components/Inputs/Field";
import TextInput from "../../../Components/Inputs/TextInput";
import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments";
import PauseIcon from "../../../assets/icons/pause-icon.svg?react";
import ResumeIcon from "../../../assets/icons/resume-icon.svg?react";
import Select from "../../../Components/Inputs/Select";
@@ -343,17 +344,17 @@ const Configure = () => {
</Typography>
</Box>
<Stack gap={theme.spacing(20)}>
<Field
<TextInput
type={monitor?.type === "http" ? "url" : "text"}
https={protocol === "https"}
startAdornment={<HttpAdornment https={protocol === "https"} />}
id="monitor-url"
label="URL to monitor"
placeholder="google.com"
value={parsedUrl?.host || monitor?.url || ""}
disabled={true}
error={errors["url"]}
/>
<Field
<TextInput
type="text"
id="monitor-name"
label="Display name"
@@ -361,7 +362,8 @@ const Configure = () => {
placeholder="Google"
value={monitor?.name || ""}
onChange={handleChange}
error={errors["name"]}
error={errors["name"] ? true : false}
helperText={errors["name"]}
/>
</Stack>
</ConfigBox>
@@ -405,7 +407,7 @@ const Configure = () => {
(notification) => notification.type === "emails"
) ? (
<Box mx={theme.spacing(16)}>
<Field
<TextInput
id="notify-email-list"
type="text"
placeholder="name@gmail.com"

16
Client/src/Pages/Monitors/CreateMonitor/index.jsx
View File

@@ -11,7 +11,8 @@ import { createToast } from "../../../Utils/toastUtils";
import { logger } from "../../../Utils/Logger";
import { ConfigBox } from "../styled";
import Radio from "../../../Components/Inputs/Radio";
import Field from "../../../Components/Inputs/Field";
import TextInput from "../../../Components/Inputs/TextInput";
import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments";
import Select from "../../../Components/Inputs/Select";
import Checkbox from "../../../Components/Inputs/Checkbox";
import Breadcrumbs from "../../../Components/Breadcrumbs";
@@ -258,18 +259,20 @@ const CreateMonitor = () => {
</Typography>
</Box>
<Stack gap={theme.spacing(15)}>
<Field
<TextInput
type={monitor.type === "http" ? "url" : "text"}
id="monitor-url"
startAdornment={<HttpAdornment https={https} />}
label={monitorTypeMaps[monitor.type].label || "URL to monitor"}
https={https}
placeholder={monitorTypeMaps[monitor.type].placeholder || ""}
value={monitor.url}
onChange={handleChange}
onBlur={onUrlBlur}
error={errors["url"]}
error={errors["url"] ? true : false}
helperText={errors["url"]}
/>
<Field
<TextInput
type="text"
id="monitor-name"
label="Display name"
@@ -277,7 +280,8 @@ const CreateMonitor = () => {
placeholder={monitorTypeMaps[monitor.type].namePlaceholder || ""}
value={monitor.name}
onChange={handleChange}
error={errors["name"]}
error={errors["name"] ? true : false}
helperText={errors["name"]}
/>
</Stack>
</ConfigBox>
@@ -391,7 +395,7 @@ const CreateMonitor = () => {
(notification) => notification.type === "emails"
) ? (
<Box mx={theme.spacing(16)}>
<Field
<TextInput
id="notify-email-list"
type="text"
placeholder="name@gmail.com"

16
Client/src/Pages/PageSpeed/Configure/index.jsx
View File

@@ -14,7 +14,7 @@ import { monitorValidation } from "../../../Validation/validation";
import { createToast } from "../../../Utils/toastUtils";
import { logger } from "../../../Utils/Logger";
import { ConfigBox } from "../../Monitors/styled";
import Field from "../../../Components/Inputs/Field";
import TextInput from "../../../Components/Inputs/TextInput";
import Select from "../../../Components/Inputs/Select";
import Checkbox from "../../../Components/Inputs/Checkbox";
import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
@@ -321,17 +321,18 @@ const PageSpeedConfigure = () => {
},
}}
>
<Field
<TextInput
type="url"
id="monitor-url"
label="URL"
placeholder="random.website.com"
value={monitor?.url?.replace("http://", "") || ""}
value={monitor?.url || ""}
onChange={handleChange}
error={errors.url}
error={errors.url ? true : false}
helperText={errors.url}
disabled={true}
/>
<Field
<TextInput
type="text"
id="monitor-name"
label="Monitor display name"
@@ -339,7 +340,8 @@ const PageSpeedConfigure = () => {
isOptional={true}
value={monitor?.name || ""}
onChange={handleChange}
error={errors.name}
error={errors.name ? true : false}
helperText={errors.name}
/>
</Stack>
</ConfigBox>
@@ -383,7 +385,7 @@ const PageSpeedConfigure = () => {
(notification) => notification.type === "emails"
) ? (
<Box mx={theme.spacing(16)}>
<Field
<TextInput
id="notify-email-list"
type="text"
placeholder="name@gmail.com"

17
Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
View File

@@ -13,7 +13,8 @@ import { createToast } from "../../../Utils/toastUtils";
import { logger } from "../../../Utils/Logger";
import { ConfigBox } from "../../Monitors/styled";
import Radio from "../../../Components/Inputs/Radio";
import Field from "../../../Components/Inputs/Field";
import TextInput from "../../../Components/Inputs/TextInput";
import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments";
import Select from "../../../Components/Inputs/Select";
import Checkbox from "../../../Components/Inputs/Checkbox";
import Breadcrumbs from "../../../Components/Breadcrumbs";
@@ -216,18 +217,19 @@ const CreatePageSpeed = () => {
</Typography>
</Box>
<Stack gap={theme.spacing(15)}>
<Field
<TextInput
type={"url"}
id="monitor-url"
label="URL to monitor"
https={https}
startAdornment={<HttpAdornment https={https} />}
placeholder="google.com"
value={monitor.url}
onChange={handleChange}
onBlur={onUrlBlur}
error={errors["url"]}
error={errors["url"] ? true : false}
helperText={errors["url"]}
/>
<Field
<TextInput
type="text"
id="monitor-name"
label="Display name"
@@ -235,7 +237,8 @@ const CreatePageSpeed = () => {
placeholder="Google"
value={monitor.name}
onChange={handleChange}
error={errors["name"]}
error={errors["name"] ? true : false}
helperText={errors["name"]}
/>
</Stack>
</ConfigBox>
@@ -327,7 +330,7 @@ const CreatePageSpeed = () => {
(notification) => notification.type === "emails"
) ? (
<Box mx={theme.spacing(16)}>
<Field
<TextInput
id="notify-email-list"
type="text"
placeholder="name@gmail.com"

4
Client/src/Pages/PageSpeed/index.jsx
View File

@@ -8,7 +8,6 @@ import "./index.css";
import { useNavigate } from "react-router";
import PropTypes from "prop-types";
import Breadcrumbs from "../../Components/Breadcrumbs";
import Greeting from "../../Utils/greeting";
import SkeletonLayout from "./skeleton";
import Card from "./card";
import { networkService } from "../../main";
@@ -82,11 +81,10 @@ const PageSpeed = ({ isAdmin }) => {
<Breadcrumbs list={[{ name: `pagespeed`, path: "/pagespeed" }]} />
<Stack
direction="row"
justifyContent="space-between"
justifyContent="end"
alignItems="center"
mt={theme.spacing(5)}
>
<Greeting type="pagespeed" />
{isAdmin && (
<Button
variant="contained"

7
Client/src/Pages/Settings/index.jsx
View File

@@ -1,6 +1,6 @@
import { useTheme } from "@emotion/react";
import { Box, Stack, Typography, Button } from "@mui/material";
import Field from "../../Components/Inputs/Field";
import TextInput from "../../Components/Inputs/TextInput";
import Link from "../../Components/Link";
import Select from "../../Components/Inputs/Select";
import { logger } from "../../Utils/Logger";
@@ -240,13 +240,14 @@ const Settings = ({ isAdmin }) => {
</Typography>
</Box>
<Stack gap={theme.spacing(20)}>
<Field
<TextInput
id="ttl"
label="The days you want to keep monitoring history."
optionalLabel="0 for infinite"
value={form.ttl}
onChange={handleChange}
error={errors.ttl}
error={errors.ttl ? true : false}
helperText={errors.ttl}
/>
<Box>
<Typography>Clear all stats. This is irreversible.</Typography>

192
Client/src/Pages/test.jsx
View File

@@ -1,192 +0,0 @@
import { Stack, Typography } from "@mui/material";
import Field from "../Components/Inputs/Field";
import TextInput from "../Components/Inputs/TextInput";
import { useState, useEffect, useRef } from "react";
import { HttpAdornment } from "../Components/Inputs/TextInput/Adornments";
import { PasswordEndAdornment } from "../Components/Inputs/TextInput/Adornments";
const Test = () => {
const [originalValue, setOriginalValue] = useState("");
const [originalError, setOriginalError] = useState("");
const [newValue, setNewValue] = useState("");
const [newError, setNewError] = useState("");
const [thresholdValue, setThresholdValue] = useState(20);
const [thresholdError, setThresholdError] = useState("");
const [thresholdValue2, setThresholdValue2] = useState(20);
const [thresholdError2, setThresholdError2] = useState("");
const inputRef = useRef(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
const checkError = (value) => {
if (value !== "clear") {
return "This is an error";
}
return "";
};
const checkThresholdError = (value) => {
if (value !== 99) {
return "This is a threshold error";
}
return "";
};
const checkThresholdError2 = (value) => {
if (value !== 99) {
return "This is a threshold error 2";
}
return "";
};
const handleOriginalValue = (e) => {
setOriginalError(checkError(e.target.value));
setOriginalValue(e.target.value);
};
const handleNewValue = (e) => {
setNewError(checkError(e.target.value));
setNewValue(e.target.value);
};
const handleThresholdValue = (e) => {
const parsedVal = parseInt(e.target.value);
setThresholdError(checkThresholdError(parsedVal));
setThresholdValue(parsedVal);
};
const handleThresholdValue2 = (e) => {
const parsedVal = parseInt(e.target.value);
setThresholdError2(checkThresholdError2(parsedVal));
setThresholdValue2(parsedVal);
};
return (
<Stack
gap={8}
direction="column"
border="1px dashed blue"
padding="1rem"
>
<Typography>
This is a test page for the TextInput component. It is a rationalized Input
component.
</Typography>
<Typography>Type anything for an error.</Typography>
<Typography>Typing "clear" will clear the error for text based input</Typography>
<Typography>Typing "99" will clear the error for threshold based input</Typography>
<Field
id="original-field"
onChange={handleOriginalValue}
type="text"
value={originalValue}
error={originalError}
/>
<TextInput
value={newValue}
onChange={handleNewValue}
error={newError !== ""}
helperText={newError}
/>
<Field
type={"url"}
id="monitor-url"
label={"URL to monitor"}
https={true}
placeholder={""}
value={originalValue}
onChange={handleOriginalValue}
error={originalError}
/>
<TextInput
type={"url"}
id="monitor-url"
label={"URL to monitor"}
placeholder={""}
value={newValue}
startAdornment={<HttpAdornment https={true} />}
onChange={handleNewValue}
error={newError !== ""}
helperText={newError}
/>
<Field
type="password"
id="login-password-input"
label="Password"
isRequired={true}
placeholder="••••••••••"
autoComplete="current-password"
value={originalValue}
onChange={handleOriginalValue}
error={originalError}
ref={inputRef}
/>
<TextInput
type="password"
id="login-password-input"
label="Password"
isRequired={true}
placeholder="••••••••••"
autoComplete="current-password"
value={newValue}
endAdornment={<PasswordEndAdornment />}
onChange={handleNewValue}
error={newError !== ""}
helperText={newError}
ref={inputRef}
/>
<Field
id="ttl"
label="The days you want to keep monitoring history."
isOptional={true}
optionalLabel="0 for infinite"
value={originalValue}
onChange={handleOriginalValue}
error={originalError}
/>
<TextInput
id="ttl"
label="The days you want to keep monitoring history."
isOptional={true}
optionalLabel="0 for infinite"
value={newValue}
onChange={handleNewValue}
error={newError !== ""}
helperText={newError}
/>
<Typography>Short field for threshold. Easily show/hide error text</Typography>
<TextInput
maxWidth="var(--env-var-width-4)"
id="threshold"
type="number"
value={thresholdValue.toString()}
onChange={handleThresholdValue}
error={thresholdError !== ""}
/>
<TextInput
maxWidth="var(--env-var-width-4)"
id="threshold"
type="number"
value={thresholdValue2.toString()}
onChange={handleThresholdValue2}
error={thresholdError2 !== ""}
/>
<Typography sx={{ color: "red" }}>
{thresholdError} {thresholdError2}
</Typography>
</Stack>
);
};
export default Test;

3
Client/src/Utils/Theme/constants.js
View File

@@ -22,6 +22,7 @@ const paletteColors = {
gray80: "#FDFCFD",
gray90: "#FCFCFD",
gray100: "#F4F4F4",
gray150: "#EFEFEF",
gray200: "#E3E3E3",
gray300: "#A2A3A3",
gray500: "#838C99",
@@ -205,10 +206,12 @@ const semanticColors = {
light: {
light: paletteColors.gray200,
dark: paletteColors.gray800,
disabled: paletteColors.gray150,
},
dark: {
light: paletteColors.gray200,
dark: paletteColors.gray750,
disabled: paletteColors.gray800,
},
},
unresolved: {

3
Client/src/Utils/Theme/darkTheme.js
View File

@@ -23,6 +23,9 @@ const {
} = colors;
const palette = {
action: {
disabled: border.dark.disabled,
},
primary: { main: primary.main.dark },
secondary: {
main: secondary.main.dark,

3
Client/src/Utils/Theme/globalTheme.js
View File

@@ -220,7 +220,7 @@ const baseTheme = (palette) => ({
height: "var(--env-var-height-2)",
fontSize: "var(--env-var-font-size-medium)",
fontWeight: 400,
color: palette.text.secondary, // or any color from your palette
color: palette.text.secondary,
},
"& .MuiInputBase-input.MuiOutlinedInput-input": {
padding: "0 var(--env-var-spacing-1-minus) !important",
@@ -231,6 +231,7 @@ const baseTheme = (palette) => ({
"& .MuiOutlinedInput-notchedOutline": {
borderRadius: 4,
},
"& .MuiFormHelperText-root": {
color: palette.error.main,
opacity: 0.8,

3
Client/src/Utils/Theme/lightTheme.js
View File

@@ -28,6 +28,9 @@ const {
} = colors;
const palette = {
action: {
disabled: border.light.disabled,
},
primary: { main: primary.main.light },
secondary: {
main: secondary.main.light,

2
README.md
View File

@@ -17,7 +17,7 @@ Checkmate is an open source uptime manager, server & Docker monitoring tool used
## Demo
See [Checkmate](https://uptime-demo.bluewavelabs.ca/) in action. The username is uptimedemo@demo.com and the password is Demouser1!
See [Checkmate](https://checkmate-demo.bluewavelabs.ca/) in action. The username is uptimedemo@demo.com and the password is Demouser1!
## User's guide

8
Server/package-lock.json generated
View File

@@ -11,7 +11,7 @@
"dependencies": {
"axios": "^1.7.2",
"bcrypt": "^5.1.1",
"bullmq": "5.29.1",
"bullmq": "5.30.0",
"cors": "^2.8.5",
"dockerode": "4.0.2",
"dotenv": "^16.4.5",
@@ -1218,9 +1218,9 @@
}
},
"node_modules/bullmq": {
"version": "5.29.1",
"resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.29.1.tgz",
"integrity": "sha512-TZWiwRlPnpaN+Qwh4D8IQf2cYLpkiDX1LbaaWEabc6y37ojIttWOSynxDewpVHyW233LssSIC4+aLMSvAjtpmg==",
"version": "5.30.0",
"resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.30.0.tgz",
"integrity": "sha512-xSBiQksJpMHb1tuvH4+3FYQGiCqxvjD8kN/v4YAeDYCHP76AUedQGeehQPVqy9fsCbb0DTXah/Us/ydM8vU9Ug==",
"license": "MIT",
"dependencies": {
"cron-parser": "^4.6.0",

2
Server/package.json
View File

@@ -14,7 +14,7 @@
"dependencies": {
"axios": "^1.7.2",
"bcrypt": "^5.1.1",
"bullmq": "5.29.1",
"bullmq": "5.30.0",
"cors": "^2.8.5",
"dockerode": "4.0.2",
"dotenv": "^16.4.5",