433 lines
18 KiB
TypeScript
433 lines
18 KiB
TypeScript
"use client";
|
|
import React, { useState, useEffect } from "react";
|
|
import { Text, Button, TextInput, PasswordInput, Title, Card, Box, Image, Group } 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 { generateCaptcha } from '@/app/captcha';
|
|
import { IconLock, IconLogout, IconRefresh } from '@tabler/icons-react';
|
|
import { sendOtp, verifyOtp } from "../_util/otp";
|
|
|
|
|
|
|
|
export default function SetTransactionPwd() {
|
|
const router = useRouter();
|
|
const [authorized, SetAuthorized] = useState<boolean | null>(null);
|
|
const [password, setPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
const [captcha, setCaptcha] = useState("");
|
|
const [captchaInput, setCaptchaInput] = useState("");
|
|
const [captchaValidate, setCaptchaValidate] = useState(false);
|
|
const [otp, setOtp] = useState("");
|
|
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) {
|
|
notifications.show({
|
|
title: 'Error',
|
|
message: 'Mobile number not found.Contact to administrator',
|
|
color: 'red',
|
|
});
|
|
return;
|
|
}
|
|
try {
|
|
await sendOtp({ type: 'CHANGE_LPWORD' });
|
|
setCountdown(180);
|
|
setTimerActive(true);
|
|
} catch (err: any) {
|
|
console.error('Send OTP failed', err);
|
|
notifications.show({
|
|
title: 'Error',
|
|
message: err.message || 'Send OTP failed.Please try again later.',
|
|
color: 'red',
|
|
});
|
|
}
|
|
}
|
|
|
|
async function handleVerifyOtp() {
|
|
try {
|
|
await verifyOtp(otp);
|
|
return true;
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
async function handleGenerateOtp() {
|
|
const value = "123456";
|
|
setGenerateOtp(value);
|
|
setCountdown(60);
|
|
setTimerActive(true);
|
|
}
|
|
|
|
async function handleLogout(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
localStorage.removeItem("access_token");
|
|
localStorage.clear();
|
|
sessionStorage.clear();
|
|
router.push("/login")
|
|
}
|
|
const regenerateCaptcha = () => {
|
|
const loadCaptcha = async () => {
|
|
const newCaptcha = await generateCaptcha();
|
|
setCaptcha(newCaptcha);
|
|
};
|
|
loadCaptcha();
|
|
setCaptchaInput("");
|
|
};
|
|
|
|
useEffect(() => {
|
|
const loadCaptcha = async () => {
|
|
const newCaptcha = await generateCaptcha();
|
|
setCaptcha(newCaptcha);
|
|
};
|
|
loadCaptcha();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
let interval: number | undefined;
|
|
if (timerActive && countdown > 0) {
|
|
interval = window.setInterval(() => {
|
|
setCountdown((prev) => prev - 1);
|
|
}, 1000);
|
|
}
|
|
if (countdown === 0) {
|
|
if (interval) clearInterval(interval);
|
|
setTimerActive(false);
|
|
}
|
|
return () => {
|
|
if (interval) clearInterval(interval);
|
|
};
|
|
}, [timerActive, countdown]);
|
|
|
|
async function handleSetTransactionPassword(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
const pwdRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
|
|
if (!password || !confirmPassword) {
|
|
notifications.show({
|
|
withBorder: true,
|
|
color: "red",
|
|
title: "Field Required",
|
|
message: "Both password fields are required.",
|
|
autoClose: 5000,
|
|
});
|
|
return;
|
|
}
|
|
if (!captchaInput) {
|
|
notifications.show({
|
|
withBorder: true,
|
|
color: "red",
|
|
title: "Field Required",
|
|
message: "Please Enter Captcha details",
|
|
autoClose: 5000,
|
|
});
|
|
return;
|
|
}
|
|
if (password !== confirmPassword) {
|
|
notifications.show({
|
|
withBorder: true,
|
|
color: "red",
|
|
title: "Password Mismatch",
|
|
message: "Passwords do not match.",
|
|
autoClose: 5000,
|
|
});
|
|
return;
|
|
}
|
|
if (!pwdRegex.test(password)) {
|
|
notifications.show({
|
|
withBorder: true,
|
|
color: "red",
|
|
title: "Invalid Password",
|
|
message: "Password must contain at least one capital letter, one number, one special character, and be 8-15 characters long.",
|
|
autoClose: 5000,
|
|
});
|
|
return;
|
|
}
|
|
if (captchaInput !== captcha) {
|
|
notifications.show({
|
|
withBorder: true,
|
|
color: "red",
|
|
title: "Captcha Error",
|
|
message: "Please enter the correct captcha",
|
|
autoClose: 5000,
|
|
});
|
|
regenerateCaptcha();
|
|
return;
|
|
}
|
|
if (!captchaValidate) {
|
|
setCaptchaValidate(true);
|
|
handleSendOtp();
|
|
return;
|
|
}
|
|
if (!otp) {
|
|
notifications.show({
|
|
title: "Null Field",
|
|
message: "Please enter the OTP",
|
|
color: "red",
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Step 2 → validate OTP
|
|
if (step === "otp") {
|
|
const verified = await handleVerifyOtp();
|
|
if (!verified) {
|
|
notifications.show({
|
|
title: "Invalid OTP",
|
|
message: "The OTP entered does not match",
|
|
color: "red",
|
|
});
|
|
return;
|
|
}
|
|
|
|
|
|
setOtpValidated(true);
|
|
setStep("final");
|
|
notifications.show({
|
|
title: "OTP Verified",
|
|
message: "OTP has been successfully verified.",
|
|
color: "green",
|
|
});
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
const token = localStorage.getItem("access_token");
|
|
const response = await fetch('api/auth/transaction_password', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-Login-Type': 'IB',
|
|
'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");
|
|
}
|
|
}
|
|
useEffect(() => {
|
|
const token = localStorage.getItem("access_token");
|
|
if (!token) {
|
|
SetAuthorized(false);
|
|
router.push("/login");
|
|
}
|
|
else {
|
|
SetAuthorized(true);
|
|
}
|
|
}, []);
|
|
|
|
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,
|
|
display: "flex",
|
|
justifyContent: "flex-start",
|
|
background: "linear-gradient(15deg,rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)"
|
|
}}>
|
|
<Image
|
|
fit="cover"
|
|
src={logo}
|
|
component={NextImage}
|
|
alt="ebanking"
|
|
style={{ width: "100%", height: "100%" }}
|
|
/>
|
|
<Title
|
|
order={2}
|
|
style={{
|
|
fontFamily: 'Roboto',
|
|
position: 'absolute',
|
|
top: '30%',
|
|
left: '7%',
|
|
color: 'White',
|
|
transition: "opacity 0.5s ease-in-out",
|
|
}}
|
|
>
|
|
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>
|
|
</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>
|
|
|
|
<Title order={3}
|
|
// @ts-ignore
|
|
align="center" mb="md">Set Transaction Password</Title>
|
|
<form onSubmit={handleSetTransactionPassword}>
|
|
<PasswordInput
|
|
label="Transaction Password"
|
|
placeholder="Enter your Transaction password"
|
|
withAsterisk
|
|
id="loginPassword"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.currentTarget.value)}
|
|
onCopy={(e) => e.preventDefault()}
|
|
onPaste={(e) => e.preventDefault()}
|
|
onCut={(e) => e.preventDefault()}
|
|
readOnly={captchaValidate}
|
|
/>
|
|
<PasswordInput
|
|
label="Confirm Transaction Password"
|
|
placeholder="Re-enter your Transaction password"
|
|
withAsterisk
|
|
id="confirmPassword"
|
|
rightSection={icon}
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.currentTarget.value)}
|
|
onCopy={(e) => e.preventDefault()}
|
|
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",
|
|
}}
|
|
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 && (
|
|
<Group gap="xs" align="flex-end">
|
|
<PasswordInput
|
|
label="Enter OTP"
|
|
placeholder="Enter the OTP"
|
|
value={otp}
|
|
maxLength={6}
|
|
onChange={(e) => setOtp(e.currentTarget.value)}
|
|
withAsterisk
|
|
style={{ flex: 1 }}
|
|
/>
|
|
{timerActive ? (
|
|
<Text size="xs" c="dimmed">
|
|
Resend OTP will be enabled in 00:{countdown < 10 ? `0${countdown}` : countdown} min
|
|
</Text>
|
|
) : (
|
|
<Button
|
|
variant="subtle"
|
|
px={8}
|
|
onClick={handleSendOtp}
|
|
leftSection={<IconRefresh size={16} />}
|
|
>
|
|
Resend
|
|
</Button>
|
|
)}
|
|
</Group>
|
|
)}
|
|
</Box>
|
|
<Button
|
|
type="submit"
|
|
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 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>
|
|
</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 >
|
|
);
|
|
}
|
|
}
|