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

fix : responsive for set login and transaction password

Browse Source
This commit is contained in:
Tomosa Sarkar
2025-12-30 16:39:05 +05:30
parent 97272e2ded
commit e968cd296f
2 changed files with 585 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

399
src/app/SetPassword/page.tsx
View File

@@ -1,13 +1,13 @@
"use client"; "use client";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Text, Button, TextInput, PasswordInput, Title, Card, Box, Image, Group } from "@mantine/core"; import { Text, Button, TextInput, PasswordInput, Title, Card, Box, Image, Group, Grid, Container, Stack } 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 logo from '@/app/image/logo1.jpg'; import logo from '@/app/image/logo1.jpg';
import changePwdImage from '@/app/image/set_log_pass.jpg'; import changePwdImage from '@/app/image/forget_password.jpg';
import { IconLock, IconLogout, IconRefresh } from '@tabler/icons-react'; import { IconLock, IconLogout, IconPhone, IconRefresh } from '@tabler/icons-react';
import { generateCaptcha } from '@/app/captcha'; import { generateCaptcha } from '@/app/captcha';
import { sendOtp, verifyOtp } from "../_util/otp"; import { sendOtp, verifyOtp } from "../_util/otp";
//const [showOtpField, setShowOtpField] = useState(false); //const [showOtpField, setShowOtpField] = useState(false);
@@ -25,7 +25,7 @@ export default function SetLoginPwd() {
const [countdown, setCountdown] = useState(60); const [countdown, setCountdown] = useState(60);
const [timerActive, setTimerActive] = useState(false); const [timerActive, setTimerActive] = useState(false);
const icon = <IconLock size={18} stroke={1.5} />; const icon = <IconLock size={18} stroke={1.5} />;
const [generateOtp, setGenerateOtp] = useState(""); // const [generateOtp, setGenerateOtp] = useState("");
const [step, setStep] = useState<"form" | "otp" | "final">("form"); const [step, setStep] = useState<"form" | "otp" | "final">("form");
const [otpValidated, setOtpValidated] = useState(false); const [otpValidated, setOtpValidated] = useState(false);
@@ -165,7 +165,6 @@ export default function SetLoginPwd() {
}); });
return; return;
} }
const token = localStorage.getItem("access_token"); const token = localStorage.getItem("access_token");
@@ -235,59 +234,162 @@ export default function SetLoginPwd() {
}, []); }, []);
if (authorized) { if (authorized) {
return ( return (
<Providers> <Providers>
<div style={{ backgroundColor: "#f8f9fa", width: "auto", height: "auto", paddingTop: "5%" }}> <Box style={{
<Box style={{ minHeight: "100vh",
position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100, display: "flex",
flexDirection: "column",
background: "linear-gradient(135deg, #f5f7fa 0%, #e8f5e9 100%)"
}}>
{/* Header */}
<Box
style={{
position: 'sticky',
top: 0,
zIndex: 100,
display: "flex", display: "flex",
alignItems: "center",
justifyContent: "flex-start", justifyContent: "flex-start",
background: "linear-gradient(15deg,rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)" background: "linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
padding: "10px 15px",
minHeight: "80px",
}}> }}>
<Image <Image
fit="cover" src={logo}
src={logo} component={NextImage}
component={NextImage} fit="contain"
alt="ebanking" alt="ebanking"
style={{ width: "100%", height: "100%" }} style={{
/> width: "60px",
height: "60px",
minWidth: "50px",
marginRight: "15px"
}}
/>
<Box style={{ flex: 1 }}>
<Title <Title
order={2} order={3}
style={{ style={{
fontFamily: 'Roboto', fontFamily: "Roboto",
position: 'absolute', color: "white",
top: '30%', marginBottom: 2,
left: '7%', fontSize: "clamp(0.9rem, 2.5vw, 1.25rem)",
color: 'White', lineHeight: 1.3
transition: "opacity 0.5s ease-in-out", }}>
}}
>
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
</Title> </Title>
<Button style={{ <Text
position: 'absolute', size="xs"
top: '50%', c="white"
left: '90%', style={{
color: 'white', opacity: 0.85,
textShadow: '1px 1px 2px black', fontSize: "clamp(0.65rem, 1.5vw, 0.75rem)"
fontSize: "20px" }}>
}} Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
leftSection={<IconLogout color='white' />} variant="subtle" onClick={handleLogout}>Logout</Button> </Text>
</Box> </Box>
<div> <Button
<Box style={{ display: "flex", justifyContent: "center", alignItems: "center" }} bg="#80868989"> style={{
<Image h="85vh" w="100%" fit="contain" component={NextImage} src={changePwdImage} alt="Change Password Image" /> color: 'white',
<Box h="100%" style={{ display: "flex", justifyContent: "center", alignItems: "center" }}> fontWeight: 600
<Card p="xl" w="40vw" h='85vh'> }}
<Title order={4} leftSection={<IconLogout color='white' />}
// @ts-ignore variant="subtle"
align="center" mb="md">Set Login Password</Title> onClick={handleLogout}
<form onSubmit={handleSetLoginPassword}> visibleFrom="md"
>
Logout
</Button>
</Box>
{/* Main Content */}
<Box
style={{
flex: 1,
padding: "2rem 0",
display: "flex",
alignItems: "center"
}}
>
<Container size="xl" style={{ width: "100%" }}>
<Grid gutter={{ base: "md", md: "xl" }} align="center">
{/* Image Column */}
<Grid.Col span={{ base: 12, md: 6, lg: 7 }}>
<Box
style={{
position: "relative",
height: "700px",
borderRadius: "24px",
overflow: "hidden",
boxShadow: "0 20px 60px rgba(0,0,0,0.15)",
background: `url(${changePwdImage.src})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundSize: "cover",
}}
>
<Box style={{
position: "absolute",
bottom: 0,
left: 0,
right: 0,
padding: "2rem",
background: "linear-gradient(to top, rgba(0,0,0,0.7), transparent)",
}}>
<Title order={2} c="white" mb="sm">
Welcome to KCCB Internet Banking
</Title>
<Text c="white" size="sm" style={{ opacity: 0.9 }}>
Secure your account with a strong password
</Text>
</Box>
</Box>
</Grid.Col>
{/* Form Column */}
<Grid.Col span={{ base: 12, md: 6, lg: 5 }}>
<Card
radius="xl"
shadow="xl"
p={{ base: "xl", sm: "2rem" }}
style={{
background: "rgba(255, 255, 255, 0.95)",
backdropFilter: "blur(10px)",
border: "1px solid rgba(255,255,255,0.5)",
maxWidth: "480px",
margin: "0 auto"
}}
>
{/* Decorative top bar */}
<Box
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
height: "6px",
background: "linear-gradient(90deg, #0a7228 0%, #6565b8 100%)",
borderRadius: "16px 16px 0 0"
}}
/>
<Box style={{ textAlign: "center", marginBottom: "2rem", marginTop: "1rem" }}>
<Title order={3} style={{ color: "#35487eff", fontWeight: 700 }}>
Set Login Password
</Title>
<Text size="sm" c="dimmed">
Create a strong password to secure your account
</Text>
</Box>
<Stack gap="md">
<PasswordInput <PasswordInput
label="Login Password" label="Login Password"
placeholder="Enter your password" placeholder="Enter your password"
withAsterisk withAsterisk
id="loginPassword" size="md"
value={password} value={password}
minLength={8} minLength={8}
maxLength={15} maxLength={15}
@@ -296,112 +398,181 @@ export default function SetLoginPwd() {
onPaste={(e) => e.preventDefault()} onPaste={(e) => e.preventDefault()}
onCut={(e) => e.preventDefault()} onCut={(e) => e.preventDefault()}
readOnly={captchaValidate} readOnly={captchaValidate}
styles={{
input: {
borderRadius: "8px",
border: "2px solid #e9ecef"
}
}}
/> />
<PasswordInput <PasswordInput
label="Confirm Login Password" label="Confirm Login Password"
placeholder="Enter your password" placeholder="Re-enter your password"
withAsterisk withAsterisk
size="md"
rightSection={icon} rightSection={icon}
id="confirmPassword"
value={confirmPassword} value={confirmPassword}
onChange={(e) => setConfirmPassword(e.currentTarget.value)} onChange={(e) => setConfirmPassword(e.currentTarget.value)}
onCopy={(e) => e.preventDefault()} onCopy={(e) => e.preventDefault()}
onPaste={(e) => e.preventDefault()} onPaste={(e) => e.preventDefault()}
onCut={(e) => e.preventDefault()} onCut={(e) => e.preventDefault()}
readOnly={captchaValidate} readOnly={captchaValidate}
/> styles={{
<Group mt="sm" align="center"> input: {
<Box style={{ borderRadius: "8px",
backgroundColor: "#fff", fontSize: "18px", textDecoration: "line-through", padding: "4px 8px", fontFamily: "Verdana", border: "2px solid #e9ecef"
userSelect: "none", }
pointerEvents: "none",
}} }}
onCopy={(e) => e.preventDefault()}
onContextMenu={(e) => e.preventDefault()}>
{captcha}</Box>
<Button size="xs" variant="light" onClick={regenerateCaptcha}>Refresh</Button>
</Group>
<TextInput
label="Enter CAPTCHA"
placeholder="Enter above text"
value={captchaInput}
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
withAsterisk
readOnly={captchaValidate}
/> />
<Box style={{ height: 60 }}>
{captchaValidate && ( {/* CAPTCHA Section */}
<Box>
<Text size="sm" fw={600} mb="xs">Verification Code</Text>
<Group gap="sm" align="center" mb="xs">
<Box style={{
flex: 1,
padding: "5px",
background: "white",
borderRadius: "8px",
border: "2px dashed #dee6deff",
textAlign: "center",
fontWeight: 500,
fontSize: "22px",
letterSpacing: "6px",
color: "#0a7228",
fontFamily: "Verdana",
userSelect: "none",
textDecoration: "line-through"
}}
onCopy={(e) => e.preventDefault()}
onContextMenu={(e) => e.preventDefault()}
>
{captcha}
</Box>
<Button
size="md"
variant="light"
color="green"
onClick={regenerateCaptcha}
leftSection={<IconRefresh size={16} />}
>
Refresh
</Button>
</Group>
<TextInput
placeholder="Enter the code above"
value={captchaInput}
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
withAsterisk
size="md"
readOnly={captchaValidate}
styles={{
input: {
borderRadius: "8px"
}
}}
/>
</Box>
{/* OTP Section */}
{captchaValidate && (
<Box>
<Group gap="xs" align="flex-end"> <Group gap="xs" align="flex-end">
<PasswordInput <PasswordInput
label="Enter OTP" label="One-Time Password (OTP)"
placeholder="Enter the OTP" placeholder="Enter 6-digit OTP"
leftSection={<IconPhone size={18} />}
value={otp} value={otp}
maxLength={6} maxLength={6}
onChange={(e) => setOtp(e.currentTarget.value)} onChange={(e) => setOtp(e.currentTarget.value)}
withAsterisk withAsterisk
size="md"
style={{ flex: 1 }} style={{ flex: 1 }}
styles={{
input: {
borderRadius: "8px",
letterSpacing: "4px"
}
}}
/> />
{timerActive ? ( {timerActive ? (
<Text size="xs" c="dimmed"> <Text size="xs" c="dimmed" style={{ marginBottom: "8px" }}>
Resend OTP will be enabled in 00:{countdown < 10 ? `0${countdown}` : countdown} min Resend in 00:{countdown < 10 ? `0${countdown}` : countdown}
</Text> </Text>
) : ( ) : (
<Button <Button
variant="subtle" variant="light"
px={8} color="green"
onClick={handleSendOtp} onClick={handleSendOtp}
leftSection={<IconRefresh size={16} />} leftSection={<IconRefresh size={16} />}
style={{ marginBottom: "4px" }}
> >
Resend Resend
</Button> </Button>
)} )}
</Group> </Group>
)} </Box>
</Box> )}
<Button <Button
type="submit" type="submit"
fullWidth fullWidth
mt="sm" size="lg"
onClick={handleSetLoginPassword}
style={{
borderRadius: "10px",
fontWeight: 600,
marginTop: "0.5rem"
}}
> >
{!captchaValidate ? "Validate" : "Set"} {!captchaValidate ? "Validate" : "Set"}
</Button> </Button>
</form>
<Box {/* Note Box */}
style={{ <Box
flex: 1, p="md"
borderLeft: '1px solid #ccc', style={{
paddingLeft: 16, background: "#cdffdfff",
minHeight: 80, borderRadius: "10px",
gap: "sm" border: "1px solid #42c442ff",
}} borderLeft: "4px solid #42c442ff"
> }}
<Text size="sm"> >
<strong>Note:</strong> Password must contain at least one capital letter(A-Z), one digit(0-9), one special symbol(e.g.,@,#,$), and be 8-15 characters long. <Text size="sm" fw={600} mb={4} c="#856404">
</Text> Password Requirements:
</Box> </Text>
<Text size="xs" c="#101010ff" style={{ lineHeight: 1.6 }}>
• Minimum 8 characters, maximum 15 characters<br />
• At least 1 uppercase letter (A-Z)<br />
• At least 1 number (0-9)<br />
• At least 1 special character (e.g., @, #, $)
</Text>
</Box>
</Stack>
</Card> </Card>
</Box> </Grid.Col>
</Box> </Grid>
<Box </Container>
style={{ </Box>
flexShrink: 0,
display: "flex", {/* Footer */}
justifyContent: "center", <Box
alignItems: "center", style={{
backgroundColor: "#f8f9fa", flexShrink: 0,
marginTop: "0.5rem", display: "flex",
}} justifyContent: "center",
> alignItems: "center",
<Text c="dimmed" size="xs"> backgroundColor: "#f8f9fa",
© 2025 The Kangra Central Co-Operative Bank Ltd. padding: "1rem",
</Text> }}
</Box> >
</div> <Text c="dimmed" size="xs">
</div> © 2025 The Kangra Central Co-Operative Bank Ltd. All rights reserved.
</Providers > </Text>
); </Box>
</Box>
</Providers>
);
} }
} }

435
src/app/SetTxn/page.tsx
View File

@@ -1,14 +1,14 @@
"use client"; "use client";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Text, Button, TextInput, PasswordInput, Title, Card, Box, Image, Group } from "@mantine/core"; import { Text, Button, TextInput, PasswordInput, Title, Card, Box, Image, Group, Container, Grid, Stack, Anchor } 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 logo from '@/app/image/logo1.jpg'; import logo from '@/app/image/logo1.jpg';
import changePwdImage from '@/app/image/set_tran_pass.jpg'; import changePwdImage from '@/app/image/forget_password.jpg';
import { generateCaptcha } from '@/app/captcha'; import { generateCaptcha } from '@/app/captcha';
import { IconLock, IconLogout, IconRefresh } from '@tabler/icons-react'; import { IconLock, IconLogout, IconPhone, IconRefresh, IconShieldCheck } from '@tabler/icons-react';
import { sendOtp, verifyOtp } from "../_util/otp"; import { sendOtp, verifyOtp } from "../_util/otp";
@@ -25,14 +25,9 @@ export default function SetTransactionPwd() {
const [countdown, setCountdown] = useState(60); const [countdown, setCountdown] = useState(60);
const [timerActive, setTimerActive] = useState(false); const [timerActive, setTimerActive] = useState(false);
const icon = <IconLock size={18} stroke={1.5} />; const icon = <IconLock size={18} stroke={1.5} />;
const [generateOtp, setGenerateOtp] = useState("");
const [showOtpField, setShowOtpField] = useState(false);
const [step, setStep] = useState<"form" | "otp" | "final">("form"); const [step, setStep] = useState<"form" | "otp" | "final">("form");
const [otpValidated, setOtpValidated] = useState(false); const [otpValidated, setOtpValidated] = useState(false);
async function handleSendOtp() { async function handleSendOtp() {
const mobileNumber = localStorage.getItem('remitter_mobile_no'); const mobileNumber = localStorage.getItem('remitter_mobile_no');
if (!mobileNumber) { if (!mobileNumber) {
@@ -66,13 +61,6 @@ export default function SetTransactionPwd() {
} }
} }
async function handleGenerateOtp() {
const value = "123456";
setGenerateOtp(value);
setCountdown(60);
setTimerActive(true);
}
async function handleLogout(e: React.FormEvent) { async function handleLogout(e: React.FormEvent) {
e.preventDefault(); e.preventDefault();
localStorage.removeItem("access_token"); localStorage.removeItem("access_token");
@@ -193,7 +181,6 @@ export default function SetTransactionPwd() {
return; return;
} }
setOtpValidated(true); setOtpValidated(true);
setStep("final"); setStep("final");
notifications.show({ notifications.show({
@@ -202,11 +189,8 @@ export default function SetTransactionPwd() {
color: "green", color: "green",
}); });
return; return;
} }
const token = localStorage.getItem("access_token"); const token = localStorage.getItem("access_token");
const response = await fetch('api/auth/transaction_password', { const response = await fetch('api/auth/transaction_password', {
method: 'POST', method: 'POST',
@@ -254,77 +238,198 @@ export default function SetTransactionPwd() {
}, []); }, []);
if (authorized) { if (authorized) {
return ( return (
<Providers> <Providers>
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}> <Box style={{
<Box style={{ minHeight: "100vh",
position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100, display: "flex",
flexDirection: "column",
background: "linear-gradient(135deg, #f5f7fa 0%, #e8f5e9 100%)"
}}>
{/* Header */}
<Box
style={{
position: 'sticky',
top: 0,
zIndex: 100,
display: "flex", display: "flex",
alignItems: "center",
justifyContent: "flex-start", justifyContent: "flex-start",
background: "linear-gradient(15deg,rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)" background: "linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
padding: "10px 15px",
minHeight: "80px",
}}> }}>
<Image <Image
fit="cover" src={logo}
src={logo} component={NextImage}
component={NextImage} fit="contain"
alt="ebanking" alt="ebanking"
style={{ width: "100%", height: "100%" }} style={{
/> width: "60px",
height: "60px",
minWidth: "50px",
marginRight: "15px"
}}
/>
<Box style={{ flex: 1 }}>
<Title <Title
order={2} order={3}
style={{ style={{
fontFamily: 'Roboto', fontFamily: "Roboto",
position: 'absolute', color: "white",
top: '30%', marginBottom: 2,
left: '7%', fontSize: "clamp(0.9rem, 2.5vw, 1.25rem)",
color: 'White', lineHeight: 1.3
transition: "opacity 0.5s ease-in-out", }}>
}}
>
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
</Title> </Title>
<Button style={{ <Text
position: 'absolute', size="xs"
top: '50%', c="white"
left: '90%', style={{
color: 'white', opacity: 0.85,
textShadow: '1px 1px 2px black', fontSize: "clamp(0.65rem, 1.5vw, 0.75rem)"
fontSize: "20px" }}>
}} Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
leftSection={<IconLogout color='white' />} variant="subtle" onClick={handleLogout}>Logout </Text>
</Button>
</Box> </Box>
<div> <Button
<Box style={{ display: "flex", justifyContent: "center", alignItems: "center" }} bg="#80868989"> style={{
<Image h="85vh" fit="contain" component={NextImage} src={changePwdImage} alt="Change Password Image" /> color: 'white',
<Box h="100%" style={{ display: "flex", justifyContent: "center", alignItems: "center" }}> fontWeight: 600
<Card p="xl" w="40vw" h='85vh'> }}
<Text onClick={() => router.push("/login")} leftSection={<IconLogout color='white' />}
style={{ variant="subtle"
position: 'absolute', top: '1rem', right: '2rem', cursor: 'pointer', fontWeight: 500, color: '#7091ecff', textDecoration: 'underline' onClick={handleLogout}
}}> Skip now</Text> visibleFrom="md"
>
Logout
</Button>
</Box>
<Title order={3} {/* Main Content */}
// @ts-ignore <Box
align="center" mb="md">Set Transaction Password</Title> style={{
<form onSubmit={handleSetTransactionPassword}> flex: 1,
padding: "2rem 0",
display: "flex",
alignItems: "center"
}}
>
<Container size="xl" style={{ width: "100%" }}>
<Grid gutter={{ base: "md", md: "xl" }} align="center">
{/* Image Column */}
<Grid.Col span={{ base: 12, md: 6, lg: 7 }}>
<Box
style={{
position: "relative",
height: "750px",
borderRadius: "24px",
overflow: "hidden",
boxShadow: "0 20px 60px rgba(0,0,0,0.15)",
background: `url(${changePwdImage.src})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundSize: "cover",
}}
>
<Box style={{
position: "absolute",
bottom: 0,
left: 0,
right: 0,
padding: "2rem",
background: "linear-gradient(to top, rgba(0,0,0,0.7), transparent)",
}}>
<Title order={2} c="white" mb="sm">
Welcome to KCCB Internet Banking
</Title>
<Text c="white" size="sm" style={{ opacity: 0.9 }}>
Set up your transaction password for secure payments
</Text>
</Box>
</Box>
</Grid.Col>
{/* Form Column */}
<Grid.Col span={{ base: 12, md: 6, lg: 5 }}>
<Card
radius="xl"
shadow="xl"
p={{ base: "xl", sm: "2rem" }}
style={{
background: "rgba(255, 255, 255, 0.95)",
backdropFilter: "blur(10px)",
border: "1px solid rgba(255,255,255,0.5)",
maxWidth: "480px",
margin: "0 auto",
position: "relative"
}}
>
{/* Decorative top bar
<Box
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
height: "6px",
background: "linear-gradient(90deg, #0a7228 0%, #6565b8 100%)",
borderRadius: "16px 16px 0 0"
}}
/> */}
{/* Skip Now Link */}
<Anchor
onClick={() => router.push("/login")}
style={{
position: 'absolute',
top: '1.5rem',
right: '1.5rem',
cursor: 'pointer',
fontWeight: 600,
color: '#0a7228',
fontSize: "14px"
}}
>
Skip now →
</Anchor>
<Box style={{ textAlign: "center", marginBottom: "2rem", marginTop: "1rem" }}>
<Title order={3} style={{ color: "#35487eff", fontWeight: 700 }}>
Set Transaction Password
</Title>
<Text size="sm" c="dimmed">
Secure your transactions with a strong password
</Text>
</Box>
<Stack gap="md">
<PasswordInput <PasswordInput
label="Transaction Password" label="Transaction Password"
placeholder="Enter your Transaction password" placeholder="Enter your transaction password"
withAsterisk withAsterisk
id="loginPassword" size="md"
value={password} value={password}
onChange={(e) => setPassword(e.currentTarget.value)} onChange={(e) => setPassword(e.currentTarget.value)}
onCopy={(e) => e.preventDefault()} onCopy={(e) => e.preventDefault()}
onPaste={(e) => e.preventDefault()} onPaste={(e) => e.preventDefault()}
onCut={(e) => e.preventDefault()} onCut={(e) => e.preventDefault()}
readOnly={captchaValidate} readOnly={captchaValidate}
styles={{
input: {
borderRadius: "8px",
border: "2px solid #e9ecef"
}
}}
/> />
<PasswordInput <PasswordInput
label="Confirm Transaction Password" label="Confirm Transaction Password"
placeholder="Re-enter your Transaction password" placeholder="Re-enter your transaction password"
withAsterisk withAsterisk
id="confirmPassword" size="md"
rightSection={icon} rightSection={icon}
value={confirmPassword} value={confirmPassword}
onChange={(e) => setConfirmPassword(e.currentTarget.value)} onChange={(e) => setConfirmPassword(e.currentTarget.value)}
@@ -332,101 +437,161 @@ export default function SetTransactionPwd() {
onPaste={(e) => e.preventDefault()} onPaste={(e) => e.preventDefault()}
onCut={(e) => e.preventDefault()} onCut={(e) => e.preventDefault()}
readOnly={captchaValidate} readOnly={captchaValidate}
/> styles={{
{/* CAPTCHA */} input: {
<Group mt="sm" align="center"> borderRadius: "8px",
<Box style={{ border: "2px solid #e9ecef"
backgroundColor: "#fff", fontSize: "18px", textDecoration: "line-through", padding: "4px 8px", fontFamily: "Verdana", }
userSelect: "none",
pointerEvents: "none",
}} }}
onCopy={(e) => e.preventDefault()}
onContextMenu={(e) => e.preventDefault()}>
{captcha}</Box>
<Button size="xs" variant="light" onClick={regenerateCaptcha}>Refresh</Button>
</Group>
<TextInput
label="Enter CAPTCHA"
placeholder="Enter above text"
value={captchaInput}
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
withAsterisk
mt="sm"
readOnly={captchaValidate}
/> />
<Box style={{ height: 60 }}>
{captchaValidate && ( {/* CAPTCHA Section */}
<Box>
<Text size="sm" fw={600} mb="xs">Verification Code</Text>
<Group gap="sm" align="center" mb="xs">
<Box style={{
flex: 1,
padding: "5px",
background: "white",
borderRadius: "8px",
border: "2px dashed #dee6deff",
textAlign: "center",
fontWeight: 500,
fontSize: "22px",
letterSpacing: "6px",
color: "#0a7228",
fontFamily: "Verdana",
userSelect: "none",
textDecoration: "line-through"
}}
onCopy={(e) => e.preventDefault()}
onContextMenu={(e) => e.preventDefault()}
>
{captcha}
</Box>
<Button
size="md"
variant="light"
color="green"
onClick={regenerateCaptcha}
leftSection={<IconRefresh size={16} />}
>
Refresh
</Button>
</Group>
<TextInput
placeholder="Enter the code above"
value={captchaInput}
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
withAsterisk
size="md"
readOnly={captchaValidate}
styles={{
input: {
borderRadius: "8px"
}
}}
/>
</Box>
{/* OTP Section */}
{captchaValidate && (
<Box>
<Group gap="xs" align="flex-end"> <Group gap="xs" align="flex-end">
<PasswordInput <PasswordInput
label="Enter OTP" label="One-Time Password (OTP)"
placeholder="Enter the OTP" placeholder="Enter 6-digit OTP"
leftSection={<IconPhone size={18} />}
value={otp} value={otp}
maxLength={6} maxLength={6}
onChange={(e) => setOtp(e.currentTarget.value)} onChange={(e) => setOtp(e.currentTarget.value)}
withAsterisk withAsterisk
size="md"
style={{ flex: 1 }} style={{ flex: 1 }}
styles={{
input: {
borderRadius: "8px",
letterSpacing: "4px"
}
}}
/> />
{timerActive ? ( {timerActive ? (
<Text size="xs" c="dimmed"> <Text size="xs" c="dimmed" style={{ marginBottom: "8px" }}>
Resend OTP will be enabled in 00:{countdown < 10 ? `0${countdown}` : countdown} min Resend in 00:{countdown < 10 ? `0${countdown}` : countdown}
</Text> </Text>
) : ( ) : (
<Button <Button
variant="subtle" variant="light"
px={8} color="green"
onClick={handleSendOtp} onClick={handleSendOtp}
leftSection={<IconRefresh size={16} />} leftSection={<IconRefresh size={16} />}
style={{ marginBottom: "4px" }}
> >
Resend Resend
</Button> </Button>
)} )}
</Group> </Group>
)} </Box>
</Box> )}
<Button <Button
type="submit" type="submit"
fullWidth fullWidth
mt="sm" size="lg"
color="blue" onClick={handleSetTransactionPassword}
style={{
borderRadius: "10px",
fontWeight: 600,
marginTop: "0.5rem"
}}
> >
Set Set
</Button> </Button>
</form>
<br></br>
<Box
style={{
flex: 1,
borderLeft: '1px solid #ccc',
paddingLeft: 16,
minHeight: 90,
}} {/* Note Box */}
> <Box
<Text size="sm"> p="md"
<strong>Note:</strong> Password must contain at least one capital letter(A-Z), one digit(0-9), one special symbol(e.g.,@,#,$), and be 8-15 characters long. style={{
</Text> background: "#cdffdfff",
</Box> borderRadius: "10px",
border: "1px solid #42c442ff",
borderLeft: "4px solid #42c442ff"
}}
>
<Text size="sm" fw={600} mb={4} c="#856404">
Password Requirements:
</Text>
<Text size="xs" c="#101010ff" style={{ lineHeight: 1.6 }}>
• Minimum 8 characters, maximum 15 characters<br />
• At least 1 uppercase letter (A-Z)<br />
• At least 1 number (0-9)<br />
• At least 1 special character (e.g., @, #, $)
</Text>
</Box>
</Stack>
</Card> </Card>
</Box> </Grid.Col>
</Box> </Grid>
<Box </Container>
style={{ </Box>
flexShrink: 0,
display: "flex", {/* Footer */}
justifyContent: "center", <Box
alignItems: "center", style={{
backgroundColor: "#f8f9fa", flexShrink: 0,
marginTop: "0.5rem", display: "flex",
}} justifyContent: "center",
> alignItems: "center",
<Text c="dimmed" size="xs"> backgroundColor: "#f8f9fa",
© 2025 Kangra Central Co-Operative Bank padding: "1rem",
</Text> }}
</Box> >
</div> <Text c="dimmed" size="xs">
</div> © 2025 Kangra Central Co-Operative Bank. All rights reserved.
</Providers > </Text>
); </Box>
</Box>
</Providers>
);
} }
} }