Login

Login.js

import React from 'react';
import axios from 'axios';
import Link from 'react-router-dom/Link';
import qs from 'query-string';
import Helmet from 'react-helmet';
import { setToken } from '../utils/auth';
import {
  Page,
  Block,
  Card,
  Text,
  Form,
  InputGroup,
  Input,
  InputLabel,
  Button
} from '@palmerhq/ui';

class Login extends React.Component {
  state = {
    email: null,
    password: null,
    error: null
  }

  handleSubmit = e => {
    e.preventDefault();
    const params = qs.stringify({
      username: this.state.email,
      password: this.state.password,
      grant_type: 'password',
      scope: 'admin'
    });
    axios.post(API_URL + '/oauth/token', params).then(
      res => {
        setToken(res.data.access_token);
        window.location.reload();
      },
      error => console.log(error) ||
        this.setState({
          error: (
            error.message
              ? error.message
              : 'An unknown error occurred. Please try again.'
          )
        })
    );
  }
  
  handleChange = e => this.setState({
    [e.target.name]: e.target.value
  })

  render() {
    return (
      <Block>
        <Helmet title="Login" />
        <Page superCentered>
          <Block margin="2rem">
            <Text size="xxl" bold>Login</Text>
          </Block>
          <Card padding="2rem" maxWidth="320px">
            <Form
              layout="vertical"
              error={this.state.error}
              onSubmit={this.handleSubmit}
            >
              <InputGroup>
                <InputLabel>
                  Email

                  <Input
                    wide
                    onChange={this.handleChange}
                    name="email"
                    type="text"
                    required
                  />
                </InputLabel>
                <InputLabel>
                  Password

                  <Input
                    wide
                    onChange={this.handleChange}
                    name="password"
                    type="text"
                    required
                  />
                </InputLabel>
                <Button submit text="Login" intent="primary" />
              </InputGroup>
            </Form>
          </Card>
        </Page>
      </Block>
    );
  }
}

export default Login;