Merge pull request #1204 from bluewave-labs/fix/fe/login-text-input

fix: fe/login text input

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/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) }}
 				>
-					<Field
+					<TextInput
 						type="email"
 						id="login-email-input"
 						label="Email"
@@ -160,7 +162,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 +271,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 +280,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"