Refresh page on successful login or register

src/Components/LoginModal/LoginModal.tsx

@@ -9,7 +9,9 @@ import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import LoginIcon from "@mui/icons-material/Login";
 import Checkbox from "@mui/material/Checkbox";
 import Button from "../Buttons/Button";
+import { useNavigate } from "react-router-dom";
 export default function LoginModal() {
+  const navigate = useNavigate();
   const [showPassword, setShowPassword] = useState(false);
   const [remember, setRemember] = useState(true);
   const [user, setUser] = useState({
@@ -110,7 +112,13 @@ export default function LoginModal() {
           marginBottom: 8,
         }}
       />
-      <Button type={"dark"} label={"Login"} onClick={() => {}} />
+      <Button
+        type={"dark"}
+        label={"Login"}
+        onClick={() => {
+          navigate(0);
+        }}
+      />
     </>
   );
 }

src/Components/RegisterModal/RegisterModal.tsx

@@ -0,0 +1,139 @@
+import { useState } from "react";
+import styles from "../../styles";
+import { colors } from "../../styles";
+import TextField from "@mui/material/TextField";
+import InputAdornment from "@mui/material/InputAdornment";
+import IconButton from "@mui/material/IconButton";
+import Visibility from "@mui/icons-material/Visibility";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
+import { AppRegistration } from "@mui/icons-material";
+import Button from "../Buttons/Button";
+import { useNavigate } from "react-router-dom";
+export default function RegisterModal() {
+  const navigate = useNavigate();
+  const [showPassword, setShowPassword] = useState(false);
+  const [user, setUser] = useState({
+    first_name: "",
+    last_name: "",
+    username: "",
+    email: "",
+    password: "",
+    confirm_password: "",
+  });
+  return (
+    <>
+      <div
+        style={{
+          ...styles.flex_row,
+          ...{ alignItems: "center", justifyContent: "center" },
+        }}
+      >
+        <AppRegistration
+          style={{
+            height: 64,
+            width: 64,
+            fill: colors.font_dark,
+          }}
+        />
+        <p style={{ ...styles.text_dark, ...styles.text_L }}>Get Started</p>
+      </div>
+
+      <div style={styles.flex_column}>
+        <TextField
+          id="outlined-helperText"
+          label="First Name"
+          style={styles.input_form}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setUser({ ...user, first_name: e.target.value })
+          }
+          value={user.first_name}
+          placeholder={"Enter your first name"}
+        />
+        <TextField
+          id="outlined-helperText"
+          label="Last Name"
+          style={styles.input_form}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setUser({ ...user, last_name: e.target.value })
+          }
+          value={user.last_name}
+          placeholder={"Enter your last name"}
+        />
+        <TextField
+          id="outlined-helperText"
+          label="Username"
+          style={styles.input_form}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setUser({ ...user, username: e.target.value })
+          }
+          value={user.username}
+          placeholder={"Enter username"}
+        />
+        <TextField
+          id="outlined-helperText"
+          type={showPassword ? "text" : "password"}
+          style={styles.input_form}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label="toggle password visibility"
+                  onClick={() => setShowPassword(!showPassword)}
+                  edge="end"
+                >
+                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+          label="Password"
+          placeholder={"Enter password"}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setUser({ ...user, password: e.target.value })
+          }
+          value={user.password}
+        />
+        <TextField
+          id="outlined-helperText"
+          type={showPassword ? "text" : "password"}
+          style={styles.input_form}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label="toggle password visibility"
+                  onClick={() => setShowPassword(!showPassword)}
+                  edge="end"
+                >
+                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+          label="Confirm Password"
+          placeholder={"Re-enter password"}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setUser({ ...user, confirm_password: e.target.value })
+          }
+          value={user.confirm_password}
+        />
+      </div>
+      <div
+        style={{
+          backgroundColor: colors.button_border,
+          marginTop: "16px",
+          width: "100%",
+          height: "2px",
+          marginBottom: 8,
+        }}
+      />
+      <Button
+        type={"dark"}
+        label={"Register"}
+        onClick={() => {
+          navigate(0);
+        }}
+      />
+    </>
+  );
+}

src/Pages/LandingPage/LandingPage.tsx

@@ -1,13 +1,14 @@
 import Button from "../../Components/Buttons/Button";
 import styles from "../../styles";
 import citc_logo from "../../assets/citc_logo.jpg";
-import { toast } from "react-toastify";
 import Popup from "reactjs-popup";
 import "reactjs-popup/dist/index.css";
 import { useState } from "react";
 import LoginModal from "../../Components/LoginModal/LoginModal";
+import RegisterModal from "../../Components/RegisterModal/RegisterModal";
 export default function LandingPage() {
-  const [open, setOpen] = useState(false);
+  const [LoginModalOpen, SetLoginModalOpen] = useState(false);
+  const [RegisterModalOpen, SetRegisterModalOpen] = useState(false);
   return (
     <div style={styles.background}>
       <div
@@ -55,19 +56,21 @@ export default function LandingPage() {
                 type={"light"}
                 label={"Login"}
                 onClick={() => {
-                  setOpen(!open);
+                  SetLoginModalOpen(true);
+                  SetRegisterModalOpen(false);
                 }}
               />
               <Button
                 type={"dark"}
                 label={"Register"}
                 onClick={() => {
-                  toast("Redirecting!");
+                  SetRegisterModalOpen(true);
+                  SetLoginModalOpen(false);
                 }}
               />
               <Popup
-                open={open}
+                open={LoginModalOpen}
-                onClose={() => setOpen(!open)}
+                onClose={() => SetLoginModalOpen(false)}
                 modal
                 position={"top center"}
                 contentStyle={{
@@ -84,6 +87,25 @@ export default function LandingPage() {
               >
                 <LoginModal />
               </Popup>
+              <Popup
+                open={RegisterModalOpen}
+                onClose={() => SetRegisterModalOpen(false)}
+                modal
+                position={"top center"}
+                contentStyle={{
+                  width: "30vw",
+                  borderRadius: 16,
+                  borderColor: "grey",
+                  borderStyle: "solid",
+                  borderWidth: 1,
+                  padding: 16,
+                  alignContent: "center",
+                  justifyContent: "center",
+                  textAlign: "center",
+                }}
+              >
+                <RegisterModal />
+              </Popup>
             </div>
           </div>
         </div>