diff --git a/Client/package-lock.json b/Client/package-lock.json index 55e849eb2..ad8f2dac9 100644 --- a/Client/package-lock.json +++ b/Client/package-lock.json @@ -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", diff --git a/Client/package.json b/Client/package.json index c2ea33996..c45734db0 100644 --- a/Client/package.json +++ b/Client/package.json @@ -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", diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 62b6bd9ff..82c8203a8 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -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={} > - } - /> - { 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), diff --git a/Client/src/Components/Check/Check.jsx b/Client/src/Components/Check/Check.jsx index 3219fec29..799fda63c 100644 --- a/Client/src/Components/Check/Check.jsx +++ b/Client/src/Components/Check/Check.jsx @@ -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 ( { - const theme = useTheme(); - - const [isVisible, setVisible] = useState(false); - - return ( - - ), - endAdornment: type === "password" && ( - - 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 ? : } - - - ), - }} - /> - {error && ( - - )} - - ); - } -); - -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; diff --git a/Client/src/Components/Inputs/TextInput/Adornments/index.jsx b/Client/src/Components/Inputs/TextInput/Adornments/index.jsx index 0709b5425..686db183b 100644 --- a/Client/src/Components/Inputs/TextInput/Adornments/index.jsx +++ b/Client/src/Components/Inputs/TextInput/Adornments/index.jsx @@ -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, }; diff --git a/Client/src/Components/Inputs/TextInput/index.jsx b/Client/src/Components/Inputs/TextInput/index.jsx index d97d1ebac..26f051c06 100644 --- a/Client/src/Components/Inputs/TextInput/index.jsx +++ b/Client/src/Components/Inputs/TextInput/index.jsx @@ -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 ( - + } ); @@ -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; diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx index eb6499a31..664cfd4af 100644 --- a/Client/src/Components/Label/index.jsx +++ b/Client/src/Components/Label/index.jsx @@ -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, }, diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index be056e011..4c274409b 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -47,15 +47,9 @@ import Folder from "../../assets/icons/folder.svg?react"; import "./index.css"; const menu = [ - { - name: "Dashboard", - icon: , - nested: [ - { name: "Monitors", path: "monitors", icon: }, - { name: "Pagespeed", path: "pagespeed", icon: }, - { name: "Infrastructure", path: "infrastructure", icon: }, - ], - }, + { name: "Monitors", path: "monitors", icon: }, + { name: "Pagespeed", path: "pagespeed", icon: }, + { name: "Infrastructure", path: "infrastructure", icon: }, { name: "Incidents", path: "incidents", icon: }, // { name: "Status pages", path: "status", icon: }, { name: "Maintenance", path: "maintenance", icon: }, diff --git a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx index 0ea313d6c..ae322156c 100644 --- a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx +++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx @@ -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"} > - { > Current password - } + flex={1} /> { New password - } + flex={1} /> { Confirm new password - } + flex={1} /> {Object.keys(errors).length > 0 && ( diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx index 0875891f5..9c00f6c02 100644 --- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx +++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx @@ -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 = () => { First name - Last name - @@ -261,14 +265,14 @@ const ProfilePanel = () => { This is your current email address — it cannot be changed. - logger.warn("disabled")} - // error={errors[idToName["edit-email"]]} disabled={true} + flex={1} /> diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx index 7d9171384..74fae01c6 100644 --- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx +++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx @@ -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} > - { - { value={localSettings.systemEmailHost} onChange={handleChange} onBlur={handleBlur} - error={errors.systemEmailHost} + error={errors.systemEmailHost ? true : false} + helperText={errors.systemEmailHost} /> - { value={localSettings.systemEmailPort?.toString()} onChange={handleChange} onBlur={handleBlur} - error={errors.systemEmailPort} + error={errors.systemEmailPort ? true : false} + helperText={errors.systemEmailPort} /> - - { value={localSettings.systemEmailPassword} onChange={handleChange} onBlur={handleBlur} - error={errors.systemEmailPassword} + error={errors.systemEmailPassword ? true : false} + helperText={errors.systemEmailPassword} /> @@ -242,7 +248,7 @@ const AdvancedSettings = ({ isAdmin }) => { direction="row" gap={theme.spacing(10)} > - { value={localSettings.jwtTTLNum.toString()} onChange={handleChange} onBlur={handleBlur} - error={errors.jwtTTLNum} + error={errors.jwtTTLNum ? true : false} + helperText={errors.jwtTTLNum} /> { - { handleFormChange("name", event.target.value); }} - error={errors["name"]} + error={errors["name"] ? true : false} + helperText={errors["name"]} /> diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx index 22cc8618e..ba23c5634 100644 --- a/Client/src/Pages/Monitors/Configure/index.jsx +++ b/Client/src/Pages/Monitors/Configure/index.jsx @@ -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 = () => { - } id="monitor-url" label="URL to monitor" placeholder="google.com" value={parsedUrl?.host || monitor?.url || ""} disabled={true} - error={errors["url"]} /> - { placeholder="Google" value={monitor?.name || ""} onChange={handleChange} - error={errors["name"]} + error={errors["name"] ? true : false} + helperText={errors["name"]} /> @@ -405,7 +407,7 @@ const Configure = () => { (notification) => notification.type === "emails" ) ? ( - { - } 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"]} /> - { placeholder={monitorTypeMaps[monitor.type].namePlaceholder || ""} value={monitor.name} onChange={handleChange} - error={errors["name"]} + error={errors["name"] ? true : false} + helperText={errors["name"]} /> @@ -391,7 +395,7 @@ const CreateMonitor = () => { (notification) => notification.type === "emails" ) ? ( - { }, }} > - - { isOptional={true} value={monitor?.name || ""} onChange={handleChange} - error={errors.name} + error={errors.name ? true : false} + helperText={errors.name} /> @@ -383,7 +385,7 @@ const PageSpeedConfigure = () => { (notification) => notification.type === "emails" ) ? ( - { - } placeholder="google.com" value={monitor.url} onChange={handleChange} onBlur={onUrlBlur} - error={errors["url"]} + error={errors["url"] ? true : false} + helperText={errors["url"]} /> - { placeholder="Google" value={monitor.name} onChange={handleChange} - error={errors["name"]} + error={errors["name"] ? true : false} + helperText={errors["name"]} /> @@ -327,7 +330,7 @@ const CreatePageSpeed = () => { (notification) => notification.type === "emails" ) ? ( - { - {isAdmin && (