wip:create emandate login page
This commit is contained in:
1085
package-lock.json
generated
1085
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
325
src/app/eMandate/login/page.tsx
Normal file
325
src/app/eMandate/login/page.tsx
Normal file
@@ -0,0 +1,325 @@
|
|||||||
|
"use client";
|
||||||
|
import React, { useState, useEffect, memo, useRef } from "react";
|
||||||
|
import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Tooltip, Modal } 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/ib_front_1.jpg';
|
||||||
|
import { generateCaptcha } from '@/app/captcha';
|
||||||
|
|
||||||
|
|
||||||
|
export default function Login() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [CIF, SetCIF] = useState("");
|
||||||
|
const [psw, SetPsw] = useState("");
|
||||||
|
const [captcha, setCaptcha] = useState("");
|
||||||
|
const [inputCaptcha, setInputCaptcha] = useState("");
|
||||||
|
const [isLogging, setIsLogging] = useState(false);
|
||||||
|
|
||||||
|
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
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,
|
||||||
|
});
|
||||||
|
localStorage.removeItem("access_token");
|
||||||
|
localStorage.clear();
|
||||||
|
sessionStorage.clear();
|
||||||
|
return;
|
||||||
|
|
||||||
|
}
|
||||||
|
setIsLogging(true);
|
||||||
|
if (response.ok) {
|
||||||
|
console.log(data);
|
||||||
|
const token = data.token;
|
||||||
|
localStorage.setItem("access_token", token);
|
||||||
|
localStorage.setItem("pswExpiryDate", data.loginPswExpiry);
|
||||||
|
if (data.FirstTimeLogin === true) {
|
||||||
|
notifications.show({
|
||||||
|
withBorder: true,
|
||||||
|
color: "red",
|
||||||
|
title: "Error",
|
||||||
|
message: "Please set your credential into Internet Banking before login.",
|
||||||
|
autoClose: 5000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
router.push("/home");
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
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 (
|
||||||
|
<Providers>
|
||||||
|
{/* Main Screen */}
|
||||||
|
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
|
||||||
|
{/* Header */}
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100,
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "flex-start",
|
||||||
|
background: "linear-gradient(15deg,rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
|
||||||
|
}}>
|
||||||
|
<Image
|
||||||
|
src={logo}
|
||||||
|
component={NextImage}
|
||||||
|
fit="contain"
|
||||||
|
alt="ebanking"
|
||||||
|
style={{ width: "100%", height: "auto", flexShrink: 0 }}
|
||||||
|
/>
|
||||||
|
<Title
|
||||||
|
order={2}
|
||||||
|
style={{
|
||||||
|
fontFamily: 'Roboto',
|
||||||
|
position: 'absolute',
|
||||||
|
top: '30%',
|
||||||
|
left: '7%',
|
||||||
|
color: 'White',
|
||||||
|
transition: "opacity 0.5s ease-in-out",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
|
||||||
|
</Title>
|
||||||
|
<Text size="sm" c="white"
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#1f1f14',
|
||||||
|
fontFamily: 'Roboto',
|
||||||
|
position: 'absolute',
|
||||||
|
top: '59%',
|
||||||
|
left: '72%',
|
||||||
|
color: 'white',
|
||||||
|
textShadow: '1px 1px 2px blue',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Head Office : Dharmshala, District: Kangra(H.P), Pin: 176215
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<div style={{ marginTop: '10px' }}>
|
||||||
|
{/* Movable text */}
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
height: "0.5%",
|
||||||
|
overflow: "hidden",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
padding: "8px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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'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%); }
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
</style>
|
||||||
|
</Box>
|
||||||
|
{/* Main */}
|
||||||
|
<div style={{
|
||||||
|
display: "flex", height: "75vh", overflow: "hidden", position: "relative",
|
||||||
|
// background: 'linear-gradient(to right, #02081eff, #0a3d91)'
|
||||||
|
background: 'linear-gradient(179deg,rgba(1, 13, 18, 1) 49%, rgba(77, 82, 79, 1) 87%)'
|
||||||
|
}}>
|
||||||
|
<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: "cursive" }}>{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>
|
||||||
|
</div>
|
||||||
|
{/* 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
BIN
src/app/image/EMandate.jpg
Normal file
BIN
src/app/image/EMandate.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Reference in New Issue
Block a user