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
106
107
108
109
110
|
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 (
<React.Fragment>
<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={`https://api.juick.com/_fblogin?state=${window.location.protocol}//${window.location.host}${window.location.pathname}`} style={facebookButtonStyle}>
<Icon name="ei-sc-facebook" size="s" noFill={true} />Log in
</a>
<a href={`https://api.juick.com/_vklogin?state=${window.location.protocol}//${window.location.host}${window.location.pathname}`} style={vkButtonStyle}>
<Icon name="ei-sc-vk" size="s" noFill={true} />
Log in
</a>
</div>
<p>Already registered?</p>
<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>
</Modal>
</React.Fragment>
);
}
}
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'
}
|
