Added registration page

src/Components/Api/Api.tsx

@@ -26,6 +26,24 @@ export function DeleteNote(id: number) {
 }
 
 // User APIs
+export interface register {
+  email: string;
+  username: string;
+  password: string;
+}
+
+export function UserRegister(register: register) {
+  return axios
+    .post("http://localhost:8000/api/v1/accounts/users/", register)
+    .then(async (response) => {
+      console.log(response.data);
+      return true;
+    })
+    .catch((error) => {
+      console.log("Registration failed: " + error);
+      return false;
+    });
+}
 
 export interface user {
   username: string;

src/Routes/Register/Register.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+import styles from "../../styles";
+
+import { useNavigate } from "react-router-dom";
+import Header from "../../Components/Header/Header";
+import { useState } from "react";
+import { Button } from "@mui/material";
+import { UserInfo, UserLogin } from "../../Components/Api/Api";
+
+import { UserRegister } from "../../Components/Api/Api";
+
+export default function Register() {
+  const navigate = useNavigate();
+  const [user, setUser] = useState({
+    email: "",
+    username: "",
+    password: "",
+  });
+  const [feedback, setFeedback] = useState("");
+  return (
+    <div style={styles.background}>
+      <Header />
+      <div style={styles.window}>
+        <p style={styles.text_medium}>Create an Account</p>
+        <div style={styles.flex_row}>
+          <p style={styles.text_small}>Email</p>
+          <div style={{ margin: 4 }} />
+          <input
+            style={styles.input_notetitle}
+            onChange={(e: { target: { value: any } }) => {
+              setUser({ ...user, email: e.target.value });
+            }}
+            maxLength={20}
+          />
+        </div>
+        <div style={styles.flex_row}>
+          <p style={styles.text_small}>Username</p>
+          <div style={{ margin: 4 }} />
+          <input
+            style={styles.input_notetitle}
+            onChange={(e: { target: { value: any } }) => {
+              setUser({ ...user, username: e.target.value });
+            }}
+            maxLength={20}
+          />
+        </div>
+        <div style={styles.flex_row}>
+          <p style={styles.text_small}>Password</p>
+          <div style={{ margin: 4 }} />
+          <input
+            style={styles.input_notetitle}
+            type="password"
+            onChange={(e: { target: { value: any } }) => {
+              setUser({ ...user, password: e.target.value });
+            }}
+            maxLength={20}
+          />
+        </div>
+        <Button
+          style={styles.button_yellow}
+          variant="contained"
+          onClick={async () => {
+            setUser({
+              email: "",
+              username: "",
+              password: "",
+            });
+            if (await UserRegister(user)) {
+              setFeedback(
+                "Registration success. Please check your email address for activation"
+              );
+            } else {
+              setFeedback("Invalid credentials specified");
+            }
+          }}
+        >
+          Register
+        </Button>
+        <p style={styles.text_small}>{feedback}</p>
+      </div>
+    </div>
+  );
+}

src/index.tsx

@@ -8,6 +8,7 @@ import Home from "./Routes/Home/Home";
 import NewNote from "./Routes/NewNote/NewNote";
 import Login from "./Routes/Login/Login";
 import Activation from "./Routes/Activation/Activation";
+import Register from "./Routes/Register/Register";
 
 import { QueryClient, QueryClientProvider } from "react-query";
 
@@ -29,6 +30,10 @@ const router = createBrowserRouter([
     path: "/Login",
     element: <Login />,
   },
+  {
+    path: "/Register",
+    element: <Register />,
+  },
   {
     path: "/Activation/:uid/:token",
     element: <Activation />,