diff --git a/src/Components/SuccessPendingModal/LoginModal.jsx b/src/Components/SuccessPendingModal/LoginModal.jsx new file mode 100644 index 0000000..179ca39 --- /dev/null +++ b/src/Components/SuccessPendingModal/LoginModal.jsx @@ -0,0 +1,154 @@ +import React from 'react'; +import { + Box, HStack, Text, Modal, ModalOverlay, ModalHeader, ModalCloseButton, ModalBody, ModalContent, Button, Image, + VStack, + Link +} from '@chakra-ui/react'; +import { motion } from 'framer-motion'; +import { CiMobile3 } from "react-icons/ci"; +import { FcGoogle } from "react-icons/fc"; +import bell from "../../assets/bell.svg" +import { Navigate, useNavigate } from 'react-router-dom'; + +// Define motion components +const MotionBox = motion(Box); +const MotionImage = motion(Image); // Motion component for Image + +const LoginModal = ({ isOpen, onClose }) => { + + const navigate = useNavigate(); + + return ( + <> + + + + + + + + bell + + + Register to get free access + to all our recourses + + + Sign up to see more + + + + + + + + + By continuing, you agree to the Terms of Service + + + and acknowledge you’ve read our Privacy Policy. + + + Already a member? + + + + + + + ); +} + +export default LoginModal; diff --git a/src/Components/SuccessPendingModal/PendingModal.jsx b/src/Components/SuccessPendingModal/PendingModal.jsx index b76cf0f..0440bcd 100644 --- a/src/Components/SuccessPendingModal/PendingModal.jsx +++ b/src/Components/SuccessPendingModal/PendingModal.jsx @@ -14,7 +14,7 @@ const PendingModal = ({ isOpen, onClose }) => { return ( <> - + diff --git a/src/Components/SuccessPendingModal/SuccessModal.jsx b/src/Components/SuccessPendingModal/SuccessModal.jsx index 6993337..9f48cfe 100644 --- a/src/Components/SuccessPendingModal/SuccessModal.jsx +++ b/src/Components/SuccessPendingModal/SuccessModal.jsx @@ -15,7 +15,7 @@ const SuccessModal = ({isOpen,onClose}) => { return ( <> - + diff --git a/src/Pages/Login.jsx b/src/Pages/Login.jsx index 9d8746d..68df05d 100644 --- a/src/Pages/Login.jsx +++ b/src/Pages/Login.jsx @@ -63,7 +63,7 @@ const Login = () => { // dispatch(loginUser(true)); setIsAuthenticate(true); setIsLoading(false); - toast({ + toast({ // position: "bottom-left", render: () => ( diff --git a/src/Pages/Onboarding/Header.jsx b/src/Pages/Onboarding/Header.jsx index a8ea80b..c2abc1f 100644 --- a/src/Pages/Onboarding/Header.jsx +++ b/src/Pages/Onboarding/Header.jsx @@ -1,10 +1,15 @@ -import { Box, Container, HStack, Image, Text } from '@chakra-ui/react' +import { Box, Container, HStack, Image, Text, useDisclosure } from '@chakra-ui/react' import React from 'react' import SecondaryButton from '../../Components/Buttons/SecondaryButton' import PrimaryButton from '../../Components/Buttons/PrimaryButton' import optifii_logo from '../../assets/optifii_logo.svg' +import LoginModal from '../../Components/SuccessPendingModal/LoginModal'; + const Header = () => { + + const { isOpen, onOpen, onClose } = useDisclosure(); + return ( { Optifii Logo - + + ) diff --git a/src/Pages/Onboarding/LoginEmailAddress.jsx b/src/Pages/Onboarding/LoginEmailAddress.jsx index 759b327..9e2edcc 100644 --- a/src/Pages/Onboarding/LoginEmailAddress.jsx +++ b/src/Pages/Onboarding/LoginEmailAddress.jsx @@ -1,15 +1,39 @@ -import React from 'react' -import { Box, Input, Button, Text, Checkbox, HStack, Link, Container, InputGroup, InputLeftElement, Divider } from '@chakra-ui/react'; -import PrimaryButton from '../../Components/Buttons/PrimaryButton' -import { HiOutlineMail } from "react-icons/hi"; +import React from 'react'; +import { Box, Input, Button, Text, HStack, Link, Container, InputGroup, InputLeftElement, Divider, FormControl, FormLabel, FormErrorMessage } from '@chakra-ui/react'; +import PrimaryButton from '../../Components/Buttons/PrimaryButton'; import SecondaryButton from '../../Components/Buttons/SecondaryButton'; +import { HiOutlineMail } from "react-icons/hi"; +import { TiWarning } from 'react-icons/ti'; import LoginEmailAddressFrame from './LoginEmailAddressFrame'; import { useNavigate } from 'react-router-dom'; +import * as Yup from "yup"; +import { yupResolver } from '@hookform/resolvers/yup'; +import { useForm } from 'react-hook-form'; + +// Define your validation schema with Yup +const emailValidation = Yup.object().shape({ + emailAddress: Yup.string() + .email("Invalid email address") + .required("Email address is required"), +}); const LoginEmailAddress = () => { - const navigate = useNavigate(); + const { + register, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: yupResolver(emailValidation), + }); + + const onSubmit = (data) => { + console.log(data?.emailAddress); + localStorage.setItem('email', data?.emailAddress); + navigate("/login-otp"); + }; + return ( @@ -18,8 +42,8 @@ const LoginEmailAddress = () => { my={5} boxShadow={"md"} > - - + + { Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur. - - Enter e-mail address - - - - - - - + + + Enter e-mail address + + + + + + + + + {errors?.emailAddress && ( + + {errors?.emailAddress?.message} + + )} + + - - - - navigate("/login-otp")} - w={"300px"} title={"Send OTP"} /> - - - Don’t have an account? - Signup - - + + + + + Don’t have an account? + Signup + { >Or - - - - - + + navigate("/login-phone-number")} + /> + - - - - ) -} + ); +}; -export default LoginEmailAddress \ No newline at end of file +export default LoginEmailAddress; diff --git a/src/Pages/Onboarding/LoginOtp.jsx b/src/Pages/Onboarding/LoginOtp.jsx index 2aafa21..4f6eb7d 100644 --- a/src/Pages/Onboarding/LoginOtp.jsx +++ b/src/Pages/Onboarding/LoginOtp.jsx @@ -1,72 +1,86 @@ -import React from 'react' -import { Box, Input, PinInput, PinInputField, Button, Text, Checkbox, HStack, Link, Container, InputGroup, InputLeftElement, Divider } from '@chakra-ui/react'; -import PrimaryButton from '../../Components/Buttons/PrimaryButton' +import React, { useState } from 'react'; +import { Box, PinInput, PinInputField, Text, HStack, Container, useToast } from '@chakra-ui/react'; +import PrimaryButton from '../../Components/Buttons/PrimaryButton'; import LoginOtpFrame from './LoginOtpFrame'; +import { useNavigate } from 'react-router-dom'; +import Cookies from 'js-cookie'; +import ToastBox from '../../Components/ToastBox'; const LoginOtp = () => { + + const [otp, setOtp] = useState(""); + const navigate = useNavigate(); + const toast = useToast(); + + const handleOtpChange = (value) => { + setOtp(value); + }; + + const handleLogin = () => { + const email = localStorage.getItem("email"); + const phoneNumber = localStorage.getItem("phoneNumber"); + + if (email === "wdi@gmail.com" && phoneNumber === "9988776655" && otp === "1234") { + + setTimeout(() => { + toast({ + render: () => ( + + ), + }); + + Cookies.set("isAuthenticated", true, { expires: 7 }); + navigate("/*"); + }, 2000); // 2-second delay + } else { + setTimeout(() => { + toast({ + render: () => ( + + ), + }); + + reset(); + navigate("/login-phone-number"); + }, 2000); // 2-second delay + } + }; + return ( - + - - + + Enter OTP - + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur. - - - - - + + + + + - - - - + + - - - - ) -} + ); +}; -export default LoginOtp \ No newline at end of file +export default LoginOtp; diff --git a/src/Pages/Onboarding/LoginPhoneNumber.jsx b/src/Pages/Onboarding/LoginPhoneNumber.jsx index a374813..fc251f9 100644 --- a/src/Pages/Onboarding/LoginPhoneNumber.jsx +++ b/src/Pages/Onboarding/LoginPhoneNumber.jsx @@ -1,15 +1,43 @@ -import React from 'react' -import LoginPhoneNumberFrame from './LoginPhoneNumberFrame' -import { Box, Input, Button, Text, Checkbox, HStack, Link, Container, InputGroup, InputLeftElement, Divider } from '@chakra-ui/react'; -import PrimaryButton from '../../Components/Buttons/PrimaryButton' +import React from 'react'; +import LoginPhoneNumberFrame from './LoginPhoneNumberFrame'; +import { Box, Input, Text, HStack, Link, Container, InputGroup, InputLeftElement, Divider } from '@chakra-ui/react'; +import PrimaryButton from '../../Components/Buttons/PrimaryButton'; import { MdOutlineLocalPhone } from "react-icons/md"; import SecondaryButton from '../../Components/Buttons/SecondaryButton'; import { useNavigate } from 'react-router-dom'; +import * as Yup from "yup"; +import { yupResolver } from '@hookform/resolvers/yup'; +import { useForm } from 'react-hook-form'; +import { TiWarning } from 'react-icons/ti'; + +// Define your validation schema with Yup +const phoneValidation = Yup.object().shape({ + phoneNumber: Yup.string() + .required("Phone number is required") + .matches(/^[0-9]+$/, "Phone number should only contain digits") + .min(10, "Phone number should be at least 10 digits") + .max(15, "Phone number should be at most 15 digits"), +}); const LoginPhoneNumber = () => { - const navigate = useNavigate(); + // Setup form handling with validation + const { + register, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: yupResolver(phoneValidation), + }); + + // Handle form submission + const onSubmit = (data) => { + console.log(data?.phoneNumber); + localStorage.setItem('phoneNumber', data?.phoneNumber); + navigate("/login-otp"); + }; + return ( @@ -18,8 +46,8 @@ const LoginPhoneNumber = () => { my={5} boxShadow={"md"} > - - + + { - + + {errors?.phoneNumber && ( + + + {errors?.phoneNumber?.message} + + + )} - - + navigate("/login-otp")} - w={"300px"} title={"Send OTP"} /> + type="submit" + w={"300px"} + title={"Send OTP"} + /> - - Don’t have an account? + + Don’t have an account? Signup @@ -79,20 +123,21 @@ const LoginPhoneNumber = () => { - - + + navigate("/login-email-address")} + /> - - - - ) + ); } -export default LoginPhoneNumber \ No newline at end of file +export default LoginPhoneNumber; diff --git a/src/Pages/Onboarding/WelcomeToOptifii.jsx b/src/Pages/Onboarding/WelcomeToOptifii.jsx index 26f9f43..bea2171 100644 --- a/src/Pages/Onboarding/WelcomeToOptifii.jsx +++ b/src/Pages/Onboarding/WelcomeToOptifii.jsx @@ -1,22 +1,19 @@ import React, { useState } from 'react' import WelcomeFrame from './WelcomeFrame' -import { Box, Grid, GridItem, Input, FormControl, FormLabel, InputGroup, InputRightElement, Button, Text, Checkbox, HStack, Link, UnorderedList, ListItem, Container, useDisclosure, Modal, ModalOverlay, ModalHeader, ModalCloseButton, ModalBody, ModalContent, VStack, Image } from '@chakra-ui/react'; +import { Box, Grid, GridItem, Input, FormControl, FormLabel, InputGroup, InputRightElement, Button, Text, Checkbox, HStack, Link, UnorderedList, ListItem, Container, useDisclosure, } from '@chakra-ui/react'; import { FaEye, FaEyeSlash } from 'react-icons/fa'; import PrimaryButton from '../../Components/Buttons/PrimaryButton' -import { CiMobile3 } from "react-icons/ci"; -import { FcGoogle } from "react-icons/fc"; -import bell from "../../assets/bell.svg" import { Navigate, useNavigate } from 'react-router-dom'; +import LoginModal from '../../Components/SuccessPendingModal/LoginModal'; const WelcomeToOptifii = () => { const [showPassword, setShowPassword] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false); const handlePasswordVisibility = () => setShowPassword(!showPassword); - const { isOpen, onOpen, onClose } = useDisclosure() - const navigate = useNavigate(); + const { isOpen, onOpen, onClose } = useDisclosure(); return ( @@ -257,135 +254,7 @@ const WelcomeToOptifii = () => { - - - - - - - - bell - - - Register to get free access - to all our recourses - - - Sign up to see more - - - - - - - - - By continuing, you agree to the Terms of Service - - - and acknowledge you’ve read our Privacy Policy. - - - Already a member? - - - - - - - + )