aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components/LoginButton.js
blob: 5bc58ef69adc032fc8592178de6573fe25e06cbd (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import React from 'react';
import PropTypes from 'prop-types';
import Icon from './Icon';
import Modal from './Modal';

import { me, facebookLink, vkLink } from '../api';

export default class LoginButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      username: '',
      password: ''
    };
  }
  toggleModal = (event) => {
    if (event) {
      event.preventDefault();
    }
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  usernameChanged = (event) => {
    this.setState({
      username: event.target.value
    });
  }
  passwordChanged = (event) => {
    this.setState({
      password: event.target.value
    });
  }
  login = (event) => {
    event.preventDefault();
    me(this.state.username, this.state.password)
      .then(response => {
        this.toggleModal();
        this.props.onAuth(response);
      }
      ).catch(ex => {
        console.log(ex);
      });
  }

  render() {
    return (
      <>
        <a onClick={this.toggleModal}><Icon name="ei-user" size="s" />{this.props.title}</a>
        <Modal show={this.state.isOpen}
          onClose={this.toggleModal}>
          <div className="dialoglogin">
            <p>Please, introduce yourself:</p>
            <div style={socialButtonsStyle}>
              <a href={facebookLink()} style={facebookButtonStyle}>
                <Icon name="ei-sc-facebook" size="s" noFill={true} />Log in
              </a>
              <a href={vkLink()} style={vkButtonStyle}>
                <Icon name="ei-sc-vk" size="s" noFill={true} />
                Log in
             </a>
            </div>
            <p>Already registered?</p>
            <form onSubmit={this.login}>
              <input className="signinput"
                type="text"
                name="username"
                placeholder="Username..."
                value={this.state.username} onChange={this.usernameChanged} /><br />
              <input className="signinput"
                type="password" name="password"
                placeholder="Password..."
                value={this.state.password} onChange={this.passwordChanged} /><br />
              <input className="signsubmit" type="submit" value="OK" />
            </form>
          </div>
        </Modal>
      </>
    );
  }
}

LoginButton.propTypes = {
  title: PropTypes.string.isRequired,
  onAuth: PropTypes.func.isRequired
};

const socialButtonsStyle = {
  display: 'flex',
  justifyContent: 'space-evenly',
  padding: '4px'
};

const facebookButtonStyle = {
  color: '#fff',
  padding: '2px 14px',
  background: '#3b5998'
};

const vkButtonStyle = {
  color: '#fff',
  padding: '2px 14px',
  background: '#4c75a3'
};