mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-13 02:46:28 +00:00
Improve user generator UX. Still a bit buggy.
This commit is contained in:
Reckless_Satoshi
parent
f4644836d3
commit
790e96cc1b
@ -140,10 +140,16 @@ class UserGenerator(APIView):
|
||||
# Create new credentials if nickname is new
|
||||
if len(User.objects.filter(username=nickname)) == 0:
|
||||
User.objects.create_user(username=nickname, password=token, is_staff=False)
|
||||
|
||||
else:
|
||||
## TODO only report a match was found if it has
|
||||
## been at least 30 minutes since user creation
|
||||
## Why: frontend gets confused to say Welcome back too soon
|
||||
context['found'] = 'A matching nickname was found'
|
||||
|
||||
# TODO, "A matching nickname was found, but it is not yours!"
|
||||
# why? It is unlikely but there is only 20 billion names
|
||||
# but if the token is not exact
|
||||
|
||||
# TODO Keep user authenticated.
|
||||
# BaseBackend.authenticate(self, request=None,username=nickname, password=token)
|
||||
|
||||
|
||||
8
frontend/package-lock.json
generated
8
frontend/package-lock.json
generated
@ -2303,6 +2303,14 @@
|
||||
"semver": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"material-ui-image": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/material-ui-image/-/material-ui-image-3.3.2.tgz",
|
||||
"integrity": "sha512-WE5QE0Rjdx9jPKuI0LWI7s8VQ9cifPIXObu8AUCRcidXGV3NqPI9C8c9A/C0MofKpkZ3buG8+IT9N7GgSmxXeg==",
|
||||
"requires": {
|
||||
"prop-types": "^15.5.8"
|
||||
}
|
||||
},
|
||||
"merge-stream": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
"@babel/plugin-proposal-class-properties": "^7.16.7",
|
||||
"@material-ui/core": "^4.12.3",
|
||||
"@material-ui/icons": "^4.11.2",
|
||||
"material-ui-image": "^3.3.2",
|
||||
"react-router-dom": "^5.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ export default class App extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className='appCenter'>
|
||||
<HomePage />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
import React, { Component } from "react";
|
||||
import { Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup, Menu} from "@material-ui/core"
|
||||
import { Link } from 'react-router-dom'
|
||||
import Image from 'material-ui-image'
|
||||
|
||||
export default class UserGenPage extends Component {
|
||||
constructor(props) {
|
||||
@ -6,7 +9,7 @@ export default class UserGenPage extends Component {
|
||||
this.state = {
|
||||
token: this.genBase62Token(32),
|
||||
};
|
||||
this.getGeneratedUser();
|
||||
this.getGenerateUser();
|
||||
}
|
||||
|
||||
// sort of cryptographically strong function to generate Base62 token client-side
|
||||
@ -20,30 +23,87 @@ export default class UserGenPage extends Component {
|
||||
.substring(0, length);
|
||||
}
|
||||
|
||||
getGeneratedUser() {
|
||||
getGenerateUser() {
|
||||
fetch('/api/usergen' + '?token=' + this.state.token)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
this.setState({
|
||||
nickname: data.nickname,
|
||||
bit_entropy: data.token_bits_entropy,
|
||||
avatar_url: 'static/assets/avatars/' + data.nickname + '.png',
|
||||
shannon_entropy: data.token_shannon_entropy,
|
||||
bad_request: data.bad_request,
|
||||
found: data.found,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Fix next two handler functions so they work sequentially
|
||||
// at the moment they make the request generate a new user in parallel
|
||||
// to updating the token in the state. So the it works a bit weird.
|
||||
|
||||
handleAnotherButtonPressed=(e)=>{
|
||||
this.setState({
|
||||
token: this.genBase62Token(32),
|
||||
})
|
||||
this.getGenerateUser();
|
||||
}
|
||||
|
||||
handleChangeToken=(e)=>{
|
||||
this.setState({
|
||||
token: e.target.value,
|
||||
})
|
||||
this.getGenerateUser();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<p>This is the landing and user generator page</p>
|
||||
<p>Have a token of appreciation {this.state.token}</p>
|
||||
<p>Username is {this.state.nickname}</p>
|
||||
<p>Shannon entropy is {this.state.shannon_entropy}</p>
|
||||
<p>Entropy depth is {this.state.bit_entropy} bits</p>
|
||||
<p>Bad request: {this.state.bad_request}</p>
|
||||
</div>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={12} align="center">
|
||||
<TextField
|
||||
error={this.state.bad_request}
|
||||
label='Token - Store safely'
|
||||
required='true'
|
||||
value={this.state.token}
|
||||
variant='standard'
|
||||
helperText={this.state.bad_request}
|
||||
size='small'
|
||||
// multiline = {true}
|
||||
onChange={this.handleChangeToken}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} align="center">
|
||||
<div style={{ width: 200, height: 200 }}>
|
||||
<Image
|
||||
imageStyle={{ width: 200, height: 200}}
|
||||
disableError='true'
|
||||
src={this.state.avatar_url}
|
||||
/>
|
||||
</div>
|
||||
</Grid>
|
||||
<Grid item xs={12} align="center">
|
||||
<Typography component="h5" variant="h5">
|
||||
<b>{this.state.nickname ? "⚡"+this.state.nickname+"⚡" : ""}</b>
|
||||
</Typography>
|
||||
</Grid>
|
||||
{
|
||||
this.state.found ?
|
||||
<Grid item xs={12} align="center">
|
||||
<Typography component="subtitle2" variant="subtitle2" color='primary'>
|
||||
We found your robosat, welcome back!<br/>
|
||||
</Typography>
|
||||
<Button variant='contained' color='primary' to='/home' component={Link}>Cool!</Button>
|
||||
</Grid>
|
||||
:
|
||||
<Grid item xs={12} align="center">
|
||||
<Button variant='contained' color='primary' to='/home' component={Link}>Take This Robosat!</Button>
|
||||
</Grid>
|
||||
}
|
||||
|
||||
<Grid item xs={12} align="center">
|
||||
<Button variant='contained' to='/' component={Link} onClick={this.handleAnotherButtonPressed}>Give Me Another</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -16,5 +16,11 @@ body {
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.appCenter {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user