Improved registration and activation functionality

src/App.tsx

@@ -9,6 +9,7 @@ import "react-toastify/dist/ReactToastify.css";
 import ErrorPage from "./Pages/ErrorPage/ErrorPage";
 import DashboardPage from "./Pages/DashboardPage/DashboardPage";
 import Revalidator from "./Components/Revalidator/Revalidator";
+import ActivationPage from "./Pages/ActivationPage/ActivationPage";
 
 const queryClient = new QueryClient();
 const router = createHashRouter([
@@ -32,6 +33,15 @@ const router = createHashRouter([
     ),
     errorElement: <ErrorPage />,
   },
+  {
+    path: "/activation/:uid/:token",
+    element: (
+      <>
+        <ActivationPage />
+      </>
+    ),
+    errorElement: <ErrorPage />,
+  },
 ]);
 
 export default function App() {

src/Components/API/API.tsx

@@ -121,7 +121,7 @@ export async function UserAPI() {
 export function ActivationAPI(activation: ActivationType) {
   return instance
     .post("api/v1/accounts/users/activation/", activation)
-    .then(async () => {
+    .then(() => {
       console.log("Activation Success");
       return true;
     })

src/Components/Drawer/Drawer.tsx

@@ -9,7 +9,7 @@ import { useDispatch } from "react-redux";
 import { auth_toggle } from "../Plugins/Redux/Slices/AuthSlice/AuthSlice";
 import { toast } from "react-toastify";
 import { useNavigate } from "react-router-dom";
-export default function Sidebar() {
+export default function Drawer() {
   const user = useQuery({ queryKey: ["user"], queryFn: UserAPI });
   const dispatch = useDispatch();
   const navigate = useNavigate();

src/Components/Header/Header.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import styles, { colors } from "../../styles";
 import MenuIcon from "@mui/icons-material/Menu";
-import SidebarModal from "../Sidebar/Sidebar";
+import SidebarModal from "../Drawer/Drawer";
 import { Drawer } from "@mui/material";
 export interface props {
   label: string;

src/Components/LoginModal/LoginModal.tsx

@@ -29,7 +29,11 @@ export default function LoginModal() {
       <div
         style={{
           ...styles.flex_row,
-          ...{ alignItems: "center", justifyContent: "center" },
+          ...{
+            alignItems: "center",
+            justifyContent: "center",
+            overflowY: "scroll",
+          },
         }}
       >
         <LoginIcon

src/Components/RegisterModal/RegisterModal.tsx

@@ -29,7 +29,11 @@ export default function RegisterModal() {
       <div
         style={{
           ...styles.flex_row,
-          ...{ alignItems: "center", justifyContent: "center" },
+          ...{
+            alignItems: "center",
+            justifyContent: "center",
+            overflowY: "scroll",
+          },
         }}
       >
         <AppRegistration

src/Pages/ActivationPage/ActivationPage.tsx

@@ -0,0 +1,88 @@
+import { useNavigate, useParams } from "react-router-dom";
+import styles, { colors } from "../../styles";
+import { ActivationAPI } from "../../Components/API/API";
+import { useEffect, useState } from "react";
+import { CircularProgress } from "@mui/material";
+import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import { toast } from "react-toastify";
+export default function ActivationPage() {
+  const { uid, token } = useParams();
+  const [feedback, setFeedback] = useState("");
+  const [error, setError] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (uid && token && feedback == "") {
+      ActivationAPI({ uid, token }).then((response) => {
+        if (response) {
+          setFeedback("Activation successful");
+          toast("Activation successful", {
+            position: "top-right",
+            autoClose: 2000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+            theme: "light",
+          });
+          setTimeout(() => {
+            navigate("/dashboard");
+          });
+        } else {
+          setFeedback("Invalid activation link");
+          setError(true);
+        }
+      });
+    }
+    if (!uid || !token) {
+      setFeedback("Missing uid or token");
+    }
+    setLoading(false);
+  }, [uid, token, feedback, navigate]);
+  return (
+    <div style={styles.background}>
+      <div
+        style={{
+          ...styles.flex_column,
+          ...{
+            alignItems: "center",
+            alignSelf: "center",
+            justifyContent: "center",
+            height: "100%",
+          },
+        }}
+      >
+        {loading ? (
+          <CircularProgress style={{ height: "128px", width: "128px" }} />
+        ) : (
+          <></>
+        )}
+        {error && !loading ? (
+          <ErrorOutlineIcon
+            style={{ height: "128px", width: "128px", color: colors.red }}
+          />
+        ) : (
+          <CheckCircleOutlineIcon
+            style={{ height: "128px", width: "128px", color: colors.green }}
+          />
+        )}
+
+        <p style={{ ...styles.text_dark, ...styles.text_L }}>{feedback}</p>
+        <div
+          style={{
+            backgroundColor: colors.header_color,
+            marginTop: "16px",
+            width: "30%",
+            height: "4px",
+            marginBottom: 8,
+          }}
+        />
+        <p style={{ ...styles.text_dark, ...styles.text_L }}>
+          Activating your CITC Equipment Tracker Account
+        </p>
+      </div>
+    </div>
+  );
+}