content: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import Formsy from 'formsy-react';
  import FormsyText from 'formsy-material-ui/lib/FormsyText';
  import RaisedButton from 'material-ui/RaisedButton';
  import './LoginPage.scss';
  
  export default class LoginPage extends Component {
    constructor(props) {
      super(props);
      this.state = {
        canSubmit: false
      };
      this.enableButton = this.enableButton.bind(this);
      this.disableButton = this.disableButton.bind(this);
      this.onSubmit = this.onSubmit.bind(this);
    }
  
    enableButton() {
      this.setState({
        canSubmit: true
      });
    }
  
    disableButton() {
      this.setState({
        canSubmit: false
      });
    }
  
    onSubmit(form) {
      this.props.postLogin(form);
    }
  
    render() {
      const { isFetching, error, data } = this.props.login;
  
      return (
        <div id="login-page">
          <h1>Login</h1>
          <Formsy.Form
            onValidSubmit={this.onSubmit}
            onValid={this.enableButton}
            onInvalid={this.disableButton}
            id="login-form"
          >
            <FormsyText
              name="username"
              validations="minLength:4"
              validationError="Usernames have at least 4 characters"
              floatingLabelText="Username"
              required
            />
            <FormsyText
              name="password"
              type="password"
              validations="minLength:6"
              validationError="Passwords have at least 6 characters"
              floatingLabelText="Password"
              required
            />
            <RaisedButton
              type="submit"
              label="Login"
              disabled={!this.state.canSubmit || isFetching}
              className="submit"
            />
          </Formsy.Form>
          {error && <span className="error">{error}</span>}
          {data && <span className="success">{data}</span>}
        </div>
      );
    }
  }
  
  LoginPage.propTypes = {
    login: PropTypes.object,
    postLogin: PropTypes.func
  };
  