a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow requesting user API key

Browse Source
This commit is contained in:
Tom Russell 2018-10-20 12:20:10 +01:00
parent daca8e46ee
commit ab2db30bc4
5 changed files with 99 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/src/frontend/app.js
View File

@ -27,6 +27,7 @@ class App extends React.Component {
building: props.building,
};
this.login = this.login.bind(this);
this.updateUser = this.updateUser.bind(this);
this.logout = this.logout.bind(this);
this.selectBuilding = this.selectBuilding.bind(this);
}
@ -39,6 +40,11 @@ class App extends React.Component {
this.setState({user: user});
}
updateUser(user){
console.log(user);
this.setState({user: { ...this.state.user, ...user }});
}
logout() {
this.setState({user: undefined});
}
@ -94,7 +100,11 @@ class App extends React.Component {
<SignUp user={this.state.user} login={this.login} />
</Route>
<Route exact path="/my-account.html">
<MyAccountPage user={this.state.user} logout={this.logout} />
<MyAccountPage
user={this.state.user}
updateUser={this.updateUser}
logout={this.logout}
/>
</Route>
<Route component={NotFound} />
</Switch>

55
app/src/frontend/my-account.js
View File

@ -9,10 +9,11 @@ class MyAccountPage extends Component {
this.state = {
error: undefined
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleLogout = this.handleLogout.bind(this);
this.handleGenerateKey = this.handleGenerateKey.bind(this);
}
handleSubmit(event) {
handleLogout(event) {
event.preventDefault();
this.setState({error: undefined});
@ -32,24 +33,66 @@ class MyAccountPage extends Component {
);
}
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 className="lead">
<p>
Colouring London is under active development, please report any
bugs on <a href="http://github.com/tomalrussell/colouring-london/issues">
GitHub</a>.
</p>
<Link to="/map/age.html" className="btn btn-primary">Start colouring</Link>
<ErrorBox msg={this.state.error} />
<form method="POST" action="/logout" onSubmit={this.handleSubmit}>
<input className="btn btn-secondary" type="submit" value="Log out"/>
<form method="POST" action="/logout" onSubmit={this.handleLogout}>
<div className="buttons-container">
<Link to="/map/age.html" className="btn btn-primary">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">Experimental features</h2>
<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}>
<input className="btn btn-primary" type="submit" value="Generate API key"/>
</form>
</section>
</article>
);

16
app/src/server.js
View File

@ -16,7 +16,7 @@ import pgConnect from 'connect-pg-simple';
import App from './frontend/app';
import db from './db';
import { authUser, createUser, getUserById } from './user';
import { authUser, createUser, getUserById, getNewUserAPIKey } from './user';
import { queryBuildingsAtPoint, queryBuildingsByReference, getBuildingById,
saveBuilding } from './building';
import tileserver from './tileserver';
@ -281,4 +281,18 @@ server.get('/users/me', function(req, res){
});
});
// POST generate API key
server.post('/api/key', function(req, res){
if (!req.session.user_id) {
res.send({error: 'Must be logged in'});
return
}
getNewUserAPIKey(req.session.user_id).then(function(api_key){
res.send(api_key);
}).catch(function(error){
res.send(error);
});
})
export default server;

23
app/src/user.js
View File

@ -73,7 +73,7 @@ function authUser(username, password) {
function getUserById(user_id) {
return db.one(
`SELECT
username, email, registered
username, email, registered, api_key
FROM users
WHERE
user_id = $1
@ -86,4 +86,23 @@ function getUserById(user_id) {
});
}
export { getUserById, createUser, authUser }
function getNewUserAPIKey(user_id) {
return db.one(
`UPDATE
users
SET
api_key = gen_random_uuid()
WHERE
user_id = $1
RETURNING
api_key
`, [
user_id
]
).catch(function(error){
console.error('Error:', error)
return {error: 'Failed to generate new API key.'};
});
}
export { getUserById, createUser, authUser, getNewUserAPIKey }

4
migrations/001.core.up.sql
View File

@ -89,7 +89,9 @@ CREATE TABLE IF NOT EXISTS users (
-- user category (optional, self-selected)
category integer REFERENCES user_categories NOT NULL DEFAULT 1,
-- user access level (essential, default untrusted)
access_level integer REFERENCES user_access_levels NOT NULL DEFAULT 1
access_level integer REFERENCES user_access_levels NOT NULL DEFAULT 1,
-- user API key - to give limited query/edit access
api_key uuid UNIQUE default NULL
);
ALTER TABLE users ADD CONSTRAINT users_username_len CHECK (length(username) < 30);
ALTER TABLE users ADD CONSTRAINT users_email_len CHECK (length(email) < 50);