146 lines
3.9 KiB
TypeScript
146 lines
3.9 KiB
TypeScript
import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
|
|
import { useContext, useState } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import GlobalStateContext from "../../Contexts/GlobalStateContext";
|
|
import logo from "../../assets/logo.svg";
|
|
import uiEdit from "../../assets/icons/edit.png";
|
|
import { Button } from "../../components/ui/button";
|
|
import { Field } from "../../components/ui/field";
|
|
import { Toaster, toaster } from "../../components/ui/toaster";
|
|
import { PinInput } from "../../components/ui/pin-input";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
interface FormValues {
|
|
mobileNumber: number;
|
|
}
|
|
|
|
const LoginOtp = () => {
|
|
const [isLoading, setIsLoading] = useState<boolean>(false);
|
|
const context = useContext(GlobalStateContext);
|
|
const navigate = useNavigate();
|
|
if (!context) {
|
|
throw new Error("App must be used within a GlobalStateProvider");
|
|
}
|
|
const { setIsAuthenticate } = context;
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm<FormValues>();
|
|
|
|
const onSubmit = handleSubmit((data) => {
|
|
setIsLoading(true);
|
|
if (data?.mobileNumber === 1234567890) {
|
|
setTimeout(() => {
|
|
setIsAuthenticate(true);
|
|
setIsLoading(false);
|
|
}, 3000); // 3-second delay
|
|
} else {
|
|
toaster.create({
|
|
title: `Invalid Credentials`,
|
|
type: "error",
|
|
});
|
|
setIsLoading(false);
|
|
}
|
|
});
|
|
|
|
return (
|
|
<VStack w={"100%"} h={"100vh"} bg={"#ffffff"}>
|
|
<HStack
|
|
boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
|
|
w={"100%"}
|
|
ps={8}
|
|
h={"7%"}
|
|
justifyContent={"flex-start"}
|
|
>
|
|
<Image w={50} src={logo} />
|
|
</HStack>
|
|
|
|
<HStack w={"100%"} h={"93%"} p={8} gap={8}>
|
|
<Center
|
|
display={{ base: "none", md: "flex" }}
|
|
bg={"#02A0A033"}
|
|
w={"50%"}
|
|
h={"100%"}
|
|
rounded={"3xl"}
|
|
>
|
|
<Image w={250} src={logo} />
|
|
</Center>
|
|
|
|
<Center
|
|
as={"form"}
|
|
onSubmit={onSubmit}
|
|
p={{ base: 4, md: 16 }}
|
|
w={{ base: "100%", md: "50%" }}
|
|
h={"100%"}
|
|
>
|
|
<VStack gap={2} w={"100%"} alignItems={"center"}>
|
|
<Text
|
|
w={"100%"}
|
|
textAlign={"center"}
|
|
fontSize={"24px"}
|
|
fontWeight={"normal"}
|
|
color={"#313039"}
|
|
>
|
|
Enter otp
|
|
</Text>
|
|
<Text
|
|
w={"100%"}
|
|
textAlign={"center"}
|
|
fontSize={"sm"}
|
|
fontWeight={"normal"}
|
|
color={"#49475A"}
|
|
>
|
|
OTP has been send to your E-mail Address
|
|
</Text>
|
|
<HStack>
|
|
<Image src={uiEdit} h="24px" w="24px" />
|
|
<Text
|
|
w={"100%"}
|
|
textAlign={"center"}
|
|
fontSize={"sm"}
|
|
fontWeight={"normal"}
|
|
color={"#49475A"}
|
|
>
|
|
9619565889
|
|
</Text>
|
|
</HStack>
|
|
|
|
<VStack mt={6} gap={4} w={"full"}>
|
|
<PinInput />
|
|
<Text
|
|
w={"100%"}
|
|
textAlign={"center"}
|
|
fontSize={"sm"}
|
|
fontWeight={"600"}
|
|
color={"#4746F4"}
|
|
textDecoration="underline"
|
|
>
|
|
Resend OTP
|
|
</Text>
|
|
<Button
|
|
// loading={isLoading}
|
|
mt={4}
|
|
size={"sm"}
|
|
bg={"#02A0A0"}
|
|
rounded={"md"}
|
|
w={"100%"}
|
|
color={"#ffffff"}
|
|
type="submit"
|
|
onClick={navigate("/create-password")}
|
|
>
|
|
Send OTP
|
|
</Button>
|
|
|
|
<Text>Forgot password</Text>
|
|
</VStack>
|
|
</VStack>
|
|
</Center>
|
|
<Toaster />
|
|
</HStack>
|
|
</VStack>
|
|
);
|
|
};
|
|
|
|
export default LoginOtp;
|