Email Validation

src/roles/guest/PublicRoutes.jsx

@@ -9,6 +9,7 @@ import HomePage from './landing_page/views/Home';
 import LoginPage from './auth/views/Login';
 import RegisterPage from './auth/views/Register';
 import ForgotPage from './auth/views/ForgotPass';
+import ValidateEmail from './auth/views/ValidateEmail';
 
 function PublicRoutes() {
     return(
@@ -22,6 +23,7 @@ function PublicRoutes() {
                 <Route path="login" element={<LoginPage />} />
                 <Route path="signup" element={<RegisterPage />} />
                 <Route path="forgot" element={<ForgotPage />} />
+                <Route path="validate-email" element={<ValidateEmail />} />
             </Routes>
         </div>
     )

src/roles/guest/auth/hooks/useRegister.jsx

@@ -37,7 +37,7 @@ const useRegister = () => {
 
       await authService.register(roleEndpoint, data);
 
-      navigate('/login');
+      navigate('/validate-email');
     } catch (err) {
       setError(err.message || 'Registration failed');
     } finally {

src/roles/guest/auth/hooks/useValidate.jsx

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+import authService from '../services/authService';
+
+const useValidate = () => {
+    const [error, setError] = useState(null);
+
+    const validateEmail = async (token) => {
+        setError(null);
+        try {
+            const validating = await authService.validateEmail(token);
+            window.location.href = '/login';
+        } catch (err) {
+            setError(err.message);
+        }
+    };
+
+    return {
+        validateEmail,error
+    };
+};
+
+export default useValidate;

src/roles/guest/auth/services/authService.jsx

@@ -58,9 +58,19 @@ const logout = () => {
   localStorage.removeItem('token');
 };
 
+const validateEmail = async (token) => {
+  try {
+    const response = await axios.post(`${API_URL}/validateEmail`, { token });
+    return response.data;
+  } catch (error) {
+    throw new Error(error.response?.data?.message || 'Failed Validate');
+  }
+};
+
 export default {
   login,
   register,
   forgotPassword,
   logout,
+  validateEmail
 };

src/roles/guest/auth/views/ValidateEmail.jsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import loader from '../../../../assets/images/loading.gif';
+import errorImg from '../../../../assets/images//illustration/IllustrationForgot.png';
+import checkEmail from '../../../../assets/images//illustration/emptyStudent.png';
+import useValidate from '../hooks/useValidate';
+
+const ValidateEmail = () => {
+    const { validateEmail, error } = useValidate();
+    const [ isTokenAvailable, setIsTokenAvailable ] = useState(true);
+    const useQuery = () => {
+        return new URLSearchParams(useLocation().search);
+    };
+    
+    const token = useQuery().get('token');
+    
+    useEffect(() => {
+        if (token) {
+            validateEmail(token);
+            console.log('good');
+        } else {
+            console.log('No token found in the URL.');
+            setIsTokenAvailable(false);
+        }
+    }, [token]);
+    
+  return (
+    <>
+        {isTokenAvailable ?(
+            error ?(
+                <div style={{backgroundColor:"#edf5ff"}} className='h-screen w-screen d-flex flex-column justify-content-center align-items-center'>
+                    <img src={errorImg} alt="" className='h-50 mb-2'/>
+                    <h2 style={{color:"#4b84ca"}}>{error}</h2>
+                </div>
+            ):(
+                <div style={{backgroundColor:"#edf5ff"}} className='h-screen w-screen d-flex flex-column justify-content-center align-items-center'>
+                    <img src={loader} alt=""/>
+                    <h2 style={{color:"#4b84ca"}}>Validating....</h2>
+                </div>
+            )
+        ):(
+            <div style={{backgroundColor:"#edf5ff"}} className='h-screen w-screen d-flex flex-column justify-content-center align-items-center'>
+                <img src={checkEmail} alt="" className='h-50 mb-2'/>
+                <h3 style={{color:"#4b84ca"}}>check your email for validation</h3>
+            </div>
+        )}
+    </>
+  );
+};
+
+export default ValidateEmail;