import React from 'react'; import PropTypes from 'prop-types'; import Icon from './Icon'; import Modal from './Modal'; export default class LoginButton extends React.Component { constructor(props) { super(props); this.state = { isOpen: false, username: '', password: '' }; this.toggleModal = this.toggleModal.bind(this); } 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(); let headers = new Headers(); headers.append('Authorization', 'Basic ' + window.btoa(unescape(encodeURIComponent(this.state.username + ":" + this.state.password)))); fetch('https://api.juick.com/auth', { method: 'GET', credentials: 'omit', headers: headers }).then(response => { return response.text() }) .then(data => { this.toggleModal(); this.props.onAuth(data); } ).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' }