sports-registration-frontend/src/Login.js

import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import Container from '@material-ui/core/Container';
import {withStyles} from '@material-ui/core/styles';
import LogoSrc from './logo.jpg';
import {withRouter} from "react-router-dom";
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';

const useStyles = theme => ({
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    '& > *': {
      marginTop: theme.spacing(2),
    },
  },
  avatar: {
    width: '120px',
    height: '120px',
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
  modalPaper: {
    backgroundColor: theme.palette.background.paper,
    border: '2px solid #000',
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3),
  },
  modal: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {open: false};
    this.login = this.login.bind(this);
    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }

  componentDidMount() {
    if (document.cookie.includes('jwt')) {
      fetch('/login', {
        method: 'Post'
      })
        .then(response => response.json())
        .then(json => {
          if (json.result === 'success') {
            this.props.history.push('/type');
          } else {
            this.handleOpenModal();
          }
        });
    }
  }

  handleOpenModal() {
    this.setState({open: true});
  }

  handleCloseModal() {
    this.setState({open: false});
  }

  login(event) {
    event.preventDefault();
    const username = event.target['username'].value;
    const password = event.target['password'].value;
    fetch('/login', {
      method: 'Post',
      body: JSON.stringify({
        username,
        password
      })
    })
      .then(response => response.json())
      .then(json => {
        if (json.result === 'success') {
          this.props.history.push('/type');
        } else {
          this.handleOpenModal();
        }
      });
  }

  render() {
    return (
      <Container component="main" maxWidth="xs">
        <CssBaseline/>
        <div className={this.props.classes.paper}>
          <Avatar className={this.props.classes.avatar}>
            <img alt={"logo"} src={LogoSrc} width={120}/>
          </Avatar>
          <Typography component="h1" variant="h4">
            请登录
          </Typography>
          <form className={this.props.form} onSubmit={this.login} noValidate>
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="username"
              label="姓名"
              name="username"
            />
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              name="password"
              label="密码"
              type="password"
              id="password"
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              color="primary"
              className={this.props.classes.submit}
            >
              登录
            </Button>
          </form>
        </div>
        <Modal
          aria-labelledby="transition-modal-title"
          aria-describedby="transition-modal-description"
          className={this.props.classes.modal}
          open={this.state.open}
          onClose={this.handleCloseModal}
          closeAfterTransition
          BackdropComponent={Backdrop}
          BackdropProps={{
            timeout: 500,
          }}
        >
          <Fade in={this.state.open}>
            <div className={this.props.classes.modalPaper}>
              <h2 id="transition-modal-title">登录失败</h2>
              <p id="transition-modal-description">请检查用户名和密码后重试</p>
            </div>
          </Fade>
        </Modal>
      </Container>
    );
  }
}

export default withRouter(withStyles(useStyles)(Login));