completed

client/src/App.tsx

@@ -23,6 +23,8 @@ import { Toaster } from "react-hot-toast";
 import { getAllFoods } from "./state/slices/food.slice";
 import { fetchUser } from "./state/slices/user.slice";
 import { ProtectedRoutes } from "./guard/ProtectedRoutes";
+import { Verified } from "./Components/Verified/Verified";
+import { PageNotFound } from "./Components/PageNotFound/PageNotFound";
 
 function App() {
   const dispatch = useAppDispatch();
@@ -44,6 +46,7 @@ function App() {
 
               <Route path="/login" element={<Login />} />
               <Route path="/signup" element={<Signup />} />
+              <Route path="/signup/verify/:email" element={<Verified />} />
 
               <Route path="/food/:id" element={<Food />} />
               <Route path="/resetpassword/:token" element={<ResetPassword />} />
@@ -54,6 +57,7 @@ function App() {
                 <Route path="/account" element={<Account />} />
                 <Route path="/cart" element={<Cart />} />
               </Route>
+              <Route path="*" element={<PageNotFound />} />
             </Route>
           </Routes>
           <Footer />

client/src/Components/Login/Login.tsx

@@ -35,13 +35,16 @@ function index() {
       {
         loading: "Login in progress",
         success: (data: any) => {
-          if (!data.payload.success) {
-            throw data.payload.message;
+          if (data.payload?.email) {
+            navigate("/");
+            return `Successfully login`;
           }
-          navigate("/");
-          return `Successfully login`;
+
+          throw data.payload?.message || "Something went wrong";
         },
         error: (err) => {
+          console.log(err);
+
           return `${err}`;
         },
       },

client/src/Components/PageNotFound/PageNotFound.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Nav from "../Nav";
+import { Link } from "react-router-dom";
+
+export const PageNotFound = () => {
+  console.log("404");
+
+  return (
+    <>
+      <Nav dark={true} bgColor={"#f8f8f8"} />
+
+      <div className="flex h-[70vh] w-full flex-col items-center justify-center gap-2 text-black">
+        <div className="w-[220px] md:w-[350px]">
+          <img
+            src="https://res.cloudinary.com/dd39ktpmz/image/upload/v1691859844/ck/client_static/clds5fclmmr04posyf4h.webp"
+            alt="Restaurant nor found image"
+            width={"100%"}
+            height={"100%"}
+            loading={"lazy"}
+          />
+        </div>
+        <h1 className="text-3xl font-bold capitalize text-primary">
+          404 Page not found
+        </h1>
+        <Link
+          to={"/"}
+          className="w-full text-center text-lg font-bold text-blue-400 underline"
+        >
+          Go To Home
+        </Link>
+      </div>
+    </>
+  );
+};

client/src/Components/Signup/signup.tsx

@@ -32,10 +32,8 @@ function index() {
       .oneOf([yup.ref("password")], "Passwords do not match"),
   });
 
-  const onSubmit = async (data: ISignupForm) => {
-    console.log(data);
-
-    const { email, userName, password } = data;
+  const onSubmit = async (inputs: ISignupForm) => {
+    const { email, userName, password } = inputs;
     const resultAction = dispatch(
       signUpUser({ email, userName, password } as SignUp),
     );
@@ -44,13 +42,15 @@ function index() {
       resultAction,
       {
         loading: "Sign up in progress",
-        success: (data: any) => {
-          if (!data.payload.success) {
-            throw data.payload.message;
+        success: (data) => {
+          if (data.type.endsWith("/rejected")) {
+            throw (data.payload as any)?.message || "Something went wrong";
           }
+
           navigate("/");
           return `Successfully Signup`;
         },
+
         error: (err) => {
           return `${err}`;
         },

client/src/Components/UI/Form/PasswordInput/PasswordInput.tsx

@@ -27,16 +27,17 @@ export const PasswordInput = memo(
             ref={ref}
             {...props}
           />
-          <button
+          <div
             className="bg-white px-2 font-para"
             onClick={() => setVisible(!visible)}
+            role={"button"}
           >
             {visible ? (
               <i className="fa-solid fa-eye-slash text-primary"></i>
             ) : (
               <i className="fa-solid fa-eye text-primary"></i>
             )}
-          </button>
+          </div>
         </div>
       </div>
     );

client/src/Components/Verified/Verified.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from "react";
+import Nav from "../Nav";
+import Container from "../Container";
+import { useNavigate, useParams } from "react-router-dom";
+import { useAppDispatch } from "../../hooks";
+import { verifiyUser } from "../../state/slices/user.slice";
+import toast from "react-hot-toast";
+
+export const Verified = () => {
+  const { email } = useParams();
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+
+  const [message, setMessage] = useState("Verification in progress");
+
+  useEffect(() => {
+    if (email) {
+      const promiseData = dispatch(verifiyUser(email));
+      toast.promise(
+        promiseData,
+        {
+          loading: "Verification in progress",
+          success: (data: any) => {
+            if (data.payload?.email) {
+              navigate("/");
+              setMessage("successfully verified");
+              return `Successfully Verified`;
+            }
+
+            throw data.payload?.message || "Something went wrong";
+          },
+          error: (err) => {
+            setMessage(err);
+            return `${err}`;
+          },
+        },
+        {
+          success: {
+            duration: 2000,
+          },
+          error: {
+            duration: 1500,
+          },
+        },
+      );
+    }
+  }, []);
+
+  return (
+    <>
+      <Nav dark={true} bgColor={"#f8f8f8"} />
+      <Container>
+        <div className="flex min-h-[70vh] items-center justify-center">
+          <h3 className="font-head text-xl font-bold capitalize">{message}</h3>
+        </div>
+      </Container>
+    </>
+  );
+};

client/src/state/slices/user.slice.ts

@@ -100,7 +100,42 @@ export const signUpUser = createAsyncThunk<
     rejectValue: ServerError;
   } // config
 >("user/signup", async (user: SignUp, thunkApi) => {
-  const response = await Axios.post<ServerResponse>("/auth/signup")
+  const response = await Axios.post<ServerResponse>("/auth/signup", user)
+    .then(async (res) => {
+      let userData = res.data.user;
+
+      const userSession: UserSession = {
+        ...defaultUserSession,
+        ...userData,
+        auth: {
+          ...defaultUserSession.auth,
+          isAuth: true,
+          isUser: userData.role === "user" ? true : false,
+          isAdmin: userData.role === "admin" ? true : false,
+        },
+        geo: {
+          region: "puducherry",
+        },
+      };
+
+      return userSession;
+    })
+    .catch((err: ServerError) => {
+      if (isAxiosError(err)) {
+        return thunkApi.rejectWithValue(err.response?.data);
+      }
+    });
+  return response || defaultUserSession;
+});
+
+export const verifiyUser = createAsyncThunk<
+  UserSession, // return type
+  string, // Types for function
+  {
+    rejectValue: ServerError;
+  } // config
+>("user/verifiyUser", async (email: string, thunkApi) => {
+  const response = await Axios.post<ServerResponse>(`/auth/verify/${email}`)
     .then(async (res) => {
       let userData = res.data.user;
 
@@ -292,6 +327,14 @@ export const userSlice = createSlice({
           sessionStorage.setItem("User", JSON.stringify(action.payload.email));
         },
       )
+      .addCase(
+        verifiyUser.fulfilled,
+        (state, action: PayloadAction<UserSession>) => {
+          state.loading = false;
+          state.data = action.payload;
+          sessionStorage.setItem("User", JSON.stringify(action.payload.email));
+        },
+      )
       .addCase(
         fetchUser.fulfilled,
         (state, action: PayloadAction<UserSession>) => {