fix : responsive for set login and transaction password
This commit is contained in:
@@ -1,13 +1,13 @@
|
||||
"use client";
|
||||
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 { Providers } from "@/app/providers";
|
||||
import { useRouter } from "next/navigation";
|
||||
import NextImage from "next/image";
|
||||
import logo from '@/app/image/logo1.jpg';
|
||||
import changePwdImage from '@/app/image/set_log_pass.jpg';
|
||||
import { IconLock, IconLogout, IconRefresh } from '@tabler/icons-react';
|
||||
import changePwdImage from '@/app/image/forget_password.jpg';
|
||||
import { IconLock, IconLogout, IconPhone, IconRefresh } from '@tabler/icons-react';
|
||||
import { generateCaptcha } from '@/app/captcha';
|
||||
import { sendOtp, verifyOtp } from "../_util/otp";
|
||||
//const [showOtpField, setShowOtpField] = useState(false);
|
||||
@@ -25,7 +25,7 @@ export default function SetLoginPwd() {
|
||||
const [countdown, setCountdown] = useState(60);
|
||||
const [timerActive, setTimerActive] = useState(false);
|
||||
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 [otpValidated, setOtpValidated] = useState(false);
|
||||
|
||||
@@ -165,7 +165,6 @@ export default function SetLoginPwd() {
|
||||
});
|
||||
return;
|
||||
|
||||
|
||||
}
|
||||
|
||||
const token = localStorage.getItem("access_token");
|
||||
@@ -235,59 +234,162 @@ export default function SetLoginPwd() {
|
||||
}, []);
|
||||
|
||||
if (authorized) {
|
||||
return (
|
||||
<Providers>
|
||||
<div style={{ backgroundColor: "#f8f9fa", width: "auto", height: "auto", paddingTop: "5%" }}>
|
||||
<Box style={{
|
||||
position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100,
|
||||
return (
|
||||
<Providers>
|
||||
<Box style={{
|
||||
minHeight: "100vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
background: "linear-gradient(135deg, #f5f7fa 0%, #e8f5e9 100%)"
|
||||
}}>
|
||||
{/* Header */}
|
||||
<Box
|
||||
style={{
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 100,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
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
|
||||
fit="cover"
|
||||
src={logo}
|
||||
component={NextImage}
|
||||
alt="ebanking"
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
<Image
|
||||
src={logo}
|
||||
component={NextImage}
|
||||
fit="contain"
|
||||
alt="ebanking"
|
||||
style={{
|
||||
width: "60px",
|
||||
height: "60px",
|
||||
minWidth: "50px",
|
||||
marginRight: "15px"
|
||||
}}
|
||||
/>
|
||||
<Box style={{ flex: 1 }}>
|
||||
<Title
|
||||
order={2}
|
||||
order={3}
|
||||
style={{
|
||||
fontFamily: 'Roboto',
|
||||
position: 'absolute',
|
||||
top: '30%',
|
||||
left: '7%',
|
||||
color: 'White',
|
||||
transition: "opacity 0.5s ease-in-out",
|
||||
}}
|
||||
>
|
||||
fontFamily: "Roboto",
|
||||
color: "white",
|
||||
marginBottom: 2,
|
||||
fontSize: "clamp(0.9rem, 2.5vw, 1.25rem)",
|
||||
lineHeight: 1.3
|
||||
}}>
|
||||
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
|
||||
</Title>
|
||||
<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>
|
||||
<Text
|
||||
size="xs"
|
||||
c="white"
|
||||
style={{
|
||||
opacity: 0.85,
|
||||
fontSize: "clamp(0.65rem, 1.5vw, 0.75rem)"
|
||||
}}>
|
||||
Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
|
||||
</Text>
|
||||
</Box>
|
||||
<div>
|
||||
<Box style={{ display: "flex", justifyContent: "center", alignItems: "center" }} bg="#80868989">
|
||||
<Image h="85vh" w="100%" fit="contain" component={NextImage} src={changePwdImage} alt="Change Password Image" />
|
||||
<Box h="100%" style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
|
||||
<Card p="xl" w="40vw" h='85vh'>
|
||||
<Title order={4}
|
||||
// @ts-ignore
|
||||
align="center" mb="md">Set Login Password</Title>
|
||||
<form onSubmit={handleSetLoginPassword}>
|
||||
<Button
|
||||
style={{
|
||||
color: 'white',
|
||||
fontWeight: 600
|
||||
}}
|
||||
leftSection={<IconLogout color='white' />}
|
||||
variant="subtle"
|
||||
onClick={handleLogout}
|
||||
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
|
||||
label="Login Password"
|
||||
placeholder="Enter your password"
|
||||
withAsterisk
|
||||
id="loginPassword"
|
||||
size="md"
|
||||
value={password}
|
||||
minLength={8}
|
||||
maxLength={15}
|
||||
@@ -296,112 +398,181 @@ export default function SetLoginPwd() {
|
||||
onPaste={(e) => e.preventDefault()}
|
||||
onCut={(e) => e.preventDefault()}
|
||||
readOnly={captchaValidate}
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: "8px",
|
||||
border: "2px solid #e9ecef"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<PasswordInput
|
||||
label="Confirm Login Password"
|
||||
placeholder="Enter your password"
|
||||
placeholder="Re-enter your password"
|
||||
withAsterisk
|
||||
size="md"
|
||||
rightSection={icon}
|
||||
id="confirmPassword"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.currentTarget.value)}
|
||||
onCopy={(e) => e.preventDefault()}
|
||||
onPaste={(e) => e.preventDefault()}
|
||||
onCut={(e) => e.preventDefault()}
|
||||
readOnly={captchaValidate}
|
||||
/>
|
||||
<Group mt="sm" align="center">
|
||||
<Box style={{
|
||||
backgroundColor: "#fff", fontSize: "18px", textDecoration: "line-through", padding: "4px 8px", fontFamily: "Verdana",
|
||||
userSelect: "none",
|
||||
pointerEvents: "none",
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: "8px",
|
||||
border: "2px solid #e9ecef"
|
||||
}
|
||||
}}
|
||||
|
||||
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">
|
||||
<PasswordInput
|
||||
label="Enter OTP"
|
||||
placeholder="Enter the OTP"
|
||||
label="One-Time Password (OTP)"
|
||||
placeholder="Enter 6-digit OTP"
|
||||
leftSection={<IconPhone size={18} />}
|
||||
value={otp}
|
||||
maxLength={6}
|
||||
onChange={(e) => setOtp(e.currentTarget.value)}
|
||||
withAsterisk
|
||||
size="md"
|
||||
style={{ flex: 1 }}
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: "8px",
|
||||
letterSpacing: "4px"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{timerActive ? (
|
||||
<Text size="xs" c="dimmed">
|
||||
Resend OTP will be enabled in 00:{countdown < 10 ? `0${countdown}` : countdown} min
|
||||
<Text size="xs" c="dimmed" style={{ marginBottom: "8px" }}>
|
||||
Resend in 00:{countdown < 10 ? `0${countdown}` : countdown}
|
||||
</Text>
|
||||
) : (
|
||||
<Button
|
||||
variant="subtle"
|
||||
px={8}
|
||||
variant="light"
|
||||
color="green"
|
||||
onClick={handleSendOtp}
|
||||
leftSection={<IconRefresh size={16} />}
|
||||
style={{ marginBottom: "4px" }}
|
||||
>
|
||||
Resend
|
||||
</Button>
|
||||
)}
|
||||
</Group>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
mt="sm"
|
||||
size="lg"
|
||||
onClick={handleSetLoginPassword}
|
||||
style={{
|
||||
borderRadius: "10px",
|
||||
fontWeight: 600,
|
||||
marginTop: "0.5rem"
|
||||
}}
|
||||
>
|
||||
{!captchaValidate ? "Validate" : "Set"}
|
||||
</Button>
|
||||
</form>
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
borderLeft: '1px solid #ccc',
|
||||
paddingLeft: 16,
|
||||
minHeight: 80,
|
||||
gap: "sm"
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
</Box>
|
||||
|
||||
{/* Note Box */}
|
||||
<Box
|
||||
p="md"
|
||||
style={{
|
||||
background: "#cdffdfff",
|
||||
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>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#f8f9fa",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<Text c="dimmed" size="xs">
|
||||
© 2025 The Kangra Central Co-Operative Bank Ltd.
|
||||
</Text>
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
</Providers >
|
||||
);
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* Footer */}
|
||||
<Box
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#f8f9fa",
|
||||
padding: "1rem",
|
||||
}}
|
||||
>
|
||||
<Text c="dimmed" size="xs">
|
||||
© 2025 The Kangra Central Co-Operative Bank Ltd. All rights reserved.
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Providers>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,14 @@
|
||||
"use client";
|
||||
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 { Providers } from "@/app/providers";
|
||||
import { useRouter } from "next/navigation";
|
||||
import NextImage from "next/image";
|
||||
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 { IconLock, IconLogout, IconRefresh } from '@tabler/icons-react';
|
||||
import { IconLock, IconLogout, IconPhone, IconRefresh, IconShieldCheck } from '@tabler/icons-react';
|
||||
import { sendOtp, verifyOtp } from "../_util/otp";
|
||||
|
||||
|
||||
@@ -25,14 +25,9 @@ export default function SetTransactionPwd() {
|
||||
const [countdown, setCountdown] = useState(60);
|
||||
const [timerActive, setTimerActive] = useState(false);
|
||||
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 [otpValidated, setOtpValidated] = useState(false);
|
||||
|
||||
|
||||
|
||||
|
||||
async function handleSendOtp() {
|
||||
const mobileNumber = localStorage.getItem('remitter_mobile_no');
|
||||
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) {
|
||||
e.preventDefault();
|
||||
localStorage.removeItem("access_token");
|
||||
@@ -193,7 +181,6 @@ export default function SetTransactionPwd() {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
setOtpValidated(true);
|
||||
setStep("final");
|
||||
notifications.show({
|
||||
@@ -202,11 +189,8 @@ export default function SetTransactionPwd() {
|
||||
color: "green",
|
||||
});
|
||||
return;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
const token = localStorage.getItem("access_token");
|
||||
const response = await fetch('api/auth/transaction_password', {
|
||||
method: 'POST',
|
||||
@@ -254,77 +238,198 @@ export default function SetTransactionPwd() {
|
||||
}, []);
|
||||
|
||||
if (authorized) {
|
||||
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,
|
||||
return (
|
||||
<Providers>
|
||||
<Box style={{
|
||||
minHeight: "100vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
background: "linear-gradient(135deg, #f5f7fa 0%, #e8f5e9 100%)"
|
||||
}}>
|
||||
{/* Header */}
|
||||
<Box
|
||||
style={{
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 100,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
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
|
||||
fit="cover"
|
||||
src={logo}
|
||||
component={NextImage}
|
||||
alt="ebanking"
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
<Image
|
||||
src={logo}
|
||||
component={NextImage}
|
||||
fit="contain"
|
||||
alt="ebanking"
|
||||
style={{
|
||||
width: "60px",
|
||||
height: "60px",
|
||||
minWidth: "50px",
|
||||
marginRight: "15px"
|
||||
}}
|
||||
/>
|
||||
<Box style={{ flex: 1 }}>
|
||||
<Title
|
||||
order={2}
|
||||
order={3}
|
||||
style={{
|
||||
fontFamily: 'Roboto',
|
||||
position: 'absolute',
|
||||
top: '30%',
|
||||
left: '7%',
|
||||
color: 'White',
|
||||
transition: "opacity 0.5s ease-in-out",
|
||||
}}
|
||||
>
|
||||
fontFamily: "Roboto",
|
||||
color: "white",
|
||||
marginBottom: 2,
|
||||
fontSize: "clamp(0.9rem, 2.5vw, 1.25rem)",
|
||||
lineHeight: 1.3
|
||||
}}>
|
||||
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
|
||||
</Title>
|
||||
<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>
|
||||
<Text
|
||||
size="xs"
|
||||
c="white"
|
||||
style={{
|
||||
opacity: 0.85,
|
||||
fontSize: "clamp(0.65rem, 1.5vw, 0.75rem)"
|
||||
}}>
|
||||
Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
|
||||
</Text>
|
||||
</Box>
|
||||
<div>
|
||||
<Box style={{ display: "flex", justifyContent: "center", alignItems: "center" }} bg="#80868989">
|
||||
<Image h="85vh" fit="contain" component={NextImage} src={changePwdImage} alt="Change Password Image" />
|
||||
<Box h="100%" style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
|
||||
<Card p="xl" w="40vw" h='85vh'>
|
||||
<Text onClick={() => router.push("/login")}
|
||||
style={{
|
||||
position: 'absolute', top: '1rem', right: '2rem', cursor: 'pointer', fontWeight: 500, color: '#7091ecff', textDecoration: 'underline'
|
||||
}}> Skip now</Text>
|
||||
<Button
|
||||
style={{
|
||||
color: 'white',
|
||||
fontWeight: 600
|
||||
}}
|
||||
leftSection={<IconLogout color='white' />}
|
||||
variant="subtle"
|
||||
onClick={handleLogout}
|
||||
visibleFrom="md"
|
||||
>
|
||||
Logout
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Title order={3}
|
||||
// @ts-ignore
|
||||
align="center" mb="md">Set Transaction Password</Title>
|
||||
<form onSubmit={handleSetTransactionPassword}>
|
||||
{/* 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: "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
|
||||
label="Transaction Password"
|
||||
placeholder="Enter your Transaction password"
|
||||
placeholder="Enter your transaction password"
|
||||
withAsterisk
|
||||
id="loginPassword"
|
||||
size="md"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.currentTarget.value)}
|
||||
onCopy={(e) => e.preventDefault()}
|
||||
onPaste={(e) => e.preventDefault()}
|
||||
onCut={(e) => e.preventDefault()}
|
||||
readOnly={captchaValidate}
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: "8px",
|
||||
border: "2px solid #e9ecef"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<PasswordInput
|
||||
label="Confirm Transaction Password"
|
||||
placeholder="Re-enter your Transaction password"
|
||||
placeholder="Re-enter your transaction password"
|
||||
withAsterisk
|
||||
id="confirmPassword"
|
||||
size="md"
|
||||
rightSection={icon}
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.currentTarget.value)}
|
||||
@@ -332,101 +437,161 @@ export default function SetTransactionPwd() {
|
||||
onPaste={(e) => e.preventDefault()}
|
||||
onCut={(e) => e.preventDefault()}
|
||||
readOnly={captchaValidate}
|
||||
/>
|
||||
{/* CAPTCHA */}
|
||||
<Group mt="sm" align="center">
|
||||
<Box style={{
|
||||
backgroundColor: "#fff", fontSize: "18px", textDecoration: "line-through", padding: "4px 8px", fontFamily: "Verdana",
|
||||
userSelect: "none",
|
||||
pointerEvents: "none",
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: "8px",
|
||||
border: "2px solid #e9ecef"
|
||||
}
|
||||
}}
|
||||
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">
|
||||
<PasswordInput
|
||||
label="Enter OTP"
|
||||
placeholder="Enter the OTP"
|
||||
label="One-Time Password (OTP)"
|
||||
placeholder="Enter 6-digit OTP"
|
||||
leftSection={<IconPhone size={18} />}
|
||||
value={otp}
|
||||
maxLength={6}
|
||||
onChange={(e) => setOtp(e.currentTarget.value)}
|
||||
withAsterisk
|
||||
size="md"
|
||||
style={{ flex: 1 }}
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: "8px",
|
||||
letterSpacing: "4px"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{timerActive ? (
|
||||
<Text size="xs" c="dimmed">
|
||||
Resend OTP will be enabled in 00:{countdown < 10 ? `0${countdown}` : countdown} min
|
||||
<Text size="xs" c="dimmed" style={{ marginBottom: "8px" }}>
|
||||
Resend in 00:{countdown < 10 ? `0${countdown}` : countdown}
|
||||
</Text>
|
||||
) : (
|
||||
<Button
|
||||
variant="subtle"
|
||||
px={8}
|
||||
variant="light"
|
||||
color="green"
|
||||
onClick={handleSendOtp}
|
||||
leftSection={<IconRefresh size={16} />}
|
||||
style={{ marginBottom: "4px" }}
|
||||
>
|
||||
Resend
|
||||
</Button>
|
||||
)}
|
||||
</Group>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
mt="sm"
|
||||
color="blue"
|
||||
size="lg"
|
||||
onClick={handleSetTransactionPassword}
|
||||
style={{
|
||||
borderRadius: "10px",
|
||||
fontWeight: 600,
|
||||
marginTop: "0.5rem"
|
||||
}}
|
||||
>
|
||||
Set
|
||||
</Button>
|
||||
</form>
|
||||
<br></br>
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
borderLeft: '1px solid #ccc',
|
||||
paddingLeft: 16,
|
||||
minHeight: 90,
|
||||
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
</Box>
|
||||
{/* Note Box */}
|
||||
<Box
|
||||
p="md"
|
||||
style={{
|
||||
background: "#cdffdfff",
|
||||
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>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#f8f9fa",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<Text c="dimmed" size="xs">
|
||||
© 2025 Kangra Central Co-Operative Bank
|
||||
</Text>
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
</Providers >
|
||||
);
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* Footer */}
|
||||
<Box
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#f8f9fa",
|
||||
padding: "1rem",
|
||||
}}
|
||||
>
|
||||
<Text c="dimmed" size="xs">
|
||||
© 2025 Kangra Central Co-Operative Bank. All rights reserved.
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Providers>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user