feat: Add captcha in login screen.
feat : add important link in home screen
This commit is contained in:
@@ -46,7 +46,7 @@ export default function Home() {
|
||||
if (authorized) {
|
||||
return (
|
||||
<Providers>
|
||||
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: '100vh'}}>
|
||||
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: '100vh' }}>
|
||||
<Image
|
||||
// radius="md"
|
||||
fit="cover"
|
||||
@@ -75,7 +75,7 @@ export default function Home() {
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: "20px",
|
||||
marginLeft:'20px',
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "left",
|
||||
@@ -85,12 +85,12 @@ export default function Home() {
|
||||
<Text size="xs" c="gray">Last logged in at 29/06/25, 05:35 PM</Text>
|
||||
</div>
|
||||
<Group
|
||||
style={{ flex: 1, padding: "10px 10px 4px 10px", display: "flex", alignItems: "center", justifyContent: "left", height: "5vh" }}>
|
||||
style={{ flex: 1, padding: "10px 10px 4px 10px", marginLeft:'20px',display: "flex", alignItems: "center", justifyContent: "left", height: "5vh" }}>
|
||||
<Text fw={700}>Show Balance </Text>
|
||||
<Switch size="md" onLabel="ON" offLabel="OFF" checked={showBalance}
|
||||
onChange={(event) => setShowBalance(event.currentTarget.checked)} />
|
||||
</Group>
|
||||
<div style={{ flex: 1, padding: "10px", display: "flex", alignItems: "center", justifyContent: "left" }}>
|
||||
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-start" ,marginLeft:'20px'}}>
|
||||
<Group grow gap="lg">
|
||||
<Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 300 }}>
|
||||
{/* <IconBuildingBank /> */}
|
||||
@@ -150,6 +150,15 @@ export default function Home() {
|
||||
</Title>
|
||||
<Button fullWidth mt="xs">Get Statement</Button>
|
||||
</Paper>
|
||||
<Paper p="md" radius="md" style={{ width: 250, backgroundColor: '#f5f5f5',marginLeft:'170px'}}>
|
||||
<Title order={5} mb="sm">Important Links</Title>
|
||||
<Stack gap="xs">
|
||||
<Button variant="light" color="blue" fullWidth>Loan EMI Calculator</Button>
|
||||
<Button variant="light" color="blue" fullWidth>Branch Locator</Button>
|
||||
<Button variant="light" color="blue" fullWidth>Customer Care</Button>
|
||||
<Button variant="light" color="blue" fullWidth>FAQs</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Group>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,51 +1,88 @@
|
||||
"use client"
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { Text, Button, Paper, TextInput, MantineProvider, Image, Box, Anchor, PasswordInput, Title, Checkbox, Card, Group, Flex, Stack } from "@mantine/core";
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
Text,
|
||||
Button,
|
||||
Paper,
|
||||
TextInput,
|
||||
PasswordInput,
|
||||
Title,
|
||||
Card,
|
||||
Group,
|
||||
Flex,
|
||||
Box,
|
||||
Image,
|
||||
Anchor,
|
||||
Stack
|
||||
} from "@mantine/core";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import myImage from '@/app/image/ebanking.jpg';
|
||||
import bgImage from '@/app/image/media.jpg';
|
||||
import frontPage from '@/app/image/ib_front_page.jpg'
|
||||
import NextImage from 'next/image';
|
||||
import frontPage from '@/app/image/ib_front_page.jpg';
|
||||
import NextImage from "next/image";
|
||||
import { Providers } from "@/app/providers";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
|
||||
function generateCaptcha(length = 6) {
|
||||
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
|
||||
}
|
||||
|
||||
export default function Login() {
|
||||
const [CIF, SetCIF] = useState('');
|
||||
const [psw, SetPsw] = useState('');
|
||||
const router = useRouter();
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [CIF, SetCIF] = useState("");
|
||||
const [psw, SetPsw] = useState("");
|
||||
const [captcha, setCaptcha] = useState("");
|
||||
const [inputCaptcha, setInputCaptcha] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
setCaptcha(generateCaptcha());
|
||||
}, []);
|
||||
|
||||
const regenerateCaptcha = () => {
|
||||
setCaptcha(generateCaptcha());
|
||||
setInputCaptcha("");
|
||||
};
|
||||
|
||||
async function handleLogin(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
// const login_password =localStorage.setItem("password",psw);
|
||||
|
||||
if (inputCaptcha !== captcha) {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "red",
|
||||
title: "Captcha Error",
|
||||
message: "Please enter the correct captcha",
|
||||
autoClose: 5000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (CIF === "30022497139" && psw === "SecurePass123!") {
|
||||
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30";
|
||||
const token ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30";
|
||||
localStorage.setItem("customerNumber", CIF);
|
||||
localStorage.setItem("password", psw);
|
||||
localStorage.setItem("access_token", token);
|
||||
router.push("/home");
|
||||
}
|
||||
|
||||
else {
|
||||
} else {
|
||||
// SetCIF('');
|
||||
// SetPsw('');
|
||||
// setCaptcha('');
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: 'red',
|
||||
color: "red",
|
||||
title: "Wrong User Id or Password",
|
||||
message: "Wrong User Id or Password",
|
||||
autoClose: 5000,
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<Providers>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#f8f9fa",
|
||||
width:"100%",
|
||||
height: '100vh',
|
||||
}}
|
||||
>
|
||||
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "100vh" }}>
|
||||
<Image
|
||||
fit="cover"
|
||||
src={myImage}
|
||||
@@ -54,33 +91,36 @@ export default function Login() {
|
||||
style={{ width: "100%", height: "12%" }}
|
||||
/>
|
||||
|
||||
<Box style={{ width: "100%", overflow: "hidden", whiteSpace: "nowrap", padding: "8px 0" }}>
|
||||
<Box
|
||||
style={{
|
||||
width: "100%",
|
||||
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 UserId and Password strictly confidential.
|
||||
⚠️ KCC Bank never asks for UserId,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, userID 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.
|
||||
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>
|
||||
<style>
|
||||
{`
|
||||
@keyframes scroll-left {
|
||||
0% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
`}
|
||||
@keyframes scroll-left {
|
||||
0% { transform: translateX(0%); }
|
||||
100% { transform: translateX(-100%); }
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</Box>
|
||||
|
||||
<div style={{ display: "flex", height: "70vh" }}>
|
||||
<div style={{ flex: 1, backgroundColor: "#c1e0f0", display: "flex" }}>
|
||||
<Image
|
||||
@@ -91,73 +131,125 @@ export default function Login() {
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: 1, backgroundColor: "#c1e0f0", display: "flex", justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Card shadow="lg" padding="xl" radius="md" style={{
|
||||
width: 480, height: 400, backgroundColor: '#f0f0f0',
|
||||
borderRadius: "12px", boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
|
||||
}}>
|
||||
<Title order={5} style={{ marginLeft: 10 }}>Welcome To KCC Bank</Title>
|
||||
<Title order={1} style={{ marginLeft: 10, color: "#000066" }}>Internet Banking</Title>
|
||||
<br></br>
|
||||
<Box style={{ width: "370px", padding: "20px", border: "1px solid #e0e0d1", marginLeft: 30 }}>
|
||||
<Flex justify="center" gap="md" >
|
||||
<form onSubmit={handleLogin}>
|
||||
<TextInput
|
||||
label="User ID"
|
||||
placeholder="Enter your CIF no"
|
||||
type="numeric"
|
||||
maxLength={11}
|
||||
inputMode="numeric"
|
||||
pattern="\d*"
|
||||
value={CIF}
|
||||
onInput={(e) => {
|
||||
const input = e.currentTarget.value.replace(/\D/g, '');
|
||||
if (input.length <= 11) {
|
||||
SetCIF(input);
|
||||
}
|
||||
}}
|
||||
|
||||
style={{ flex: 1 }}
|
||||
required
|
||||
/>
|
||||
<br></br>
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
placeholder="Enter your password"
|
||||
value={psw}
|
||||
onChange={(e) => SetPsw(e.currentTarget.value)}
|
||||
style={{ flex: 1 }}
|
||||
required
|
||||
/>
|
||||
{/* <br></br> */}
|
||||
<Button type="submit" fullWidth variant="filled" mt="md" style={{ width: 100, align: "center", marginLeft: 40 }}>Login</Button>
|
||||
</form>
|
||||
</Flex>
|
||||
</Box>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: "#c1e0f0",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
shadow="lg"
|
||||
padding="xl"
|
||||
radius="md"
|
||||
style={{
|
||||
maxWidth: 480,
|
||||
height: 380,
|
||||
marginTop: 0,
|
||||
paddingTop: 20,
|
||||
backgroundColor: "#f0f0f0",
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
|
||||
// border:"1px solid black"
|
||||
}}
|
||||
>
|
||||
<Stack gap="xs">
|
||||
<Title order={6} style={{ marginLeft: 10 }}>
|
||||
<Text fs="italic">Welcome To KCC Bank</Text>
|
||||
<Text fw={700} style={{ fontSize: "18px", color: "#000066" }}>Internet Banking</Text>
|
||||
</Title>
|
||||
<Box
|
||||
style={{
|
||||
width: 370,
|
||||
height: 4500,
|
||||
padding: "20px",
|
||||
border: "1px solid #e0e0d1",
|
||||
}}
|
||||
>
|
||||
<Flex justify="center" gap="md">
|
||||
<form onSubmit={handleLogin}>
|
||||
<TextInput
|
||||
size="xs"
|
||||
label="User ID"
|
||||
placeholder="Enter your CIF no"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
value={CIF}
|
||||
onInput={(e) => {
|
||||
const input = e.currentTarget.value.replace(/\D/g, "");
|
||||
if (input.length <= 11) {
|
||||
SetCIF(input);
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
size="xs"
|
||||
placeholder="Enter your password"
|
||||
value={psw}
|
||||
onChange={(e) => SetPsw(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
<Group >
|
||||
<Box
|
||||
style={{
|
||||
padding: "10px 5px",
|
||||
backgroundColor: "#ffffff",
|
||||
fontFamily: "'UnifrakturCook',cursive",
|
||||
textDecoration:"line-through",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
{captcha}
|
||||
</Box>
|
||||
<Button variant="outline" size="xs" onClick={regenerateCaptcha}>
|
||||
Refresh
|
||||
</Button>
|
||||
</Group>
|
||||
<TextInput
|
||||
label="Enter CAPTCHA"
|
||||
size="xs"
|
||||
placeholder="Enter above text"
|
||||
value={inputCaptcha}
|
||||
onChange={(e) => setInputCaptcha(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
<Button type="submit" fullWidth variant="filled" mt="md">
|
||||
Login
|
||||
</Button>
|
||||
</form>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Box
|
||||
component="footer"
|
||||
style={{
|
||||
width: '100%',
|
||||
// backgroundColor: '#004d99',
|
||||
// color: 'white',
|
||||
textAlign: 'center',
|
||||
padding: '10px 0',
|
||||
position: 'fixed',
|
||||
width: "100%",
|
||||
textAlign: "center",
|
||||
padding: "10px 0",
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
zIndex: 1000,
|
||||
fontSize: '14px',
|
||||
fontSize: "14px",
|
||||
}}
|
||||
>
|
||||
<Text>
|
||||
© 2025 KCC Bank. All rights reserved. | <Anchor href="/disclaimer" >Disclaimer</Anchor> | <Anchor href="/privacy" >Privacy Policy</Anchor>
|
||||
© 2025 KCC Bank. All rights reserved. |{" "}
|
||||
<Anchor href="/disclaimer">Disclaimer</Anchor> |{" "}
|
||||
<Anchor href="/privacy">Privacy Policy</Anchor>
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
</div>
|
||||
</Providers>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user