phone number issue pending
This commit is contained in:
priyanshuvish
154
src/Components/SuccessPendingModal/LoginModal.jsx
Normal file
154
src/Components/SuccessPendingModal/LoginModal.jsx
Normal file
@@ -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 (
|
||||
<>
|
||||
<Modal isOpen={isOpen} onClose={onClose} isCentered>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader></ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<HStack justifyContent={"center"} mb={2}>
|
||||
<Image
|
||||
src={bell}
|
||||
alt="bell"
|
||||
w={10}
|
||||
h={12}
|
||||
></Image>
|
||||
</HStack>
|
||||
<Text
|
||||
color={"#100F14"}
|
||||
fontSize={"xl"}
|
||||
fontWeight={"600"}
|
||||
textAlign={"center"}
|
||||
mb={2}
|
||||
>
|
||||
Register to get free access
|
||||
to all our recourses
|
||||
</Text>
|
||||
<Text
|
||||
color={"#100F14"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={"500"}
|
||||
textAlign={"center"}
|
||||
>
|
||||
Sign up to see more
|
||||
</Text>
|
||||
<VStack>
|
||||
<Button
|
||||
onClick={() => navigate("/login-email-address")}
|
||||
_hover={{ opacity: 0.8 }}
|
||||
borderRadius={"full"}
|
||||
bg={"#100F14"}
|
||||
color={"#fff"}
|
||||
border={"1px solid #9794AA"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={"500"}
|
||||
w={"100%"}
|
||||
px={4}
|
||||
py={6}
|
||||
>Continue with email</Button>
|
||||
<Button
|
||||
onClick={() => navigate("/login-phone-number")}
|
||||
_hover={{ opacity: 0.8 }}
|
||||
borderRadius={"full"}
|
||||
color={"#100F14"}
|
||||
bg={"transparent"}
|
||||
border={"1px solid #9794AA"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={"500"}
|
||||
w={"100%"}
|
||||
px={4}
|
||||
py={6}
|
||||
>
|
||||
<CiMobile3 style={{ marginRight: "8px", color: "#6311CB" }} size={20} />
|
||||
Mobile number
|
||||
</Button>
|
||||
<Button
|
||||
_hover={{ opacity: 0.8 }}
|
||||
borderRadius={"full"}
|
||||
color={"#100F14"}
|
||||
bg={"transparent"}
|
||||
border={"1px solid #9794AA"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={"500"}
|
||||
w={"100%"}
|
||||
px={4}
|
||||
py={6}
|
||||
>
|
||||
<FcGoogle style={{ marginRight: "8px", color: "#6311CB" }} size={20} />
|
||||
Continue with Google
|
||||
</Button>
|
||||
</VStack>
|
||||
|
||||
<Text
|
||||
color={"#686677"}
|
||||
fontSize={"xs"}
|
||||
fontWeight={500}
|
||||
textAlign={"center"}
|
||||
mt={4}
|
||||
mb={0}
|
||||
>
|
||||
By continuing, you agree to the <Link
|
||||
color={"#100F14"}
|
||||
textDecoration={"underline"}
|
||||
fontWeight={600}
|
||||
>Terms of Service </Link>
|
||||
</Text>
|
||||
<Text
|
||||
color={"#686677"}
|
||||
fontSize={"xs"}
|
||||
fontWeight={500}
|
||||
textAlign={"center"}
|
||||
>
|
||||
and acknowledge you’ve read our <Link
|
||||
color={"#100F14"}
|
||||
textDecoration={"underline"}
|
||||
fontWeight={600}
|
||||
>Privacy Policy.</Link>
|
||||
</Text>
|
||||
<Text
|
||||
color={"#686677"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
textAlign={"center"}
|
||||
mt={4}
|
||||
>
|
||||
Already a member?
|
||||
<Button
|
||||
onClick={() => navigate("/ekyc")}
|
||||
_hover={{ opacity: 0.8 }}
|
||||
px={0}
|
||||
fontSize={"sm"}
|
||||
color={"#100F14"}
|
||||
textDecoration={"underline"}
|
||||
fontWeight={600}
|
||||
bg={"transparent"}
|
||||
>Log in</Button>
|
||||
</Text>
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default LoginModal;
|
||||
@@ -14,7 +14,7 @@ const PendingModal = ({ isOpen, onClose }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<Modal isOpen={isOpen} onClose={onClose} isCentered>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader></ModalHeader>
|
||||
|
||||
@@ -15,7 +15,7 @@ const SuccessModal = ({isOpen,onClose}) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<Modal isOpen={isOpen} onClose={onClose} isCentered>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader></ModalHeader>
|
||||
|
||||
@@ -63,7 +63,7 @@ const Login = () => {
|
||||
// dispatch(loginUser(true));
|
||||
setIsAuthenticate(true);
|
||||
setIsLoading(false);
|
||||
toast({
|
||||
toast({
|
||||
// position: "bottom-left",
|
||||
render: () => (
|
||||
<ToastBox status={"success"} message={"Login Successfully"} />
|
||||
|
||||
@@ -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 (
|
||||
<Box
|
||||
bg={"#FFFFFF"}
|
||||
@@ -17,10 +22,11 @@ const Header = () => {
|
||||
<Image src={optifii_logo} alt="Optifii Logo" />
|
||||
</Box>
|
||||
<HStack>
|
||||
<SecondaryButton title={"Login"} />
|
||||
<SecondaryButton onClick={onOpen} title={"Login"} />
|
||||
<PrimaryButton title={"Contact sales"} />
|
||||
</HStack>
|
||||
</HStack>
|
||||
<LoginModal isOpen={isOpen} onClose={onClose} />
|
||||
</Container>
|
||||
</Box>
|
||||
)
|
||||
|
||||
@@ -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 (
|
||||
<LoginEmailAddressFrame>
|
||||
<Container maxW={'container.xl'}>
|
||||
@@ -18,8 +42,8 @@ const LoginEmailAddress = () => {
|
||||
my={5}
|
||||
boxShadow={"md"}
|
||||
>
|
||||
<Box bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}>
|
||||
<Box maxW={650} >
|
||||
<Box as='form' onSubmit={handleSubmit(onSubmit)} bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}>
|
||||
<Box maxW={650}>
|
||||
<Text
|
||||
color={'#100F14'}
|
||||
fontWeight={600}
|
||||
@@ -38,35 +62,44 @@ const LoginEmailAddress = () => {
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur.
|
||||
</Text>
|
||||
<Box mt={12}>
|
||||
<Text
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
color={"#313039"}
|
||||
mb={2}
|
||||
>
|
||||
Enter e-mail address
|
||||
</Text>
|
||||
<InputGroup>
|
||||
<InputLeftElement pointerEvents='none'>
|
||||
<HiOutlineMail color='#C33FAD' />
|
||||
</InputLeftElement>
|
||||
<Input type='tel' />
|
||||
</InputGroup>
|
||||
<FormControl isInvalid={!!errors.emailAddress}>
|
||||
<FormLabel htmlFor='emailAddress' fontSize={"sm"} fontWeight={500} color={"#313039"} mb={2}>
|
||||
Enter e-mail address
|
||||
</FormLabel>
|
||||
<InputGroup>
|
||||
<InputLeftElement pointerEvents='none'>
|
||||
<HiOutlineMail color='#C33FAD' />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
id='emailAddress'
|
||||
placeholder='Enter your email'
|
||||
{...register("emailAddress")}
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
/>
|
||||
</InputGroup>
|
||||
<FormErrorMessage>
|
||||
{errors?.emailAddress && (
|
||||
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
||||
<TiWarning className="fw-bold fs-5 " /> {errors?.emailAddress?.message}
|
||||
</span>
|
||||
)}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
</Box>
|
||||
|
||||
<Box px={4} py={6}>
|
||||
|
||||
<Box mt={6}>
|
||||
<HStack justifyContent={"center"} mt={6} >
|
||||
<PrimaryButton
|
||||
onClick={() => navigate("/login-otp")}
|
||||
w={"300px"} title={"Send OTP"} />
|
||||
</HStack>
|
||||
<HStack justifyContent={"center"} mt={4} >
|
||||
<Text fontSize={"xs"} fontWeight={500} mb={0}>Don’t have an account?</Text>
|
||||
<Link fontSize={"xs"} fontWeight={600} mb={0} color={"#3725EA"}>Signup</Link>
|
||||
</HStack>
|
||||
</Box>
|
||||
<HStack justifyContent={"center"} mt={6}>
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
w={"300px"}
|
||||
title={"Send OTP"}
|
||||
/>
|
||||
</HStack>
|
||||
<HStack justifyContent={"center"} mt={4}>
|
||||
<Text fontSize={"xs"} fontWeight={500} mb={0}>Don’t have an account?</Text>
|
||||
<Link fontSize={"xs"} fontWeight={600} mb={0} color={"#3725EA"}>Signup</Link>
|
||||
</HStack>
|
||||
<HStack spacing={4} my={8}>
|
||||
<Divider />
|
||||
<Text
|
||||
@@ -78,21 +111,20 @@ const LoginEmailAddress = () => {
|
||||
>Or</Text>
|
||||
<Divider />
|
||||
</HStack>
|
||||
<Box>
|
||||
<HStack justifyContent={"center"} >
|
||||
<SecondaryButton w={"300px"} title={"Continue with email"} />
|
||||
</HStack>
|
||||
</Box>
|
||||
<HStack justifyContent={"center"}>
|
||||
<SecondaryButton
|
||||
w={"300px"}
|
||||
title={"Continue with phone"}
|
||||
onClick={() => navigate("/login-phone-number")}
|
||||
/>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</LoginEmailAddressFrame>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginEmailAddress
|
||||
export default LoginEmailAddress;
|
||||
|
||||
@@ -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: () => (
|
||||
<ToastBox status={"success"} message={"Login Successfully"} />
|
||||
),
|
||||
});
|
||||
|
||||
Cookies.set("isAuthenticated", true, { expires: 7 });
|
||||
navigate("/*");
|
||||
}, 2000); // 2-second delay
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
toast({
|
||||
render: () => (
|
||||
<ToastBox status={"error"} message={"Invalid phone number or OTP"} />
|
||||
),
|
||||
});
|
||||
|
||||
reset();
|
||||
navigate("/login-phone-number");
|
||||
}, 2000); // 2-second delay
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<LoginOtpFrame>
|
||||
<Container maxW={'container.xl'}>
|
||||
<Box
|
||||
w={"100%"}
|
||||
my={5}
|
||||
boxShadow={"md"}
|
||||
>
|
||||
<Box w={"100%"} my={5} boxShadow={"md"}>
|
||||
<Box bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}>
|
||||
<Box maxW={650} >
|
||||
<Text
|
||||
color={'#100F14'}
|
||||
fontWeight={600}
|
||||
fontSize={'xl'}
|
||||
textAlign={"center"}
|
||||
mb={2}
|
||||
>
|
||||
<Box maxW={650}>
|
||||
<Text color={'#100F14'} fontWeight={600} fontSize={'xl'} textAlign={"center"} mb={2}>
|
||||
Enter OTP
|
||||
</Text>
|
||||
<Text
|
||||
color={'#49475A'}
|
||||
fontWeight={500}
|
||||
fontSize={'sm'}
|
||||
textAlign={"center"}
|
||||
>
|
||||
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'} textAlign={"center"}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur.
|
||||
</Text>
|
||||
<Box mt={12}>
|
||||
<HStack justifyContent={"center"}>
|
||||
<PinInput size='lg' otp>
|
||||
<PinInputField
|
||||
_focus={{ borderColor: "#3725EA", borderWidth: "1px" }}
|
||||
/>
|
||||
<PinInputField
|
||||
_focus={{ borderColor: "#3725EA", borderWidth: "1px" }}
|
||||
/>
|
||||
<PinInputField
|
||||
_focus={{ borderColor: "#3725EA", borderWidth: "1px" }}
|
||||
/>
|
||||
<PinInputField
|
||||
_focus={{ borderColor: "#3725EA", borderWidth: "1px" }}
|
||||
/>
|
||||
<PinInput value={otp} onChange={handleOtpChange} size='lg' otp>
|
||||
<PinInputField _focus={{ borderColor: "#3725EA", borderWidth: "1px" }} />
|
||||
<PinInputField _focus={{ borderColor: "#3725EA", borderWidth: "1px" }} />
|
||||
<PinInputField _focus={{ borderColor: "#3725EA", borderWidth: "1px" }} />
|
||||
<PinInputField _focus={{ borderColor: "#3725EA", borderWidth: "1px" }} />
|
||||
</PinInput>
|
||||
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<Box py={10}>
|
||||
<Box mt={16}>
|
||||
<HStack justifyContent={"center"} >
|
||||
<PrimaryButton w={"300px"} title={"Next"} />
|
||||
<HStack justifyContent={"center"}>
|
||||
<PrimaryButton w={"300px"} title={"Next"} onClick={handleLogin} />
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</LoginOtpFrame>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginOtp
|
||||
export default LoginOtp;
|
||||
|
||||
@@ -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 (
|
||||
<LoginPhoneNumberFrame>
|
||||
<Container maxW={'container.xl'}>
|
||||
@@ -18,8 +46,8 @@ const LoginPhoneNumber = () => {
|
||||
my={5}
|
||||
boxShadow={"md"}
|
||||
>
|
||||
<Box bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}>
|
||||
<Box maxW={650} >
|
||||
<Box as='form' onSubmit={handleSubmit(onSubmit)} bg={'#fff'} p={4} borderRadius={"md"} display={"flex"} justifyContent={"center"}>
|
||||
<Box maxW={650}>
|
||||
<Text
|
||||
color={'#100F14'}
|
||||
fontWeight={600}
|
||||
@@ -50,20 +78,36 @@ const LoginPhoneNumber = () => {
|
||||
<InputLeftElement pointerEvents='none'>
|
||||
<MdOutlineLocalPhone color='#C33FAD' />
|
||||
</InputLeftElement>
|
||||
<Input type='tel' />
|
||||
<Input
|
||||
maxLength={15}
|
||||
pattern="/^[+()?[\d -]+$/"
|
||||
type='tel'
|
||||
placeholder="Enter your phone number"
|
||||
{...register("phoneNumber")}
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
/>
|
||||
</InputGroup>
|
||||
{errors?.phoneNumber && (
|
||||
|
||||
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
||||
<TiWarning className="fw-bold fs-5 " /> {errors?.phoneNumber?.message}
|
||||
</span>
|
||||
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box px={4} py={6}>
|
||||
|
||||
<Box mt={6}>
|
||||
<HStack justifyContent={"center"} mt={6} >
|
||||
<HStack justifyContent={"center"} mt={6}>
|
||||
<PrimaryButton
|
||||
onClick={() => navigate("/login-otp")}
|
||||
w={"300px"} title={"Send OTP"} />
|
||||
type="submit"
|
||||
w={"300px"}
|
||||
title={"Send OTP"}
|
||||
/>
|
||||
</HStack>
|
||||
<HStack justifyContent={"center"} mt={4} >
|
||||
<Text fontSize={"xs"} fontWeight={500} mb={0}>Don’t have an account?</Text>
|
||||
<HStack justifyContent={"center"} mt={4}>
|
||||
<Text fontSize={"xs"} fontWeight={500} mb={0}>Don’t have an account?</Text>
|
||||
<Link fontSize={"xs"} fontWeight={600} mb={0} color={"#3725EA"}>Signup</Link>
|
||||
</HStack>
|
||||
</Box>
|
||||
@@ -79,20 +123,21 @@ const LoginPhoneNumber = () => {
|
||||
<Divider />
|
||||
</HStack>
|
||||
<Box>
|
||||
<HStack justifyContent={"center"} >
|
||||
<SecondaryButton w={"300px"} title={"Continue with email"} />
|
||||
<HStack justifyContent={"center"}>
|
||||
<SecondaryButton
|
||||
w={"300px"}
|
||||
title={"Continue with email"}
|
||||
onClick={() => navigate("/login-email-address")}
|
||||
/>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</LoginPhoneNumberFrame>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default LoginPhoneNumber
|
||||
export default LoginPhoneNumber;
|
||||
|
||||
@@ -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 (
|
||||
<WelcomeFrame>
|
||||
|
||||
@@ -257,135 +254,7 @@ const WelcomeToOptifii = () => {
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader></ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<HStack justifyContent={"center"} mb={2}>
|
||||
<Image
|
||||
src={bell}
|
||||
alt="bell"
|
||||
w={10}
|
||||
h={12}
|
||||
></Image>
|
||||
</HStack>
|
||||
<Text
|
||||
color={"#100F14"}
|
||||
fontSize={"xl"}
|
||||
fontWeight={"600"}
|
||||
textAlign={"center"}
|
||||
mb={2}
|
||||
>
|
||||
Register to get free access
|
||||
to all our recourses
|
||||
</Text>
|
||||
<Text
|
||||
color={"#100F14"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={"500"}
|
||||
textAlign={"center"}
|
||||
>
|
||||
Sign up to see more
|
||||
</Text>
|
||||
<VStack>
|
||||
<Button
|
||||
onClick={() => navigate("/login-email-address")}
|
||||
_hover={{ opacity: 0.8 }}
|
||||
borderRadius={"full"}
|
||||
bg={"#100F14"}
|
||||
color={"#fff"}
|
||||
border={"1px solid #9794AA"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={"500"}
|
||||
w={"100%"}
|
||||
px={4}
|
||||
py={6}
|
||||
>Continue with email</Button>
|
||||
<Button
|
||||
onClick={() => navigate("/login-phone-number")}
|
||||
_hover={{ opacity: 0.8 }}
|
||||
borderRadius={"full"}
|
||||
color={"#100F14"}
|
||||
bg={"transparent"}
|
||||
border={"1px solid #9794AA"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={"500"}
|
||||
w={"100%"}
|
||||
px={4}
|
||||
py={6}
|
||||
>
|
||||
<CiMobile3 style={{ marginRight: "8px", color: "#6311CB" }} size={20} />
|
||||
Mobile number
|
||||
</Button>
|
||||
<Button
|
||||
_hover={{ opacity: 0.8 }}
|
||||
borderRadius={"full"}
|
||||
color={"#100F14"}
|
||||
bg={"transparent"}
|
||||
border={"1px solid #9794AA"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={"500"}
|
||||
w={"100%"}
|
||||
px={4}
|
||||
py={6}
|
||||
>
|
||||
<FcGoogle style={{ marginRight: "8px", color: "#6311CB" }} size={20} />
|
||||
Continue with Google
|
||||
</Button>
|
||||
</VStack>
|
||||
|
||||
<Text
|
||||
color={"#686677"}
|
||||
fontSize={"xs"}
|
||||
fontWeight={500}
|
||||
textAlign={"center"}
|
||||
mt={4}
|
||||
mb={0}
|
||||
>
|
||||
By continuing, you agree to the <Link
|
||||
color={"#100F14"}
|
||||
textDecoration={"underline"}
|
||||
fontWeight={600}
|
||||
>Terms of Service </Link>
|
||||
</Text>
|
||||
<Text
|
||||
color={"#686677"}
|
||||
fontSize={"xs"}
|
||||
fontWeight={500}
|
||||
textAlign={"center"}
|
||||
>
|
||||
and acknowledge you’ve read our <Link
|
||||
color={"#100F14"}
|
||||
textDecoration={"underline"}
|
||||
fontWeight={600}
|
||||
>Privacy Policy.</Link>
|
||||
</Text>
|
||||
<Text
|
||||
color={"#686677"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
textAlign={"center"}
|
||||
mt={4}
|
||||
>
|
||||
Already a member?
|
||||
<Button
|
||||
onClick={() => navigate("/ekyc")}
|
||||
_hover={{ opacity: 0.8 }}
|
||||
px={0}
|
||||
fontSize={"sm"}
|
||||
color={"#100F14"}
|
||||
textDecoration={"underline"}
|
||||
fontWeight={600}
|
||||
bg={"transparent"}
|
||||
>Log in</Button>
|
||||
</Text>
|
||||
</ModalBody>
|
||||
|
||||
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
<LoginModal isOpen={isOpen} onClose={onClose} />
|
||||
</Container>
|
||||
</WelcomeFrame>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user