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

feat : logout popup

Browse Source 
wip : Resend button and timer
This commit is contained in:
nabanita.jana
2025-09-05 15:27:55 +05:30
parent dc1d7c3157
commit 7d0f6ff097
4 changed files with 199 additions and 42 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 && (

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

@@ -8,6 +8,7 @@ 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,6 +435,7 @@ export default function SendToBeneficiaryOwn() {
</Group>
<Group grow>
{showOtpField && (
<TextInput
label="OTP"
placeholder="Enter OTP"
@@ -423,6 +446,23 @@ export default function SendToBeneficiaryOwn() {
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}
/>
)
)
)}
{showTxnPassword && (
<TextInput
label="Transaction Password"

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");
@@ -233,9 +240,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>
@@ -271,7 +314,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
</div>
</Providers>
</body>
</html>
</html >
);
}
}