Improve user generator UX. Still a bit buggy.

This commit is contained in:
Reckless_Satoshi 2022-01-02 13:41:22 -08:00
parent f4644836d3
commit d7979086ed
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
7 changed files with 89 additions and 13 deletions

View File

@ -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)

View File

@ -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",

View File

@ -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"
} }
} }

View File

@ -10,7 +10,7 @@ export default class App extends Component {
render() { render() {
return ( return (
<div> <div className='appCenter'>
<HomePage /> <HomePage />
</div> </div>
); );

View File

@ -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>
); );
} }

View File

@ -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%);
} }

View File

@ -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