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

change login password and change transaction password pages validation add

Browse Source
This commit is contained in:
nabanita.jana
2025-07-09 12:09:58 +05:30
parent 4b3e89673b
commit 293a7dbea0
4 changed files with 254 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,14 +5,13 @@ import { notifications } from "@mantine/notifications";
import { Providers } from "@/app/providers";
import { useRouter } from "next/navigation";
import NextImage from "next/image";
import myImage from '@/app/image/ebanking.jpg';
import logo from '@/app/image/logo.jpg';
import changePwdImage from '@/app/image/changepw.png';
import dynamic from 'next/dynamic';
import RegistrationTimeline from '../_components/timeline/RegistrationTimeline';
import CaptchaImage from './CaptchaImage'; // adjust path if needed
import { IconEye, IconEyeOff } from '@tabler/icons-react';
function generateCaptcha(length = 6) {
@@ -30,6 +29,15 @@ export default function Changeloginpwd() {
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
//const [loginVisible, setLoginVisible] = useState(false);
const [confirmVisible, setConfirmVisible] = useState(false);
// const toggleLoginVisibility = () => setLoginVisible((v) => !v);
const toggleConfirmVisibility = () => setConfirmVisible((v) => !v);
const [error, setError] = useState("");
const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
@@ -41,14 +49,7 @@ export default function Changeloginpwd() {
// useEffect(() => {
// setCaptcha(generateCaptcha());
// }, []);
// const regenerateCaptcha = () => {
// setCaptcha(generateCaptcha());
// setInputCaptcha("");
// };
useEffect(() => {
generateCaptcha();
@@ -68,11 +69,16 @@ export default function Changeloginpwd() {
return (
<Providers>
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
<Box style={{ position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100 }}>
<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%)"
}}>
<Image
// radius="md"
fit="cover"
src={myImage}
src={logo}
component={NextImage}
alt="ebanking"
style={{ width: "100%", height: "100%" }}
@@ -101,17 +107,33 @@ export default function Changeloginpwd() {
onCut={(e) => e.preventDefault()}
/>
<PasswordInput
mt="md"
label="Confirm Login Password"
placeholder="Enter your password"
required
id="confirmPassword"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.currentTarget.value)}
type={confirmVisible ? 'text' : 'password'}
rightSection={
<button
type="button"
onClick={toggleConfirmVisibility}
style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'grey' }}
>
{confirmVisible ? <IconEyeOff size={18} /> : <IconEye size={18} />}
</button>
}
onCopy={(e) => e.preventDefault()}
onPaste={(e) => e.preventDefault()}
onCut={(e) => e.preventDefault()}
/>
{/* CAPTCHA */}
<div style={{ marginTop: 20 }}>
<label style={{ fontWeight: 600 }}>Enter CAPTCHA *</label>
@@ -220,3 +242,7 @@ export default function Changeloginpwd() {
</Providers >
);
}
function setConfirmVisible(arg0: (v: any) => boolean) {
throw new Error("Function not implemented.");
}

1
src/app/ChangeTxn/CaptchaImage.tsx
View File

@@ -1,5 +1,6 @@
import React, { useEffect, useRef } from 'react';
const CaptchaImage = ({ text }: { text: string }) => {
const canvasRef = useRef<HTMLCanvasElement | null>(null);

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

@@ -5,10 +5,11 @@ import { notifications } from "@mantine/notifications";
import { Providers } from "@/app/providers";
import { useRouter } from "next/navigation";
import NextImage from "next/image";
import myImage from '@/app/image/ebanking.jpg';
import logo from '@/app/image/logo.jpg';
import changePwdImage from '@/app/image/changepw.png';
import dynamic from 'next/dynamic';
import CaptchaImage from './CaptchaImage';
import { IconEye, IconEyeOff } from '@tabler/icons-react';
function generateCaptcha(length = 6) {
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
@@ -20,6 +21,15 @@ export default function Changetransactionpwd() {
const [error, setError] = useState<string | null>(null);
const [CIF, SetCIF] = useState("");
const [psw, SetPsw] = useState("");
//const [loginVisible, setLoginVisible] = useState(false);
const [confirmVisible, setConfirmVisible] = useState(false);
// const toggleLoginVisibility = () => setLoginVisible((v) => !v);
const toggleConfirmVisibility = () => setConfirmVisible((v) => !v);
const [captcha, setCaptcha] = useState("");
const [inputCaptcha, setInputCaptcha] = useState("");
const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
@@ -93,63 +103,23 @@ export default function Changetransactionpwd() {
return (
<Providers>
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
<Box style={{ position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100 }}>
<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%)"
}}>
<Image
// radius="md"
fit="cover"
src={myImage}
src={logo}
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>
<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>
</div> */}
<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" />
<Box h="100%" style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
@@ -167,7 +137,7 @@ export default function Changetransactionpwd() {
onPaste={(e) => e.preventDefault()}
onCut={(e) => e.preventDefault()}
/>
<PasswordInput
{/* <PasswordInput
label="Confirm Transaction Password"
placeholder="Enter your password"
required
@@ -175,7 +145,32 @@ export default function Changetransactionpwd() {
onCopy={(e) => e.preventDefault()}
onPaste={(e) => e.preventDefault()}
onCut={(e) => e.preventDefault()}
/> */}
<PasswordInput
mt="md"
label="Confirm Login Password"
placeholder="Enter your password"
required
id="confirmPassword"
value={psw}
onChange={(e) => SetPsw(e.currentTarget.value)}
type={confirmVisible ? 'text' : 'password'}
rightSection={
<button
type="button"
onClick={toggleConfirmVisibility}
style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'grey' }}
>
{confirmVisible ? <IconEyeOff size={18} /> : <IconEye size={18} />}
</button>
}
onCopy={(e) => e.preventDefault()}
onPaste={(e) => e.preventDefault()}
onCut={(e) => e.preventDefault()}
/>
{/* <Button fullWidth mt="sm" color="blue" onClick={() => {
router.push("/login")
}} >

170
src/app/FundsTransfer/page.tsx Normal file
View File

@@ -0,0 +1,170 @@
"use client";
import React from 'react';
import { Card, Button, Grid, Title, Text, Container, Box, Image } from '@mantine/core';
import NextImage from "next/image";
import logo from "@/app/image/logo.jpg";
import { IconBan, IconRefresh, IconExchange, IconCreditCard, IconBuildingBank, IconMobiledata, IconWallet, IconTransferIn } from '@tabler/icons-react';
import { IconLogout } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
const options = [
{
title: 'Transfer within the bank',
subtitle: '₹1 to ₹25 Lacs per day',
},
{
title: 'IMPS P2A - Instant Transfer',
subtitle: '365 days, 24x7',
},
{
title: 'Transfer to other bank (NEFT)',
subtitle: 'Also for Credit Cards',
},
{
title: 'Transfer to other bank (RTGS)',
subtitle: '₹2 Lacs to ₹25 Lacs per day',
},
{
title: 'IMPS P2P - Instant Transfer',
subtitle: '(IMPS: Mobile No.)',
},
];
interface TransactionOptionProps {
title: string;
description: string;
icon: React.ReactNode;
}
const TransactionOption: React.FC<TransactionOptionProps> = ({ title, description, icon }) => (
<Card shadow="sm" padding="lg" radius="md" withBorder>
<Grid align="center" justify="center" gutter="sm">
<Grid.Col span={12} style={{ textAlign: 'center' }}>
{icon}
</Grid.Col>
<Grid.Col span={12} style={{ textAlign: 'center' }}>
<Title order={4}>{title}</Title>
<Text size="sm" mt="xs">{description}</Text>
<Button fullWidth mt="md" variant="light">Go</Button>
</Grid.Col>
</Grid>
</Card>
);
const FundsTransferPage: React.FC = () => {
const router = useRouter();
async function handleLogout(e: React.FormEvent) {
e.preventDefault();
localStorage.removeItem("access_token");
router.push("/login")
}
return (
<div style={{ backgroundColor: "#c1e0f0", width: "100%", height: "100%", paddingTop: "5%" }}>
<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%)"
}}>
<Image
// radius="md"
fit="cover"
src={logo}
component={NextImage}
alt="ebanking"
style={{ width: "100%", height: "100%" }}
/>
<Button style={{
position: 'absolute',
top: '50%',
left: '90%',
color: 'white',
textShadow: '1px 1px 2px black',
fontSize: "20px"
}}
leftSection={<IconLogout color='white' />} variant="subtle" onClick={handleLogout}>Logout</Button>
</Box>
<div style={{ marginTop: '10px' }}>
<Box mt="lg" p="xl">
{/* @ts-ignore */}
<Title order={2} align="center" mb="md">Select Transaction Type</Title>
<Grid gutter="lg">
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
<TransactionOption
title="Transfer within the bank"
description="(Re. 1 to Rs. 25 Lacs per day)"
//icon={<IconBan size={40} stroke={1.5} />}
icon={<IconTransferIn size={40} stroke={1.5} />}
/>
</Grid.Col>
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
<TransactionOption
title="IMPS P2A - Instant Transfer"
description="(365 days, 24X7) (Re. 1 to Rs. 25 Lacs)"
icon={<IconExchange size={40} stroke={1.5} />}
/>
</Grid.Col>
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
<TransactionOption
title="Transfer to other bank (NEFT)"
description="(Also for Credit Cards Payment)"
icon={<IconCreditCard size={40} stroke={1.5} />}
/>
</Grid.Col>
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
<TransactionOption
title="Transfer to other bank (RTGS)"
description="(Rs. 2 Lacs to Rs. 25 Lacs per day)"
icon={<IconBuildingBank size={40} stroke={1.5} />}
/>
</Grid.Col>
<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
<TransactionOption
title="IMPS P2P - Instant Transfer"
description="(365 days, 24X7) (IMPS: Mobile No.)"
icon={<IconMobiledata size={40} stroke={1.5} />}
/>
</Grid.Col>
</Grid>
</Box>
<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>
);
};
export default FundsTransferPage;