done

ef-ui/dist/index.html

@@ -27,7 +27,7 @@
     <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
     <!-- fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;800&family=Sen:wght@400;700;800&display=swap" rel="stylesheet">
-   <script type="module" crossorigin src="/assets/index-C9Oq1JMa.js"></script>
+   <script type="module" crossorigin src="/assets/index-CNAEOA4q.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-CyAHZLBw.css">
  </head>
 

ef-ui/src/App.jsx

@@ -6,8 +6,7 @@ import Register from "./components/Register";
 import Login from "./components/Login";
 import Dashboard from "./components/Dashboard";
 import PrivateRoute from "./components/PrivateRoute";
-
+import VerifyUser from "./components/EmailVerify";
-
 
 const App = () => {
   return (
@@ -26,6 +25,7 @@ const App = () => {
             </PrivateRoute>
           }
         />
+      <Route path="/users/:id/verify/:token" element={<VerifyUser />} />
      </Routes>
     </BrowserRouter>
   )

ef-ui/src/components/EmailVerify.jsx

@@ -0,0 +1,69 @@
+import  { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { NavLink } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { verifyEmail } from "../redux/features/userSlice";
+import Navbar from "./Navbar";
+import Footer from "./Footer";
+
+const VerifyUser = () => {
+  const dispatch = useDispatch();
+  // const user = useSelector((state) => state.auth.user);
+  const { id, token } = useParams();
+
+  useEffect(() => {
+    dispatch(verifyEmail({ id, token }));
+  }, [dispatch, id, token]);
+
+  return (
+    <div>
+      <Navbar />
+      <br />
+      <br />
+      <br />
+   
+ 
+   
+      <section className="card mb-0 vh-100">
+        <div className="container py-10 h-100">
+          <div className="row d-flex align-items-center justify-content-center h-100">
+            <div className="col-md-10 col-lg-5 col-xl-5 offset-xl-1 card mb-10">
+              <h3 className="card-header" style={{ color: '#F74B02' }}>
+              <span className="pi pi-verified" style={{ color: '#0ACFB2' }}> </span> {"   "}
+                Email verified successfully !!! 
+              </h3>
+              <br />
+              <p className="card-title text-center">
+                 
+
+                <NavLink
+                to="/login"
+                className="glightbox play-btn mb-4"
+              > Please 
+              
+              <span style={{ color: '#F74B02' }}> login </span> {"   "}
+              
+               to access and start publishing your articles ...</NavLink> 
+
+              </p>
+              
+
+              <div
+                style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
+                className="container d-flex align-items-center justify-content-center vh-50"
+              >
+                
+          
+              </div>
+            
+            </div>
+          </div>
+        </div>
+      </section>
+   
+      <Footer />
+    </div>
+  );
+};
+
+export default VerifyUser;