https://i.sstatic.net/Ov3yF.png
I'm currently working on a code to assign tasks to employees, and I have created a login form with multiple text fields, each accompanied by an icon. However, there seems to be a layout issue as shown in the image. There is a distinct gap between the input field and the corresponding icon in each section.
As seen in the picture, there's a blue area where the user should input data, while the space designated for the icon remains empty.
How can I resolve this spacing problem?
code.tsx:
const LoginFirebase: FC = (props) => {
const isMountedRef = useIsMountedRef();
const { user, loginUserWithEmailAndPassword, loginError } = useAuthModule(
(state) => state
);
console.log('this is the user from the state 1 from Reg-Com: ', user);
const navigation = useNavigate();
useEffect(() => {
if (user) {
console.log('logged in user: ', user);
navigation('/dashboard');
}
}, [user]);
return (
<>
<Box
sx={{
alignItems: 'center',
display: 'flex',
}}
></Box>
<Formik
initialValues={{
email: '',
password: '',
submit: null,
}}
validationSchema={Yup.object().shape({
email: Yup.string()
.email('Must be a valid email')
.max(255)
.required('Email is required'),
password: Yup.string().max(255).required('Password is required'),
})}
onSubmit={async (
values,
{ setErrors, setStatus, setSubmitting }
): Promise<void> => {
try {
await loginUserWithEmailAndPassword(values);
if (isMountedRef.current) {
setStatus({ success: true });
setSubmitting(false);
}
} catch (err) {
console.error(err);
if (isMountedRef.current) {
setStatus({ success: false });
setErrors({ submit: err.message });
setSubmitting(false);
}
}
}}
>
{({
errors,
handleBlur,
handleChange,
handleSubmit,
isSubmitting,
touched,
values,
}): JSX.Element => (
<form noValidate onSubmit={handleSubmit}>
<TextField
InputProps={{
startAdornment: (
<InputAdornment position="start">
<DraftsOutlinedIcon />
</InputAdornment>
),
}}
error={Boolean(touched.email && errors.email)}
helperText={touched.email && errors.email}
onBlur={handleBlur}
onChange={handleChange}
value={values.email}
placeholder="Enter your email"
fullWidth
margin="normal"
name="email"
type="email"
variant="outlined"
/>
<TextField
InputProps={{
startAdornment: (
<InputAdornment position="start">
<LockOutlinedIcon />
</InputAdornment>
),
}}
placeholder="Enter password"
error={Boolean(touched.password && errors.password)}
helperText={touched.password && errors.password}
onBlur={handleBlur}
onChange={handleChange}
value={values.password}
fullWidth
margin="normal"
name="password"
type="password"
variant="outlined"
/>
{errors.submit && (
<Box sx={{ mt: 3 }}>
<FormHelperText error>{errors.submit}</FormHelperText>
</Box>
)}
<Box sx={{ mt: 2 }}>
<Button
style={{
marginTop: '1rem',
maxHeight: '3.4rem',
minHeight: '3.4rem',
}}
color="primary"
disabled={isSubmitting}
fullWidth
size="large"
type="submit"
variant="contained"
>
Log in
</Button>
</Box>
{loginError && <p>{loginError}</p>}
</form>
)}
</Formik>
</>
);
};
export default LoginFirebase;