From 7dc31235f0e86561fa36e5ab105795f7b2dd14df Mon Sep 17 00:00:00 2001 From: "Siddhesh.More" Date: Wed, 25 Sep 2024 20:44:27 +0530 Subject: [PATCH] onboard update --- src/App.jsx | 9 +- src/Pages/Login/ForgotPassword..jsx | 277 +++++++++++++++++++++++ src/Pages/{ => Login}/Login.jsx | 151 +++++++------ src/Pages/Login/OtpScreen.jsx | 254 +++++++++++++++++++++ src/Pages/Login/ResetPassword.jsx | 336 ++++++++++++++++++++++++++++ src/Services/token.serivce.js | 52 ++++- 6 files changed, 1006 insertions(+), 73 deletions(-) create mode 100644 src/Pages/Login/ForgotPassword..jsx rename src/Pages/{ => Login}/Login.jsx (71%) create mode 100644 src/Pages/Login/OtpScreen.jsx create mode 100644 src/Pages/Login/ResetPassword.jsx diff --git a/src/App.jsx b/src/App.jsx index 5256323..4d91105 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -10,12 +10,15 @@ import { import "./App.css"; // Import CSS file import DefaultLayout from "./Layout/DefaultLayout"; import NotFound from "./Pages/NotFound"; -import Login from "./Pages/Login"; import GlobalStateContext from "./Contexts/GlobalStateContext"; import Cookies from "js-cookie"; import NoInternetScreen from "./Pages/NoInternetScreen"; import Welcome from "./Pages/PaymentSuccess"; import PaymentFailed from "./Pages/PaymentFailed"; +import Login from "./Pages/Login/Login"; +import ForgotPassword from "./Pages/Login/ForgotPassword."; +import OtpScreen from "./Pages/Login/OtpScreen"; +import ResetPassword from "./Pages/Login/ResetPassword"; const App = () => { // const { isAuthenticate } = useSelector((state) => state?.auth); @@ -54,6 +57,10 @@ const App = () => { } /> + } /> + } /> + } /> + } /> } /> } /> { + const [show, setShow] = useState(false); + const handleClick = () => setShow(!show); + const { isAuthenticate, setIsAuthenticate } = useContext(GlobalStateContext); + const toast = useToast(); + + const [isLoading, setIsLoading] = useState(false); + + const navigate = useNavigate(); + const dispatch = useDispatch(); + + const [forgotPassword] = useForgotPasswordMutation() + + useEffect(() => { + if (isAuthenticate) { + navigate("/sponser"); + } + }, [navigate, isAuthenticate]); + + + + + const onSubmit = async (value) => { + setIsLoading(true); + try { + const res = await forgotPassword(value).unwrap(); + console.log(res); + + if (res?.statusCode === 200) { + toast({ + render: () => ( + + ), + }) + setIsLoading(false); + localStorage?.setItem("email", value?.emailAddress) + localStorage?.setItem('code',res?.data) + // setIsAuthenticate(true); + // Cookies.set("isAuthenticated", true, { expires: 7 }); + navigate(`/otp-screen/${res?.data}`); + reset(); + }else if(res?.error){ + + toast({ + render: () => ( + + ), + }) + setIsLoading(false); + + } + + } catch (err) { + if (err) { + toast({ + render: () => ( + + ), + }); + setIsLoading(false); + } + } + + + + + + + // if (value.emailAddress === "admin@optifii.com" && value.password_hash === "Admin@123") { + // return setTimeout(() => { + // // dispatch(loginUser(true)); + // setIsAuthenticate(true); + // setIsLoading(false); + // toast({ + // render: () => ( + // + // ), + // }); + + // Cookies.set("isAuthenticated", true, { expires: 7 }); + // navigate("/"); + // }, 2000); // 3-second delay + // } else { + // return setTimeout(() => { + // // dispatch(loginUser(true)); + // setIsAuthenticate(false); + // setIsLoading(false); + + // toast({ + // render: () => ( + // + // ), + // }); + // reset(); + // navigate("/login"); + // }, 2000); + // } + }; + + const { + register, + handleSubmit, + reset, + formState: { errors }, + } = useForm({ + resolver: yupResolver(validationSchema), + }); + + console.log(errors); + + + return ( + + + + + + + + + + Forgot Password + + + Enter your Email Address + + + + + {/* + E-mail * + */} + + + + + + + + + {errors.emailAddress && ( + + {errors.emailAddress.message} + + )} + + + + + + {/* */} + + {/* navigate('/forgot-password')} w={'100%'} color={'gray.500'} fontSize={'sm'} textAlign={'center'} >Forgot Password */} + + + Optifii v1.0.0 + + + + + + + + bg-img + + + + ); +}; + +export default ForgotPassword; diff --git a/src/Pages/Login.jsx b/src/Pages/Login/Login.jsx similarity index 71% rename from src/Pages/Login.jsx rename to src/Pages/Login/Login.jsx index 18c707c..f075c7a 100644 --- a/src/Pages/Login.jsx +++ b/src/Pages/Login/Login.jsx @@ -1,15 +1,15 @@ import { useNavigate } from "react-router-dom"; -import Input01 from "../Components/Inputs/Input01"; +import Input01 from "../../Components/Inputs/Input01"; import { useDispatch, useSelector } from "react-redux"; -import { loginUser } from "../Redux/Slice/auth"; +import { loginUser } from "../../Redux/Slice/auth"; import { useContext, useEffect, useState } from "react"; -import Button01 from "../Components/Buttons/PrimaryButton"; +import Button01 from "../../Components/Buttons/PrimaryButton"; import { yupResolver } from "@hookform/resolvers/yup"; import { useForm } from "react-hook-form"; import { TiWarning } from "react-icons/ti"; -import Loader01 from "../Components/Loaders/Loader01"; -import Asset1 from "../assets/loginpat.png"; -import logo from "../assets/optifii_white.svg"; +import Loader01 from "../../Components/Loaders/Loader01"; +import Asset1 from "../../assets/loginpat.png"; +import logo from "../../assets/optifii_white.svg"; import { Box, Button, @@ -18,19 +18,18 @@ import { Image, Input, InputGroup, + InputLeftElement, InputRightElement, Text, useToast, } from "@chakra-ui/react"; -import GlobalStateContext from "../Contexts/GlobalStateContext"; +import GlobalStateContext from "../../Contexts/GlobalStateContext"; import Cookies from "js-cookie"; -import ToastBox from "../Components/ToastBox"; -import { useLoginMutation } from "../Services/token.serivce"; - - -// import { yupResolver } from "@hookform/resolvers/yup"; +import ToastBox from "../../Components/ToastBox"; +import { useLoginMutation } from "../../Services/token.serivce"; import * as Yup from "yup"; -import PrimaryButton from "../Components/Buttons/PrimaryButton"; +import { EmailIcon, LockIcon, UnlockIcon } from "@chakra-ui/icons"; +import { PiPassword } from "react-icons/pi"; const validationSchema = Yup.object().shape({ @@ -62,67 +61,74 @@ const Login = () => { const onSubmit = async (value) => { setIsLoading(true); - // try { - // // const res = await login(value).unwrap(); + try { + const res = await login(value).unwrap(); + console.log(res); - // if (res?.statusCode === 200) { - // toast({ - // render: () => ( - // - // ), - // }) - // setIsLoading(false); - // setIsAuthenticate(true); - // Cookies.set("isAuthenticated", true, { expires: 7 }); - // navigate("/sponser"); - // reset(); - // } + if (res?.statusCode === 200) { + toast({ + render: () => ( + + ), + }) + setIsLoading(false); + navigate(`/otp-screen/`) + }else if(res?.error){ + + toast({ + render: () => ( + + ), + }) + setIsLoading(false); - // } catch (err) { - // if (err) { + } + + } catch (err) { + if (err) { + toast({ + render: () => ( + + ), + }); + setIsLoading(false); + } + } + + + + + + + // if (value.emailAddress === "admin@optifii.com" && value.password_hash === "Admin@123") { + // return setTimeout(() => { + // // dispatch(loginUser(true)); + // setIsAuthenticate(true); + // setIsLoading(false); // toast({ // render: () => ( - // + // // ), // }); + + // Cookies.set("isAuthenticated", true, { expires: 7 }); + // navigate("/"); + // }, 2000); // 3-second delay + // } else { + // return setTimeout(() => { + // // dispatch(loginUser(true)); + // setIsAuthenticate(false); // setIsLoading(false); - // } + + // toast({ + // render: () => ( + // + // ), + // }); + // reset(); + // navigate("/login"); + // }, 2000); // } - - - - - - - if (value.emailAddress === "admin@optifii.com" && value.password_hash === "Admin@123") { - return setTimeout(() => { - // dispatch(loginUser(true)); - setIsAuthenticate(true); - setIsLoading(false); - toast({ - render: () => ( - - ), - }); - - Cookies.set("isAuthenticated", true, { expires: 7 }); - navigate("/"); - }, 2000); // 3-second delay - } else { - return setTimeout(() => { - // dispatch(loginUser(true)); - setIsAuthenticate(false); - setIsLoading(false); - - toast({ - render: () => ( - - ), - }); - reset(); - navigate("/login"); - }, 2000); - } }; const { @@ -183,6 +189,11 @@ const Login = () => { E-mail * */} + + + + + { size="lg" className="web-text-medium" /> + {errors.emailAddress && ( {errors.emailAddress.message} @@ -205,7 +217,12 @@ const Login = () => { Password * */} + + + +{show? : } + { {/* */} - Forgot Password + navigate('/forgot-password')} w={'100%'} color={'gray.500'} fontSize={'sm'} textAlign={'center'} >Forgot Password { + const params = useParams() + const [show, setShow] = useState(false); + const handleClick = () => setShow(!show); + const { isAuthenticate, setIsAuthenticate } = useContext(GlobalStateContext); + const toast = useToast(); + + const [pin, setPin] = useState(""); // State to store pin value + + // Handle pin change + const handlePinChange = (value) => { + setPin(value); + }; + + console.log(pin); + + const [isLoading, setIsLoading] = useState(false); + + const navigate = useNavigate(); + const dispatch = useDispatch(); + + const [resendPassword] = useResendOtpMutation(); + + useEffect(() => { + if (isAuthenticate) { + navigate("/sponser"); + } + }, [navigate, isAuthenticate]); + + const onSubmit = async (e) => { + e.preventDefault(); + setIsLoading(true); + + if (params?.id) { + // 3-second delay before navigating to "/reset-password" + setTimeout(() => { + navigate("/reset-password"); + setIsLoading(false); + }, 3000); + } else { + // 3-second delay before setting authentication, setting cookies, and navigating + setTimeout(() => { + setIsAuthenticate(true); + setIsLoading(false); + Cookies.set("isAuthenticated", true, { expires: 7 }); + navigate("/"); + reset(); + }, 3000); + } + }; + + + const handleResendOtp = async () => { + + + + + + try { + const res = await resendPassword().unwrap(); + console.log(res); + if (res?.statusCode === 200) { + toast({ + render: () => ( + + ), + }) + + }else if(res?.error){ + toast({ + render: () => ( + + ), + }) + } + } catch (err) { + if (err) { + toast({ + render: () => ( + + ), + }); + setIsLoading(false); + } + } + + } + + + + + + + return ( + + + + + + + + Forgot Password + + + Enter OTP send to {localStorage?.getItem("email")} + + + + + + + + + + + + + + + + + + + + {/* Resend Otp */} + Resend Otp + + + + + {/* */} + + {/* navigate('/forgot-password')} w={'100%'} color={'gray.500'} fontSize={'sm'} textAlign={'center'} >Forgot Password */} + + + Optifii v1.0.0 + + + + bg-img + + ); +}; + +export default OtpScreen; diff --git a/src/Pages/Login/ResetPassword.jsx b/src/Pages/Login/ResetPassword.jsx new file mode 100644 index 0000000..cbdfdbb --- /dev/null +++ b/src/Pages/Login/ResetPassword.jsx @@ -0,0 +1,336 @@ +import { useNavigate } from "react-router-dom"; +import Input01 from "../../Components/Inputs/Input01"; +import { useDispatch, useSelector } from "react-redux"; +import { loginUser } from "../../Redux/Slice/auth"; +import { useContext, useEffect, useState } from "react"; +import Button01 from "../../Components/Buttons/PrimaryButton"; +import { yupResolver } from "@hookform/resolvers/yup"; +import { useForm } from "react-hook-form"; +import { TiWarning } from "react-icons/ti"; +import Loader01 from "../../Components/Loaders/Loader01"; +import Asset1 from "../../assets/loginpat.png"; +import logo from "../../assets/optifii_white.svg"; +import { + Box, + Button, + FormControl, + FormLabel, + Image, + Input, + InputGroup, + InputLeftElement, + InputRightElement, + Text, + useToast, +} from "@chakra-ui/react"; +import GlobalStateContext from "../../Contexts/GlobalStateContext"; +import Cookies from "js-cookie"; +import ToastBox from "../../Components/ToastBox"; +import { useLoginMutation, useResetPasswordMutation } from "../../Services/token.serivce"; +import * as Yup from "yup"; +import { LockIcon, UnlockIcon } from "@chakra-ui/icons"; + + + + + +const validationSchema = Yup.object().shape({ + password: Yup.string() + .required("Password is required") + .min(6, "Password must be at least 6 characters long"), // Example constraint + + confirmPassword: Yup.string() + .oneOf([Yup.ref('password'), null], "Passwords must match") // Match password field + .required("Confirm Password is required"), + }); + +const ResetPassword = () => { + const [show, setShow] = useState(false); + const [showConfirm, setShowConfirm] = useState(false); + const handleClick = () => setShow(!show); + const handleClickConfirm = () => setShowConfirm(!showConfirm); + const { isAuthenticate, setIsAuthenticate } = useContext(GlobalStateContext); + const toast = useToast(); + + const [isLoading, setIsLoading] = useState(false); + + const navigate = useNavigate(); + const dispatch = useDispatch(); + + const [resetPassword] = useResetPasswordMutation(); + + useEffect(() => { + if (isAuthenticate) { + navigate("/sponser"); + } + }, [navigate, isAuthenticate]); + + const onSubmit = async (value) => { + setIsLoading(true); + const data = { + ...value, + code:localStorage?.getItem('code') + } + + console.log(value); + + try { + const res = await resetPassword(data).unwrap(); + console.log(res); + + if (res?.statusCode === 200) { + toast({ + render: () => ( + + ), + }) + setIsLoading(false); + setIsAuthenticate(true); + Cookies.set("isAuthenticated", true, { expires: 7 }); + // navigate("/sponser"); + // reset(); + }else if(res?.error){ + + toast({ + render: () => ( + + ), + }) + setIsLoading(false); + + } + + } catch (err) { + if (err) { + toast({ + render: () => ( + + ), + }); + setIsLoading(false); + } + } + + + + + + + // if (value.emailAddress === "admin@optifii.com" && value.password_hash === "Admin@123") { + // return setTimeout(() => { + // // dispatch(loginUser(true)); + // setIsAuthenticate(true); + // setIsLoading(false); + // toast({ + // render: () => ( + // + // ), + // }); + + // Cookies.set("isAuthenticated", true, { expires: 7 }); + // navigate("/"); + // }, 2000); // 3-second delay + // } else { + // return setTimeout(() => { + // // dispatch(loginUser(true)); + // setIsAuthenticate(false); + // setIsLoading(false); + + // toast({ + // render: () => ( + // + // ), + // }); + // reset(); + // navigate("/login"); + // }, 2000); + // } + }; + + const { + register, + handleSubmit, + reset, + formState: { errors }, + } = useForm({ + resolver: yupResolver(validationSchema), + }); + + console.log(errors); + + + return ( + + + + + + + + + + Reset Password + + + Please create a new Password + + + + + {/* + Password * + */} + + + +{show? : } + + + + + + + {errors.password && ( + + {errors.password.message} + + )} + + + + + {/* + Password * + */} + + + + +{showConfirm? : } + + + + + + + {errors.confirmPassword && ( + + {errors.confirmPassword.message} + + )} + + + + + {/* */} + + {/* navigate('/forgot-password')} w={'100%'} color={'gray.500'} fontSize={'sm'} textAlign={'center'} >Forgot Password */} + + + Optifii v1.0.0 + + + + + + + + bg-img + + + + ); +}; + +export default ResetPassword; diff --git a/src/Services/token.serivce.js b/src/Services/token.serivce.js index 1dedc92..b21936d 100644 --- a/src/Services/token.serivce.js +++ b/src/Services/token.serivce.js @@ -1,4 +1,5 @@ import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; +import Cookies from "js-cookie"; // Define a base query function with RTK Query // export const baseQuery = fetchBaseQuery({ @@ -13,9 +14,11 @@ import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; // }); // Define a base query function with token refresh logic + +console.log(import.meta.env.VITE_BASE_URL); export const baseQuery = async (args, api, extraOptions) => { let result = await fetchBaseQuery({ - baseUrl: import.meta.env.VITE_BAS_URL, + baseUrl: import.meta.env.VITE_BASE_URL, prepareHeaders: (headers) => { const token = localStorage.getItem("accessToken"); if (token) { @@ -31,10 +34,10 @@ export const baseQuery = async (args, api, extraOptions) => { // if (refreshToken) { // try { // const refreshResult = await fetchBaseQuery({ - // baseUrl: import.meta.env.VITE_BAS_URL, + // baseUrl: import.meta.env.VITE_BASE_URL, // })( // { - // url: "/auth/user/regenerate-token", + // url: "/regenerate-token", // method: "POST", // body: { refreshToken }, // }, @@ -56,7 +59,7 @@ export const baseQuery = async (args, api, extraOptions) => { // // Retry the original request with the new token // result = await fetchBaseQuery({ - // baseUrl: import.meta.env.VITE_BAS_URL, + // baseUrl: import.meta.env.VITE_BASE_URL, // prepareHeaders: (headers) => { // const token = localStorage.getItem("accessToken"); // if (token) { @@ -105,6 +108,7 @@ export const apiSlice = createApi({ } }, }), + refreshToken: builder.mutation({ query: (refreshToken) => ({ url: "/auth/user/regenerate-token", @@ -112,7 +116,45 @@ export const apiSlice = createApi({ body: { refreshToken }, }), }), + + + forgotPassword: builder.mutation({ + query: (data) => ({ + url: "/auth/admin/forget-password", + method: "POST", + body: data , + }), + }), + + + + + resetPassword: builder.mutation({ + query: (data) => ({ + url: "/auth/admin/reset-password", + method: "POST", + body: data , + }), + }), + + + + + + resendOtp: builder.mutation({ + query: (data) => ({ + url: "/auth/admin/resend-otp", + method: "POST", + body: data , + }), + }), + + + + + + }), }); -export const { useLoginMutation, useRefreshTokenMutation } = apiSlice; +export const { useLoginMutation, useRefreshTokenMutation, useForgotPasswordMutation, useResetPasswordMutation,useResendOtpMutation } = apiSlice;