Fakultas Ilmu Komputer UI

LoginForm.jsx 2.32 KB
Newer Older
1
import React from 'react';
2
import { Form, Input, Button, Message, Image, Card } from 'semantic-ui-react';
3
import { browserHistory } from 'react-router';
4
import Server from '../lib/Server';
5

6
export default class LoginForm extends React.Component {
7
8

  static propTypes = {
9
    type: React.PropTypes.string.isRequired,
10
11
    imgSrc: React.PropTypes.string,
    imgSize: React.PropTypes.string,
12
    header: React.PropTypes.string,
13
14
15
16
17
  };

  static defaultProps = {
    imgSrc: '',
    imgSize: 'small',
18
    header: 'Login',
19
20
21
22
23
  };

  constructor(props) {
    super(props);
    /* istanbul ignore next */
24
25
    this.state = { email: '', password: '', errorFlag: false };
    this.handleChange = this.handleChange.bind(this);
26
27
28
    this.handleSubmit = this.handleSubmit.bind(this);
  }

29
  handleChange(event, name) {
30
31
32
    this.setState({ [name]: event.target.value });
  }

33
34
35
36
37
  handleSubmit(event) {
    event.preventDefault();
    const data = {
      type: this.props.type,
      email: this.state.email,
38
39
      password: this.state.password,
    };
40
41
42
43
44
    Server.post('api/login/', data).then(() => {
      browserHistory.push('/home');
    }, () => {
      this.setState({ errorFlag: true });
    });
45
46
  }

47
  render = () => (
48

49
    <div className="formLogin" >
50
51


52
      <Form onSubmit={e => this.handleSubmit(e)} error={this.state.errorFlag}>
53
54
55
        <div className="formHeader">
          <Image src={`./assets/img/${this.props.imgSrc}`} size={this.props.imgSize} verticalAlign="middle" /> <span>{ this.props.header }</span>
        </div>
56
        <Form.Group widths="equal">
57
          <Form.Field required>
58
            <label htmlFor="id"> Email </label>
59
            <Input type="text" id="email" icon="user" iconPosition="left" placeholder="email" onChange={e => this.handleChange(e, 'email')} required />
60
61
62
63
          </Form.Field>
        </Form.Group>

        <Form.Group widths="equal">
64
          <Form.Field required>
65
            <label htmlFor="password"> Password </label>
66
            <Input type="password" id="password" icon="key" iconPosition="left" placeholder="password" onChange={e => this.handleChange(e, 'password')} required />
67
68
69
          </Form.Field>
        </Form.Group>

70
        <Button type="submit" fluid color="blue">Login</Button>
71
72
73
74
        <Message
          error
          content="Login gagal: email atau password salah."
        />
75
76

      </Form>
77
78


79
    </div>
80

81
82
  )
}