From dc894ee64b8513b4bb3b874b5b1766f6884eabf4 Mon Sep 17 00:00:00 2001 From: themodernmonk7 Date: Thu, 9 Feb 2023 20:39:05 +0530 Subject: [PATCH 1/5] Add verification page --- src/App.jsx | 12 ++++++++- src/pages/EmailVerification.jsx | 43 +++++++++++++++++++++++++++++++++ src/pages/index.jsx | 4 +-- 3 files changed, 56 insertions(+), 3 deletions(-) create mode 100644 src/pages/EmailVerification.jsx 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/pages/EmailVerification.jsx b/src/pages/EmailVerification.jsx new file mode 100644 index 0000000..fca32fd --- /dev/null +++ b/src/pages/EmailVerification.jsx @@ -0,0 +1,43 @@ +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(() => { + console.log("First 1") + 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/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 } From 66465285a3f19c3d26af76938957fbb9410b7349 Mon Sep 17 00:00:00 2001 From: themodernmonk7 Date: Fri, 10 Feb 2023 16:15:53 +0530 Subject: [PATCH 2/5] Email verification request complete --- src/features/user/userThunk.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/features/user/userThunk.js b/src/features/user/userThunk.js index 0cba415..082ed66 100644 --- a/src/features/user/userThunk.js +++ b/src/features/user/userThunk.js @@ -13,6 +13,16 @@ export const registerUserThunk = async (url, user, thunkAPI) => { } } +//** ==================== Email Verification ==================== */ +export const userAccountVerificationThunk = async({verificationToken, email}, thunkAPI) => { + // console.log(` Before request: ${verificationToken} and ${email} `) + 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 { From 0fb25aafff2f3d783cb6811ca7aeb5ff2365634b Mon Sep 17 00:00:00 2001 From: themodernmonk7 Date: Fri, 10 Feb 2023 16:46:35 +0530 Subject: [PATCH 3/5] Add default user image --- src/components/UserImage.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 From b1885936f99b65206bb023c9b33fcc07eeab824d Mon Sep 17 00:00:00 2001 From: themodernmonk7 Date: Fri, 10 Feb 2023 16:47:35 +0530 Subject: [PATCH 4/5] Fix: removed bio filed as mandatory --- src/components/ProfileForm.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 } From 057e41eaffbd62e65f4f08fc6ab446d0882ae405 Mon Sep 17 00:00:00 2001 From: themodernmonk7 Date: Fri, 3 Mar 2023 09:58:57 +0530 Subject: [PATCH 5/5] Email verification --- src/features/user/userSlice.js | 36 ++++++++++++++++++++++++++++----- src/features/user/userThunk.js | 11 +++++++--- src/pages/EmailVerification.jsx | 1 - src/pages/Register.jsx | 16 ++++++++++++--- 4 files changed, 52 insertions(+), 12 deletions(-) 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 082ed66..70deb85 100644 --- a/src/features/user/userThunk.js +++ b/src/features/user/userThunk.js @@ -14,10 +14,15 @@ export const registerUserThunk = async (url, user, thunkAPI) => { } //** ==================== Email Verification ==================== */ -export const userAccountVerificationThunk = async({verificationToken, email}, thunkAPI) => { - // console.log(` Before request: ${verificationToken} and ${email} `) +export const userAccountVerificationThunk = async ( + { verificationToken, email }, + thunkAPI +) => { try { - const {data} = await customFetch.post('/auth/email-verification', {verificationToken, email} ) + const { data } = await customFetch.post("/auth/email-verification", { + verificationToken, + email, + }) } catch (error) { return thunkAPI.rejectWithValue(error.response.data.msg) } diff --git a/src/pages/EmailVerification.jsx b/src/pages/EmailVerification.jsx index fca32fd..66692b1 100644 --- a/src/pages/EmailVerification.jsx +++ b/src/pages/EmailVerification.jsx @@ -13,7 +13,6 @@ const EmailVerification = () => { const dispatch = useDispatch() useEffect(() => { - console.log("First 1") if (!isLoading) { dispatch( userAccountVerification({ 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.{" "} +

+ )}