From 012f02d4e75835997d923e5e8551a059a6618266 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Mon, 6 Mar 2023 22:51:59 +0800
Subject: [PATCH] Added registration page

---
 src/App.tsx                      |  9 ++++
 src/Routes/Login/Login.tsx       |  7 ---
 src/Routes/Register/Register.tsx | 86 ++++++++++++++++++++++++++++++++
 3 files changed, 95 insertions(+), 7 deletions(-)
 create mode 100644 src/Routes/Register/Register.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 483aec2..e6dd886 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,7 @@ import Product from "./Routes/Product/Product";
 import Activation from "./Routes/Activation/Activation";
 import { QueryClient, QueryClientProvider } from "react-query";
 import NewProduct from "./Routes/NewProduct/NewProduct";
+import Register from "./Routes/Register/Register";
 
 const queryClient = new QueryClient();
 
@@ -86,6 +87,14 @@ const router = createBrowserRouter([
       </Container>
     ),
   },
+  {
+    path: "/Register",
+    element: (
+      <Container>
+        <Register />
+      </Container>
+    ),
+  },
 ]);
 
 export default function App() {
diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx
index e2ace97..55288c4 100644
--- a/src/Routes/Login/Login.tsx
+++ b/src/Routes/Login/Login.tsx
@@ -5,9 +5,6 @@ import { Button } from "@mui/material";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { useState } from "react";
-import { Navigate } from "react-router-dom";
-import { LoginState } from "../../Interfaces/Interfaces";
-import { useSelector } from "react-redux";
 
 import { UserInfo, UserLogin } from "../../Components/Api/Api";
 import { toggle_login } from "../../Features/Redux/Slices/Login/LoginSlice";
@@ -21,10 +18,6 @@ export default function Login() {
     password: "",
   });
   const [error, setError] = useState("");
-  const logged_in = useSelector((state: LoginState) => state.logged_in.value);
-  if (logged_in) {
-    return <Navigate to="/" replace />;
-  }
   return (
     <div>
       <div
diff --git a/src/Routes/Register/Register.tsx b/src/Routes/Register/Register.tsx
new file mode 100644
index 0000000..bfb8b99
--- /dev/null
+++ b/src/Routes/Register/Register.tsx
@@ -0,0 +1,86 @@
+import * as React from "react";
+import styles from "../../styles";
+import LoginIcon from "../../Components/Icons/LoginIcon/LoginIcon";
+import { Button } from "@mui/material";
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+import { UserRegister } from "../../Components/Api/Api";
+export default function Register() {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const [user, setUser] = useState({
+    email: "",
+    username: "",
+    password: "",
+  });
+  const [feedback, setFeedback] = useState("");
+  return (
+    <div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          flexDirection: "column",
+        }}
+      >
+        <p style={{ ...styles.text_white, ...styles.text_XL }}>
+          Create an Account
+        </p>
+        <div style={styles.flex_row}>
+          <p style={{ ...styles.text_white, ...styles.text_L }}>Email</p>
+          <div style={{ margin: 4 }} />
+          <input
+            style={styles.text_L}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setUser({ ...user, email: e.target.value });
+            }}
+            maxLength={20}
+          />
+        </div>
+        <div style={styles.flex_row}>
+          <p style={{ ...styles.text_white, ...styles.text_L }}>Username</p>
+          <div style={{ margin: 4 }} />
+          <input
+            style={{ ...styles.text_white, ...styles.text_L }}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setUser({ ...user, username: e.target.value });
+            }}
+            maxLength={20}
+          />
+        </div>
+        <div style={styles.flex_row}>
+          <p style={{ ...styles.text_white, ...styles.text_L }}>Password</p>
+          <div style={{ margin: 4 }} />
+          <input
+            style={{ ...styles.text_white, ...styles.text_L }}
+            type="password"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setUser({ ...user, password: e.target.value });
+            }}
+            maxLength={20}
+          />
+        </div>
+        <Button
+          style={styles.login_button}
+          variant="contained"
+          onClick={async () => {
+            setUser({
+              ...user,
+            });
+            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_white, ...styles.text_L }}>{feedback}</p>
+      </div>
+    </div>
+  );
+}