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

feat : OTP verified all page

Browse Source
This commit is contained in:
Tomosa Sarkar
2025-10-14 13:00:54 +05:30
parent eb6b963c40 f2235818e5
commit 569e31bf12
12 changed files with 227 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx
View File

@@ -4,6 +4,7 @@ import { TextInput, Button, Grid, Text, PasswordInput, Loader, Group, Select, St
import { notifications } from '@mantine/notifications';
import { useRouter } from "next/navigation";
import { IconRefresh } from '@tabler/icons-react';
import { sendOtp, verifyOtp } from '@/app/_util/otp';
export default function AddBeneficiaryOthers() {
const router = useRouter();
@@ -18,7 +19,6 @@ export default function AddBeneficiaryOthers() {
const [nickName, setNickName] = useState('');
const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
const [otp, setOtp] = useState('');
const [generatedOtp, setGeneratedOtp] = useState('');
const [otpSent, setOtpSent] = useState(false);
const [otpVerified, setOtpVerified] = useState(false);
const [countdown, setCountdown] = useState(180);
@@ -27,19 +27,39 @@ export default function AddBeneficiaryOthers() {
const [isVisibilityLocked, setIsVisibilityLocked] = useState(false);
const [showPayeeAcc, setShowPayeeAcc] = useState(true);
const getFullMaskedAccount = (acc: string) => { return "X".repeat(acc.length); };
const [generateOtp, setGenerateOtp] = useState("");
const handleGenerateOtp = async () => {
const value = "123456"; // Or call your API to generate OTP
setGeneratedOtp(value);
// start countdown at 180 seconds (3 minutes)
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_ADD', beneficiary: beneficiaryName || undefined, ifsc: ifsccode });
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;
}
}
// Countdown effect
useEffect(() => {
@@ -113,29 +133,6 @@ export default function AddBeneficiaryOthers() {
}
}, [ifsccode]);
// 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 handleGenerateOtp = async () => {
// const value = "123456"; // Or generate a random OTP
// setGeneratedOtp(value);
// return value;
// };
const validateAndSendOtp = async () => {
if (!bankName || !ifsccode || !branchName || !accountNo || !confirmAccountNo || !beneficiaryType) {
notifications.show({
@@ -202,8 +199,7 @@ export default function AddBeneficiaryOthers() {
setValidationStatus("success");
setIsVisibilityLocked(true);
setOtpSent(true);
await handleGenerateOtp();
const otp = await handleSendOtp();
notifications.show({
withBorder: true,
color: "green",
@@ -227,7 +223,7 @@ export default function AddBeneficiaryOthers() {
}
};
const verifyOtp = () => {
const verify_otp = async () => {
if (!otp) {
notifications.show({
withBorder: true,
@@ -239,24 +235,21 @@ export default function AddBeneficiaryOthers() {
return;
}
if (otp === generatedOtp) {
setOtpVerified(true);
const verified = await handleVerifyOtp();
if (!verified) {
notifications.show({
withBorder: true,
color: "green",
title: "OTP Verified",
message: "OTP validated successfully.",
autoClose: 5000,
});
} else {
notifications.show({
withBorder: true,
title: "Invalid OTP",
message: "The OTP entered does not match",
color: "red",
title: "OTP Error",
message: "OTP does not match.",
autoClose: 5000,
});
return;
}
setOtpVerified(true);
notifications.show({
title: "OTP Verified",
message: "OTP successfully verified.",
color: "green",
});
};
const AddBen = async () => {
try {
@@ -468,14 +461,14 @@ export default function AddBeneficiaryOthers() {
<IconRefresh
size={22}
style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
onClick={handleGenerateOtp}
onClick={handleSendOtp}
/>
)
)}
</Grid.Col >
<Grid.Col >
{!otpVerified ? (
<Button onClick={verifyOtp}>Validate OTP</Button>
<Button onClick={verify_otp}>Validate OTP</Button>
) : (
<Button color="blue" size="sm" onClick={AddBen}>
Add

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

@@ -41,16 +41,6 @@ export default function QuickPay() {
const [countdown, setCountdown] = useState(180);
const [timerActive, setTimerActive] = useState(false);
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 handleSendOtp() {
const mobileNumber = localStorage.getItem('remitter_mobile_no');
@@ -63,7 +53,7 @@ export default function QuickPay() {
return;
}
try {
await sendOtp({ type: 'BENEFICIARY_DELETE' });
await sendOtp({ type: 'IMPS' });
setShowOtpField(true);
setCountdown(180);
setTimerActive(true);
@@ -86,10 +76,6 @@ export default function QuickPay() {
}
}
const selectedAccount = accountData.find((acc) => acc.stAccountNo === selectedAccNo);
const getFullMaskedAccount = (acc: string) => { return "X".repeat(acc.length); };
@@ -251,7 +237,16 @@ export default function QuickPay() {
});
return;
}
if (otp !== generateOtp) {
// if (otp !== generateOtp) {
// notifications.show({
// title: "Invalid OTP",
// message: "The OTP entered does not match",
// color: "red",
// });
// return;
// }
const verified = await handleVerifyOtp();
if (!verified) {
notifications.show({
title: "Invalid OTP",
message: "The OTP entered does not match",

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

@@ -24,7 +24,6 @@ export default function ViewBeneficiary() {
const [authorized, setAuthorized] = useState<boolean | null>(null);
const [beneficiaries, setBeneficiaries] = useState<Beneficiary[]>([]);
const [loading, setLoading] = useState(true);
const [opened, setOpened] = useState(false);
const [otpStep, setOtpStep] = useState(false);
const [otp, setOtp] = useState("");
@@ -32,6 +31,14 @@ export default function ViewBeneficiary() {
const [countdown, setCountdown] = useState(180);
const [timerActive, setTimerActive] = useState(false);
const maskAccount = (account: string) => {
if (!account) return undefined;
const length = account.length;
if (length <= 4) return account;
const masked = "X".repeat(length - 4) + account.slice(length - 4);
return masked;
};
async function handleSendOtp() {
const mobileNumber = localStorage.getItem('remitter_mobile_no');
if (!mobileNumber) {
@@ -43,7 +50,7 @@ export default function ViewBeneficiary() {
return;
}
try {
await sendOtp({ type: 'IMPS' }); // type will be "BENEFICIARY_DELETE"
await sendOtp({ type: 'BENEFICIARY_DELETE', beneficiary: selectedAccount ? maskAccount(selectedAccount) : undefined });
setCountdown(180);
setTimerActive(true);
} catch (err: any) {

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

@@ -23,15 +23,7 @@ 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');
@@ -45,7 +37,6 @@ export default function ChangePassword() {
}
try {
await sendOtp({ type: 'CHANGE_LPWORD' });
setShowOtpField(true);
setCountdown(180);
setTimerActive(true);
} catch (err: any) {
@@ -152,15 +143,16 @@ export default function ChangePassword() {
// Step 2 → validate OTP
if (step === "otp") {
if (otp !== generatedOtp) {
const verified = await handleVerifyOtp();
if (!verified) {
notifications.show({
title: "Invalid OTP",
message: "Please enter the correct OTP.",
message: "The OTP entered does not match",
color: "red",
});
return;
}
setOtpValidated(true);
setStep("final");
notifications.show({

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

@@ -151,10 +151,11 @@ export default function ChangePassword() {
// Step 2 → validate OTP
if (step === "otp") {
if (otp !== generatedOtp) {
const verified = await handleVerifyOtp();
if (!verified) {
notifications.show({
title: "Invalid OTP",
message: "Please enter the correct OTP.",
message: "The OTP entered does not match",
color: "red",
});
return;

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

@@ -159,10 +159,11 @@ export default function ChangePassword() {
}
// Step 2 → validate OTP
if (step === "otp") {
if (otp !== generatedOtp) {
const verified = await handleVerifyOtp();
if (!verified) {
notifications.show({
title: "Invalid OTP",
message: "Please enter the correct OTP.",
message: "The OTP entered does not match",
color: "red",
});
return;

61
src/app/ChangePassword/page.tsx
View File

@@ -19,6 +19,7 @@ import logo from "@/app/image/logo1.jpg";
import changePwdImage from "@/app/image/change_password.jpg"; // reuse background illustration
import { generateCaptcha } from "@/app/captcha";
import { IconLock, IconRefresh } from "@tabler/icons-react";
import { sendOtp, verifyOtp } from "../_util/otp";
export default function ChangePassword() {
const router = useRouter();
@@ -38,13 +39,49 @@ export default function ChangePassword() {
const icon = <IconLock size={18} stroke={1.5} />;
// OTP generation
const handleGenerateOtp = async () => {
const value = "123456"; // replace with backend OTP if available
setGeneratedOtp(value);
setCountdown(180);
setTimerActive(true);
return value;
};
// const handleGenerateOtp = async () => {
// const value = "123456"; // replace with backend OTP if available
// 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' });
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;
}
}
useEffect(() => {
regenerateCaptcha();
@@ -120,7 +157,7 @@ export default function ChangePassword() {
return;
}
await handleGenerateOtp();
await handleSendOtp();
setStep("otp");
notifications.show({
title: "OTP Sent",
@@ -130,11 +167,13 @@ export default function ChangePassword() {
return;
}
// Step 2 → validate OTP
if (step === "otp") {
if (otp !== generatedOtp) {
const verified = await handleVerifyOtp();
if (!verified) {
notifications.show({
title: "Invalid OTP",
message: "Please enter the correct OTP.",
message: "The OTP entered does not match",
color: "red",
});
return;
@@ -363,7 +402,7 @@ export default function ChangePassword() {
<Button
variant="subtle"
px={8}
onClick={handleGenerateOtp}
onClick={handleSendOtp}
leftSection={<IconRefresh size={16} />}
>
Resend

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

@@ -13,6 +13,7 @@ import { generateOTP } from "../OTPGenerator";
import { sendOtp, verifyOtp } from "../_util/otp";
//const [showOtpField, setShowOtpField] = useState(false);
export default function SetLoginPwd() {
const router = useRouter();
const [authorized, SetAuthorized] = useState<boolean | null>(null);
@@ -26,18 +27,8 @@ 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;
// }
const [step, setStep] = useState<"form" | "otp" | "final">("form");
const [otpValidated, setOtpValidated] = useState(false);
async function handleSendOtp() {
const mobileNumber = localStorage.getItem('remitter_mobile_no');
@@ -51,7 +42,6 @@ export default function SetLoginPwd() {
}
try {
await sendOtp({ type: 'CHANGE_LPWORD' });
setShowOtpField(true);
setCountdown(180);
setTimerActive(true);
} catch (err: any) {
@@ -73,10 +63,6 @@ export default function SetLoginPwd() {
}
}
async function handleLogout(e: React.FormEvent) {
e.preventDefault();
localStorage.removeItem("access_token");
@@ -159,14 +145,30 @@ export default function SetLoginPwd() {
});
return;
}
if (otp !== generateOtp) {
// Step 2 → validate OTP
if (step === "otp") {
const verified = await handleVerifyOtp();
if (!verified) {
notifications.show({
title: "Invalid OTP",
message: "The OTP entered does not match",
color: "red",
});
return;
}
setOtpValidated(true);
setStep("final");
notifications.show({
title: "Invalid OTP",
message: "The OTP entered does not match",
color: "red",
title: "OTP Verified",
message: "OTP has been successfully verified.",
color: "green",
});
return;
}
const token = localStorage.getItem("access_token");
const response = await fetch('api/auth/login_password', {
method: 'POST',

73
src/app/SetTxn/page.tsx
View File

@@ -9,6 +9,9 @@ import logo from '@/app/image/logo1.jpg';
import changePwdImage from '@/app/image/set_tran_pass.jpg';
import { generateCaptcha } from '@/app/captcha';
import { IconLock, IconLogout, IconRefresh } from '@tabler/icons-react';
import { sendOtp, verifyOtp } from "../_util/otp";
export default function SetTransactionPwd() {
const router = useRouter();
@@ -23,6 +26,45 @@ export default function SetTransactionPwd() {
const [timerActive, setTimerActive] = useState(false);
const icon = <IconLock size={18} stroke={1.5} />;
const [generateOtp, setGenerateOtp] = useState("");
const [showOtpField, setShowOtpField] = useState(false);
const [step, setStep] = useState<"form" | "otp" | "final">("form");
const [otpValidated, setOtpValidated] = 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: 'CHANGE_LPWORD' });
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 handleGenerateOtp() {
// const value = await generateOTP(6);
@@ -128,7 +170,7 @@ export default function SetTransactionPwd() {
}
if (!captchaValidate) {
setCaptchaValidate(true);
handleGenerateOtp();
handleSendOtp();
return;
}
if (!otp) {
@@ -139,14 +181,33 @@ export default function SetTransactionPwd() {
});
return;
}
if (otp !== generateOtp) {
// Step 2 → validate OTP
if (step === "otp") {
const verified = await handleVerifyOtp();
if (!verified) {
notifications.show({
title: "Invalid OTP",
message: "The OTP entered does not match",
color: "red",
});
return;
}
setOtpValidated(true);
setStep("final");
notifications.show({
title: "Invalid OTP",
message: "The OTP entered does not match",
color: "red",
title: "OTP Verified",
message: "OTP has been successfully verified.",
color: "green",
});
return;
}
const token = localStorage.getItem("access_token");
const response = await fetch('api/auth/transaction_password', {
method: 'POST',
@@ -306,7 +367,7 @@ export default function SetTransactionPwd() {
<Button
variant="subtle"
px={8}
onClick={handleGenerateOtp}
onClick={handleSendOtp}
leftSection={<IconRefresh size={16} />}
>
Resend

4
src/app/ValidateUser/page.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import React, { useEffect, useState ,useRef } from "react";
import React, { useEffect, useState, useRef } from "react";
import { Text, Button, TextInput, PasswordInput, Title, Card, Box, Image } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { Providers } from "@/app/providers";
@@ -19,7 +19,7 @@ export default function ValidateUser() {
const headerRef = useRef<HTMLHeadingElement>(null);
const validUsers = [
{ cif: "11111111111", mobile: "7890544527" },
{ cif: "11111111111", mobile: "6297421727" },
{ cif: "30022497139", mobile: "6230573848" },
{ cif: "11122233344", mobile: "9998887776" },
];

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

@@ -12,12 +12,12 @@ interface SendOtpPayload {
ref?: string;
date?: string;
userOtp?: string;
username?:string
username?: string
}
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',
@@ -59,7 +59,7 @@ export async function verifyOtp(otp: string) {
}
}
export async function verifyLoginOtp(otp: string,mobileNumber:string) {
export async function verifyLoginOtp(otp: string, mobileNumber: string) {
try {
// const mobileNumber = getStoredMobileNumber();
const response = await axios.post(

10
src/app/login/page.tsx
View File

@@ -50,10 +50,10 @@ export default function Login() {
// await sendOtp({ type: 'LOGIN_OTP', username: CIF, mobileNumber: mobile });
await sendOtp({ type: 'LOGIN_OTP', username: CIF, mobileNumber: '7890544527' });
notifications.show({
color: "orange",
title: "OTP Required",
message: "OTP sent to your registered mobile number",
});
color: "orange",
title: "OTP Required",
message: "OTP sent to your registered mobile number",
});
return true;
}
catch (err: any) {
@@ -70,7 +70,7 @@ export default function Login() {
try {
if (mobile) {
// await verifyLoginOtp(otp, mobile);
await verifyLoginOtp(otp, '7890544527');
await verifyLoginOtp(otp, '6297421727');
return true;
}
} catch {