Implement user generator page frontend with client-side token generation

Uses crypto.getRandomValue() that at least should provide cryptographically strong random

frontend/src/components/UserGenPage.js

@@ -1,11 +1,31 @@
 import React, { Component } from "react";
 
 export default class UserGenPage extends Component {
-    constructor(props) {
+  constructor(props) {
-      super(props);
+    super(props);
-    }
+    this.state = {
+      token: this.genBase62Token(30),
+    };
+    this.token = this.genBase62Token(30);
+  }
+  // sort of cryptographically strong function to generate Base62 token client-side
+  genBase62Token(length)
+  {   
+      return window.btoa(Array.from(
+        window.crypto.getRandomValues(
+          new Uint8Array(length * 2)))
+          .map((b) => String.fromCharCode(b))
+          .join("")).replace(/[+/]/g, "")
+          .substring(0, length);
+  }
+
+  render() {
+    return (
+      <div>
+        <p>This is the landing and user generator page</p>
+        <p>Have a token of appreciation {this.state.token}</p>
+      </div>
+    );
+  }
 
-    render() {
-        return <p>This is the landing and user generator page</p>;
-    }
 }