"use client";
import React, { useState, useEffect, Suspense } from "react";
import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Box, Image } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { Providers } from "@/app/providers";
import { useRouter } from "next/navigation";
import NextImage from "next/image";
import logo from '@/app/image/logo1.jpg';
import frontPage from '@/app/image/EMandate.jpg';
import { generateCaptcha } from '@/app/captcha';
import styles from './Login.module.css';
import { useSearchParams } from "next/navigation";
function LoginEmandate() {
const router = useRouter();
const [CIF, SetCIF] = useState("");
const [psw, SetPsw] = useState("");
const [captcha, setCaptcha] = useState("");
const [inputCaptcha, setInputCaptcha] = useState("");
const [isLogging, setIsLogging] = useState(false);
const searchParams = useSearchParams();
const data = searchParams.get("data");
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);
// }
// }
// }, [payload]);
useEffect(() => {
if (data) {
console.log("URL parameter 'data':", data);
localStorage.setItem("Emendate_data", data);
}
}, [data]);
useEffect(() => {
const loadCaptcha = async () => {
const newCaptcha = await generateCaptcha();
setCaptcha(newCaptcha);
};
loadCaptcha();
}, []);
const regenerateCaptcha = () => {
// setCaptcha(generateCaptcha());
const loadCaptcha = async () => {
const newCaptcha = await generateCaptcha();
setCaptcha(newCaptcha);
};
loadCaptcha();
setInputCaptcha("");
};
async function handleMandateLogin(e: React.FormEvent) {
e.preventDefault();
const onlyDigit = /^\d{11}$/;
if (!onlyDigit.test(CIF)) {
// setError('Input value must be 11 digit');
notifications.show({
withBorder: true,
color: "red",
title: "Invalid UserId",
message: "UserID must be 11 digit",
autoClose: 5000,
});
return;
}
if (!inputCaptcha) {
notifications.show({
withBorder: true,
color: "red",
title: "Invalid Captcha",
message: "Please fill the Captcha filed",
autoClose: 5000,
});
return;
}
if (inputCaptcha !== captcha) {
notifications.show({
withBorder: true,
color: "red",
title: "Captcha Error",
message: "Please enter the correct captcha",
autoClose: 5000,
});
regenerateCaptcha();
return;
}
if (!CIF || !psw) {
notifications.show({
withBorder: true,
color: "red",
title: "Invalid Input",
message: "Please fill UserId and Password",
autoClose: 5000,
});
return;
}
try {
const response = await fetch('/api/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Login-Type': 'eMandate',
},
body: JSON.stringify({
customerNo: CIF,
password: psw,
}),
});
const data = await response.json();
if (!response.ok) {
notifications.show({
withBorder: true,
color: "red",
title: "Error",
message: data?.error || "Internal Server Error",
autoClose: 5000,
});
regenerateCaptcha()
localStorage.removeItem("mandate_token");
localStorage.clear();
sessionStorage.clear();
return;
}
setIsLogging(true);
if (response.ok) {
// console.log(data);
const token = data.token;
localStorage.setItem("mandate_token", token);
// localStorage.setItem("pswExpiryDate", data.loginPswExpiry);
if (data.FirstTimeLogin === true) {
notifications.show({
withBorder: true,
color: "red",
title: "Error",
message: "Please go to Internet Banking, set your credentials, and then try logging in here again.",
autoClose: 5000,
});
}
else {
router.push("/eMandate/mandate_page");
}
}
else {
regenerateCaptcha();
setIsLogging(false);
notifications.show({
withBorder: true,
color: "red",
title: "Wrong User Id or Password",
message: "Wrong User Id or Password",
autoClose: 5000,
});
}
}
catch (error: any) {
notifications.show({
withBorder: true,
color: "red",
title: "Error",
message: "Internal Server Error,Please try again Later",
autoClose: 5000,
});
return;
}
}
return (
{/* Main Screen */}
{/* Header */}
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
THE KANGRA CENTRAL
CO-OPERATIVE BANK LTD.
{/* Movable 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'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.
{/* Main */}
{/* Mobile layout */}
{/* Footer */}
© 2025 KCC Bank. All rights reserved.