Login form using react material ui

https://material-ui.com/ is a react package that can help users easily develop components based on material design.

Here I want to show you a basic login form designed using the library. On completion the login form should look like this.

There’s an App bar on top with the Branding, a vertically & horizontally centered Paper component with the login form.

Prerequisites:

• Create a react app using https://github.com/facebook/create-react-app
• Install material ui referring to steps here — https://material-ui.com/getting-started/installation/

Once done and the basic components are set up. Create a login.js file which can be imported into App.js. The details of the wiring is not relevant for the current discussion.

The code for the above screen is done via grid manipulations and content justifications.

import React from "react";
import {
Button,
TextField,
Grid,
Paper,
AppBar,
Typography,
Toolbar,
Link,
} from "@material-ui/core";
import {BRAND_NAME} from '../constants'
class Login extends React.Component {
constructor(props) {
super(props);
this.state = { username: "", password:"", authflag:1 };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ username: event.state.username, password: event.state.password });
}
handleSubmit(event) {
event.preventDefault();
if (this.state.username == 'admin@littech.in' && this.state.password == 'secret') {
this.props.history.push("/home");
} else {
alert('Incorrect Credntials!');
}
}
render() {
return (
<div>
<AppBar position="static" alignitems="center" color="primary">
<Toolbar>
<Grid container justify="center" wrap="wrap">
<Grid item>
<Typography variant="h6">{BRAND_NAME}</Typography>
</Grid>
</Grid>
</Toolbar>
</AppBar>
<Grid container spacing={0} justify="center" direction="row">
<Grid item>
<Grid
container
direction="column"
justify="center"
spacing={2}
className="login-form"
>
<Paper
variant="elevation"
elevation={2}
className="login-background"
>
<Grid item>
<Typography component="h1" variant="h5">
Sign in
</Typography>
</Grid>
<Grid item>
<form onSubmit={this.handleSubmit}>
<Grid container direction="column" spacing={2}>
<Grid item>
<TextField
type="email"
placeholder="Email"
fullWidth
name="username"
variant="outlined"
value={this.state.username}
onChange={(event) =>
this.setState({
[event.target.name]: event.target.value,
})
}
required
autoFocus
/>
</Grid>
<Grid item>
<TextField
type="password"
placeholder="Password"
fullWidth
name="password"
variant="outlined"
value={this.state.password}
onChange={(event) =>
this.setState({
[event.target.name]: event.target.value,
})
}
required
/>
</Grid>
<Grid item>
<Button
variant="contained"
color="primary"
type="submit"
className="button-block"
>
Submit
</Button>
</Grid>
</Grid>
</form>
</Grid>
<Grid item>
<Link href="#" variant="body2">
Forgot Password?
</Link>
</Grid>
</Paper>
</Grid>
</Grid>
</Grid>
</div>
);
}
}
export default Login;

The associated css to support the code is as follows:

.login-form
{
justify-content: center;
min-height: 90vh;
}
.button-block{
width: 100%;
}
.login-background
{
justify-content: center;
min-height: 30vh;
padding: 50px;
}

Hope this helps someone!