diff --git a/src/App.jsx b/src/App.jsx index 957d8e7..3f41c10 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,11 @@ import { BrowserRouter, Routes, Route } from "react-router-dom" -import { Error, Landing, Register, ProtectedRoute } from "./pages" +import { + Error, + Landing, + Register, + ProtectedRoute, + EmailVerification, +} from "./pages" import { AddJob, AllJobs, @@ -29,6 +35,10 @@ function App() { } /> } /> + } + /> } /> diff --git a/src/components/ProfileForm.jsx b/src/components/ProfileForm.jsx index ae946de..daf0ebb 100644 --- a/src/components/ProfileForm.jsx +++ b/src/components/ProfileForm.jsx @@ -26,7 +26,7 @@ const ProfileForm = () => { e.preventDefault() const { image } = user const { name, lastName, email, location, bio } = userData - if (!name || !lastName || !email || !location || !bio) { + if (!name || !lastName || !email || !location) { toast.error("Please fill out all fields") return } diff --git a/src/components/UserImage.jsx b/src/components/UserImage.jsx index 962592d..84747df 100644 --- a/src/components/UserImage.jsx +++ b/src/components/UserImage.jsx @@ -1,11 +1,10 @@ import React from 'react' import { useSelector } from "react-redux" -import defaultUserImage from "../assets/default_user_avatar.jpg" const UserImage = ({ className }) => { const { user } = useSelector((store) => store.user) return ( {"profile diff --git a/src/features/user/userSlice.js b/src/features/user/userSlice.js index ba7c8ec..3533e8d 100644 --- a/src/features/user/userSlice.js +++ b/src/features/user/userSlice.js @@ -1,6 +1,5 @@ import { createAsyncThunk, createSlice } from "@reduxjs/toolkit" import { toast } from "react-hot-toast" -import customFetch from "../../utils/axios" import { addUserToLocalStorage, @@ -13,12 +12,14 @@ import { registerUserThunk, updateUserThunk, uploadUserImageThunk, + userAccountVerificationThunk, } from "./userThunk" getUserFromLocalStorage const initialState = { isLoading: false, uploadLoading: false, + userRegisterSuccess: false, user: getUserFromLocalStorage(), } @@ -30,6 +31,12 @@ export const registerUser = createAsyncThunk( } ) +//** ==================== Email Verification ==================== */ +export const userAccountVerification = createAsyncThunk( + "user/userAccountVerification", + userAccountVerificationThunk +) + //** ==================== Login User ==================== */ export const loginUser = createAsyncThunk("user/loginUser", loginUserThunk) @@ -64,11 +71,12 @@ const userSlice = createSlice({ state.isLoading = true }) .addCase(registerUser.fulfilled, (state, action) => { - const { user } = action.payload state.isLoading = false - state.user = user - addUserToLocalStorage(user) - toast.success(`Hello ${user.name}`) + state.userRegisterSuccess = true + // const { user } = action.payload + // state.user = user + // addUserToLocalStorage(user) + // toast.success(`Hello ${user.name}`) }) .addCase(registerUser.rejected, (state, action) => { state.isLoading = false @@ -76,6 +84,24 @@ const userSlice = createSlice({ action.payload || "Something went wrong, Please try again later." ) }) + //** ==================== Email Verification ==================== */ + .addCase(userAccountVerification.pending, (state) => { + state.isLoading = true + }) + .addCase(userAccountVerification.fulfilled, (state, action) => { + state.isLoading = false + // const { user } = action.payload + // state.user = user + // addUserToLocalStorage(user) + // toast.success(`Hello ${user.name}`) + toast.success( + action.payload || "Your account has been confirmed successfully!" + ) + }) + .addCase(userAccountVerification.rejected, (state, action) => { + state.isLoading = false + toast.error(action.payload || "Your account has been confirmed") + }) //** ==================== LOGIN USER ==================== */ .addCase(loginUser.pending, (state) => { state.isLoading = true diff --git a/src/features/user/userThunk.js b/src/features/user/userThunk.js index 0cba415..70deb85 100644 --- a/src/features/user/userThunk.js +++ b/src/features/user/userThunk.js @@ -13,6 +13,21 @@ export const registerUserThunk = async (url, user, thunkAPI) => { } } +//** ==================== Email Verification ==================== */ +export const userAccountVerificationThunk = async ( + { verificationToken, email }, + thunkAPI +) => { + try { + const { data } = await customFetch.post("/auth/email-verification", { + verificationToken, + email, + }) + } catch (error) { + return thunkAPI.rejectWithValue(error.response.data.msg) + } +} + //** ==================== Login User ==================== */ export const loginUserThunk = async (user, thunkAPI) => { try { diff --git a/src/pages/EmailVerification.jsx b/src/pages/EmailVerification.jsx new file mode 100644 index 0000000..66692b1 --- /dev/null +++ b/src/pages/EmailVerification.jsx @@ -0,0 +1,42 @@ +import React, { useEffect } from "react" +import { useDispatch, useSelector } from "react-redux" +import { Link, useLocation } from "react-router-dom" +import { userAccountVerification } from "../features/user/userSlice" + +const useQuery = () => { + return new URLSearchParams(useLocation().search) +} + +const EmailVerification = () => { + const { isLoading } = useSelector((store) => store.user) + const query = useQuery() + const dispatch = useDispatch() + + useEffect(() => { + if (!isLoading) { + dispatch( + userAccountVerification({ + verificationToken: query.get("token"), + email: query.get("email"), + }) + ) + } + }, []) + + return ( + <> +
+

Account Confirmed

+ + {" "} + Please Login{" "} + +
+ + ) +} + +export default EmailVerification diff --git a/src/pages/Register.jsx b/src/pages/Register.jsx index 72ea057..b5f0aaf 100644 --- a/src/pages/Register.jsx +++ b/src/pages/Register.jsx @@ -1,11 +1,13 @@ import UserImage from "../assets/user.jpg" import Logo from "../assets/Logo.png" import { RegisterForm } from "../components" +import { useSelector } from "react-redux" const Register = () => { + const { userRegisterSuccess } = useSelector((store) => store.user) return ( <> -
+
{/* Right */} {/* Left */} -
+
+ {/*
*/}
{

Hello Again!

- + {!userRegisterSuccess ? ( + + ) : ( +

+ {" "} + Success! Please Check your email to verify account.{" "} +

+ )}
diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 82d1d5b..99e74ed 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -2,5 +2,5 @@ import Error from "./Error" import Landing from "./Landing" import ProtectedRoute from "./ProtectedRoute" import Register from "./Register" - -export { Error, Landing, ProtectedRoute, Register } +import EmailVerification from "./EmailVerification" +export { Error, Landing, ProtectedRoute, Register, EmailVerification }