Add Verify Email (#179)

Co-authored-by: vegetason <irakozepaulin12@example.com>

package.json

@@ -87,6 +87,7 @@
     "@types/react-i18next": "^8.1.0",
     "@types/react-router": "^5.1.19",
     "@types/react-router-dom": "^5.3.3",
+    "antd": "^5.21.2",
     "axios": "^1.1.2",
     "bootstrap": "^5.2.2",
     "browser": "^0.2.6",

src/components/form/RegisterForm.tsx

@@ -182,7 +182,7 @@ function SignupForm() {
               <AiOutlineCheck className="text-white text-4xl" />
             </div>
             <div className="text-[#afb1b4] text-lg mb-4 font-inter">
-              <p>Your account has been succefully created !</p>
+              <p>Account created, Check your email to verify your account !</p>
             </div>
             <Link to="/login" ><Button label="Continue" className="w-[80px]" /></Link>
           </div>

src/components/form/SignInForm.tsx

@@ -58,10 +58,6 @@ const LoginForm = () => {
         navigate("/applicant");
       } else if (role === "superAdmin" || "Admin") {
         navigate("/admin");
-      } else {
-        const searchParams = new URLSearchParams(location.search);
-        const returnUrl = searchParams.get('returnUrl') || '/';
-        navigate(returnUrl);
       }
   }
 

src/pages/verifyEmail.tsx

@@ -0,0 +1,58 @@
+import { useState, useEffect } from "react";
+import { AiOutlineCheck } from "react-icons/ai";
+import { Link, useNavigate } from "react-router-dom";
+import { verifyEmailAction } from "../redux/actions/verifyEmailAction";
+import { Spin } from "antd";
+import Button from "../components/form/Button";
+
+const VerifyEmail = () => {
+  const [loading, setLoading] = useState(true);
+  const navigate = useNavigate(); 
+
+  useEffect(() => {
+    async function verify() {
+      try {
+        const response = await verifyEmailAction(); 
+
+
+        if (!response?.data?.data?.verifyUser?.isVerified) {
+          navigate("/login");
+        }
+      } catch (error) {
+        console.log(error);
+      } finally {
+        setLoading(false); 
+      }
+    }
+
+    verify(); 
+  }, [navigate]); 
+
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <Spin size="large" />
+      </div>
+    );
+  }
+
+
+  return <>
+  <div className="flex items-center  justify-center mx-auto bg-[#374151] h-screen">
+      <div className="bg-[#1F2A37] w-[30vw]  flex h-[70vh] flex-col items-center justify-center rounded-sm sm:w-5/6 lg:w-[45vw]">
+          <div
+              className={`rounded-full flex items-center justify-center p-4 mx-auto mb-4`}
+          >
+              <AiOutlineCheck className="text-white text-4xl" />
+          </div>
+          <div className="text-[#afb1b4] text-lg mb-4 font-inter">
+              <p>Your account has been succefully verified !</p>
+          </div>
+          <Link to="/login" ><Button label="Continue" className="w-[80px]" /></Link>
+      </div>
+  </div>
+</>
+};
+
+export default VerifyEmail;

src/redux/actions/verifyEmailAction.ts

@@ -0,0 +1,35 @@
+import jwtDecode from "jwt-decode";
+import axios from "./axiosconfig";
+import { toast } from "react-toastify";
+
+export const verifyEmailAction = async() => {
+    try {
+        const hash = window.location.hash;
+
+        const params = new URLSearchParams(hash.split('?')[1]);
+
+        const token = params.get('token') as any;
+        const decoded: any = await jwtDecode(token);
+        const UserId = decoded.data._id
+        const response = await axios.post("/",{
+            query: `
+                mutation Mutation($id: ID!) {
+                    verifyUser(ID: $id) {
+                        id
+                        email
+                        isVerified
+                    }
+                }
+            `, variables: {
+                id:`${UserId}`
+            }
+        })
+
+        return response;
+
+    } catch (error: any) {
+        toast.error("An error Occured during verification")
+        return error;
+
+    }
+}

src/routes/routes.tsx

@@ -45,6 +45,7 @@ import ApplicationDetails from "../pages/Applications/ViewSingleApplication";
 import Dashboard from "../pages/Dashboard";
 import ApplicantLayout from "../pages/Applicant/ApplicantLayout";
 import AdminLayout from "../components/Layout/Admins/AdminLayout";
+import VerifyEmail from "../pages/verifyEmail";
 
 function Navigation() {
   const roleName = localStorage.getItem("roleName");
@@ -54,6 +55,7 @@ function Navigation() {
       <Route path="/test_tailwind" element={<TestTailwind />} />
       <Route path="/login" element={<LoginPage />} />
       <Route path="/signup" element={<SignupForm />} />
+      <Route path="/verifyEmail" element={<VerifyEmail/>}/>
       <Route path="/pageNotFound" element={<PageNotFound />} />
       <Route path="/" element={
           roleName === 'Admin' || roleName === 'SuperAdmin' ? <Navigate to="/admin" /> :