colouring-montreal/app/src/frontend/my-account.js
2019-05-27 18:26:29 +01:00

126 lines
4.3 KiB
JavaScript

import React, { Component } from 'react';
import { Link, Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';
import ErrorBox from './error-box';
class MyAccountPage extends Component {
constructor(props) {
super(props);
this.state = {
error: undefined
};
this.handleLogout = this.handleLogout.bind(this);
this.handleGenerateKey = this.handleGenerateKey.bind(this);
}
handleLogout(event) {
event.preventDefault();
this.setState({error: undefined});
fetch('/logout', {
method: 'POST',
credentials: 'same-origin'
}).then(
res => res.json()
).then(function(res){
if (res.error) {
this.setState({error: res.error})
} else {
this.props.logout();
}
}.bind(this)).catch(
(err) => this.setState({error: err})
);
}
handleGenerateKey(event) {
event.preventDefault();
this.setState({error: undefined});
fetch('/api/key', {
method: 'POST',
credentials: 'same-origin'
}).then(
res => res.json()
).then(function(res){
if (res.error) {
this.setState({error: res.error})
} else {
this.props.updateUser(res);
}
}.bind(this)).catch(
(err) => this.setState({error: err})
);
}
render() {
if (this.props.user && !this.props.user.error) {
return (
<article>
<section className="main-col">
<h1 className="h1">Welcome, {this.props.user.username}!</h1>
<p>
Colouring London is under active development, Please <a href="https://discuss.colouring.london/">discuss
suggestions for improvements</a> and <a
href="https://github.com/tomalrussell/colouring-london/issues">
report issues or problems</a>.
</p>
<ErrorBox msg={this.state.error} />
<form method="POST" action="/logout" onSubmit={this.handleLogout}>
<div className="buttons-container">
<Link to="/edit/age.html" className="btn btn-warning">Start colouring</Link>
<input className="btn btn-secondary" type="submit" value="Log out"/>
</div>
</form>
<hr/>
<h2 className="h2">My Details</h2>
<h3 className="h3">Username</h3>
<p>{this.props.user.username}</p>
<h3 className="h3">Email Address</h3>
<p>{this.props.user.email? this.props.user.email : '-'}</p>
<h3 className="h3">Registered</h3>
<p>{this.props.user.registered.toString()}</p>
<hr/>
<h2 className="h2">Techical details</h2>
<p>Are you a software developer? If so, you might be interested in these.</p>
<h3 className="h3">API key</h3>
<p>{this.props.user.api_key? this.props.user.api_key : '-'}</p>
<form method="POST" action="/api/key" onSubmit={this.handleGenerateKey} className="form-group mb-3">
<input className="btn btn-warning" type="submit" value="Generate API key"/>
</form>
<h3 className="h3">GitHub</h3>
<a href="http://github.com/tomalrussell/colouring-london/">Colouring London Github repository</a>
</section>
</article>
);
} else {
return (
<Redirect to="/login.html" />
)
}
}
}
MyAccountPage.propTypes = {
user: PropTypes.shape({
username: PropTypes.string,
email: PropTypes.string,
registered: PropTypes.string,
api_key: PropTypes.string,
error: PropTypes.object
}),
updateUser: PropTypes.func,
logout: PropTypes.func
}
export default MyAccountPage;