Implement basic register page

package-lock.json

@@ -2675,12 +2675,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -3655,9 +3655,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"

src/App.tsx

@@ -7,6 +7,7 @@ import NavbarUserInfo from "./components/NavbarUserInfo.tsx";
 
 import Home from "./pages/Home.tsx";
 import Blog from "./pages/Blog.tsx";
+import Register from "./pages/Register.tsx";
 import Login from "./pages/Login.tsx";
 import Logout from "./pages/Logout.tsx";
 import About from "./pages/About.tsx";
@@ -67,7 +68,10 @@ export default function App() {
               ></NavbarUserInfo>
             </>
           ) : (
-            <NavbarButton>Login</NavbarButton>
+	    <>
+		<NavbarButton>Register</NavbarButton>
+            	<NavbarButton>Login</NavbarButton>
+	    </>
           )}
         </Navbar>
         <div id="page">
@@ -104,6 +108,16 @@ export default function App() {
                 ></Login>
               }
             />
+            <Route
+              path="/register"
+              exact
+              element={
+                <Register
+                  authTokenStorageHandler={authTokenStorageHandler}
+                  usernameStorageHandler={usernameStorageHandler}
+                ></Register>
+              }
+            />
             <Route
               path="/logout"
               exact

src/index.css

@@ -260,6 +260,21 @@ a {
   gap: 20px;
 }
 
+#registerBox {
+  padding: 20px;
+  border-radius: var(--border-radii);
+  display: flex;
+  background: white;
+}
+
+#registerBoxContents {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+}
+
 #aboutBox {
   padding: 20px;
   border-radius: var(--border-radii);

src/pages/Register.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { Navigate } from "react-router-dom";
+
+interface Props {
+  authTokenStorageHandler: object;
+}
+
+export default function Register({ authTokenStorageHandler }: Props) {
+  const [usernameFormValue, setUsernameFormValue] = React.useState("");
+  function handleUsernameFormChange(eventData) {
+    setUsernameFormValue(eventData.target.value);
+  }
+
+  if (authTokenStorageHandler.authTokenValue) {
+    return <Navigate to="/home"></Navigate>;
+  }
+
+  function onUsernameInputDefocus(formEvent) {
+    console.log("Down");
+  }
+
+  function onRegisterSubmit(formEvent) {
+    formEvent.preventDefault();
+
+    const formData = new FormData(formEvent.target);
+    const formDataObject = Object.fromEntries(formData);
+
+    const bodyRequest = {
+      username: formDataObject.username,
+      password: formDataObject.password,
+      rememberMe: formDataObject.rememberMe ? true : false,
+    };
+
+    fetch("http://127.0.0.1:8000/api/user/create", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(bodyRequest),
+    })
+      .then((response) => response.json())
+      .then((responseParsed: Object) => {
+        console.log(responseParsed);
+        if (responseParsed.success) {
+          authTokenStorageHandler.setAuthTokenValue(responseParsed.authToken);
+        } else {
+          console.log("Register failure!");
+        }
+      });
+  }
+
+  return (
+    <>
+      <div className="centeredBoxArea">
+        <div id="registerBox">
+          <div id="registerBoxContents">
+            <h1>Register</h1>
+            <form onSubmit={onRegisterSubmit}>
+              <input
+                type="text"
+                name="username"
+                value={usernameFormValue}
+                onChange={handleUsernameFormChange}
+                onBlur={onUsernameInputDefocus}
+              ></input>
+              <input type="password" name="password"></input>
+              <input type="checkbox" name="rememberMe"></input>
+              <button type="submit">Register</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}