From 742a1af9f8f8ed4f512ed200d9c0b5d13071afb4 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Sun, 19 Nov 2023 23:11:27 +0800
Subject: [PATCH] Improved registration and activation functionality

---
 src/App.tsx                                   | 10 +++
 src/Components/API/API.tsx                    |  2 +-
 .../Sidebar.tsx => Drawer/Drawer.tsx}         |  2 +-
 src/Components/Header/Header.tsx              |  2 +-
 src/Components/LoginModal/LoginModal.tsx      |  6 +-
 .../RegisterModal/RegisterModal.tsx           |  6 +-
 src/Pages/ActivationPage/ActivationPage.tsx   | 88 +++++++++++++++++++
 7 files changed, 111 insertions(+), 5 deletions(-)
 rename src/Components/{Sidebar/Sidebar.tsx => Drawer/Drawer.tsx} (98%)
 create mode 100644 src/Pages/ActivationPage/ActivationPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 15f25b2..6db1229 100644
--- a/src/App.tsx
+++ b/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() {
diff --git a/src/Components/API/API.tsx b/src/Components/API/API.tsx
index d00ab31..2b22ca5 100644
--- a/src/Components/API/API.tsx
+++ b/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;
     })
diff --git a/src/Components/Sidebar/Sidebar.tsx b/src/Components/Drawer/Drawer.tsx
similarity index 98%
rename from src/Components/Sidebar/Sidebar.tsx
rename to src/Components/Drawer/Drawer.tsx
index ab8ad0d..1360ac5 100644
--- a/src/Components/Sidebar/Sidebar.tsx
+++ b/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();
diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
index b36f9c4..d0189e4 100644
--- a/src/Components/Header/Header.tsx
+++ b/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;
diff --git a/src/Components/LoginModal/LoginModal.tsx b/src/Components/LoginModal/LoginModal.tsx
index 50a8507..6cc9459 100644
--- a/src/Components/LoginModal/LoginModal.tsx
+++ b/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
diff --git a/src/Components/RegisterModal/RegisterModal.tsx b/src/Components/RegisterModal/RegisterModal.tsx
index ca75021..e9ea675 100644
--- a/src/Components/RegisterModal/RegisterModal.tsx
+++ b/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
diff --git a/src/Pages/ActivationPage/ActivationPage.tsx b/src/Pages/ActivationPage/ActivationPage.tsx
new file mode 100644
index 0000000..3117228
--- /dev/null
+++ b/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>
+  );
+}