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

fix: E mandate Login and logout page

Browse Source
This commit is contained in:
Tomosa Sarkar
2025-11-12 15:15:48 +05:30
parent f1ff27ccf0
commit c2c87f8c71
5 changed files with 322 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

370
src/app/eMandate/login/page/page.tsx
View File

@@ -23,28 +23,28 @@ function LoginEmandate() {
const data = searchParams.get("data"); const data = searchParams.get("data");
const mandateReqDoc = searchParams.get("mandateReqDoc"); const mandateReqDoc = searchParams.get("mandateReqDoc");
const mndtType = searchParams.get("mndtType"); const mndtType = searchParams.get("mndtType");
// const payload = searchParams.get("payload");
// useEffect(() => { // useEffect(() => {
// if (payload) { // if (data) {
// try { // console.log("URL parameter 'data':", data);
// const parsed = JSON.parse(decodeURIComponent(payload)); // localStorage.setItem("Emendate_data", data);
// console.log("Received payload from SoftTech:", parsed); // localStorage.setItem("Emendate_req_doc", mandateReqDoc || "");
// localStorage.setItem("Emandate_data", JSON.stringify(parsed)); // localStorage.setItem("Emendate_type", mndtType || "");
// } catch (e) {
// console.error("Failed to parse payload:", e);
// }
// } // }
// }, [payload]); // }, [data]);
useEffect(() => { useEffect(() => {
if (data) { if (data && mandateReqDoc && mndtType) {
console.log("URL parameter 'data':", data); console.log("eMandate parameters found");
localStorage.setItem("Emendate_data", data); localStorage.setItem("Emendate_data", data);
localStorage.setItem("Emendate_req_doc", mandateReqDoc || ""); localStorage.setItem("Emendate_req_doc", mandateReqDoc);
localStorage.setItem("Emendate_type", mndtType || ""); localStorage.setItem("Emendate_type", mndtType);
} else {
console.log("eMandate parameters missing — clearing localStorage");
localStorage.removeItem("Emendate_data");
localStorage.removeItem("Emendate_req_doc");
localStorage.removeItem("Emendate_type");
} }
}, [data]); }, [data, mandateReqDoc, mndtType]);
useEffect(() => { useEffect(() => {
const loadCaptcha = async () => { const loadCaptcha = async () => {
@@ -54,7 +54,6 @@ function LoginEmandate() {
loadCaptcha(); loadCaptcha();
}, []); }, []);
const regenerateCaptcha = () => { const regenerateCaptcha = () => {
// setCaptcha(generateCaptcha()); // setCaptcha(generateCaptcha());
const loadCaptcha = async () => { const loadCaptcha = async () => {
@@ -208,47 +207,48 @@ function LoginEmandate() {
} }
} }
return ( if (data && mandateReqDoc && mndtType) {
<Providers> return (
{/* Main Screen */} <Providers>
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}> {/* Main Screen */}
{/* Header */} <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
{/* Header */}
<Box className={styles.header}> <Box className={styles.header}>
<Image src={logo} component={NextImage} fit="contain" alt="ebanking" style={{ width: "60px", height: "auto" }} /> <Image src={logo} component={NextImage} fit="contain" alt="ebanking" style={{ width: "60px", height: "auto" }} />
<Box className={styles['header-text']}> <Box className={styles['header-text']}>
<Title className={styles['desktop-text']} order={4}>THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.</Title> <Title className={styles['desktop-text']} order={4}>THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.</Title>
<Text className={styles['desktop-text']} size="xs">Head Office: Dharmshala, District Kangra (H.P), Pin: 176215</Text> <Text className={styles['desktop-text']} size="xs">Head Office: Dharmshala, District Kangra (H.P), Pin: 176215</Text>
<Title className={styles['mobile-text']} order={5}>THE KANGRA CENTRAL</Title> <Title className={styles['mobile-text']} order={5}>THE KANGRA CENTRAL</Title>
<Title className={styles['mobile-text']} order={5}>CO-OPERATIVE BANK LTD.</Title> <Title className={styles['mobile-text']} order={5}>CO-OPERATIVE BANK LTD.</Title>
</Box>
</Box> </Box>
</Box>
<div style={{ marginTop: '10px' }}> <div style={{ marginTop: '10px' }}>
{/* Movable text */} {/* Movable text */}
<Box <Box
className={styles['desktop-scroll-text']} className={styles['desktop-scroll-text']}
>
<Text
component="span"
style={{
display: "inline-block",
paddingLeft: "100%",
animation: "scroll-left 60s linear infinite",
fontWeight: "bold",
color: "#004d99",
}}
> >
⚠️ Always login to our Net Banking site directly or through Banks website. <Text
⚠️ Do not disclose your User Id and Password to any third party and keep Your User Id and Password strictly confidential. component="span"
⚠️ KCC Bank never asks for User Id,Passwords and Pins through email or phone. style={{
⚠️ Be ware of Phishing mails with links to fake bank&apos;s websites asking for personal information are in circulation. display: "inline-block",
⚠️ Please DO NOT Click on the links given in the emails asking for personal details like bank account number, user ID and password. paddingLeft: "100%",
⚠️ If you had shared your User Id and Password through such mails or links, please change your Password immediately. animation: "scroll-left 60s linear infinite",
⚠️ Inform the Bank/branch in which your account is maintained for resetting your password. fontWeight: "bold",
</Text> color: "#004d99",
<style> }}
{` >
⚠️ Always login to our Net Banking site directly or through Banks website.
⚠️ Do not disclose your User Id and Password to any third party and keep Your User Id and Password strictly confidential.
⚠️ KCC Bank never asks for User Id,Passwords and Pins through email or phone.
⚠️ Be ware of Phishing mails with links to fake bank&apos;s websites asking for personal information are in circulation.
⚠️ Please DO NOT Click on the links given in the emails asking for personal details like bank account number, user ID and password.
⚠️ If you had shared your User Id and Password through such mails or links, please change your Password immediately.
⚠️ Inform the Bank/branch in which your account is maintained for resetting your password.
</Text>
<style>
{`
@keyframes scroll-left { @keyframes scroll-left {
0% { transform: translateX(0%); } 0% { transform: translateX(0%); }
100% { transform: translateX(-100%); } 100% { transform: translateX(-100%); }
@@ -257,32 +257,90 @@ function LoginEmandate() {
.desktop-scroll-text { display: none; } .desktop-scroll-text { display: none; }
} }
`} `}
</style> </style>
</Box> </Box>
{/* Main */} {/* Main */}
<Box visibleFrom="md" <Box visibleFrom="md"
style={{ style={{
display: "flex", height: "75vh", overflow: "hidden", position: "relative", display: "flex", height: "75vh", overflow: "hidden", position: "relative",
background: 'linear-gradient(179deg, #3faa56ff 49%, #3aa760ff 80%)' background: 'linear-gradient(179deg, #3faa56ff 49%, #3aa760ff 80%)'
}}> }}>
<div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}> <div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
<Image <Image
fit="cover" fit="cover"
src={frontPage} src={frontPage}
component={NextImage} component={NextImage}
alt="ebanking" alt="ebanking"
style={{ width: "100%", height: "100%" }} style={{ width: "100%", height: "100%" }}
/> />
</div> </div>
<Box w={{ base: "100%", md: "45%" }} p="lg"> <Box w={{ base: "100%", md: "45%" }} p="lg">
<Card shadow="md" padding="xl" radius="md" style={{ maxWidth: 550, margin: "0 auto", height: '68vh' }}> <Card shadow="md" padding="xl" radius="md" style={{ maxWidth: 550, margin: "0 auto", height: '68vh' }}>
<form onSubmit={handleMandateLogin}>
<Text
ta="center"
fw={700}
style={{ fontSize: "18px" }}
>
E-Mandate Login
</Text>
<TextInput
label="User ID"
placeholder="Enter your CIF No"
value={CIF}
onInput={(e) => {
const input = e.currentTarget.value.replace(/\D/g, "");
if (input.length <= 11) SetCIF(input);
}}
withAsterisk
/>
<PasswordInput
label="Password"
placeholder="Enter your password"
value={psw}
onChange={(e) => SetPsw(e.currentTarget.value)}
withAsterisk
mt="sm"
/>
<Group mt="sm" align="center">
<Box style={{ backgroundColor: "#fff", fontSize: "18px", textDecoration: "line-through", padding: "4px 8px", fontFamily: "Verdana" }}>{captcha}</Box>
<Button size="xs" variant="light" onClick={regenerateCaptcha}>Refresh</Button>
</Group>
<TextInput
label="Enter CAPTCHA"
placeholder="Enter above text"
value={inputCaptcha}
onChange={(e) => setInputCaptcha(e.currentTarget.value)}
withAsterisk
mt="sm"
/>
<Button type="submit" fullWidth mt="md" disabled={isLogging}>
{isLogging ? "Logging..." : "Login"}
</Button>
</form>
</Card>
</Box>
</Box>
{/* Mobile layout */}
<Box
hiddenFrom="md"
style={{
marginTop: "25%",
padding: "1rem",
background: "linear-gradient(179deg, #3faa56ff 49%, #3aa760ff 80%)",
minHeight: "80vh",
display: "flex",
justifyContent: "center",
alignItems: "flex-start",
}}
>
<Card shadow="md" padding="lg" radius="md" style={{ width: "100%" }}>
<form onSubmit={handleMandateLogin}> <form onSubmit={handleMandateLogin}>
<Text <Text ta="center" fw={700} style={{ fontSize: "16px" }}>
ta="center"
fw={700}
style={{ fontSize: "18px" }}
>
E-Mandate Login E-Mandate Login
</Text> </Text>
@@ -295,7 +353,9 @@ function LoginEmandate() {
if (input.length <= 11) SetCIF(input); if (input.length <= 11) SetCIF(input);
}} }}
withAsterisk withAsterisk
mt="sm"
/> />
<PasswordInput <PasswordInput
label="Password" label="Password"
placeholder="Enter your password" placeholder="Enter your password"
@@ -305,10 +365,23 @@ function LoginEmandate() {
mt="sm" mt="sm"
/> />
<Group mt="sm" align="center"> <Group mt="sm" align="center" grow>
<Box style={{ backgroundColor: "#fff", fontSize: "18px", textDecoration: "line-through", padding: "4px 8px", fontFamily: "Verdana" }}>{captcha}</Box> <Box
<Button size="xs" variant="light" onClick={regenerateCaptcha}>Refresh</Button> style={{
backgroundColor: "#fff",
fontSize: "16px",
textDecoration: "line-through",
padding: "4px 8px",
fontFamily: "Verdana",
}}
>
{captcha}
</Box>
<Button size="xs" variant="light" onClick={regenerateCaptcha}>
Refresh
</Button>
</Group> </Group>
<TextInput <TextInput
label="Enter CAPTCHA" label="Enter CAPTCHA"
placeholder="Enter above text" placeholder="Enter above text"
@@ -317,108 +390,57 @@ function LoginEmandate() {
withAsterisk withAsterisk
mt="sm" mt="sm"
/> />
<Button type="submit" fullWidth mt="md" disabled={isLogging}> <Button type="submit" fullWidth mt="md" disabled={isLogging}>
{isLogging ? "Logging..." : "Login"} {isLogging ? "Logging..." : "Login"}
</Button> </Button>
</form> </form>
</Card> </Card>
</Box> </Box>
</Box>
{/* Mobile layout */} {/* Footer */}
<Box <Box
hiddenFrom="md" component="footer"
style={{ style={{
marginTop: "25%", width: "100%",
padding: "1rem", textAlign: "center",
background: "linear-gradient(179deg, #3faa56ff 49%, #3aa760ff 80%)", padding: "10px 0",
minHeight: "80vh", bottom: 0,
display: "flex", left: 0,
justifyContent: "center", zIndex: 1000,
alignItems: "flex-start", fontSize: "14px",
}} }}
> >
<Card shadow="md" padding="lg" radius="md" style={{ width: "100%" }}> <Text>
<form onSubmit={handleMandateLogin}> © 2025 KCC Bank. All rights reserved.
<Text ta="center" fw={700} style={{ fontSize: "16px" }}> </Text>
E-Mandate Login </Box>
</Text> </div>
<TextInput
label="User ID"
placeholder="Enter your CIF No"
value={CIF}
onInput={(e) => {
const input = e.currentTarget.value.replace(/\D/g, "");
if (input.length <= 11) SetCIF(input);
}}
withAsterisk
mt="sm"
/>
<PasswordInput
label="Password"
placeholder="Enter your password"
value={psw}
onChange={(e) => SetPsw(e.currentTarget.value)}
withAsterisk
mt="sm"
/>
<Group mt="sm" align="center" grow>
<Box
style={{
backgroundColor: "#fff",
fontSize: "16px",
textDecoration: "line-through",
padding: "4px 8px",
fontFamily: "Verdana",
}}
>
{captcha}
</Box>
<Button size="xs" variant="light" onClick={regenerateCaptcha}>
Refresh
</Button>
</Group>
<TextInput
label="Enter CAPTCHA"
placeholder="Enter above text"
value={inputCaptcha}
onChange={(e) => setInputCaptcha(e.currentTarget.value)}
withAsterisk
mt="sm"
/>
<Button type="submit" fullWidth mt="md" disabled={isLogging}>
{isLogging ? "Logging..." : "Login"}
</Button>
</form>
</Card>
</Box>
{/* Footer */}
<Box
component="footer"
style={{
width: "100%",
textAlign: "center",
padding: "10px 0",
bottom: 0,
left: 0,
zIndex: 1000,
fontSize: "14px",
}}
>
<Text>
© 2025 KCC Bank. All rights reserved.
</Text>
</Box>
</div> </div>
</Providers>
);
}
else {
return (
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "100vh",
backgroundColor: "#f8f9fa",
}}
>
<Text c="red" fw={600} size="lg">
⚠️ Required data not found
</Text>
<Text c="dimmed" size="sm">
Please access this page through the correct eMandate link.
</Text>
</div> </div>
</Providers> );
); }
} }
export default function Login() { export default function Login() {

32
src/app/eMandate/login/route.ts
View File

@@ -1,35 +1,3 @@
// import { NextResponse } from "next/server";
// export async function POST(req: Request) {
// try {
// const formData = await req.formData();
// const data = formData.get("data");
// const mandateReqDoc = formData.get("mandateReqDoc");
// const mndtType = formData.get("mndtType");
// // const { searchParams } = new URL(req.url);
// // const data = searchParams.get("data");
// // const mandateReqDoc = searchParams.get("mandateReqDoc");
// // const mndtType = searchParams.get("mndtType");
// console.log("Received from SoftTech:", { data, mandateReqDoc, mndtType });
// if (!data) {
// return NextResponse.json({ error: "Missing data" }, { status: 400 });
// }
// const encodedData = String(data);
// const forwardedHost =
// req.headers.get("x-forwarded-host") || "netbankingtest.kccb.in";
// const forwardedProto = req.headers.get("x-forwarded-proto") || "https";
// const redirectUrl = `${forwardedProto}://${forwardedHost}/eMandate/login/page?data=${encodedData}`;
// console.log("Redirecting to:", redirectUrl);
// return NextResponse.redirect(redirectUrl);
// } catch (error) {
// console.error("Error handling POST:", error);
// return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
// }
// }
import { NextResponse } from "next/server"; import { NextResponse } from "next/server";
export async function POST(req: Request) { export async function POST(req: Request) {

30
src/app/eMandate/logout/page.module.css Normal file
View File

@@ -0,0 +1,30 @@
/* Header */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
background: linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%);
}
.header-text {
flex: 1;
}
/* Desktop header text */
.desktop-text {
color: white;
}
.mobile-text {
color: white;
display: none;
}

92
src/app/eMandate/logout/page.tsx Normal file
View File

@@ -0,0 +1,92 @@
"use client";
import { Text, Title, Box, Image } from "@mantine/core";
import NextImage from "next/image";
import logo from "@/app/image/logo1.jpg";
import { Providers } from "@/app/providers";
import styles from "./page.module.css";
import { useEffect } from "react";
export default function Logout() {
useEffect(() => {
localStorage.removeItem("mandate_token");
localStorage.removeItem("user_name");
localStorage.removeItem("userMobNo");
localStorage.removeItem("Emendate_data");
localStorage.removeItem("Emendate_req_doc");
localStorage.removeItem("Emendate_type");
}, []);
return (
<Providers>
<div
style={{
backgroundColor: "#f8f9fa",
width: "100%",
minHeight: "100vh",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
}}
>
{/* Header */}
<Box className={styles.header} mt="md">
<Image
src={logo}
component={NextImage}
fit="contain"
alt="ebanking"
style={{ width: "60px", height: "auto" }}
/>
<Box className={styles["header-text"]}>
<Title className={styles["desktop-text"]} order={4}>
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
</Title>
<Text className={styles["desktop-text"]} size="xs">
Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
</Text>
<Title className={styles["mobile-text"]} order={5}>
THE KANGRA CENTRAL
</Title>
<Title className={styles["mobile-text"]} order={5}>
CO-OPERATIVE BANK LTD.
</Title>
</Box>
</Box>
{/* Centered Message */}
<div
style={{
textAlign: "center",
flexGrow: 1,
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
}}
>
<Text c="green" fw={600} size="lg">
✅ You have successfully logged out
</Text>
<Text c="dimmed" size="sm" mt="xs">
Please access this eMandate login page through the correct eMandate link.
</Text>
</div>
{/* Footer */}
<Box
component="footer"
style={{
width: "100%",
textAlign: "center",
padding: "10px 0",
fontSize: "14px",
color: "#6c757d",
}}
>
© 2025 KCC Bank. All rights reserved.
</Box>
</div>
</Providers>
);
}

5
src/app/eMandate/mandate_page/page.tsx
View File

@@ -117,7 +117,10 @@ export default function MandatePage() {
localStorage.removeItem("mandate_token"); localStorage.removeItem("mandate_token");
localStorage.removeItem("user_name"); localStorage.removeItem("user_name");
localStorage.removeItem("userMobNo"); localStorage.removeItem("userMobNo");
router.push("/eMandate/login"); localStorage.removeItem("Emendate_data");
localStorage.removeItem("Emendate_req_doc");
localStorage.removeItem("Emendate_type");
router.push("/eMandate/logout");
}; };
const handleFetchUserName = async () => { const handleFetchUserName = async () => {