Wip: update the login page,
feat: update Otp in set login and transaction page. Feat: Add validation for external account in add beneficiary.
This commit is contained in:
@@ -1,24 +1,25 @@
|
||||
"use client";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Stack, Popover, ActionIcon } from "@mantine/core";
|
||||
import React, { useState, useEffect, memo, useRef } from "react";
|
||||
import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Tooltip } 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/logo.jpg';
|
||||
import logo from '@/app/image/logo1.jpg';
|
||||
import frontPage from '@/app/image/ib_front.jpg';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { generateCaptcha } from '@/app/captcha';
|
||||
import { IconShieldLockFilled } from "@tabler/icons-react";
|
||||
|
||||
export default function Login() {
|
||||
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("");
|
||||
const [isLogging, setIsLogging] = useState(false);
|
||||
const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
|
||||
const headerRef = useRef<HTMLHeadingElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const loadCaptcha = async () => {
|
||||
@@ -42,7 +43,25 @@ export default function Login() {
|
||||
e.preventDefault();
|
||||
const onlyDigit = /^\d{11}$/;
|
||||
if (!onlyDigit.test(CIF)) {
|
||||
setError('Input value must be 11 digit');
|
||||
// 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({
|
||||
@@ -55,6 +74,16 @@ export default function Login() {
|
||||
regenerateCaptcha();
|
||||
return;
|
||||
}
|
||||
if (!CIF || !psw) {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "red",
|
||||
title: "Invalid Input",
|
||||
message: "Please fill UserId and Password",
|
||||
autoClose: 5000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
const response = await fetch('api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -90,38 +119,75 @@ export default function Login() {
|
||||
});
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
const headerData = [
|
||||
"THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.",
|
||||
"कांगड़ा केन्द्रीय सहकारी बैंक सीमित",
|
||||
];
|
||||
let index = 0;
|
||||
const interval = setInterval(() => {
|
||||
index = (index + 1) % headerData.length;
|
||||
if (headerRef.current) {
|
||||
headerRef.current.textContent = headerData[index];
|
||||
}
|
||||
}, 2000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Providers>
|
||||
<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(2, 163, 85, 1) 55%, rgba(101, 101, 184, 1) 100%)",
|
||||
// border: "1px solid black"
|
||||
}}>
|
||||
<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
|
||||
fit="cover"
|
||||
src={logo}
|
||||
component={NextImage}
|
||||
fit="contain"
|
||||
alt="ebanking"
|
||||
style={{ width: "40%", height: "100%", objectFit: "contain", marginLeft: 0 }}
|
||||
style={{ width: "100%", height: "auto", flexShrink: 0 }}
|
||||
/>
|
||||
<Text
|
||||
<Title ref={headerRef}
|
||||
order={2}
|
||||
style={{
|
||||
fontFamily: 'Roboto',
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '64%',
|
||||
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',
|
||||
}}
|
||||
>
|
||||
{/* <IconBuildingBank/> */}
|
||||
Head Office : Dharmshala, District: Kangra(H.P), Pincode: 176215
|
||||
Head Office : Dharmshala, District: Kangra(H.P), Pin: 176215
|
||||
</Text>
|
||||
{/* <Box style={{ position: "absolute", right: "1rem", top: "50%", transform: 'translateY(-50%)' }}>
|
||||
<Tooltip
|
||||
label='Head Office : Dharmshala, District: Kangra(H.P), Pin: 176215'
|
||||
position="right"
|
||||
withArrow>
|
||||
<IconBuildingBank size={40} style={{ cursor: "pointer", color: "white" }} />
|
||||
</Tooltip>
|
||||
</Box> */}
|
||||
</Box>
|
||||
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
{/* Movable text */}
|
||||
<Box
|
||||
@@ -148,7 +214,7 @@ export default function Login() {
|
||||
⚠️ 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 shard your User Id and Password through such mails or links, please change your Password immediately.
|
||||
⚠️ 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>
|
||||
@@ -164,8 +230,7 @@ export default function Login() {
|
||||
<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(181, 196, 187, 1) 87%)'
|
||||
// background:'linear-gradient(179deg,rgba(1, 7, 10, 1) 48%, rgba(87, 94, 89, 1) 87%)'
|
||||
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
|
||||
@@ -176,8 +241,8 @@ export default function Login() {
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<Box w={{ base: "100%", md: "50%" }} p="lg">
|
||||
<Card shadow="md" padding="xl" radius="md" style={{ maxWidth: 400, margin: "0 auto", height: '68vh' }}>
|
||||
<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={handleLogin}>
|
||||
<TextInput
|
||||
label="User ID"
|
||||
@@ -187,21 +252,20 @@ export default function Login() {
|
||||
const input = e.currentTarget.value.replace(/\D/g, "");
|
||||
if (input.length <= 11) SetCIF(input);
|
||||
}}
|
||||
error={error}
|
||||
required
|
||||
withAsterisk
|
||||
/>
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
placeholder="Enter your password"
|
||||
value={psw}
|
||||
onChange={(e) => SetPsw(e.currentTarget.value)}
|
||||
required
|
||||
withAsterisk
|
||||
mt="sm"
|
||||
/>
|
||||
<Box style={{ textAlign: "right"}}>
|
||||
<Box style={{ textAlign: "right" }}>
|
||||
<Anchor
|
||||
style={{ fontSize: "14px", color: "#1c7ed6", cursor: "pointer" }}
|
||||
onClick={() => router.push("/ValidateUser")}
|
||||
onClick={() => router.push("/ValidateUser")}
|
||||
>
|
||||
Forgot Password?
|
||||
</Anchor>
|
||||
@@ -209,14 +273,13 @@ export default function Login() {
|
||||
<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)}
|
||||
required
|
||||
withAsterisk
|
||||
mt="sm"
|
||||
/>
|
||||
<Button type="submit" fullWidth mt="md" disabled={isLogging}>
|
||||
@@ -227,12 +290,12 @@ export default function Login() {
|
||||
</Box>
|
||||
</div>
|
||||
{/* Carousel and Notes */}
|
||||
<Flex direction={{ base: "column", md: "row" }} mt="lg" p="lg">
|
||||
<Box w={{ base: "100%", md: "60%" }}>
|
||||
<Flex direction={{ base: "column", md: "row" }} mt="md" px="md" py="sm" gap="sm">
|
||||
<Box w={{ base: "100%", md: "85%" }}>
|
||||
<ClientCarousel />
|
||||
</Box>
|
||||
<Box w={{ base: "100%", md: "40%" }} p="md" style={{ textAlign: "center" }}>
|
||||
<Title order={2}>Security Notes :</Title>
|
||||
<Box w={{ base: "100%", md: "25%" }} p="md" style={{ textAlign: "center", border: '1px solid #5c5c3d' }}>
|
||||
<Title order={2}> <IconShieldLockFilled />Security Notes :</Title>
|
||||
<Text mt="sm" size="md">When you Login, Your User Id and Password travels in an encrypted and highly secured mode.</Text>
|
||||
<Text mt="sm" fs="italic">For more information on Products and Services, Please Visit</Text>
|
||||
<Anchor href="http://www.kccb.in/"> http://www.kccb.in/</Anchor>
|
||||
|
||||
Reference in New Issue
Block a user