integrate TextInput into register page

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/Pages/Auth/Register/StepOne/index.jsx

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

Client/src/Pages/Auth/Register/StepThree/index.jsx

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

Client/src/Pages/Auth/Register/StepTwo/index.jsx

@@ -3,6 +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 TextInput from "../../../../Components/Inputs/TextInput";
 import Field from "../../../../Components/Inputs/Field";
 
 StepTwo.propTypes = {
@@ -55,7 +56,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 +66,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