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

Merge pull request #1202 from bluewave-labs/fix/fe/text-input-integration

Browse Source 
fix: integrate TextInput
This commit is contained in:
Alexander Holliday
2024-11-29 17:31:45 -08:00
committed by GitHub
parent c8ced8b8fb c62d62f58e
commit 71bd590c2a
25 changed files with 217 additions and 619 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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="/"

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;

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

@@ -11,9 +11,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";
@@ -96,7 +95,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(
@@ -253,7 +251,7 @@ const CreateInfrastructureMonitor = () => {
</Stack>
</Box>
<Stack gap={theme.spacing(15)}>
<Field
<TextInput
type="text"
id="url"
label="Server URL"
@@ -261,9 +259,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"
@@ -273,14 +272,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>
@@ -368,15 +368,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

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";
@@ -249,17 +250,19 @@ 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}
error={errors["url"]}
error={errors["url"] ? true : false}
helperText={errors["url"]}
/>
<Field
<TextInput
type="text"
id="monitor-name"
label="Display name"
@@ -267,7 +270,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>
@@ -381,7 +385,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";
@@ -205,17 +206,18 @@ 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}
error={errors["url"]}
error={errors["url"] ? true : false}
helperText={errors["url"]}
/>
<Field
<TextInput
type="text"
id="monitor-name"
label="Display name"
@@ -223,7 +225,8 @@ const CreatePageSpeed = () => {
placeholder="Google"
value={monitor.name}
onChange={handleChange}
error={errors["name"]}
error={errors["name"] ? true : false}
helperText={errors["name"]}
/>
</Stack>
</ConfigBox>
@@ -315,7 +318,7 @@ const CreatePageSpeed = () => {
(notification) => notification.type === "emails"
) ? (
<Box mx={theme.spacing(16)}>
<Field
<TextInput
id="notify-email-list"
type="text"
placeholder="name@gmail.com"

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;