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;