tomosa.sarkar/IB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat : Api integrate on login screen, set login password and set transaction password screen

Browse Source
This commit is contained in:
Tomosa Sarkar
2025-07-09 16:00:24 +05:30
parent 4b3e89673b
commit 09d61e556c
9 changed files with 437 additions and 637 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
instruction.txt Normal file
View File

@@ -0,0 +1,21 @@
- download Aws cli and Aws session manager
- Key generate for KCCB
- port forwarding :
aws ssm start-session --target i-0c850dcf8b85b1447 --document-name --profile kccb AWS-StartPortForwardingSession --parameters "portNumber"=["8080"],"localPortNumber"=["8080"]
- run the api in localhost
aws ssm start-session --target i-0c850dcf8b85b1447 --document-name --profile kccb AWS-StartPortForwardingSession --parameters "portNumber"=["5432"],"localPortNumber"=["5431"]
______________________________________________________________________
For database:
- aws ssm start-session --target i-0c850dcf8b85b1447 --profile kccb
- psql -U postgres
- \l
- psql -U kmobile_db_owner -d kmobile_banking
- password : kmobile
- SELECT * FROM users;
- \x
- \d users; -- see the data type of column
- \c kmobile_banking kmobile_app_rw -- alter the user

11
next.config.mjs
View File

@@ -3,7 +3,16 @@ const nextConfig = {
experimental: { experimental: {
serverComponentsExternalPackages: ["typeorm", "knex"], serverComponentsExternalPackages: ["typeorm", "knex"],
}, },
reactStrictMode: true reactStrictMode: true,
// For port transfer
async rewrites() {
return[
{
source:'/api/:path*',
destination: 'http://localhost:8080/api/:path*',
},
];
},
}; };
export default nextConfig; export default nextConfig;

98
src/app/ChangePassword/clientCarousel.tsx
View File

@@ -1,98 +0,0 @@
'use client';
import { Box, Image, ActionIcon } from '@mantine/core';
import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
import { useRef } from 'react';
import DICGC from '@/app/image/DICGC_image.jpg';
import objective from '@/app/image/objective.jpg';
import frontPage from '@/app/image/ib_front_page.jpg';
export default function CustomCarousel() {
const scrollRef = useRef<HTMLDivElement>(null);
const scrollBy = 300; // px per click
const scrollLeft = () => {
scrollRef.current?.scrollBy({ left: -scrollBy, behavior: 'smooth' });
};
const scrollRight = () => {
scrollRef.current?.scrollBy({ left: scrollBy, behavior: 'smooth' });
};
const images = [DICGC, objective, frontPage];
return (
<Box style={{ position: 'relative', width: '100%', overflow: 'hidden' }}>
{/* Scrollable container */}
<Box
ref={scrollRef}
style={{
display: 'flex',
overflowX: 'auto',
scrollSnapType: 'x mandatory',
gap: '1rem',
padding: '1rem',
scrollBehavior: 'smooth',
}}
>
{images.map((img, i) => (
<Box
key={i}
style={{
flex: '0 0 100%',
scrollSnapAlign: 'start',
height: '250px',
minWidth: '100%',
maxWidth: '100%',
borderRadius: '8px',
backgroundColor: '#f2f2f2',
}}
>
<Image
src={img.src}
alt={`Slide ${i + 1}`}
style={{
width: '100%',
height: '100%',
objectFit: 'contain',
}}
/>
</Box>
))}
</Box>
{/* Left Scroll Button */}
<ActionIcon
variant="filled"
color="blue"
onClick={scrollLeft}
style={{
position: 'absolute',
top: '50%',
left: '10px',
transform: 'translateY(-50%)',
zIndex: 10,
}}
>
<IconChevronLeft size={24} />
</ActionIcon>
{/* Right Scroll Button */}
<ActionIcon
variant="filled"
color="blue"
onClick={scrollRight}
style={{
position: 'absolute',
top: '50%',
right: '10px',
transform: 'translateY(-50%)',
zIndex: 10,
}}
>
<IconChevronRight size={24} />
</ActionIcon>
</Box>
);
}

361
src/app/ChangePassword/page.tsx
View File

@@ -1,55 +1,23 @@
"use client"; "use client";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Stack, Container, rem, Grid } from "@mantine/core"; import { Text, Button, TextInput, PasswordInput, Title, Card, Box, Image } from "@mantine/core";
import { notifications } from "@mantine/notifications"; import { notifications } from "@mantine/notifications";
import { Providers } from "@/app/providers"; import { Providers } from "@/app/providers";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import NextImage from "next/image"; import NextImage from "next/image";
import myImage from '@/app/image/ebanking.jpg'; import myImage from '@/app/image/ebanking.jpg';
import changePwdImage from '@/app/image/changepw.png'; import changePwdImage from '@/app/image/changepw.png';
import dynamic from 'next/dynamic'; import CaptchaImage from './CaptchaImage';
import RegistrationTimeline from '../_components/timeline/RegistrationTimeline';
import CaptchaImage from './CaptchaImage'; // adjust path if needed
export default function ChangeLoginPwd() {
function generateCaptcha(length = 6) {
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
}
export default function Changeloginpwd() {
const router = useRouter(); const router = useRouter();
// const [error, setError] = useState<string | null>(null); const [authorized, SetAuthorized] = useState<boolean | null>(null);
//const [CIF, SetCIF] = useState("");
// const [psw, SetPsw] = useState("");
const [captcha, setCaptcha] = useState(""); const [captcha, setCaptcha] = useState("");
const [inputCaptcha, setInputCaptcha] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState(""); const [confirmPassword, setConfirmPassword] = useState("");
const [error, setError] = useState("");
const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
// const [captcha, setCaptcha] = useState('');
const [captchaInput, setCaptchaInput] = useState(''); const [captchaInput, setCaptchaInput] = useState('');
const [captchaError, setCaptchaError] = useState(''); const [captchaError, setCaptchaError] = useState('');
// useEffect(() => {
// setCaptcha(generateCaptcha());
// }, []);
// const regenerateCaptcha = () => {
// setCaptcha(generateCaptcha());
// setInputCaptcha("");
// };
useEffect(() => { useEffect(() => {
generateCaptcha(); generateCaptcha();
}, []); }, []);
@@ -65,158 +33,203 @@ export default function Changeloginpwd() {
setCaptchaError(''); setCaptchaError('');
}; };
return ( async function handleSetLoginPassword(e: React.FormEvent) {
<Providers> e.preventDefault();
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}> const pwdRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
<Box style={{ position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100 }}> if (!password || !confirmPassword) {
<Image notifications.show({
// radius="md" withBorder: true,
fit="cover" color: "red",
src={myImage} title: "Both password fields are required.",
component={NextImage} message: "Both password fields are required.",
alt="ebanking" autoClose: 5000,
style={{ width: "100%", height: "100%" }} });
/> return;
</Box> // alert("Both password fields are required.");
<div style={{ marginTop: '10px' }}> } else if (password !== confirmPassword) {
// alert("Passwords do not match.");
notifications.show({
withBorder: true,
color: "red",
title: "Passwords do not match.",
message: "Passwords do not match.",
autoClose: 5000,
});
return;
}
else if (!pwdRegex.test(password)) {
// alert("Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.");
notifications.show({
withBorder: true,
color: "red",
title: "Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.",
message: "Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.",
autoClose: 5000,
});
return;
}
else if (captchaInput !== captcha) {
setCaptchaError("Incorrect CAPTCHA.");
return;
}
const token = localStorage.getItem("access_token");
const response = await fetch('api/auth/login_password', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({
login_password: password,
}),
});
const data = await response.json();
if (response.ok) {
// console.log(data);
notifications.show({
withBorder: true,
color: "green",
title: "Login Password has been set",
message: "Login Password has been set",
autoClose: 5000,
});
router.push("/ChangeTxn");
}
else {
notifications.show({
withBorder: true,
color: "red",
title: "Please try again later ",
message: "Please try again later ",
autoClose: 5000,
});
router.push("/login");
}
}
<Box style={{ display: "flex", justifyContent: "center", alignItems: "center", columnGap: "5rem" }} bg="#c1e0f0"> useEffect(() => {
<Image h="85vh" fit="contain" component={NextImage} src={changePwdImage} alt="Change Password Image" /> const token = localStorage.getItem("access_token");
<Box h="100%" style={{ display: "flex", justifyContent: "center", alignItems: "center" }}> if (!token) {
<Card p="xl" w="35vw"> SetAuthorized(false);
<Title order={3} router.push("/login");
// @ts-ignore }
align="center" mb="md">Set Login Password</Title> else {
SetAuthorized(true);
}
}, []);
<form > if (authorized) {
<PasswordInput return (
label="Login Password" <Providers>
placeholder="Enter your password" <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
required <Box style={{ position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100 }}>
id="loginPassword" <Image
value={password} // radius="md"
onChange={(e) => setPassword(e.currentTarget.value)} fit="cover"
onCopy={(e) => e.preventDefault()} src={myImage}
onPaste={(e) => e.preventDefault()} component={NextImage}
onCut={(e) => e.preventDefault()} alt="ebanking"
/> style={{ width: "100%", height: "100%" }}
/>
</Box>
<div style={{ marginTop: '10px' }}>
<PasswordInput <Box style={{ display: "flex", justifyContent: "center", alignItems: "center", columnGap: "5rem" }} bg="#c1e0f0">
label="Confirm Login Password" <Image h="85vh" fit="contain" component={NextImage} src={changePwdImage} alt="Change Password Image" />
placeholder="Enter your password" <Box h="100%" style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
required <Card p="xl" w="35vw">
id="confirmPassword" <Title order={3}
onCopy={(e) => e.preventDefault()} // @ts-ignore
onPaste={(e) => e.preventDefault()} align="center" mb="md">Set Login Password</Title>
onCut={(e) => e.preventDefault()}
/> <form onSubmit={handleSetLoginPassword}>
<PasswordInput
{/* CAPTCHA */} label="Login Password"
<div style={{ marginTop: 20 }}> placeholder="Enter your password"
<label style={{ fontWeight: 600 }}>Enter CAPTCHA *</label>
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 5 }}>
<CaptchaImage text={captcha} />
<Button size="xs" variant="outline" onClick={generateCaptcha}>Refresh</Button>
</div>
<TextInput
placeholder="Enter above text"
value={captchaInput}
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
required required
id="loginPassword"
value={password}
onChange={(e) => setPassword(e.currentTarget.value)}
onCopy={(e) => e.preventDefault()}
onPaste={(e) => e.preventDefault()}
onCut={(e) => e.preventDefault()}
/> />
{captchaError && <p style={{ color: 'red' }}>{captchaError}</p>}
</div>
<PasswordInput
label="Confirm Login Password"
placeholder="Enter your password"
required
id="confirmPassword"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.currentTarget.value)}
onCopy={(e) => e.preventDefault()}
onPaste={(e) => e.preventDefault()}
onCut={(e) => e.preventDefault()}
/>
{/* CAPTCHA */}
<div style={{ marginTop: 20 }}>
<label style={{ fontWeight: 600 }}>Enter CAPTCHA *</label>
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 5 }}>
<CaptchaImage text={captcha} />
<Button size="xs" variant="outline" onClick={generateCaptcha}>Refresh</Button>
</div>
<TextInput
placeholder="Enter above text"
value={captchaInput}
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
required
/>
{captchaError && <p style={{ color: 'red' }}>{captchaError}</p>}
</div>
{/* <Button fullWidth mt="sm" color="blue" onClick={() => { <Button
router.push("/ChangeTxn") type="submit"
}} > fullWidth
Set mt="sm"
</Button> */} color="blue"
>
Set
</Button>
</form>
<br></br>
<Box
style={{
flex: 1,
borderLeft: '1px solid #ccc',
paddingLeft: 16,
minHeight: 90,
<Button
fullWidth
mt="sm"
color="blue"
onClick={() => {
let pwd = (document.getElementById("loginPassword") as HTMLInputElement).value;
let confirmPwd = (document.getElementById("confirmPassword") as HTMLInputElement).value;
const pwdRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
if (!pwd || !confirmPwd) {
alert("Both password fields are required.");
} else if (pwd !== confirmPwd) {
alert("Passwords do not match.");
}
else if (!pwdRegex.test(pwd)) {
alert("Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.");
}
else if (captchaInput !== captcha) {
setCaptchaError("Incorrect CAPTCHA.");
}
else {
// If all checks pass
localStorage.setItem("password", password);
localStorage.setItem("Tpin_setup", "Y");
router.push("/ChangeTxn");
notifications.show({
title: 'Password Change',
message: 'Login Password has been sucessfully updated',
color: "green",
position: 'bottom-center',
})
}
}} }}
> >
Set <Text size="sm">
</Button> <strong>Note:</strong> Password will contains minimum one alphabet, one digit, one special symbol and total 8 charecters.
{/* <Button onClick={() => { </Text>
notifications.show({ </Box>
title: 'Default notification', </Card>
message: 'Do not forget to star Mantine on GitHub! test', </Box>
})
}} >Test</Button> */}
</form>
<br></br>
<Box
style={{
flex: 1,
borderLeft: '1px solid #ccc',
paddingLeft: 16,
minHeight: 90,
}}
>
<Text size="sm">
<strong>Note:</strong> Password will contains minimum one alphabet, one digit, one special symbol and total 8 charecters.
</Text>
</Box>
</Card>
</Box> </Box>
</Box> <Box
<Box component="footer"
component="footer" style={{
style={{ width: "100%",
width: "100%", textAlign: "center",
textAlign: "center", padding: "10px 0",
padding: "10px 0", bottom: 0,
bottom: 0, left: 0,
left: 0, zIndex: 1000,
zIndex: 1000, fontSize: "14px",
fontSize: "14px", }}
}} >
> <Text>
<Text> © 2025 KCC Bank. All rights reserved. {" "}
© 2025 KCC Bank. All rights reserved. {" "}
</Text> </Text>
</Box> </Box>
</div>
</div> </div>
</div> </Providers >
</Providers > );
); }
} }

98
src/app/ChangeTxn/clientCarousel.tsx
View File

@@ -1,98 +0,0 @@
'use client';
import { Box, Image, ActionIcon } from '@mantine/core';
import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
import { useRef } from 'react';
import DICGC from '@/app/image/DICGC_image.jpg';
import objective from '@/app/image/objective.jpg';
import frontPage from '@/app/image/ib_front_page.jpg';
export default function CustomCarousel() {
const scrollRef = useRef<HTMLDivElement>(null);
const scrollBy = 300; // px per click
const scrollLeft = () => {
scrollRef.current?.scrollBy({ left: -scrollBy, behavior: 'smooth' });
};
const scrollRight = () => {
scrollRef.current?.scrollBy({ left: scrollBy, behavior: 'smooth' });
};
const images = [DICGC, objective, frontPage];
return (
<Box style={{ position: 'relative', width: '100%', overflow: 'hidden' }}>
{/* Scrollable container */}
<Box
ref={scrollRef}
style={{
display: 'flex',
overflowX: 'auto',
scrollSnapType: 'x mandatory',
gap: '1rem',
padding: '1rem',
scrollBehavior: 'smooth',
}}
>
{images.map((img, i) => (
<Box
key={i}
style={{
flex: '0 0 100%',
scrollSnapAlign: 'start',
height: '250px',
minWidth: '100%',
maxWidth: '100%',
borderRadius: '8px',
backgroundColor: '#f2f2f2',
}}
>
<Image
src={img.src}
alt={`Slide ${i + 1}`}
style={{
width: '100%',
height: '100%',
objectFit: 'contain',
}}
/>
</Box>
))}
</Box>
{/* Left Scroll Button */}
<ActionIcon
variant="filled"
color="blue"
onClick={scrollLeft}
style={{
position: 'absolute',
top: '50%',
left: '10px',
transform: 'translateY(-50%)',
zIndex: 10,
}}
>
<IconChevronLeft size={24} />
</ActionIcon>
{/* Right Scroll Button */}
<ActionIcon
variant="filled"
color="blue"
onClick={scrollRight}
style={{
position: 'absolute',
top: '50%',
right: '10px',
transform: 'translateY(-50%)',
zIndex: 10,
}}
>
<IconChevronRight size={24} />
</ActionIcon>
</Box>
);
}

395
src/app/ChangeTxn/page.tsx
View File

@@ -1,41 +1,22 @@
"use client"; "use client";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Stack, Container, rem, Grid } from "@mantine/core"; import { Text, Button, TextInput, PasswordInput, Title, Card, Box, Image } from "@mantine/core";
import { notifications } from "@mantine/notifications"; import { notifications } from "@mantine/notifications";
import { Providers } from "@/app/providers"; import { Providers } from "@/app/providers";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import NextImage from "next/image"; import NextImage from "next/image";
import myImage from '@/app/image/ebanking.jpg'; import myImage from '@/app/image/ebanking.jpg';
import changePwdImage from '@/app/image/changepw.png'; import changePwdImage from '@/app/image/changepw.png';
import dynamic from 'next/dynamic';
import CaptchaImage from './CaptchaImage'; import CaptchaImage from './CaptchaImage';
function generateCaptcha(length = 6) { export default function ChangeTransactionPwd() {
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
}
export default function Changetransactionpwd() {
const router = useRouter(); const router = useRouter();
const [error, setError] = useState<string | null>(null); const [authorized, SetAuthorized] = useState<boolean | null>(null);
const [CIF, SetCIF] = useState(""); const [password, setPassword] = useState("");
const [psw, SetPsw] = useState(""); const [confirmPassword, setConfirmPassword] = useState("");
const [captcha, setCaptcha] = useState(""); const [captcha, setCaptcha] = useState("");
const [inputCaptcha, setInputCaptcha] = useState("");
const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
//const [captcha, setCaptcha] = useState('');
const [captchaInput, setCaptchaInput] = useState(''); const [captchaInput, setCaptchaInput] = useState('');
const [captchaError, setCaptchaError] = useState(''); const [captchaError, setCaptchaError] = useState('');
// const [isClient,SetIsClient] =useState(false);
// useEffect(()=> SetIsClient(true),[]);
// useEffect(() => {
// setCaptcha(generateCaptcha());
// }, []);
// const regenerateCaptcha = () => {
// setCaptcha(generateCaptcha());
// setInputCaptcha("");
// };
useEffect(() => { useEffect(() => {
generateCaptcha(); generateCaptcha();
@@ -52,225 +33,201 @@ export default function Changetransactionpwd() {
setCaptchaError(''); setCaptchaError('');
}; };
async function handleLogin(e: React.FormEvent) { async function handleSetTransactionPassword(e: React.FormEvent) {
e.preventDefault(); e.preventDefault();
const onlyDigit = /^\d{11}$/; const pwdRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
if (!onlyDigit.test(CIF)) { if (!password || !confirmPassword) {
setError('Input value must be 11 digit');
}
if (inputCaptcha !== captcha) {
notifications.show({ notifications.show({
withBorder: true, withBorder: true,
color: "red", color: "red",
title: "Captcha Error", title: "Both password fields are required.",
message: "Please enter the correct captcha", message: "Both password fields are required.",
autoClose: 5000,
});
return;
// alert("Both password fields are required.");
} else if (password !== confirmPassword) {
// alert("Passwords do not match.");
notifications.show({
withBorder: true,
color: "red",
title: "Passwords do not match.",
message: "Passwords do not match.",
autoClose: 5000, autoClose: 5000,
}); });
return; return;
} }
else if (!pwdRegex.test(password)) {
if (CIF === "30022497139" && psw === "SecurePass123!") { // alert("Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.");
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30";
localStorage.setItem("customerNumber", CIF);
localStorage.setItem("password", psw);
localStorage.setItem("access_token", token);
router.push("/home");
} else {
// SetCIF('');
// SetPsw('');
// setCaptcha('');
notifications.show({ notifications.show({
withBorder: true, withBorder: true,
color: "red", color: "red",
title: "Wrong User Id or Password", title: "Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.",
message: "Wrong User Id or Password", message: "Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.",
autoClose: 5000, autoClose: 5000,
}); });
return;
}
else if (captchaInput !== captcha) {
setCaptchaError("Incorrect CAPTCHA.");
return;
}
const token = localStorage.getItem("access_token");
const response = await fetch('api/auth/transaction_password', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({
transaction_password: password,
}),
});
const data = await response.json();
if (response.ok) {
console.log(data);
notifications.show({
withBorder: true,
color: "green",
title: "Transaction Password has been set",
message: "Transaction Password has been set",
autoClose: 5000,
});
router.push("/login");
}
else {
notifications.show({
withBorder: true,
color: "red",
title: "Please try again later ",
message: "Please try again later ",
autoClose: 5000,
});
router.push("/login");
} }
} }
return ( useEffect(() => {
<Providers> const token = localStorage.getItem("access_token");
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}> if (!token) {
<Box style={{ position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100 }}> SetAuthorized(false);
<Image router.push("/login");
// radius="md" }
fit="cover" else {
src={myImage} SetAuthorized(true);
component={NextImage} }
alt="ebanking" }, []);
style={{ width: "100%", height: "100%" }}
/>
</Box>
<div style={{ marginTop: '10px' }}>
{/* <div style={{ display: "flex", height: "70vh", overflow: "hidden", position: "relative" }}>
<div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
<Image
fit="cover"
src={changePwdImage}
component={NextImage}
alt="ebanking"
style={{ width: "100%", height: "100%" }}
/>
</div>
<Card p="xl">
<Title order={3}
// @ts-ignore
align="center" mb="md">Change User Login Password</Title>
<form>
<PasswordInput
label="Login Password"
placeholder="Enter your password"
required
/>
<PasswordInput
label="Confirm Login Password"
placeholder="Enter your password"
required
/>
<Button fullWidth mt="sm" color="blue" >
Set
</Button>
</form>
<br></br> if (authorized) {
<Box return (
style={{ <Providers>
flex: 1, <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
borderLeft: '1px solid #ccc', <Box style={{ position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100 }}>
paddingLeft: 16, <Image
minHeight: 90, // radius="md"
fit="cover"
}} src={myImage}
> component={NextImage}
<Text size="sm"> alt="ebanking"
<strong>Note:</strong> Password will contains minimum one alphabet, one digit, one special symbol and total 8 charecters. style={{ width: "100%", height: "100%" }}
</Text> />
</Box> </Box>
</Card> <div style={{ marginTop: '10px' }}>
</div> */} <Box style={{ display: "flex", justifyContent: "center", alignItems: "center", columnGap: "5rem" }} bg="#c1e0f0">
<Box style={{ display: "flex", justifyContent: "center", alignItems: "center", columnGap: "5rem" }} bg="#c1e0f0"> <Image h="85vh" fit="contain" component={NextImage} src={changePwdImage} alt="Change Password Image" />
<Image h="85vh" fit="contain" component={NextImage} src={changePwdImage} alt="Change Password Image" /> <Box h="100%" style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
<Box h="100%" style={{ display: "flex", justifyContent: "center", alignItems: "center" }}> <Card p="xl" w="35vw">
<Card p="xl" w="35vw"> <Title order={3}
<Title order={3} // @ts-ignore
// @ts-ignore align="center" mb="md">Set Transaction Password</Title>
align="center" mb="md">Set Transaction Password</Title> <form onSubmit={handleSetTransactionPassword}>
<form> <PasswordInput
<PasswordInput label="Transaction Password"
label="Transaction Password" placeholder="Enter your Transaction password"
placeholder="Enter your password"
required
id="loginPassword"
onCopy={(e) => e.preventDefault()}
onPaste={(e) => e.preventDefault()}
onCut={(e) => e.preventDefault()}
/>
<PasswordInput
label="Confirm Transaction Password"
placeholder="Enter your password"
required
id="confirmPassword"
onCopy={(e) => e.preventDefault()}
onPaste={(e) => e.preventDefault()}
onCut={(e) => e.preventDefault()}
/>
{/* <Button fullWidth mt="sm" color="blue" onClick={() => {
router.push("/login")
}} >
Set
</Button> */}
{/* CAPTCHA */}
<div style={{ marginTop: 20 }}>
<label style={{ fontWeight: 600 }}>Enter CAPTCHA *</label>
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 5 }}>
<CaptchaImage text={captcha} />
<Button size="xs" variant="outline" onClick={generateCaptcha}>Refresh</Button>
</div>
<TextInput
placeholder="Enter above text"
value={captchaInput}
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
required required
id="loginPassword"
value={password}
onChange={(e) => setPassword(e.currentTarget.value)}
onCopy={(e) => e.preventDefault()}
onPaste={(e) => e.preventDefault()}
onCut={(e) => e.preventDefault()}
/> />
{captchaError && <p style={{ color: 'red' }}>{captchaError}</p>} <PasswordInput
</div> label="Confirm Transaction Password"
placeholder="Re-enter your Transaction password"
required
id="confirmPassword"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.currentTarget.value)}
onCopy={(e) => e.preventDefault()}
onPaste={(e) => e.preventDefault()}
onCut={(e) => e.preventDefault()}
/>
{/* CAPTCHA */}
<div style={{ marginTop: 20 }}>
<label style={{ fontWeight: 600 }}>Enter CAPTCHA *</label>
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 5 }}>
<CaptchaImage text={captcha} />
<Button size="xs" variant="outline" onClick={generateCaptcha}>Refresh</Button>
</div>
<TextInput
placeholder="Enter above text"
value={captchaInput}
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
required
/>
{captchaError && <p style={{ color: 'red' }}>{captchaError}</p>}
</div>
<Button
type="submit"
fullWidth
mt="sm"
color="blue"
>
Set
</Button>
<Button </form>
fullWidth
mt="sm"
color="blue"
onClick={() => {
let pwd = (document.getElementById("loginPassword") as HTMLInputElement).value;
let confirmPwd = (document.getElementById("confirmPassword") as HTMLInputElement).value;
const pwdRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
if (!pwd || !confirmPwd) {
alert("Both password fields are required.");
} else if (pwd !== confirmPwd) {
alert("Passwords do not match.");
}
else if (!pwdRegex.test(pwd)) {
alert("Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.");
}
else if (captchaInput !== captcha) {
setCaptchaError("Incorrect CAPTCHA.");
}
else {
notifications.show({ <br></br>
title: 'Password Change', <Box
message: 'Transaction Password has been sucessfully updated', style={{
color: "green", flex: 1,
position: 'bottom-center', borderLeft: '1px solid #ccc',
}) paddingLeft: 16,
router.push("/login"); minHeight: 90,
}
}} >
Set
</Button>
}}
</form> >
<Text size="sm">
<br></br> <strong>Note:</strong> Password will contains minimum one alphabet, one digit, one special symbol and total 8 charecters.
<Box </Text>
style={{ </Box>
flex: 1, </Card>
borderLeft: '1px solid #ccc', </Box>
paddingLeft: 16,
minHeight: 90,
}}
>
<Text size="sm">
<strong>Note:</strong> Password will contains minimum one alphabet, one digit, one special symbol and total 8 charecters.
</Text>
</Box>
</Card>
</Box> </Box>
</Box> <Box
<Box component="footer"
component="footer" style={{
style={{ width: "100%",
width: "100%", textAlign: "center",
textAlign: "center", padding: "10px 0",
padding: "10px 0", bottom: 0,
bottom: 0, left: 0,
left: 0, zIndex: 1000,
zIndex: 1000, fontSize: "14px",
fontSize: "14px", }}
}} >
> <Text>
<Text> © 2025 KCC Bank. All rights reserved. {" "}
© 2025 KCC Bank. All rights reserved. {" "}
</Text> </Text>
</Box> </Box>
</div>
</div> </div>
</div> </Providers >
</Providers > );
); }
} }

4
src/app/captcha.tsx Normal file
View File

@@ -0,0 +1,4 @@
export async function generateCaptcha(length = 6) {
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
}

BIN
src/app/image/logo.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 62 KiB

86
src/app/login/page.tsx
View File

@@ -8,12 +8,7 @@ import NextImage from "next/image";
import logo from '@/app/image/logo.jpg'; import logo from '@/app/image/logo.jpg';
import frontPage from '@/app/image/ib_front_page.jpg'; import frontPage from '@/app/image/ib_front_page.jpg';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { generateCaptcha } from '@/app/captcha';
function generateCaptcha(length = 6) {
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
}
export default function Login() { export default function Login() {
const router = useRouter(); const router = useRouter();
@@ -24,21 +19,29 @@ export default function Login() {
const [inputCaptcha, setInputCaptcha] = useState(""); const [inputCaptcha, setInputCaptcha] = useState("");
const [isLogging, setIsLogging] = useState(false); const [isLogging, setIsLogging] = useState(false);
const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false }); const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
localStorage.setItem("password", "SecurePass123!");
localStorage.setItem("Tpin_setup", "F");
useEffect(() => { useEffect(() => {
setCaptcha(generateCaptcha()); const loadCaptcha = async () => {
const newCaptcha = await generateCaptcha();
setCaptcha(newCaptcha);
};
loadCaptcha();
}, []); }, []);
const regenerateCaptcha = () => { const regenerateCaptcha = () => {
setCaptcha(generateCaptcha()); // setCaptcha(generateCaptcha());
const loadCaptcha = async () => {
const newCaptcha = await generateCaptcha();
setCaptcha(newCaptcha);
};
loadCaptcha();
setInputCaptcha(""); setInputCaptcha("");
}; };
async function handleLogin(e: React.FormEvent) { async function handleLogin(e: React.FormEvent) {
e.preventDefault(); e.preventDefault();
setIsLogging(false); setIsLogging(false);
const onlyDigit = /^\d{11}$/; const onlyDigit = /^\d{11}$/;
if (!onlyDigit.test(CIF)) { if (!onlyDigit.test(CIF)) {
setError('Input value must be 11 digit'); setError('Input value must be 11 digit');
@@ -54,25 +57,30 @@ export default function Login() {
}); });
return; return;
} }
const response = await fetch('api/auth/login', {
if (CIF === "30022497139" && psw === localStorage.getItem("password")) { method: 'POST',
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30"; headers: {
// localStorage.setItem("customerNumber", CIF); 'Content-Type': 'application/json',
// localStorage.setItem("password", psw); },
// console.log("Tithi:", localStorage.getItem("password")); body: JSON.stringify({
console.log("Tithi:", localStorage.getItem("Tpin_setup")); customerNo: CIF,
password: psw,
}),
});
const data = await response.json();
if (response.ok) {
console.log(data);
const token = data.token;
localStorage.setItem("access_token", token); localStorage.setItem("access_token", token);
setIsLogging(true); if (data.FirstTimeLogin === true) {
// if (localStorage.getItem("Tpin_setup") === 'F') router.push("/ChangePassword")
// router.push("/ChangePassword"); }
// else else {
router.push("/home"); router.push("/home");
} else { }
// SetCIF('');
// SetPsw(''); }
// setCaptcha(''); else {
console.log("Tithi:", localStorage.getItem("password"));
console.log("Tithi:", localStorage.getItem("Tpin_setup"));
notifications.show({ notifications.show({
withBorder: true, withBorder: true,
color: "red", color: "red",
@@ -160,16 +168,6 @@ export default function Login() {
style={{ width: "100%", height: "100%" }} style={{ width: "100%", height: "100%" }}
/> />
</div> </div>
{/* <div
style={{
flex: 1,
backgroundColor: "#c1e0f0",
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%"
}}
> */}
<Card <Card
shadow="lg" shadow="lg"
padding="xl" padding="xl"
@@ -179,12 +177,6 @@ export default function Login() {
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
// width: "400%",
// maxWidth: 480,
// height: 400,
// marginTop: 0,
// paddingTop: 5,
backgroundColor: "#f0f0f0", backgroundColor: "#f0f0f0",
borderRadius: 0, borderRadius: 0,
height: "100%", height: "100%",
@@ -240,7 +232,7 @@ export default function Login() {
alignItems: "center", alignItems: "center",
backgroundColor: "#fff", backgroundColor: "#fff",
fontFamily: "'UnifrakturCook',cursive", fontFamily: "'UnifrakturCook',cursive",
textDecoration: "line-through", // textDecoration: "line-through",
fontSize: "16px", fontSize: "16px",
userSelect: "none", userSelect: "none",
display: "flex", display: "flex",
@@ -278,10 +270,10 @@ export default function Login() {
textAlign: "left", textAlign: "left",
marginTop: 10, marginTop: 10,
display: "flex", display: "flex",
border: "1px solid blue" // border: "1px solid blue"
}}> }}>
<ClientCarousel /> <ClientCarousel />
<Box style={{ width: "40%", border: "1px solid black", textAlign: "center" }}> <Box style={{ width: "40%", textAlign: "center" }}>
<Title order={2}>Security Notes :</Title> <Title order={2}>Security Notes :</Title>
<br></br> <br></br>
<Text size="lg">When you Login,Your User Id and Password travels in an encrypted and highly secured mode .</Text> <Text size="lg">When you Login,Your User Id and Password travels in an encrypted and highly secured mode .</Text>