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

Merge branch 'dev' of https://7o9o-lb-526275444.ap-south-1.elb.amazonaws.com/tomosa.sarkar/IB into dev

Browse Source
This commit is contained in:
Tomosa Sarkar
2025-09-08 17:34:16 +05:30
parent e089e95ce8 9619c99e00
commit 14e6ef97bc
8 changed files with 453 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,9 @@
"use client";
import React, { useEffect, useState } from 'react';
import { TextInput, Button, Grid, Text, PasswordInput,Loader,Group, Select, Stack } from '@mantine/core';
import { TextInput, Button, Grid, Text, PasswordInput, Loader, Group, Select, Stack } from '@mantine/core';
import { notifications } from '@mantine/notifications';
import { useRouter } from "next/navigation";
import { IconRefresh } from '@tabler/icons-react';
export default function AddBeneficiaryOthers() {
const router = useRouter();
@@ -20,10 +21,46 @@ export default function AddBeneficiaryOthers() {
const [generatedOtp, setGeneratedOtp] = useState('');
const [otpSent, setOtpSent] = useState(false);
const [otpVerified, setOtpVerified] = useState(false);
const [countdown, setCountdown] = useState(180);
const [timerActive, setTimerActive] = useState(false);
const [validationStatus, setValidationStatus] = useState<'success' | 'error' | null>(null);
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;
};
// Countdown effect
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(() => {
const token = localStorage.getItem("access_token");
@@ -76,11 +113,28 @@ export default function AddBeneficiaryOthers() {
}
}, [ifsccode]);
const handleGenerateOtp = async () => {
const value = "123456"; // Or generate a random OTP
setGeneratedOtp(value);
return value;
};
// 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) {
@@ -233,7 +287,7 @@ export default function AddBeneficiaryOthers() {
});
return;
}
else{
else {
notifications.show({
withBorder: true,
color: "Red",
@@ -251,7 +305,7 @@ export default function AddBeneficiaryOthers() {
color: "red",
});
}
finally{
finally {
setBankName('');
setBranchName('');
setIfsccode('');
@@ -267,7 +321,7 @@ export default function AddBeneficiaryOthers() {
if (!authorized) return null;
return (
<Grid gutter="md" style={{padding:'5px'}}>
<Grid gutter="md" style={{ padding: '5px' }}>
<Grid.Col span={4}>
<TextInput
label="IFSC Code"
@@ -398,9 +452,26 @@ export default function AddBeneficiaryOthers() {
value={otp}
onChange={(e) => setOtp(e.currentTarget.value)}
maxLength={6}
disabled={otpVerified} //Disable after verified
disabled={otpVerified}
withAsterisk
style={{ flex: 1 }}
/>
{!otpVerified && (
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}
/>
)
)}
</Grid.Col >
<Grid.Col >
{!otpVerified ? (

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

@@ -37,7 +37,7 @@ export default function QuickPay() {
const [validationStatus, setValidationStatus] = useState<"success" | "error" | null>(null);
const [beneficiaryName, setBeneficiaryName] = useState<string | null>(null);
const [showOtpField, setShowOtpField] = useState(false);
const [countdown, setCountdown] = useState(60);
const [countdown, setCountdown] = useState(180);
const [timerActive, setTimerActive] = useState(false);
const [otp, setOtp] = useState("");
const [generateOtp, setGenerateOtp] = useState("");
@@ -46,7 +46,7 @@ export default function QuickPay() {
// const value = await generateOTP(6);
const value = "123456";
setGenerateOtp(value);
setCountdown(60);
setCountdown(180);
setTimerActive(true);
return value;
}
@@ -457,32 +457,35 @@ export default function QuickPay() {
<Group grow>
{showOtpField && (
<>
<PasswordInput
label="OTP"
placeholder="Enter OTP"
type="otp"
value={otp}
maxLength={6}
onChange={(e) => setOtp(e.currentTarget.value)}
withAsterisk
disabled={showTxnPassword}
/>
{!showTxnPassword && (
timerActive ? (
<Text size="xs" c="dimmed">
Resend OTP will be enabled in 00:{countdown < 10 ? `0${countdown}` : countdown} min
</Text>
) : (
<Button
variant="subtle"
px={8}
onClick={handleGenerateOtp}
leftSection={<IconRefresh size={16} />}
>
Resend
</Button>
)
)}
<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 && (

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

@@ -1,13 +1,14 @@
"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';
import SendToBeneficiaryOthers from "./sendBeneficiaryOthers";
import Image from "next/image";
import img from '@/app/image/logo1.jpg';
import { IconRefresh } from "@tabler/icons-react";
interface accountData {
stAccountNo: string;
@@ -37,10 +38,15 @@ export default function SendToBeneficiaryOwn() {
const [otp, setOtp] = useState("");
const [generateOtp, setGenerateOtp] = useState("");
const [countdown, setCountdown] = useState(180);
const [timerActive, setTimerActive] = useState(false);
async function handleGenerateOtp() {
// const value = await generateOTP(6);
const value = "123456";
setGenerateOtp(value);
setCountdown(180);
setTimerActive(true);
return value;
}
const selectedAccount = accountData.find((acc) => acc.stAccountNo === selectedAccNo);
@@ -122,6 +128,22 @@ export default function SendToBeneficiaryOwn() {
}
}, [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]);
const benAccountOption = beneficiaryData
.filter((ben) =>
bankType === "own" ? ben.ifscCode?.startsWith("KACE") : true
@@ -413,16 +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}
/>
<>
<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

51
src/app/(main)/layout.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import React, { useEffect, useState } from 'react';
import { Box, Button, Divider, Group, Image, Stack, Text, Title } from '@mantine/core';
import { Box, Button, Divider, Group, Image, Popover, Stack, Text, Title } from '@mantine/core';
import { IconBook, IconCurrencyRupee, IconHome, IconLogout, IconPhoneFilled, IconSettings } from '@tabler/icons-react';
import Link from 'next/link';
import { useRouter, usePathname } from "next/navigation";
@@ -8,6 +8,10 @@ import { Providers } from '../providers';
import logo from '@/app/image/logo1.jpg';
import NextImage from 'next/image';
import { notifications } from '@mantine/notifications';
import { useDisclosure } from '@mantine/hooks';
import { Dialog } from '@mantine/core';
export default function RootLayout({ children }: { children: React.ReactNode }) {
const router = useRouter();
@@ -16,6 +20,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
const [userLastLoginDetails, setUserLastLoginDetails] = useState(null);
const [custname, setCustname] = useState<string | null>(null);
const [opened, { open, close }] = useDisclosure(false);
function doLogout() {
localStorage.removeItem("access_token");
sessionStorage.removeItem("access_token");
@@ -241,9 +248,45 @@ export default function RootLayout({ children }: { children: React.ReactNode })
</Link>
);
})}
<Button leftSection={<IconLogout size={20} />} variant="subtle" onClick={handleLogout}>
{/* <Button leftSection={<IconLogout size={20} />} variant="subtle" onClick={handleLogout}>
Logout
</Button>
</Button> */}
<Popover
opened={opened}
onChange={close}
position="bottom-end" // 👈 Logout button ke niche right align
withArrow
shadow="md"
>
<Popover.Target>
<Button
leftSection={<IconLogout size={20} />}
variant="subtle"
onClick={open}
>
Logout
</Button>
</Popover.Target>
<Popover.Dropdown>
<Text size="sm" mb="sm">
Are you sure you want to logout?
</Text>
<Group justify="flex-end" gap="sm">
<Button variant="default" onClick={close}>
Cancel
</Button>
<Button color="red" onClick={handleLogout}>
Logout
</Button>
</Group>
</Popover.Dropdown>
</Popover>
</Group>
</div>
@@ -279,7 +322,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
</div>
</Providers>
</body>
</html>
</html >
);
}
}

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">