content: import withRoot from './modules/withRoot';
  // --- Post bootstrap -----
  import React from 'react';
  import PropTypes from 'prop-types';
  import { Field, Form, FormSpy } from 'react-final-form';
  import { withStyles } from '@material-ui/core/styles';
  import Link from '@material-ui/core/Link';
  import Typography from './modules/components/Typography';
  import AppFooter from './modules/views/AppFooter';
  import AppAppBar from './modules/views/AppAppBar';
  import AppForm from './modules/views/AppForm';
  import { email, required } from './modules/form/validation';
  import RFTextField from './modules/form/RFTextField';
  import FormButton from './modules/form/FormButton';
  import FormFeedback from './modules/form/FormFeedback';
  import compose from 'docs/src/modules/utils/compose';
  
  const styles = theme => ({
    form: {
      marginTop: theme.spacing(6),
    },
    button: {
      marginTop: theme.spacing(3),
      marginBottom: theme.spacing(2),
    },
    feedback: {
      marginTop: theme.spacing(2),
    },
  });
  
  class SignIn extends React.Component {
    state = {
      sent: false,
    };
  
    validate = values => {
      const errors = required(['email', 'password'], values, this.props);
  
      if (!errors.email) {
        const emailError = email(values.email, values, this.props);
        if (emailError) {
          errors.email = email(values.email, values, this.props);
        }
      }
  
      return errors;
    };
  
    handleSubmit = () => {};
  
    render() {
      const { classes } = this.props;
      const { sent } = this.state;
  
      return (
        <React.Fragment>
          <AppAppBar />
          <AppForm>
            <React.Fragment>
              <Typography variant="h3" gutterBottom marked="center" align="center">
                Sign In
              </Typography>
              <Typography variant="body2" align="center">
                {'Not a member yet? '}
                <Link href="/premium-themes/onepirate/sign-up/" align="center" underline="always">
                  Sign Up here
                </Link>
              </Typography>
            </React.Fragment>
            <Form
              onSubmit={this.handleSubmit}
              subscription={{ submitting: true }}
              validate={this.validate}
            >
              {({ handleSubmit, submitting }) => (
                <form onSubmit={handleSubmit} className={classes.form} noValidate>
                  <Field
                    autoComplete="email"
                    autoFocus
                    component={RFTextField}
                    disabled={submitting || sent}
                    fullWidth
                    label="Email"
                    margin="normal"
                    name="email"
                    required
                    size="large"
                  />
                  <Field
                    fullWidth
                    size="large"
                    component={RFTextField}
                    disabled={submitting || sent}
                    required
                    name="password"
                    autoComplete="current-password"
                    label="Password"
                    type="password"
                    margin="normal"
                  />
                  <FormSpy subscription={{ submitError: true }}>
                    {({ submitError }) =>
                      submitError ? (
                        <FormFeedback className={classes.feedback} error>
                          {submitError}
                        </FormFeedback>
                      ) : null
                    }
                  </FormSpy>
                  <FormButton
                    className={classes.button}
                    disabled={submitting || sent}
                    size="large"
                    color="secondary"
                    fullWidth
                  >
                    {submitting || sent ? 'In progress…' : 'Sign In'}
                  </FormButton>
                </form>
              )}
            </Form>
            <Typography align="center">
              <Link underline="always" href="/premium-themes/onepirate/forgot-password/">
                Forgot password?
              </Link>
            </Typography>
          </AppForm>
          <AppFooter />
        </React.Fragment>
      );
    }
  }
  
  SignIn.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default compose(
    withRoot,
    withStyles(styles),
  )(SignIn);
  