From 790e96cc1b68ca6763122700e3bf96cf08a91e1b Mon Sep 17 00:00:00 2001 From: Reckless_Satoshi Date: Sun, 2 Jan 2022 13:41:22 -0800 Subject: [PATCH] Improve user generator UX. Still a bit buggy. --- api/views.py | 8 ++- frontend/package-lock.json | 8 +++ frontend/package.json | 1 + frontend/src/components/App.js | 2 +- frontend/src/components/UserGenPage.js | 80 ++++++++++++++++++++++---- frontend/static/css/index.css | 8 ++- setup.md | 1 + 7 files changed, 95 insertions(+), 13 deletions(-) diff --git a/api/views.py b/api/views.py index 5321d517..5bed2b98 100644 --- a/api/views.py +++ b/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) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 56fec1f1..4e559c3d 100644 --- a/frontend/package-lock.json +++ b/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", diff --git a/frontend/package.json b/frontend/package.json index fc5e2a34..280eda3e 100644 --- a/frontend/package.json +++ b/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" } } diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js index f03c5e97..6ac372c9 100644 --- a/frontend/src/components/App.js +++ b/frontend/src/components/App.js @@ -10,7 +10,7 @@ export default class App extends Component { render() { return ( -
+
); diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js index 69f22298..2789a5ea 100644 --- a/frontend/src/components/UserGenPage.js +++ b/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,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 ( -
-

This is the landing and user generator page

-

Have a token of appreciation {this.state.token}

-

Username is {this.state.nickname}

-

Shannon entropy is {this.state.shannon_entropy}

-

Entropy depth is {this.state.bit_entropy} bits

-

Bad request: {this.state.bad_request}

-
+ + + + + +
+ +
+ + + + {this.state.nickname ? "⚡"+this.state.nickname+"⚡" : ""} + + + { + this.state.found ? + + + We found your robosat, welcome back!
+ + + + : + + + + } + + + + + ); } diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css index dd541ebe..24267672 100644 --- a/frontend/static/css/index.css +++ b/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%); } \ No newline at end of file diff --git a/setup.md b/setup.md index 22872db3..8a1f1fdd 100644 --- a/setup.md +++ b/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