109 lines
4.0 KiB
TypeScript
109 lines
4.0 KiB
TypeScript
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
|
|
import { Box, Input, Stack, Text } from "@chakra-ui/react"
|
|
import { Button } from "../../components/ui/button";
|
|
import { useState } from "react";
|
|
import { BiSolidEdit } from "react-icons/bi";
|
|
|
|
function EnterOTP() {
|
|
const [otp, setOtp] = useState<string[]>(["", "", "", ""]);
|
|
|
|
// Handle change for OTP inputs
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number): void => {
|
|
const value = e.target.value;
|
|
|
|
// Prevent non-numeric input
|
|
if (/[^0-9]/.test(value)) return;
|
|
|
|
// Update the OTP state with the new value
|
|
const newOtp = [...otp];
|
|
newOtp[index] = value;
|
|
setOtp(newOtp);
|
|
|
|
// Move focus to the next input automatically
|
|
if (value && index < otp.length - 1) {
|
|
const nextInput = document.getElementById(`otp-input-${index + 1}`) as HTMLInputElement;
|
|
if (nextInput) nextInput.focus();
|
|
}
|
|
};
|
|
|
|
return (
|
|
|
|
<DialogRoot placement="center">
|
|
<DialogTrigger asChild>
|
|
<Button w="100%" bg="#02A0A0" color={"#fff"}>
|
|
Save
|
|
</Button>
|
|
|
|
</DialogTrigger>
|
|
|
|
<DialogContent
|
|
bg={"#fff"}
|
|
// w={{ lg: "60%", md: "230px" }}
|
|
w={{ base: '90%', md: '400px' }}
|
|
|
|
// height={'80vh'}
|
|
// overflow={'scroll'}
|
|
p={2} // Reduced padding
|
|
bgSize={'md'}
|
|
>
|
|
<DialogHeader bg="white" pt={3}>
|
|
<DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER OTP</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<DialogBody bg="white" pt={2}>
|
|
<Text color={"black"} textAlign={"center"}>OTP has been send to your E-mail Address</Text>
|
|
<Box display="flex" flexDirection="row" alignItems="center" justifyContent="center" p={3}>
|
|
<BiSolidEdit color="black" />
|
|
<Text color="black" textAlign="center" ml={2}>9619565889</Text>
|
|
</Box>
|
|
|
|
|
|
<Stack direction="row" justify="center" pt={2}>
|
|
|
|
{/* 4 OTP Inputs */}
|
|
{otp.map((digit, index) => (
|
|
<Input
|
|
key={index}
|
|
id={`otp-input-${index}`}
|
|
value={digit}
|
|
maxW="50px"
|
|
color={"black"}
|
|
textAlign="center"
|
|
fontSize="20px"
|
|
placeholder="0"
|
|
border="1px solid grey"
|
|
onChange={(e) => handleChange(e, index)}
|
|
maxLength={1} // Only allows 1 character per input
|
|
/>
|
|
))}
|
|
</Stack>
|
|
<Box textAlign="center">
|
|
<Text
|
|
color="#4746F4"
|
|
textDecoration="underline"
|
|
fontWeight="bold"
|
|
mt={3}
|
|
cursor="pointer"
|
|
display="inline-block"
|
|
px={2} // Adds padding for better appearance
|
|
>
|
|
Resend OTP
|
|
</Text>
|
|
</Box>
|
|
|
|
</DialogBody>
|
|
<DialogFooter display="flex" justifyContent="center" mt={2} p={2}
|
|
>
|
|
<Button w="100%" bg="#02A0A0" color={"#fff"}>
|
|
Save
|
|
</Button>
|
|
</DialogFooter>
|
|
|
|
{/* <DialogCloseTrigger color="black" /> */}
|
|
</DialogContent>
|
|
</DialogRoot >
|
|
|
|
)
|
|
}
|
|
|
|
export default EnterOTP |