From fb9fb88ab72d2627c3896b171198ce6aa1754094 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Sun, 2 Jan 2022 09:42:33 -0800
Subject: [PATCH] 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 | 32 +++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js
index 9ffc09b2..9cf8abfa 100644
--- a/frontend/src/components/UserGenPage.js
+++ b/frontend/src/components/UserGenPage.js
@@ -1,11 +1,31 @@
 import React, { Component } from "react";
 
 export default class UserGenPage extends Component {
-    constructor(props) {
-      super(props);
-    }
+  constructor(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>;
-    }
 }
\ No newline at end of file