fix: E mandate Login and logout page

This commit is contained in:
2025-11-12 15:15:48 +05:30
parent f1ff27ccf0
commit c2c87f8c71
5 changed files with 322 additions and 207 deletions

View File

@@ -23,28 +23,28 @@ function LoginEmandate() {
const data = searchParams.get("data");
const mandateReqDoc = searchParams.get("mandateReqDoc");
const mndtType = searchParams.get("mndtType");
// const payload = searchParams.get("payload");
// useEffect(() => {
// if (payload) {
// try {
// const parsed = JSON.parse(decodeURIComponent(payload));
// console.log("Received payload from SoftTech:", parsed);
// localStorage.setItem("Emandate_data", JSON.stringify(parsed));
// } catch (e) {
// console.error("Failed to parse payload:", e);
// }
// if (data) {
// console.log("URL parameter 'data':", data);
// localStorage.setItem("Emendate_data", data);
// localStorage.setItem("Emendate_req_doc", mandateReqDoc || "");
// localStorage.setItem("Emendate_type", mndtType || "");
// }
// }, [payload]);
// }, [data]);
useEffect(() => {
if (data) {
console.log("URL parameter 'data':", data);
if (data && mandateReqDoc && mndtType) {
console.log("eMandate parameters found");
localStorage.setItem("Emendate_data", data);
localStorage.setItem("Emendate_req_doc", mandateReqDoc || "");
localStorage.setItem("Emendate_type", mndtType || "");
localStorage.setItem("Emendate_req_doc", mandateReqDoc);
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(() => {
const loadCaptcha = async () => {
@@ -54,7 +54,6 @@ function LoginEmandate() {
loadCaptcha();
}, []);
const regenerateCaptcha = () => {
// setCaptcha(generateCaptcha());
const loadCaptcha = async () => {
@@ -208,47 +207,48 @@ function LoginEmandate() {
}
}
return (
<Providers>
{/* Main Screen */}
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
{/* Header */}
if (data && mandateReqDoc && mndtType) {
return (
<Providers>
{/* Main Screen */}
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
{/* Header */}
<Box className={styles.header}>
<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 className={styles.header}>
<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>
</Box>
<div style={{ marginTop: '10px' }}>
{/* Movable text */}
<Box
className={styles['desktop-scroll-text']}
>
<Text
component="span"
style={{
display: "inline-block",
paddingLeft: "100%",
animation: "scroll-left 60s linear infinite",
fontWeight: "bold",
color: "#004d99",
}}
<div style={{ marginTop: '10px' }}>
{/* Movable text */}
<Box
className={styles['desktop-scroll-text']}
>
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>
{`
<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.
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 {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
@@ -257,32 +257,90 @@ function LoginEmandate() {
.desktop-scroll-text { display: none; }
}
`}
</style>
</Box>
</style>
</Box>
{/* Main */}
<Box visibleFrom="md"
style={{
display: "flex", height: "75vh", overflow: "hidden", position: "relative",
background: 'linear-gradient(179deg, #3faa56ff 49%, #3aa760ff 80%)'
}}>
<div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
<Image
fit="cover"
src={frontPage}
component={NextImage}
alt="ebanking"
style={{ width: "100%", height: "100%" }}
/>
</div>
<Box w={{ base: "100%", md: "45%" }} p="lg">
<Card shadow="md" padding="xl" radius="md" style={{ maxWidth: 550, margin: "0 auto", height: '68vh' }}>
{/* Main */}
<Box visibleFrom="md"
style={{
display: "flex", height: "75vh", overflow: "hidden", position: "relative",
background: 'linear-gradient(179deg, #3faa56ff 49%, #3aa760ff 80%)'
}}>
<div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
<Image
fit="cover"
src={frontPage}
component={NextImage}
alt="ebanking"
style={{ width: "100%", height: "100%" }}
/>
</div>
<Box w={{ base: "100%", md: "45%" }} p="lg">
<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}>
<Text
ta="center"
fw={700}
style={{ fontSize: "18px" }}
>
<Text ta="center" fw={700} style={{ fontSize: "16px" }}>
E-Mandate Login
</Text>
@@ -295,7 +353,9 @@ function LoginEmandate() {
if (input.length <= 11) SetCIF(input);
}}
withAsterisk
mt="sm"
/>
<PasswordInput
label="Password"
placeholder="Enter your password"
@@ -305,10 +365,23 @@ function LoginEmandate() {
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 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"
@@ -317,108 +390,57 @@ function LoginEmandate() {
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}>
<Text ta="center" fw={700} style={{ fontSize: "16px" }}>
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
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>
{/* 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>
</Providers>
);
);
}
}
export default function Login() {

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";
export async function POST(req: Request) {

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;
}

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>
);
}

View File

@@ -117,7 +117,10 @@ export default function MandatePage() {
localStorage.removeItem("mandate_token");
localStorage.removeItem("user_name");
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 () => {