From 12767d5dbc7a7e2722c13a06cf2ea266d263cee1 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 26 Nov 2024 12:15:41 +0800 Subject: [PATCH 01/21] integrate TextField into create infrastructure page --- .../src/Components/Inputs/TextInput/index.jsx | 9 +++++++++ .../CreateMonitor/CustomThreshold/index.jsx | 11 ++++++----- .../Infrastructure/CreateMonitor/index.jsx | 18 ++++++++++-------- 3 files changed, 25 insertions(+), 13 deletions(-) diff --git a/Client/src/Components/Inputs/TextInput/index.jsx b/Client/src/Components/Inputs/TextInput/index.jsx index d97d1ebac..4d648803a 100644 --- a/Client/src/Components/Inputs/TextInput/index.jsx +++ b/Client/src/Components/Inputs/TextInput/index.jsx @@ -56,6 +56,7 @@ Optional.propTypes = { const TextInput = forwardRef( ( { + id, type, value, placeholder, @@ -63,12 +64,14 @@ const TextInput = forwardRef( isOptional, optionalLabel, onChange, + onBlur, error = false, helperText = null, startAdornment = null, endAdornment = null, label = null, maxWidth = "100%", + disabled = false, }, ref ) => { @@ -87,10 +90,12 @@ const TextInput = forwardRef( {isOptional && } ); @@ -113,18 +119,21 @@ TextInput.displayName = "TextInput"; TextInput.propTypes = { type: PropTypes.string, + id: PropTypes.string.isRequired, 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, + disabled: PropTypes.bool, }; export default TextInput; diff --git a/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx b/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx index 3b664eb5d..71f392d6b 100644 --- a/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx +++ b/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx @@ -1,5 +1,6 @@ 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 +58,17 @@ export const CustomThreshold = ({ justifyContent: "flex-end", }} > - + /> + { 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( @@ -240,7 +239,7 @@ const CreateInfrastructureMonitor = () => { - { value={infrastructureMonitor.url} onBlur={handleBlur} onChange={handleChange} - error={errors["url"]} + error={errors["url"] ? true : false} + helperText={errors["url"]} /> - { onChange={handleChange} error={errors["name"]} /> - @@ -297,7 +298,8 @@ const CreateInfrastructureMonitor = () => { Customize alerts - Send a notification to user(s) when thresholds exceed a specified percentage. + Send a notification to user(s) when thresholds exceed a specified + percentage. From 48c3f05831eea25dcd217ea367e046e36efbece6 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 26 Nov 2024 12:21:42 +0800 Subject: [PATCH 02/21] integrate TextInput --- Client/src/Pages/Monitors/CreateMonitor/index.jsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx index 84e599322..56dfc4db2 100644 --- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx +++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx @@ -11,6 +11,8 @@ import { createToast } from "../../../Utils/toastUtils"; import { logger } from "../../../Utils/Logger"; import { ConfigBox } from "../styled"; import Radio from "../../../Components/Inputs/Radio"; +import TextInput from "../../../Components/Inputs/TextInput"; +import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments"; import Field from "../../../Components/Inputs/Field"; import Select from "../../../Components/Inputs/Select"; import Checkbox from "../../../Components/Inputs/Checkbox"; @@ -249,17 +251,19 @@ const CreateMonitor = () => { - } label={monitorTypeMaps[monitor.type].label || "URL to monitor"} https={https} placeholder={monitorTypeMaps[monitor.type].placeholder || ""} value={monitor.url} onChange={handleChange} - 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"]} /> From a9493db5de0349c7a0323d030b55ad9e990800c4 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 26 Nov 2024 12:30:41 +0800 Subject: [PATCH 03/21] integrate TextInput into login page --- .../Inputs/TextInput/Adornments/index.jsx | 9 +++++++-- Client/src/Pages/Auth/Login.jsx | 13 +++++++++---- 2 files changed, 16 insertions(+), 6 deletions(-) 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/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx index ece5de314..05bf6d0b9 100644 --- a/Client/src/Pages/Auth/Login.jsx +++ b/Client/src/Pages/Auth/Login.jsx @@ -7,6 +7,8 @@ import { login } from "../../Features/Auth/authSlice"; import { useDispatch, useSelector } from "react-redux"; import { createToast } from "../../Utils/toastUtils"; import { networkService } from "../../main"; +import TextInput from "../../Components/Inputs/TextInput"; +import { PasswordEndAdornment } from "../../Components/Inputs/TextInput/Adornments"; import Field from "../../Components/Inputs/Field"; import Background from "../../assets/Images/background-grid.svg?react"; import Logo from "../../assets/icons/bwu-icon.svg?react"; @@ -150,7 +152,7 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => { display="grid" gap={{ xs: theme.spacing(12), sm: theme.spacing(16) }} > - { 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} /> { gap: { xs: theme.spacing(12), sm: theme.spacing(16) }, }} > - { autoComplete="current-password" value={form.password} onChange={onChange} - error={errors.password} + error={errors.password ? true : false} + helperText={errors.password} ref={inputRef} + endAdornment={} /> Date: Tue, 26 Nov 2024 13:14:33 +0800 Subject: [PATCH 04/21] expose on TextInput --- Client/src/Components/Inputs/TextInput/index.jsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/Client/src/Components/Inputs/TextInput/index.jsx b/Client/src/Components/Inputs/TextInput/index.jsx index 4d648803a..b78ca5439 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(12)}`, + minHeight: theme.spacing(12), + }, }; if (type === "url") { @@ -57,6 +62,7 @@ const TextInput = forwardRef( ( { id, + name, type, value, placeholder, @@ -91,6 +97,7 @@ const TextInput = forwardRef( Date: Tue, 26 Nov 2024 13:14:46 +0800 Subject: [PATCH 05/21] integrate TextInput into register page --- Client/src/Components/Check/Check.jsx | 3 +-- Client/src/Pages/Auth/Register/StepOne/index.jsx | 13 ++++++++----- Client/src/Pages/Auth/Register/StepThree/index.jsx | 11 ++++++----- Client/src/Pages/Auth/Register/StepTwo/index.jsx | 6 ++++-- 4 files changed, 19 insertions(+), 14 deletions(-) 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 ( - - - - - (e.target.value = e.target.value.toLowerCase())} onChange={onChange} - error={errors.email} + error={errors.email ? true : false} + helperText={errors.email} ref={inputRef} /> Date: Tue, 26 Nov 2024 13:37:10 +0800 Subject: [PATCH 06/21] Expose flex on TextInput --- Client/src/Components/Inputs/TextInput/index.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Client/src/Components/Inputs/TextInput/index.jsx b/Client/src/Components/Inputs/TextInput/index.jsx index b78ca5439..744d036bd 100644 --- a/Client/src/Components/Inputs/TextInput/index.jsx +++ b/Client/src/Components/Inputs/TextInput/index.jsx @@ -77,6 +77,7 @@ const TextInput = forwardRef( endAdornment = null, label = null, maxWidth = "100%", + flex, disabled = false, }, ref @@ -84,7 +85,7 @@ const TextInput = forwardRef( const [fieldType, setFieldType] = useState(type); const theme = useTheme(); return ( - + Date: Tue, 26 Nov 2024 13:37:35 +0800 Subject: [PATCH 07/21] integrate TextInput into profile panel --- .../TabPanels/Account/ProfilePanel.jsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) 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} /> From 817bbb1804445f3dc524161183e1cd3a00c05d17 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 26 Nov 2024 13:56:13 +0800 Subject: [PATCH 08/21] Adjust helper text spcing, expose hidden prop --- Client/src/Components/Inputs/TextInput/index.jsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/Client/src/Components/Inputs/TextInput/index.jsx b/Client/src/Components/Inputs/TextInput/index.jsx index 744d036bd..ec8203656 100644 --- a/Client/src/Components/Inputs/TextInput/index.jsx +++ b/Client/src/Components/Inputs/TextInput/index.jsx @@ -8,8 +8,8 @@ const getSx = (theme, type, maxWidth) => { maxWidth: maxWidth, "& .MuiFormHelperText-root": { position: "absolute", - bottom: `-${theme.spacing(12)}`, - minHeight: theme.spacing(12), + bottom: `-${theme.spacing(24)}`, + minHeight: theme.spacing(24), }, }; @@ -79,13 +79,17 @@ const TextInput = forwardRef( maxWidth = "100%", flex, disabled = false, + hidden = false, }, ref ) => { const [fieldType, setFieldType] = useState(type); const theme = useTheme(); return ( - + Date: Tue, 26 Nov 2024 13:56:36 +0800 Subject: [PATCH 09/21] integate TextInput into PasswordPanel --- .../TabPanels/Account/PasswordPanel.jsx | 26 +++++++++++++------ 1 file changed, 18 insertions(+), 8 deletions(-) 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 && ( From f81b5957e75ae564b763f4f89f39d2e689f8ca74 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 26 Nov 2024 14:05:04 +0800 Subject: [PATCH 10/21] expose margin, integrate into TeamPanel --- Client/src/Components/Inputs/TextInput/index.jsx | 12 ++++++++++++ .../src/Components/TabPanels/Account/TeamPanel.jsx | 7 +++++-- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/Client/src/Components/Inputs/TextInput/index.jsx b/Client/src/Components/Inputs/TextInput/index.jsx index ec8203656..26f051c06 100644 --- a/Client/src/Components/Inputs/TextInput/index.jsx +++ b/Client/src/Components/Inputs/TextInput/index.jsx @@ -78,6 +78,10 @@ const TextInput = forwardRef( label = null, maxWidth = "100%", flex, + marginTop, + marginRight, + marginBottom, + marginLeft, disabled = false, hidden = false, }, @@ -89,6 +93,10 @@ const TextInput = forwardRef( { 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 +249,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"]} /> From 1334645567375e5c2a4f2ccb9d714a95fcfe8471 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 26 Nov 2024 14:27:50 +0800 Subject: [PATCH 15/21] integrate into configure --- Client/src/Pages/Monitors/Configure/index.jsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) 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" ) ? ( - Date: Tue, 26 Nov 2024 14:28:38 +0800 Subject: [PATCH 16/21] finish create monitor integration --- Client/src/Pages/Monitors/CreateMonitor/index.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx index 56dfc4db2..ebb812658 100644 --- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx +++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx @@ -13,7 +13,6 @@ import { ConfigBox } from "../styled"; import Radio from "../../../Components/Inputs/Radio"; import TextInput from "../../../Components/Inputs/TextInput"; import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments"; -import Field from "../../../Components/Inputs/Field"; import Select from "../../../Components/Inputs/Select"; import Checkbox from "../../../Components/Inputs/Checkbox"; import Breadcrumbs from "../../../Components/Breadcrumbs"; @@ -386,7 +385,7 @@ const CreateMonitor = () => { (notification) => notification.type === "emails" ) ? ( - Date: Tue, 26 Nov 2024 14:30:58 +0800 Subject: [PATCH 17/21] Integrate into pagespeed configure --- Client/src/Pages/PageSpeed/Configure/index.jsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx index 222fa733f..757804c97 100644 --- a/Client/src/Pages/PageSpeed/Configure/index.jsx +++ b/Client/src/Pages/PageSpeed/Configure/index.jsx @@ -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 = () => { }, }} > - - { 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" ) ? ( - Date: Tue, 26 Nov 2024 14:32:22 +0800 Subject: [PATCH 18/21] integrate in to create pagespeed --- .../Pages/PageSpeed/CreatePageSpeed/index.jsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx index f771c3988..e6c2e2a62 100644 --- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx +++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx @@ -13,6 +13,8 @@ import { createToast } from "../../../Utils/toastUtils"; import { logger } from "../../../Utils/Logger"; import { ConfigBox } from "../../Monitors/styled"; import Radio from "../../../Components/Inputs/Radio"; +import TextInput from "../../../Components/Inputs/TextInput"; +import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments"; import Field from "../../../Components/Inputs/Field"; import Select from "../../../Components/Inputs/Select"; import Checkbox from "../../../Components/Inputs/Checkbox"; @@ -205,17 +207,18 @@ const CreatePageSpeed = () => { - } placeholder="google.com" value={monitor.url} onChange={handleChange} - 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"]} /> @@ -315,7 +319,7 @@ const CreatePageSpeed = () => { (notification) => notification.type === "emails" ) ? ( - Date: Tue, 26 Nov 2024 14:33:45 +0800 Subject: [PATCH 19/21] integrate in to settings --- Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx | 1 - Client/src/Pages/Settings/index.jsx | 7 ++++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx index e6c2e2a62..e70576ebd 100644 --- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx +++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx @@ -15,7 +15,6 @@ import { ConfigBox } from "../../Monitors/styled"; import Radio from "../../../Components/Inputs/Radio"; import TextInput from "../../../Components/Inputs/TextInput"; import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments"; -import Field from "../../../Components/Inputs/Field"; import Select from "../../../Components/Inputs/Select"; import Checkbox from "../../../Components/Inputs/Checkbox"; import Breadcrumbs from "../../../Components/Breadcrumbs"; diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx index 357014b3a..8a5e73bc3 100644 --- a/Client/src/Pages/Settings/index.jsx +++ b/Client/src/Pages/Settings/index.jsx @@ -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 }) => { - Clear all stats. This is irreversible. From 16069b47b9f62b73db02a394e2f74afdbdae2846 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 26 Nov 2024 14:34:24 +0800 Subject: [PATCH 20/21] remove test route and page --- Client/src/App.jsx | 6 -- Client/src/Pages/test.jsx | 192 -------------------------------------- 2 files changed, 198 deletions(-) delete mode 100644 Client/src/Pages/test.jsx 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={} > - } - /> - { - 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 ( - - - This is a test page for the TextInput component. It is a rationalized Input - component. - - Type anything for an error. - Typing "clear" will clear the error for text based input - Typing "99" will clear the error for threshold based input - - - - - } - onChange={handleNewValue} - error={newError !== ""} - helperText={newError} - /> - - - } - onChange={handleNewValue} - error={newError !== ""} - helperText={newError} - ref={inputRef} - /> - - - - - - Short field for threshold. Easily show/hide error text - - - - {thresholdError} {thresholdError2} - - - ); -}; - -export default Test; From 061b450e81e64ed22a20c1d4d38a6a3ccc35e0ec Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 26 Nov 2024 14:34:50 +0800 Subject: [PATCH 21/21] remove Field component --- Client/src/Components/Inputs/Field/index.css | 50 ---- Client/src/Components/Inputs/Field/index.jsx | 241 ------------------- 2 files changed, 291 deletions(-) delete mode 100644 Client/src/Components/Inputs/Field/index.css delete mode 100644 Client/src/Components/Inputs/Field/index.jsx diff --git a/Client/src/Components/Inputs/Field/index.css b/Client/src/Components/Inputs/Field/index.css deleted file mode 100644 index 4b54a565d..000000000 --- a/Client/src/Components/Inputs/Field/index.css +++ /dev/null @@ -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); -} diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx deleted file mode 100644 index bbc28eac7..000000000 --- a/Client/src/Components/Inputs/Field/index.jsx +++ /dev/null @@ -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 ( - - ), - 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;