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);
+        }}
+      />
+    </>
+  );
+}