Improve user generator UX. Still a bit buggy.

api/views.py

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

frontend/package-lock.json

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

frontend/package.json

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

frontend/src/components/App.js

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

frontend/src/components/UserGenPage.js

@@ -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,81 @@ 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,
         });
       });
   }
 
+  handleAnotherButtonPressed=(e)=>{
+    this.setState({
+      token: this.genBase62Token(32),
+    })
+    this.getGenerateUser();
+  }
+  handleAnotherChangeTokenText=(e)=>{
+    this.setState({
+      token: e.target.value,
+    })
+    this.getGenerateUser();
+  }
 
   render() {
     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}
+              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>
     );
   }
 

frontend/static/css/index.css

@@ -16,5 +16,11 @@ body {
 #app {
   width: 100%;
   height: 100%;
-  display: flex;
+}
+
+.appCenter {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
 }

setup.md

@@ -58,6 +58,7 @@ npm install @material-ui/core
 npm install @babel/plugin-proposal-class-properties
 npm install react-router-dom@5.2.0
 npm install @material-ui/icons
+npm install material-ui-image
 ```
 
 ### Launch the React render