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

feat: call the OTP Url in "send money","settings"

Browse Source
This commit is contained in:
nabanita.jana
2025-10-13 11:55:34 +05:30
parent 3d4ae822fb
commit 83ae6b055c
7 changed files with 330 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,6 +9,7 @@ import OutsideQuickPay from "./outside_quick_pay";
import { IconRefresh } from "@tabler/icons-react";
import Image from "next/image";
import img from '@/app/image/logo1.jpg'
import { sendOtp, verifyOtp } from "@/app/_util/otp";
interface accountData {
stAccountNo: string;
@@ -42,15 +43,53 @@ export default function QuickPay() {
const [otp, setOtp] = useState("");
const [generateOtp, setGenerateOtp] = useState("");
async function handleGenerateOtp() {
// const value = await generateOTP(6);
const value = "123456";
setGenerateOtp(value);
setCountdown(180);
setTimerActive(true);
return value;
// async function handleGenerateOtp() {
// // const value = await generateOTP(6);
// const value = "123456";
// setGenerateOtp(value);
// setCountdown(180);
// setTimerActive(true);
// return value;
// }
async function handleSendOtp() {
const mobileNumber = localStorage.getItem('remitter_mobile_no');
if (!mobileNumber) {
notifications.show({
title: 'Error',
message: 'Mobile number not found.Contact to administrator',
color: 'red',
});
return;
}
try {
await sendOtp({ type: 'BENEFICIARY_DELETE' });
setShowOtpField(true);
setCountdown(180);
setTimerActive(true);
} catch (err: any) {
console.error('Send OTP failed', err);
notifications.show({
title: 'Error',
message: err.message || 'Send OTP failed.Please try again later.',
color: 'red',
});
}
}
async function handleVerifyOtp() {
try {
await verifyOtp(otp);
return true;
} catch {
return false;
}
}
const selectedAccount = accountData.find((acc) => acc.stAccountNo === selectedAccNo);
const getFullMaskedAccount = (acc: string) => { return "X".repeat(acc.length); };
@@ -335,7 +374,7 @@ export default function QuickPay() {
color="blue"
onClick={async () => {
setConfirmModel(false);
const otp = await handleGenerateOtp();
const otp = await handleSendOtp();
setShowOtpField(true);
notifications.show({
title: "OTP Sent",
@@ -484,7 +523,7 @@ export default function QuickPay() {
<IconRefresh
size={22}
style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
onClick={handleGenerateOtp}
onClick={handleSendOtp}
/>
)
)}

120
src/app/(main)/funds_transfer/view_beneficiary/page.tsx
View File

@@ -6,10 +6,8 @@ import { notifications } from "@mantine/notifications";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { getBankLogo } from "@/app/_util/getBankLogo";
import { IconTrash } from "@tabler/icons-react";
import { IconRefresh, IconTrash } from "@tabler/icons-react";
import { sendOtp, verifyOtp } from "@/app/_util/otp";
interface Beneficiary {
@@ -31,6 +29,41 @@ export default function ViewBeneficiary() {
const [otpStep, setOtpStep] = useState(false);
const [otp, setOtp] = useState("");
const [selectedAccount, setSelectedAccount] = useState<string | null>(null);
const [countdown, setCountdown] = useState(180);
const [timerActive, setTimerActive] = useState(false);
async function handleSendOtp() {
const mobileNumber = localStorage.getItem('remitter_mobile_no');
if (!mobileNumber) {
notifications.show({
title: 'Error',
message: 'Mobile number not found.Contact to administrator',
color: 'red',
});
return;
}
try {
await sendOtp({ type: 'IMPS' }); // type will be "BENEFICIARY_DELETE"
setCountdown(180);
setTimerActive(true);
} catch (err: any) {
console.error('Send OTP failed', err);
notifications.show({
title: 'Error',
message: err.message || 'Send OTP failed.Please try again later.',
color: 'red',
});
}
}
async function handleVerifyOtp() {
try {
await verifyOtp(otp);
return true;
} catch {
return false;
}
}
const openDeleteModal = (accountNo: string) => {
setSelectedAccount(accountNo);
@@ -41,30 +74,15 @@ export default function ViewBeneficiary() {
const handleModalConfirm = async () => {
if (!selectedAccount) return;
try {
// const token = localStorage.getItem("access_token");
// // Generate OTP
// const otpResponse = await fetch("/api/otp/generate", {
// method: "POST",
// headers: { Authorization: `Bearer ${token}` },
// });
const otpResponse ="123456";
if (otpResponse !== otp) {
notifications.show({
title: "Error",
message: "Failed to generate OTP.",
color: "red",
});
return;
}
setOtpStep(true); // move to OTP input step
await handleSendOtp(); // send OTP to user's mobile
setOtpStep(true); // move modal to OTP input step
} catch (err) {
notifications.show({
title: "Error",
message: "Something went wrong.",
message: "Failed to send OTP. Please try again.",
color: "red",
});
}
@@ -75,19 +93,8 @@ export default function ViewBeneficiary() {
if (!otp || !selectedAccount) return;
try {
const token = localStorage.getItem("access_token");
// Verify OTP
const verify = await fetch("/api/otp/verify", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({ otp }),
});
if (!verify.ok) {
const isOtpValid = await handleVerifyOtp(); // verify OTP
if (!isOtpValid) {
notifications.show({
title: "Invalid OTP",
message: "Please enter the correct OTP.",
@@ -96,7 +103,8 @@ export default function ViewBeneficiary() {
return;
}
// Delete beneficiary
// OTP is valid → delete beneficiary
const token = localStorage.getItem("access_token");
const res = await fetch(`/api/beneficiary/${selectedAccount}`, {
method: "DELETE",
headers: { Authorization: `Bearer ${token}` },
@@ -110,6 +118,8 @@ export default function ViewBeneficiary() {
color: "green",
});
setOpened(false);
setOtpStep(false);
setOtp("");
} else {
notifications.show({
title: "Error",
@@ -126,6 +136,7 @@ export default function ViewBeneficiary() {
}
};
useEffect(() => {
const token = localStorage.getItem("access_token");
if (!token) {
@@ -162,6 +173,23 @@ export default function ViewBeneficiary() {
fetchBeneficiaries();
}, []);
//new use effect
useEffect(() => {
let interval: NodeJS.Timeout | null = null;
if (timerActive && countdown > 0) {
interval = setInterval(() => {
setCountdown((prev) => prev - 1);
}, 1000);
} else if (countdown === 0) {
setTimerActive(false);
}
return () => {
if (interval) clearInterval(interval);
};
}, [timerActive, countdown]);
if (loading) {
return (
<Center h="60vh">
@@ -260,6 +288,22 @@ export default function ViewBeneficiary() {
onChange={(e) => setOtp(e.currentTarget.value)}
placeholder="Enter OTP"
/>
<Group justify="space-between" mt="xs">
{/* Resend OTP Timer or Icon */}
{timerActive ? (
<Text size="xs" c="dimmed" style={{ minWidth: "180px" }}>
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={handleSendOtp}
/>
)}
</Group>
<Group p="right" mt="md">
<Button variant="default" onClick={() => setOpened(false)}>
Cancel

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

@@ -6,6 +6,7 @@ import { notifications } from "@mantine/notifications";
import { IconLock, IconRefresh } from "@tabler/icons-react";
import { generateCaptcha } from "@/app/captcha";
import { useRouter } from "next/navigation";
import { sendOtp, verifyOtp } from "@/app/_util/otp";
export default function ChangePassword() {
const router = useRouter();
@@ -22,14 +23,53 @@ export default function ChangePassword() {
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} />;
const [showOtpField, setShowOtpField] = useState(false);
// const handleGenerateOtp = async () => {
// const value = "123456"; // Or generate a random OTP
// setGeneratedOtp(value);
// setCountdown(180);
// setTimerActive(true);
// return value;
// };
async function handleSendOtp() {
const mobileNumber = localStorage.getItem('remitter_mobile_no');
if (!mobileNumber) {
notifications.show({
title: 'Error',
message: 'Mobile number not found.Contact to administrator',
color: 'red',
});
return;
}
try {
await sendOtp({ type: 'CHANGE_LPWORD' });
setShowOtpField(true);
setCountdown(180);
setTimerActive(true);
} catch (err: any) {
console.error('Send OTP failed', err);
notifications.show({
title: 'Error',
message: err.message || 'Send OTP failed.Please try again later.',
color: 'red',
});
}
}
async function handleVerifyOtp() {
try {
await verifyOtp(otp);
return true;
} catch {
return false;
}
}
const handleGenerateOtp = async () => {
const value = "123456"; // Or generate a random OTP
setGeneratedOtp(value);
setCountdown(180);
setTimerActive(true);
return value;
};
useEffect(() => {
regenerateCaptcha();
@@ -100,7 +140,7 @@ export default function ChangePassword() {
}
// Passed → move to OTP
await handleGenerateOtp();
await handleSendOtp();
setStep("otp");
notifications.show({
title: "OTP Sent",
@@ -310,7 +350,7 @@ export default function ChangePassword() {
<IconRefresh
size={22}
style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
onClick={handleGenerateOtp}
onClick={handleSendOtp}
/>
)
)}

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

@@ -6,6 +6,7 @@ import { notifications } from "@mantine/notifications";
import { IconLock, IconRefresh } from "@tabler/icons-react";
import { generateCaptcha } from "@/app/captcha";
import { useRouter } from "next/navigation";
import { sendOtp, verifyOtp } from "@/app/_util/otp";
export default function ChangePassword() {
const router = useRouter();
@@ -21,14 +22,52 @@ export default function ChangePassword() {
const [otpValidated, setOtpValidated] = useState(false);
const [step, setStep] = useState<"form" | "otp" | "final">("form");
const icon = <IconLock size={18} stroke={1.5} />;
const [showOtpField, setShowOtpField] = useState(false);
// const handleGenerateOtp = async () => {
// const value = "123456"; // Or generate a random OTP
// setGeneratedOtp(value);
// setCountdown(180);
// setTimerActive(true);
// return value;
// };
async function handleSendOtp() {
const mobileNumber = localStorage.getItem('remitter_mobile_no');
if (!mobileNumber) {
notifications.show({
title: 'Error',
message: 'Mobile number not found.Contact to administrator',
color: 'red',
});
return;
}
try {
await sendOtp({ type: 'CHANGE_TPWORD' });
setShowOtpField(true);
setCountdown(180);
setTimerActive(true);
} catch (err: any) {
console.error('Send OTP failed', err);
notifications.show({
title: 'Error',
message: err.message || 'Send OTP failed.Please try again later.',
color: 'red',
});
}
}
async function handleVerifyOtp() {
try {
await verifyOtp(otp);
return true;
} catch {
return false;
}
}
const handleGenerateOtp = async () => {
const value = "123456"; // Or generate a random OTP
setGeneratedOtp(value);
setCountdown(180);
setTimerActive(true);
return value;
};
useEffect(() => {
regenerateCaptcha();
@@ -100,7 +139,7 @@ export default function ChangePassword() {
}
// Passed → move to OTP
await handleGenerateOtp();
await handleSendOtp();
setStep("otp");
notifications.show({
title: "OTP Sent",
@@ -309,7 +348,7 @@ export default function ChangePassword() {
<IconRefresh
size={22}
style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
onClick={handleGenerateOtp}
onClick={handleSendOtp}
/>
)
)}

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

@@ -14,6 +14,7 @@ import { notifications } from "@mantine/notifications";
import { IconLock, IconRefresh } from "@tabler/icons-react";
import { generateCaptcha } from "@/app/captcha";
import { useRouter } from "next/navigation";
import { sendOtp, verifyOtp } from "@/app/_util/otp";
export default function ChangePassword() {
const [newPassword, setNewPassword] = useState("");
@@ -29,14 +30,50 @@ export default function ChangePassword() {
const router = useRouter();
const icon = <IconLock size={18} stroke={1.5} />;
const [showOtpField, setShowOtpField] = useState(false);
const handleGenerateOtp = async () => {
const value = "123456"; // Or generate a random OTP
setGeneratedOtp(value);
setCountdown(180);
setTimerActive(true);
return value;
};
// const handleGenerateOtp = async () => {
// const value = "123456"; // Or generate a random OTP
// setGeneratedOtp(value);
// setCountdown(180);
// setTimerActive(true);
// return value;
// };
async function handleSendOtp() {
const mobileNumber = localStorage.getItem('remitter_mobile_no');
if (!mobileNumber) {
notifications.show({
title: 'Error',
message: 'Mobile number not found.Contact to administrator',
color: 'red',
});
return;
}
try {
await sendOtp({ type: 'SET_TPWORD' });
setShowOtpField(true);
setCountdown(180);
setTimerActive(true);
} catch (err: any) {
console.error('Send OTP failed', err);
notifications.show({
title: 'Error',
message: err.message || 'Send OTP failed.Please try again later.',
color: 'red',
});
}
}
async function handleVerifyOtp() {
try {
await verifyOtp(otp);
return true;
} catch {
return false;
}
}
const regenerateCaptcha = async () => {
const newCaptcha = await generateCaptcha();
@@ -111,7 +148,7 @@ export default function ChangePassword() {
return;
}
// Passed → move to OTP step
await handleGenerateOtp();
await handleSendOtp();
setStep("otp");
notifications.show({
title: "OTP Sent",
@@ -310,7 +347,7 @@ export default function ChangePassword() {
<IconRefresh
size={22}
style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
onClick={handleGenerateOtp}
onClick={handleSendOtp}
/>
)
)}

66
src/app/SetPassword/page.tsx
View File

@@ -10,6 +10,8 @@ import changePwdImage from '@/app/image/set_log_pass.jpg';
import { IconLock, IconLogout, IconRefresh } from '@tabler/icons-react';
import { generateCaptcha } from '@/app/captcha';
import { generateOTP } from "../OTPGenerator";
import { sendOtp, verifyOtp } from "../_util/otp";
//const [showOtpField, setShowOtpField] = useState(false);
export default function SetLoginPwd() {
const router = useRouter();
@@ -24,15 +26,57 @@ export default function SetLoginPwd() {
const [timerActive, setTimerActive] = useState(false);
const icon = <IconLock size={18} stroke={1.5} />;
const [generateOtp, setGenerateOtp] = useState("");
const [showOtpField, setShowOtpField] = useState(false);
async function handleGenerateOtp() {
// const value = await generateOTP(6);
const value = "123456";
setGenerateOtp(value);
setCountdown(60);
setTimerActive(true);
// return value;
// async function handleGenerateOtp() {
// // const value = await generateOTP(6);
// const value = "123456";
// setGenerateOtp(value);
// setCountdown(60);
// setTimerActive(true);
// // return value;
// }
async function handleSendOtp() {
const mobileNumber = localStorage.getItem('remitter_mobile_no');
if (!mobileNumber) {
notifications.show({
title: 'Error',
message: 'Mobile number not found.Contact to administrator',
color: 'red',
});
return;
}
try {
await sendOtp({ type: 'CHANGE_LPWORD' });
setShowOtpField(true);
setCountdown(180);
setTimerActive(true);
} catch (err: any) {
console.error('Send OTP failed', err);
notifications.show({
title: 'Error',
message: err.message || 'Send OTP failed.Please try again later.',
color: 'red',
});
}
}
async function handleVerifyOtp() {
try {
await verifyOtp(otp);
return true;
} catch {
return false;
}
}
async function handleLogout(e: React.FormEvent) {
e.preventDefault();
localStorage.removeItem("access_token");
@@ -104,7 +148,7 @@ export default function SetLoginPwd() {
}
if (!captchaValidate) {
setCaptchaValidate(true);
handleGenerateOtp();
handleSendOtp();
return;
}
if (!otp) {
@@ -157,10 +201,10 @@ export default function SetLoginPwd() {
router.push("/login");
}
}
useEffect(() => {
useEffect(() => {
regenerateCaptcha();
}, []);
useEffect(() => {
let interval: number | undefined;
if (timerActive && countdown > 0) {
@@ -296,7 +340,7 @@ export default function SetLoginPwd() {
<Button
variant="subtle"
px={8}
onClick={handleGenerateOtp}
onClick={handleSendOtp}
leftSection={<IconRefresh size={16} />}
>
Resend

4
src/app/_util/otp.ts
View File

@@ -14,9 +14,9 @@ interface SendOtpPayload {
userOtp?: string;
}
function getStoredMobileNumber(): string | null {
function getStoredMobileNumber(): string | null {
// const mobileNumber = localStorage.getItem('remitter_mobile_no');
const mobileNumber= "7890544527";
const mobileNumber = "6297421727";
if (!mobileNumber) {
notifications.show({
title: 'Missing Mobile Number',