yugRfsTk

1import React from 'react';
2import axios from 'axios';
3import Link from 'react-router-dom/Link';
4import qs from 'query-string';
5import Helmet from 'react-helmet';
6import { setToken } from '../utils/auth';
7import {
8  Page,
9  Block,
10  Card,
11  Text,
12  Form,
13  InputGroup,
14  Input,
15  InputLabel,
16  Button
17} from '@palmerhq/ui';
18
19class Login extends React.Component {
20  state = {
21    email: null,
22    password: null,
23    error: null
24  }
25
26  handleSubmit = e => {
27    e.preventDefault();
28    const params = qs.stringify({
29      username: this.state.email,
30      password: this.state.password,
31      grant_type: 'password',
32      scope: 'admin'
33    });
34    axios.post(API_URL + '/oauth/token', params).then(
35      res => {
36        setToken(res.data.access_token);
37        window.location.reload();
38      },
39      error => console.log(error) ||
40        this.setState({
41          error: (
42            error.message
43              ? error.message
44              : 'An unknown error occurred. Please try again.'
45          )
46        })
47    );
48  }
49  
50  handleChange = e => this.setState({
51    [e.target.name]: e.target.value
52  })
53
54  render() {
55    return (
56      <Block>
57        <Helmet title="Login" />
58        <Page superCentered>
59          <Block margin="2rem">
60            <Text size="xxl" bold>Login</Text>
61          </Block>
62          <Card padding="2rem" maxWidth="320px">
63            <Form
64              layout="vertical"
65              error={this.state.error}
66              onSubmit={this.handleSubmit}
67            >
68              <InputGroup>
69                <InputLabel>
70                  Email
71
72                  <Input
73                    wide
74                    onChange={this.handleChange}
75                    name="email"
76                    type="text"
77                    required
78                  />
79                </InputLabel>
80                <InputLabel>
81                  Password
82
83                  <Input
84                    wide
85                    onChange={this.handleChange}
86                    name="password"
87                    type="text"
88                    required
89                  />
90                </InputLabel>
91                <Button submit text="Login" intent="primary" />
92              </InputGroup>
93            </Form>
94          </Card>
95        </Page>
96      </Block>
97    );
98  }
99}
100
101export default Login;