Add registration to frontend

frontend/src/App.tsx

@@ -5,6 +5,7 @@ import NavigationBar from './components/NavigationBar';
 import useToken from "./UseToken";
 import React from "react";
 import Login from "./pages/Login";
+import Register from "./pages/Register";
 
 
 const App: React.FC = () => {
@@ -29,6 +30,11 @@ const App: React.FC = () => {
                         <Login setToken={setToken}/>
                     </Route>
                 }
+                {!token &&
+                    <Route exact path="/register" key="/register">
+                        <Register setToken={setToken}/>
+                    </Route>
+                }
             </Switch>
         </div>
     )

frontend/src/api/register.tsx

@@ -0,0 +1,30 @@
+import axios from "axios";
+
+export function register(username: string | undefined, password: string | undefined) {
+
+    const address = `${process.env.REACT_APP_BACKEND_URL}/api/register`;
+    console.log(address);
+    let credentials = {
+        username,
+        password
+    };
+
+    return axios.create({
+        timeout: 45000,
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        responseType: "json"
+    }).post(address, credentials).then(
+        ({ data, status }) => {
+            if (status !== 201) {
+                throw new Error("Server exception");
+            }
+            return data;
+        },
+        err => {
+            throw err;
+        }
+    );
+}

frontend/src/components/NavigationBar.tsx

@@ -107,6 +107,13 @@ const NavigationBar: React.FC = (props: any) => {
                             </MenuItem>
                         </NavLink>
                         }
+                        {!token &&
+                            <NavLink to="/register" style={{textDecoration: 'none'}} key="/register">
+                                <MenuItem selected={activeRoute("/register")}>
+                                    <ListItemText primary="Register"/>
+                                </MenuItem>
+                            </NavLink>
+                        }
                     </MenuList>
                 </div>
             </Drawer>

frontend/src/pages/Register.css

@@ -0,0 +1,5 @@
+.register-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}

frontend/src/pages/Register.tsx

@@ -0,0 +1,41 @@
+import React, {useState} from 'react';
+import './Register.css';
+import PropTypes from 'prop-types';
+import {register} from "../api/register";
+
+export default function Register({setToken}: { setToken: any }) {
+
+    const [username, setUserName] = useState<string>();
+    const [password, setPassword] = useState<string>();
+
+    const handleSubmit = async (e: { preventDefault: () => void; }) => {
+        e.preventDefault();
+        const token = await register(username, password);
+        setToken(token);
+        window.location.href = "/dashboard";
+    }
+
+    return (
+        <div className="register-wrapper">
+            <h1>Please Register</h1>
+            <form onSubmit={handleSubmit}>
+                <label>
+                    <p>Username</p>
+                    <input type="text" onChange={e => setUserName(e.target.value)}/>
+                </label>
+                <label>
+                    <p>Password</p>
+                    <input type="password" onChange={e => setPassword(e.target.value)}/>
+                </label>
+                <div>
+                    <br/>
+                    <button type="submit">Submit</button>
+                </div>
+            </form>
+        </div>
+    )
+}
+
+Register.propTypes = {
+    setToken: PropTypes.func.isRequired
+};