Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from "react";
- import PropTypes from "prop-types";
- import { connect } from "react-redux";
- import { login } from "../actions/userActions";
- import Avatar from "@material-ui/core/Avatar";
- import Button from "@material-ui/core/Button";
- import CssBaseline from "@material-ui/core/CssBaseline";
- import LockIcon from "@material-ui/icons/LockOutlined";
- import Typography from "@material-ui/core/Typography";
- import {
- withStyles,
- MuiThemeProvider,
- createMuiTheme
- } from "@material-ui/core/styles";
- import { ValidatorForm, TextValidator } from "react-material-ui-form-validator";
- const styles = theme => ({
- layout: {
- width: "auto",
- marginLeft: theme.spacing.unit * 3,
- alignItems: "center",
- marginRight: theme.spacing.unit * 3,
- [theme.breakpoints.up(400 + theme.spacing.unit * 3 * 2)]: {
- width: 400,
- marginLeft: "auto",
- marginRight: "auto"
- }
- },
- avatar: {
- margin: theme.spacing.unit,
- position: "relative",
- left: "49%",
- transform: "translate(-50%, -50%)",
- backgroundColor: custom_theme.palette.primary.main
- },
- form: {
- width: "100%",
- marginTop: theme.spacing.unit
- },
- submit: {
- marginTop: theme.spacing.unit * 3
- }
- });
- const custom_theme = createMuiTheme({
- palette: {
- primary: { main: "#d79b51" }
- }
- });
- class Login extends Component {
- constructor(props) {
- super(props);
- this.state = {
- username: "",
- password: ""
- };
- this.handleChange = this.handleChange.bind(this);
- this.handleSubmit = this.handleSubmit.bind(this);
- }
- componentDidMount() {
- // Redirecting to home if user is already logged in
- if (this.props.users.isAuthenticated) {
- this.props.history.push("/");
- }
- // Adding custom validation rules
- ValidatorForm.addValidationRule("isValidUsername", value => {
- return value.trim().match("^[a-z0-9_-]{3,15}$") !== null;
- });
- ValidatorForm.addValidationRule("isValidPassword", value => {
- return value.trim().length >= 6;
- });
- }
- // This lifecycle method is invoked before a mounted component receives new props
- componentWillReceiveProps(nextProps) {
- if (nextProps.users.isAuthenticated) {
- this.props.history.push("/");
- }
- }
- handleChange(e) {
- const { name, value } = e.target;
- this.setState({ [name]: value });
- }
- handleSubmit(e) {
- e.preventDefault();
- const { username, password } = this.state;
- const { dispatch } = this.props;
- if (username && password) {
- dispatch(login(username, password));
- }
- }
- render() {
- const { classes } = this.props;
- const { username, password } = this.state;
- return (
- <section className="page-section cta">
- <div className="row">
- <div className="col-xl-7 mx-auto">
- <div className="cta-inner rounded">
- <React.Fragment>
- <CssBaseline />
- <main className={classes.layout}>
- <Avatar className={classes.avatar}>
- <LockIcon />
- </Avatar>
- <Typography align="center" variant="headline">
- Sign in
- </Typography>
- <ValidatorForm
- ref="form"
- className={classes.form}
- onSubmit={this.handleSubmit}
- onError={errors => console.log(errors)}
- >
- <MuiThemeProvider theme={custom_theme}>
- <TextValidator
- label="Username"
- onChange={this.handleChange}
- name="username"
- value={username}
- validators={["required", "isValidUsername"]}
- errorMessages={[
- "Username is required!",
- "Invalid username!"
- ]}
- margin="normal"
- required
- fullWidth
- autoComplete="username"
- autoFocus
- />
- </MuiThemeProvider>
- <MuiThemeProvider theme={custom_theme}>
- <TextValidator
- label="Password"
- type="password"
- onChange={this.handleChange}
- name="password"
- value={password}
- validators={["required", "isValidPassword"]}
- errorMessages={[
- "Password is required!",
- "Password must be at least 6 characters long!"
- ]}
- margin="normal"
- required
- fullWidth
- autoComplete="current-password"
- />
- </MuiThemeProvider>
- <MuiThemeProvider theme={custom_theme}>
- <Button
- type="submit"
- fullWidth
- variant="raised"
- color="primary"
- className={classes.submit}
- >
- Sign In
- </Button>
- </MuiThemeProvider>
- </ValidatorForm>
- </main>
- </React.Fragment>
- </div>
- </div>
- </div>
- </section>
- );
- }
- }
- Login.propTypes = {
- classes: PropTypes.object.isRequired,
- users: PropTypes.object.isRequired
- };
- const mapStateToProps = state => ({
- users: state.users,
- errors: state.errors
- });
- // Exporting with styles makes the inline styles become props of the function/class, which can be used in the render function.
- export default connect(mapStateToProps)(withStyles(styles)(Login));
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement