import
"./App.css"
;
import * as React from
"react"
;
import Box from
"@mui/material/Box"
;
import IconButton from
"@mui/material/IconButton"
;
import FilledInput from
"@mui/material/FilledInput"
;
import InputLabel from
"@mui/material/InputLabel"
;
import InputAdornment from
"@mui/material/InputAdornment"
;
import FormControl from
"@mui/material/FormControl"
;
import Visibility from
"@mui/icons-material/Visibility"
;
import VisibilityOff from
"@mui/icons-material/VisibilityOff"
;
import { Button, Typography } from
"@mui/material"
;
function
App() {
const [values, setValues] = React.useState({
username:
""
,
password:
""
,
showPassword:
false
,
});
const handleChange = (prop) => (event) => {
setValues({ ...values, [prop]: event.target.value });
};
const handleClickShowPassword = () => {
setValues({
...values,
showPassword: !values.showPassword,
});
};
const handleMouseDownPassword = (event) => {
event.preventDefault();
};
const handleFormSubmit = (event) => {
event.preventDefault();
alert(
"Signed in successfully"
);
};
return
(
<div className=
"App"
>
<div
className=
"head"
style={{
width:
"fit-content"
,
margin:
"auto"
,
}}
>
<Typography
variant=
"h3"
sx={{
color:
"green"
,
}}
>
GeeksforGeeks
</Typography>
<Typography variant=
"p"
fontWeight={600}>
React MUI FilledInput API
</Typography>
</div>
<br />
<Box
component=
"form"
onSubmit={handleFormSubmit}
sx={{
width:
"fit-content"
,
margin:
"auto"
,
display:
"flex"
,
flexDirection:
"column"
,
gap:
"10px"
,
maxWidth:
"300px"
,
}}
>
<FormControl fullWidth variant=
"filled"
>
<InputLabel htmlFor=
"filled-adornment-username"
>
Username
</InputLabel>
<FilledInput
id=
"filled-adornment-amount"
value={values.username}
onChange={handleChange(
"username"
)}
startAdornment={<InputAdornment
position=
"start"
>@</InputAdornment>}
required
/>
</FormControl>
<FormControl variant=
"filled"
>
<InputLabel htmlFor=
"filled-adornment-password"
>
Password
</InputLabel>
<FilledInput
id=
"filled-adornment-password"
type={values.showPassword ?
"text"
:
"password"
}
value={values.password}
onChange={handleChange(
"password"
)}
endAdornment={
<InputAdornment position=
"end"
>
<IconButton
aria-label=
"toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
>
{values.showPassword ?
<VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
required
/>
</FormControl>
<Button type=
"submit"
variant=
"contained"
>
Sign
in
</Button>
</Box>
</div>
);
}
export
default
App;