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

fix: integrate TextInput

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 (
 		<Stack
 			direction="row"

Client/src/Components/Inputs/Field/index.css

@@ -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);
-}

Client/src/Components/Inputs/Field/index.jsx

@@ -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;

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,
 };

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 (
-			<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;

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"}
 			>
-				<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 && (

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 = () => {
 					<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">

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}
 			>
-				<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"