diff options
Diffstat (limited to 'vnext/src/components/LoginButton.js')
-rw-r--r-- | vnext/src/components/LoginButton.js | 55 |
1 files changed, 48 insertions, 7 deletions
diff --git a/vnext/src/components/LoginButton.js b/vnext/src/components/LoginButton.js index c332de14..2016e853 100644 --- a/vnext/src/components/LoginButton.js +++ b/vnext/src/components/LoginButton.js @@ -7,29 +7,70 @@ import Modal from './Modal'; export default class LoginButton extends React.Component { constructor(props) { super(props); - this.state = { isOpen: false }; + this.state = { + isOpen: false, + username: '', + password: '' + }; + this.toggleModal = this.toggleModal.bind(this); } toggleModal(event) { - event.preventDefault() + 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(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 ( <React.Fragment> - <a onClick={this.toggleModal.bind(this)}><Icon name="ei-user" size="s" />{this.props.title}</a> + <a onClick={this.toggleModal}><Icon name="ei-user" size="s" />{this.props.title}</a> <Modal show={this.state.isOpen} - onClose={this.toggleModal.bind(this)}> + onClose={this.toggleModal}> <div className="dialoglogin"> <p>Please, introduce yourself:</p> <a href="/_fblogin" id="signfb"><Icon name="ei-sc-facebook" size="s" />Login with facebook</a> <a href="/_vklogin" id="signvk"><Icon name="ei-sc-vk" size="s" />Login with VK</a> <p>Already registered?</p> - <form action="/login" method="POST"> - <input className="signinput" type="text" name="username" placeholder="Username..." /><br /> - <input className="signinput" type="password" name="password" placeholder="Password..." /><br /> + <form onSubmit={this.login.bind(this)}> + <input className="signinput" + type="text" + name="username" + placeholder="Username..." + value={this.state.username} onChange={this.usernameChanged.bind(this)} /><br /> + <input className="signinput" + type="password" name="password" + placeholder="Password..." + value={this.state.password} onChange={this.passwordChanged.bind(this)} /><br /> <input className="signsubmit" type="submit" value="OK" /> </form> </div> |