blob: 768470374fc19f074d8fa2dc2c76302747057424 (
plain)
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
|
import React from "react";
import PropTypes from "prop-types";
import { Button, Input } from "semantic-ui-react";
class Login extends React.Component {
static propTypes = {
setToken: PropTypes.func.isRequired,
setError: PropTypes.func.isRequired
};
constructor(props) {
super(props);
this.state = {
email: "",
password: "",
error: false
};
this.handleInput = this.handleInput.bind(this);
this.login = this.login.bind(this);
this.logout = this.logout.bind(this);
}
// NOTE: btoa() limits email, password to ASCII
login(email, password) {
const url = process.env.JWT_URL + "/api/v1.0/auth";
fetch(url, {
method: "POST",
headers: { Authorization: "Basic " + btoa(email + ":" + password) }
})
.then(resp => {
if (resp.status !== 200) throw resp;
return resp;
})
.then(resp => resp.json())
.then(data => {
this.props.setToken(data.access_token);
})
.catch(resp => {
if (resp.status === 401) this.setState({ error: true });
else
this.props.setError(
new Error(
`Unexpected response status: ${resp.status} ${resp.statusText}`
)
);
});
}
logout() {
localStorage.removeItem("token");
}
handleInput(e) {
this.setState({
[e.target.name]: e.target.value
});
}
render() {
return (
<div id="login-container">
<form
id="login"
onSubmit={e => {
e.preventDefault();
this.login(this.state.email, this.state.password);
}}
>
<h1></h1>
<Input
type="text"
name="email"
placeholder="Username..."
onChange={this.handleInput}
required
/>
<Input
type="password"
placeholder="Password..."
name="password"
onChange={this.handleInput}
required
/>
<Button color="green" className="submit" type="submit">
Sign in
</Button>
{this.state.error && (
<p className="error">Wrong username or password</p>
)}
</form>
</div>
);
}
}
export default Login;
|
