mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-14 03:16:24 +00:00
Improve user generator UX. Still a bit buggy.
This commit is contained in:
parent
f4644836d3
commit
d7979086ed
@ -140,10 +140,16 @@ class UserGenerator(APIView):
|
|||||||
# Create new credentials if nickname is new
|
# Create new credentials if nickname is new
|
||||||
if len(User.objects.filter(username=nickname)) == 0:
|
if len(User.objects.filter(username=nickname)) == 0:
|
||||||
User.objects.create_user(username=nickname, password=token, is_staff=False)
|
User.objects.create_user(username=nickname, password=token, is_staff=False)
|
||||||
|
|
||||||
else:
|
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'
|
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.
|
# TODO Keep user authenticated.
|
||||||
# BaseBackend.authenticate(self, request=None,username=nickname, password=token)
|
# 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"
|
"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": {
|
"merge-stream": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
"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",
|
"@babel/plugin-proposal-class-properties": "^7.16.7",
|
||||||
"@material-ui/core": "^4.12.3",
|
"@material-ui/core": "^4.12.3",
|
||||||
"@material-ui/icons": "^4.11.2",
|
"@material-ui/icons": "^4.11.2",
|
||||||
|
"material-ui-image": "^3.3.2",
|
||||||
"react-router-dom": "^5.2.0"
|
"react-router-dom": "^5.2.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,7 @@ export default class App extends Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className='appCenter'>
|
||||||
<HomePage />
|
<HomePage />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -1,4 +1,7 @@
|
|||||||
import React, { Component } from "react";
|
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 {
|
export default class UserGenPage extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@ -6,7 +9,7 @@ export default class UserGenPage extends Component {
|
|||||||
this.state = {
|
this.state = {
|
||||||
token: this.genBase62Token(32),
|
token: this.genBase62Token(32),
|
||||||
};
|
};
|
||||||
this.getGeneratedUser();
|
this.getGenerateUser();
|
||||||
}
|
}
|
||||||
|
|
||||||
// sort of cryptographically strong function to generate Base62 token client-side
|
// sort of cryptographically strong function to generate Base62 token client-side
|
||||||
@ -20,30 +23,81 @@ export default class UserGenPage extends Component {
|
|||||||
.substring(0, length);
|
.substring(0, length);
|
||||||
}
|
}
|
||||||
|
|
||||||
getGeneratedUser() {
|
getGenerateUser() {
|
||||||
fetch('/api/usergen' + '?token=' + this.state.token)
|
fetch('/api/usergen' + '?token=' + this.state.token)
|
||||||
.then((response) => response.json())
|
.then((response) => response.json())
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
nickname: data.nickname,
|
nickname: data.nickname,
|
||||||
bit_entropy: data.token_bits_entropy,
|
bit_entropy: data.token_bits_entropy,
|
||||||
|
avatar_url: 'static/assets/avatars/' + data.nickname + '.png',
|
||||||
shannon_entropy: data.token_shannon_entropy,
|
shannon_entropy: data.token_shannon_entropy,
|
||||||
bad_request: data.bad_request,
|
bad_request: data.bad_request,
|
||||||
|
found: data.found,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleAnotherButtonPressed=(e)=>{
|
||||||
|
this.setState({
|
||||||
|
token: this.genBase62Token(32),
|
||||||
|
})
|
||||||
|
this.getGenerateUser();
|
||||||
|
}
|
||||||
|
handleAnotherChangeTokenText=(e)=>{
|
||||||
|
this.setState({
|
||||||
|
token: e.target.value,
|
||||||
|
})
|
||||||
|
this.getGenerateUser();
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<Grid container spacing={1}>
|
||||||
<p>This is the landing and user generator page</p>
|
<Grid item xs={12} align="center">
|
||||||
<p>Have a token of appreciation {this.state.token}</p>
|
<TextField
|
||||||
<p>Username is {this.state.nickname}</p>
|
error={this.state.bad_request}
|
||||||
<p>Shannon entropy is {this.state.shannon_entropy}</p>
|
label='Token - Store safely'
|
||||||
<p>Entropy depth is {this.state.bit_entropy} bits</p>
|
required='true'
|
||||||
<p>Bad request: {this.state.bad_request}</p>
|
value={this.state.token}
|
||||||
</div>
|
variant='standard'
|
||||||
|
helperText={this.state.bad_request}
|
||||||
|
size='small'
|
||||||
|
multiline = {true}
|
||||||
|
onChange={this.handleAnotherChangeTokenText}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} align="center">
|
||||||
|
<div style={{ width: 200, height: 200 }}>
|
||||||
|
<Image
|
||||||
|
imageStyle={{ width: 200, height: 200 }}
|
||||||
|
src={this.state.avatar_url}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} align="center">
|
||||||
|
<Typography component="h5" variant="h5">
|
||||||
|
⚡<b>{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}>Nah, give me another</Button>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -16,5 +16,11 @@ body {
|
|||||||
#app {
|
#app {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
}
|
||||||
|
|
||||||
|
.appCenter {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
}
|
}
|
1
setup.md
1
setup.md
@ -58,6 +58,7 @@ npm install @material-ui/core
|
|||||||
npm install @babel/plugin-proposal-class-properties
|
npm install @babel/plugin-proposal-class-properties
|
||||||
npm install react-router-dom@5.2.0
|
npm install react-router-dom@5.2.0
|
||||||
npm install @material-ui/icons
|
npm install @material-ui/icons
|
||||||
|
npm install material-ui-image
|
||||||
```
|
```
|
||||||
|
|
||||||
### Launch the React render
|
### Launch the React render
|
||||||
|
Loading…
Reference in New Issue
Block a user