tomosa.sarkar/IB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Resend button and timer

Browse Source
This commit is contained in:
nabanita.jana
2025-09-05 16:43:50 +05:30
parent a8f99a85dd
commit 9619c99e00
5 changed files with 271 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/app/(main)/funds_transfer/send_beneficiary/page.tsx
View File

@@ -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() {
</Group>
<Group grow>
{showOtpField && (
<TextInput
label="OTP"
placeholder="Enter OTP"
type="otp"
value={otp}
onChange={(e) => setOtp(e.currentTarget.value)}
withAsterisk
disabled={showTxnPassword}
/>
)}
{!showTxnPassword && (
(
timerActive ? (
<Text size="xs" c="dimmed" style={{ minWidth: "120px" }}>
Resend OTP will be enabled in{" "}
{String(Math.floor(countdown / 60)).padStart(2, "0")}:
{String(countdown % 60).padStart(2, "0")}
</Text>
) : (
<IconRefresh
size={22}
style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
onClick={handleGenerateOtp}
<>
<Group gap="xs" align="flex-end">
<PasswordInput
label="OTP"
placeholder="Enter OTP"
type="otp"
value={otp}
maxLength={6}
onChange={(e) => setOtp(e.currentTarget.value)}
withAsterisk
disabled={showTxnPassword}
style={{ flex: 1 }}
/>
)
)
{!showTxnPassword && (
timerActive ? (
<Text size="xs" c="dimmed" style={{ minWidth: "120px" }}>
Resend OTP will be enabled in{" "}
{String(Math.floor(countdown / 60)).padStart(2, "0")}:
{String(countdown % 60).padStart(2, "0")}
</Text>
) : (
<IconRefresh
size={22}
style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
onClick={handleGenerateOtp}
/>
)
)}
</Group>
</>
)}
{showTxnPassword && (
<TextInput
label="Transaction Password"

64
src/app/(main)/funds_transfer/send_beneficiary/sendBeneficiaryOthers.tsx
View File

@@ -1,11 +1,11 @@
"use client";
import React, { useEffect, useRef, useState } from "react";
import { Button, Center, Divider, Group, List, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, ThemeIcon, Title } from "@mantine/core";
import { Button, Center, Divider, Group, List, Modal, Paper, PasswordInput, Radio, ScrollArea, Select, Stack, Text, TextInput, ThemeIcon, Title } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { useRouter } from "next/navigation";
import { generateOTP } from '@/app/OTPGenerator';
import { IconAlertTriangle } from "@tabler/icons-react";
import { IconAlertTriangle, IconRefresh } from "@tabler/icons-react";
import Image from "next/image";
import img from '@/app/image/logo1.jpg'
@@ -36,12 +36,16 @@ export default function SendToBeneficiaryOthers() {
const [isSubmitting, setIsSubmitting] = useState(false);
const [showOtpField, setShowOtpField] = useState(false);
const [otp, setOtp] = useState("");
const [countdown, setCountdown] = useState(180);
const [timerActive, setTimerActive] = useState(false);
const [generateOtp, setGenerateOtp] = useState("");
async function handleGenerateOtp() {
// const value = await generateOTP(6);
const value = "123456";
setGenerateOtp(value);
setCountdown(180);
setTimerActive(true);
return value;
}
const getAmountError = () => {
@@ -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() {
</Group>
<Group grow>
{showOtpField && (
<TextInput
label="OTP"
placeholder="Enter OTP"
type="otp"
value={otp}
onChange={(e) => setOtp(e.currentTarget.value)}
withAsterisk
disabled={showTxnPassword}
/>
<>
<Group gap="xs" align="flex-end">
<PasswordInput
label="OTP"
placeholder="Enter OTP"
type="otp"
value={otp}
maxLength={6}
onChange={(e) => setOtp(e.currentTarget.value)}
withAsterisk
disabled={showTxnPassword}
style={{ flex: 1 }}
/>
{!showTxnPassword && (
timerActive ? (
<Text size="xs" c="dimmed" style={{ minWidth: "120px" }}>
Resend OTP will be enabled in{" "}
{String(Math.floor(countdown / 60)).padStart(2, "0")}:
{String(countdown % 60).padStart(2, "0")}
</Text>
) : (
<IconRefresh
size={22}
style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
onClick={handleGenerateOtp}
/>
)
)}
</Group>
</>
)}
{showTxnPassword && (
<TextInput

71
src/app/(main)/settings/change_login_password/page.tsx
View File

@@ -3,7 +3,7 @@
import React, { useEffect, useState } from "react";
import { TextInput, PasswordInput, Button, Title, Paper, Group, Box, Text } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { IconLock } from "@tabler/icons-react";
import { IconLock, IconRefresh } from "@tabler/icons-react";
import { generateCaptcha } from "@/app/captcha";
import { useRouter } from "next/navigation";
@@ -17,6 +17,8 @@ export default function ChangePassword() {
const [otp, setOtp] = useState("");
const [generatedOtp, setGeneratedOtp] = useState('');
const [otpValidated, setOtpValidated] = useState(false);
const [countdown, setCountdown] = useState(180);
const [timerActive, setTimerActive] = useState(false);
const [step, setStep] = useState<"form" | "otp" | "final">("form");
const [passwordHistory] = useState(["Pass@1234", "OldPass@123", "MyPass#2023"]);
const icon = <IconLock size={18} stroke={1.5} />;
@@ -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() {
/>
</div>
</div>
{step !== "form" && (
<PasswordInput
label="Enter OTP"
placeholder="Enter 6-digit OTP"
value={otp}
onChange={(e) => setOtp(e.currentTarget.value)}
withAsterisk
mt="sm"
maxLength={6}
readOnly={otpValidated}
/>
)}
<Group grow>
{step !== "form" && (
<>
<Group gap="xs" align="flex-end">
<PasswordInput
label="OTP"
placeholder="Enter OTP"
type="otp"
value={otp}
maxLength={6}
onChange={(e) => setOtp(e.currentTarget.value)}
withAsterisk
disabled={otpValidated}
style={{ flex: 1 }}
/>
{!otpValidated && (
timerActive ? (
<Text size="xs" c="dimmed" style={{ minWidth: "120px" }}>
Resend OTP will be enabled in{" "}
{String(Math.floor(countdown / 60)).padStart(2, "0")}:
{String(countdown % 60).padStart(2, "0")}
</Text>
) : (
<IconRefresh
size={22}
style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
onClick={handleGenerateOtp}
/>
)
)}
</Group>
</>
)}
</Group>
<Group mt="md" gap="sm">
<Button onClick={handleSubmit}>
{step === "form" && "Submit"}

71
src/app/(main)/settings/change_txn_password/page.tsx
View File

@@ -3,7 +3,7 @@
import React, { useEffect, useState } from "react";
import { TextInput, PasswordInput, Button, Title, Paper, Group, Box, Text } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { IconLock } from "@tabler/icons-react";
import { IconLock, IconRefresh } from "@tabler/icons-react";
import { generateCaptcha } from "@/app/captcha";
import { useRouter } from "next/navigation";
@@ -15,6 +15,8 @@ export default function ChangePassword() {
const [captcha, setCaptcha] = useState("");
const [captchaInput, setCaptchaInput] = useState("");
const [otp, setOtp] = useState("");
const [countdown, setCountdown] = useState(180);
const [timerActive, setTimerActive] = useState(false);
const [generatedOtp, setGeneratedOtp] = useState('');
const [otpValidated, setOtpValidated] = useState(false);
const [step, setStep] = useState<"form" | "otp" | "final">("form");
@@ -23,6 +25,8 @@ export default function ChangePassword() {
const handleGenerateOtp = async () => {
const value = "123456"; // Or generate a random OTP
setGeneratedOtp(value);
setCountdown(180);
setTimerActive(true);
return value;
};
@@ -30,6 +34,22 @@ 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);
@@ -79,7 +99,7 @@ export default function ChangePassword() {
return;
}
// ✅ Passed → move to OTP
// Passed → move to OTP
await handleGenerateOtp();
setStep("otp");
notifications.show({
@@ -263,18 +283,41 @@ export default function ChangePassword() {
/>
</div>
</div>
{step !== "form" && (
<PasswordInput
label="Enter OTP"
placeholder="Enter 6-digit OTP"
value={otp}
onChange={(e) => setOtp(e.currentTarget.value)}
withAsterisk
mt="sm"
maxLength={6}
readOnly={otpValidated}
/>
)}
<Group grow>
{step !== "form" && (
<>
<Group gap="xs" align="flex-end">
<PasswordInput
label="OTP"
placeholder="Enter OTP"
type="otp"
value={otp}
maxLength={6}
onChange={(e) => setOtp(e.currentTarget.value)}
withAsterisk
disabled={otpValidated}
style={{ flex: 1 }}
/>
{!otpValidated && (
timerActive ? (
<Text size="xs" c="dimmed" style={{ minWidth: "120px" }}>
Resend OTP will be enabled in{" "}
{String(Math.floor(countdown / 60)).padStart(2, "0")}:
{String(countdown % 60).padStart(2, "0")}
</Text>
) : (
<IconRefresh
size={22}
style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
onClick={handleGenerateOtp}
/>
)
)}
</Group>
</>
)}
</Group>
<Group mt="md" gap="sm">
<Button onClick={handleSubmit}>
{step === "form" && "Submit"}

106
src/app/(main)/settings/set_txn_password/page.tsx
View File

@@ -11,7 +11,7 @@ import {
Text
} from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { IconLock } from "@tabler/icons-react";
import { IconLock, IconRefresh } from "@tabler/icons-react";
import { generateCaptcha } from "@/app/captcha";
import { useRouter } from "next/navigation";
@@ -22,19 +22,21 @@ export default function ChangePassword() {
const [captchaInput, setCaptchaInput] = useState("");
const [otp, setOtp] = useState("");
const [otpValidated, setOtpValidated] = useState(false);
const [countdown, setCountdown] = useState(180);
const [timerActive, setTimerActive] = useState(false);
const [step, setStep] = useState<"form" | "otp" | "final">("form");
const [generatedOtp, setGeneratedOtp] = useState('');
const router = useRouter();
const [passwordHistory] = useState([
"Pass@1234",
"OldPass@123",
"MyPass#2023",
]);
const icon = <IconLock size={18} stroke={1.5} />;
useEffect(() => {
regenerateCaptcha();
}, []);
const handleGenerateOtp = async () => {
const value = "123456"; // Or generate a random OTP
setGeneratedOtp(value);
setCountdown(180);
setTimerActive(true);
return value;
};
const regenerateCaptcha = async () => {
const newCaptcha = await generateCaptcha();
@@ -42,6 +44,26 @@ export default function ChangePassword() {
setCaptchaInput("");
};
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]);
useEffect(() => {
regenerateCaptcha();
}, []);
const validatePasswordPolicy = (password: string) => {
return /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/.test(
password
@@ -70,15 +92,6 @@ export default function ChangePassword() {
return;
}
if (passwordHistory.includes(newPassword)) {
notifications.show({
title: "Password Reused",
message: "New password must be different from the last 3 passwords.",
color: "red",
});
return;
}
if (newPassword !== confirmPassword) {
notifications.show({
title: "Password Mismatch",
@@ -97,8 +110,8 @@ export default function ChangePassword() {
regenerateCaptcha();
return;
}
// Passed → move to OTP step
await handleGenerateOtp();
setStep("otp");
notifications.show({
title: "OTP Sent",
@@ -107,10 +120,9 @@ export default function ChangePassword() {
});
return;
}
// Step 2 → validate OTP
if (step === "otp") {
if (otp !== "123456") {
if (otp !== generatedOtp) {
notifications.show({
title: "Invalid OTP",
message: "Please enter the correct OTP.",
@@ -128,7 +140,6 @@ export default function ChangePassword() {
});
return;
}
// Step 3 → Final API call to set transaction password
if (step === "final") {
const token = localStorage.getItem("access_token");
@@ -273,18 +284,43 @@ export default function ChangePassword() {
</div>
</div>
{step !== "form" && (
<PasswordInput
label="Enter OTP"
placeholder="Enter 6-digit OTP"
value={otp}
onChange={(e) => setOtp(e.currentTarget.value)}
withAsterisk
mt="sm"
maxLength={6}
readOnly={otpValidated}
/>
)}
<Group grow>
{step !== "form" && (
<>
<Group gap="xs" align="flex-end">
<PasswordInput
label="OTP"
placeholder="Enter OTP"
type="otp"
value={otp}
maxLength={6}
onChange={(e) => setOtp(e.currentTarget.value)}
withAsterisk
disabled={otpValidated}
style={{ flex: 1 }}
/>
{!otpValidated && (
timerActive ? (
<Text size="xs" c="dimmed" style={{ minWidth: "120px" }}>
Resend OTP will be enabled in{" "}
{String(Math.floor(countdown / 60)).padStart(2, "0")}:
{String(countdown % 60).padStart(2, "0")}
</Text>
) : (
<IconRefresh
size={22}
style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
onClick={handleGenerateOtp}
/>
)
)}
</Group>
</>
)}
</Group>
</div>
<Group mt="md" gap="sm">