signout functionality/forgot password page

Author: murtazatankiwala456

src/App.js

@@ -24,6 +24,8 @@ import OrderSuccessPage from "./pages/OrderSuccessPage";
 import UserOrderPage from "./pages/UserOrderPage";
 import UserProfilePage from "./pages/UserProfilePage";
 import { fetchLoggedInUserAsync } from "./features/user/userSlice";
+import LogOut from "./features/auth/components/LogOut";
+import ForgotPasswordPage from "./pages/ForgotPasswordPage";
 const router = createBrowserRouter([
   {
     path: "/",
@@ -78,6 +80,14 @@ const router = createBrowserRouter([
     path: "/profile",
     element: <UserProfilePage></UserProfilePage>,
   },
+  {
+    path: "/logout",
+    element: <LogOut></LogOut>,
+  },
+  {
+    path: "/forgot-paasword",
+    element: <ForgotPasswordPage></ForgotPasswordPage>,
+  },
   {
     path: "*",
     element: <PageNotFound></PageNotFound>,

src/features/auth/authAPI.js

@@ -1,3 +1,4 @@
+// create user
 export function createUser(userData) {
   return new Promise(async (resolve) => {
     const response = await fetch("http://localhost:8080/users", {
@@ -10,6 +11,7 @@ export function createUser(userData) {
     resolve({ data });
   });
 }
+// check user
 export function checkUser(loginInfo) {
   return new Promise(async (resolve, reject) => {
     const email = loginInfo.email;
@@ -31,3 +33,10 @@ export function checkUser(loginInfo) {
     // TODO:on server it will only return some info of user (not password)
   });
 }
+// remove user
+export function signOut(userId) {
+  return new Promise(async (resolve) => {
+    // TODO: on server we will remove user session info
+    resolve({ data: "success" });
+  });
+}

src/features/auth/authSlice.js

@@ -1,5 +1,5 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
-import { checkUser, createUser } from "./authAPI";
+import { checkUser, createUser, signOut } from "./authAPI";
 import { updateUser } from "../user/userAPI";
 
 const initialState = {
@@ -32,6 +32,11 @@ export const checkUserAsync = createAsyncThunk(
     return response.data;
   }
 );
+export const signOutAsync = createAsyncThunk("user/signOut", async (userId) => {
+  const response = await signOut(userId);
+  // The value we return becomes the `fulfilled` action payload
+  return response.data;
+});
 
 export const authSlice = createSlice({
   name: "user",
@@ -67,6 +72,13 @@ export const authSlice = createSlice({
       .addCase(updateUserAsync.fulfilled, (state, action) => {
         state.status = "idle";
         state.loggedInUser = action.payload;
+      })
+      .addCase(signOutAsync.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(signOutAsync.fulfilled, (state, action) => {
+        state.status = "idle";
+        state.loggedInUser = null;
       });
   },
 });

src/features/auth/components/ForgotPassword.js

@@ -0,0 +1,84 @@
+import { useForm } from "react-hook-form";
+import { Link } from "react-router-dom";
+
+export default function ForgotPassword() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm();
+
+  console.log(errors);
+  return (
+    <>
+      <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
+        <div className="sm:mx-auto sm:w-full sm:max-w-sm">
+          <img
+            className="mx-auto h-10 w-auto"
+            src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
+            alt="Your Company"
+          />
+          <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
+            Enter Email to Reset Password
+          </h2>
+        </div>
+
+        <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+          <form
+            noValidate
+            className="space-y-6"
+            onSubmit={handleSubmit((data) => {
+              console.log(data);
+              //   TODO: implementation on backend with email
+            })}
+          >
+            <div>
+              <label
+                htmlFor="email"
+                className="block text-sm font-medium leading-6 text-gray-900"
+              >
+                Email address
+              </label>
+              <div className="mt-2">
+                <input
+                  id="email"
+                  {...register("email", {
+                    required: "email is required",
+                    pattern: {
+                      value: /\b[\w\.-]+@[\w\.-]+\.\w{2,4}\b/gi,
+                      message: "email is not valid",
+                    },
+                  })}
+                  type="email"
+                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                />
+                {errors.email && (
+                  <p className="text-red-500">{errors.email.message}</p>
+                )}
+              </div>
+            </div>
+
+            <div>
+              <button
+                type="submit"
+                className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+              >
+                Log in
+              </button>
+            </div>
+          </form>
+
+          <p className="mt-10 text-center text-sm text-gray-500">
+            Send me back to{" "}
+            <Link
+              to="/login"
+              className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
+            >
+              Login
+            </Link>
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}

src/features/auth/components/LogOut.js

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+import { selectLoggedInUser, signOutAsync } from "../authSlice";
+import { useDispatch, useSelector } from "react-redux";
+import { Navigate } from "react-router-dom";
+
+function LogOut() {
+  const dispatch = useDispatch();
+  const user = useSelector(selectLoggedInUser);
+  useEffect(() => {
+    dispatch(signOutAsync());
+  });
+  //but useEffect runs after render, so we have to delay
+  return <>{!user && <Navigate to="/login" replace={true}></Navigate>}</>;
+}
+
+export default LogOut;

src/features/auth/components/Login.js

@@ -76,12 +76,12 @@ export default function Login() {
                   Password
                 </label>
                 <div className="text-sm">
-                  <a
-                    href="#"
+                  <Link
+                    to="/forgot-paasword"
                     className="font-semibold text-indigo-600 hover:text-indigo-500"
                   >
                     Forgot password?
-                  </a>
+                  </Link>
                 </div>
               </div>
               <div className="mt-2">

src/features/auth/components/Signup.js

@@ -79,12 +79,12 @@ export default function Signup() {
                   Password
                 </label>
                 <div className="text-sm">
-                  <a
-                    href="#"
+                  <Link
+                    to="/forgot-paasword"
                     className="font-semibold text-indigo-600 hover:text-indigo-500"
                   >
                     Forgot password?
-                  </a>
+                  </Link>
                 </div>
               </div>
               <div className="mt-2">

src/features/navbar/Navbar.js

@@ -22,7 +22,7 @@ const navigation = [
 const userNavigation = [
   { name: "My Profile", link: "/profile" },
   { name: "My Orders", link: "/orders" },
-  { name: "Sign out", link: "/login" },
+  { name: "Sign out", link: "/logout" },
 ];
 
 function classNames(...classes) {

src/features/user/components/UserProfile.js

@@ -8,6 +8,8 @@ export default function UserProfile() {
   const user = useSelector(selectUserInfo);
   const [selectedEditIndex, setSelectedEditIndex] = useState(-1);
   const [showAddressForm, setshowAddressForm] = useState(false);
+
+  // TODO: we will add payment section when we work on backend
   const {
     register,
     handleSubmit,

src/pages/ForgotPasswordPage.js

@@ -0,0 +1,10 @@
+import ForgotPassword from "../features/auth/components/ForgotPassword";
+function ForgotPasswordPage() {
+  return (
+    <div>
+      <ForgotPassword></ForgotPassword>
+    </div>
+  );
+}
+
+export default ForgotPasswordPage;