Merge pull request #1205 from bluewave-labs/fix/fe/text-input-register

fix: fe/text input register

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/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(
 				</Typography>
 				<TextField
 					id={id}
+					name={name}
 					type={fieldType}
 					value={value}
 					placeholder={placeholder}
@@ -120,6 +127,7 @@ TextInput.displayName = "TextInput";
 TextInput.propTypes = {
 	type: PropTypes.string,
 	id: PropTypes.string.isRequired,
+	name: PropTypes.string,
 	value: PropTypes.string,
 	placeholder: PropTypes.string,
 	isRequired: PropTypes.bool,

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