From 115b8b207ff8df728512caeb0f96d3271ca2c01c Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Mon, 27 Feb 2023 00:07:46 +0800
Subject: [PATCH] Added activation page

---
 src/Components/Api/Api.tsx           | 18 ++++++++++++++
 src/Routes/Activation/Activation.tsx | 35 ++++++++++++++++++++++++++++
 src/index.tsx                        |  5 ++++
 3 files changed, 58 insertions(+)
 create mode 100644 src/Routes/Activation/Activation.tsx

diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx
index ee47f8c..b0ad2bf 100644
--- a/src/Components/Api/Api.tsx
+++ b/src/Components/Api/Api.tsx
@@ -65,3 +65,21 @@ export function UserInfo() {
       console.log(error);
     });
 }
+
+export interface activation {
+  uid: string;
+  token: string;
+}
+
+export function UserActivate(activation: activation) {
+  return axios
+    .post("http://localhost:8000/api/v1/accounts/users/activation/", activation)
+    .then(async (response) => {
+      console.log("Activation Success");
+      return true;
+    })
+    .catch((error) => {
+      console.log("Activation failed: " + error);
+      return false;
+    });
+}
diff --git a/src/Routes/Activation/Activation.tsx b/src/Routes/Activation/Activation.tsx
new file mode 100644
index 0000000..a749f25
--- /dev/null
+++ b/src/Routes/Activation/Activation.tsx
@@ -0,0 +1,35 @@
+import styles from "../../styles";
+import Header from "../../Components/Header/Header";
+import { useParams } from "react-router-dom";
+import { useState } from "react";
+import { UserActivate } from "../../Components/Api/Api";
+
+export interface activation {
+  uid: string;
+  token: string;
+}
+export default function Activation() {
+  let { uid, token } = useParams();
+  const [activationStatus, setStatus] = useState("Activating...");
+  async function verify(activation: activation) {
+    let status = await UserActivate(activation);
+    if (status) {
+      setStatus("Success!");
+    } else {
+      setStatus("Invalid Activation Link");
+    }
+  }
+  if (uid && token) {
+    verify({ uid, token });
+  }
+  return (
+    <div style={styles.background}>
+      <Header />
+      <div style={styles.note}>
+        <p style={styles.text_medium}>User ID: {uid}</p>
+        <p style={styles.text_medium}>Activation Token: {token}</p>
+        <p style={styles.text_medium}>{activationStatus}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/index.tsx b/src/index.tsx
index 3cc0b28..a2f5a4d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,6 +7,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Home from "./Routes/Home/Home";
 import NewNote from "./Routes/NewNote/NewNote";
 import Login from "./Routes/Login/Login";
+import Activation from "./Routes/Activation/Activation";
 
 import { QueryClient, QueryClientProvider } from "react-query";
 
@@ -28,6 +29,10 @@ const router = createBrowserRouter([
     path: "/Login",
     element: <Login />,
   },
+  {
+    path: "/Activation/:uid/:token",
+    element: <Activation />,
+  },
 ]);
 
 const root = ReactDOM.createRoot(