diff --git a/src/app/(main)/funds_transfer/send_beneficiary/page.tsx b/src/app/(main)/funds_transfer/send_beneficiary/page.tsx index 2d6ec6b..033dc18 100644 --- a/src/app/(main)/funds_transfer/send_beneficiary/page.tsx +++ b/src/app/(main)/funds_transfer/send_beneficiary/page.tsx @@ -1,7 +1,7 @@ "use client"; import React, { useEffect, useRef, useState } from "react"; -import { Button, Center, Group, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, Title, Box } from "@mantine/core"; +import { Button, Center, Group, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, Title, Box, PasswordInput } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { useRouter } from "next/navigation"; import { generateOTP } from '@/app/OTPGenerator'; @@ -435,34 +435,39 @@ export default function SendToBeneficiaryOwn() { {showOtpField && ( - - setOtp(e.currentTarget.value)} - withAsterisk - disabled={showTxnPassword} - /> - )} - {!showTxnPassword && ( - ( - timerActive ? ( - - Resend OTP will be enabled in{" "} - {String(Math.floor(countdown / 60)).padStart(2, "0")}: - {String(countdown % 60).padStart(2, "0")} - - ) : ( - + + setOtp(e.currentTarget.value)} + withAsterisk + disabled={showTxnPassword} + style={{ flex: 1 }} /> - ) - ) + {!showTxnPassword && ( + timerActive ? ( + + Resend OTP will be enabled in{" "} + {String(Math.floor(countdown / 60)).padStart(2, "0")}: + {String(countdown % 60).padStart(2, "0")} + + ) : ( + + ) + )} + + + )} + {showTxnPassword && ( { @@ -164,6 +168,22 @@ export default function SendToBeneficiaryOthers() { } }, [authorized]); + useEffect(() => { + let interval: number | undefined; + if (timerActive && countdown > 0) { + interval = window.setInterval(() => { + setCountdown((prev) => prev - 1); + }, 1000); + } + if (countdown === 0) { + if (interval) clearInterval(interval); + setTimerActive(false); + } + return () => { + if (interval) clearInterval(interval); + }; + }, [timerActive, countdown]); + async function handleProceed() { if (!selectedAccNo || !beneficiaryAcc! || !beneficiaryName || !beneficiaryIFSC || !paymentMode || !amount || !remarks) { notifications.show({ @@ -581,15 +601,37 @@ export default function SendToBeneficiaryOthers() { {showOtpField && ( - setOtp(e.currentTarget.value)} - withAsterisk - disabled={showTxnPassword} - /> + <> + + setOtp(e.currentTarget.value)} + withAsterisk + disabled={showTxnPassword} + style={{ flex: 1 }} + /> + {!showTxnPassword && ( + timerActive ? ( + + Resend OTP will be enabled in{" "} + {String(Math.floor(countdown / 60)).padStart(2, "0")}: + {String(countdown % 60).padStart(2, "0")} + + ) : ( + + ) + )} + + + )} {showTxnPassword && ( ("form"); const [passwordHistory] = useState(["Pass@1234", "OldPass@123", "MyPass#2023"]); const icon = ; @@ -24,6 +26,8 @@ export default function ChangePassword() { const handleGenerateOtp = async () => { const value = "123456"; // Or generate a random OTP setGeneratedOtp(value); + setCountdown(180); + setTimerActive(true); return value; }; @@ -31,6 +35,23 @@ export default function ChangePassword() { regenerateCaptcha(); }, []); + useEffect(() => { + let interval: number | undefined; + if (timerActive && countdown > 0) { + interval = window.setInterval(() => { + setCountdown((prev) => prev - 1); + }, 1000); + } + if (countdown === 0) { + if (interval) clearInterval(interval); + setTimerActive(false); + } + return () => { + if (interval) clearInterval(interval); + }; + }, [timerActive, countdown]); + + const regenerateCaptcha = async () => { const newCaptcha = await generateCaptcha(); setCaptcha(newCaptcha); @@ -263,18 +284,42 @@ export default function ChangePassword() { /> - {step !== "form" && ( - setOtp(e.currentTarget.value)} - withAsterisk - mt="sm" - maxLength={6} - readOnly={otpValidated} - /> - )} + + {step !== "form" && ( + <> + + setOtp(e.currentTarget.value)} + withAsterisk + disabled={otpValidated} + style={{ flex: 1 }} + /> + {!otpValidated && ( + timerActive ? ( + + Resend OTP will be enabled in{" "} + {String(Math.floor(countdown / 60)).padStart(2, "0")}: + {String(countdown % 60).padStart(2, "0")} + + ) : ( + + ) + )} + + + + )} + +