import React from 'react'; import PropTypes from 'prop-types'; import Icon from './Icon'; import Modal from './Modal'; import { me } 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 ( {this.props.title}

Please, introduce yourself:

Log in Log in

Already registered?



); } } 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' }