Wip: update the login page,
feat: update Otp in set login and transaction page. Feat: Add validation for external account in add beneficiary.
This commit is contained in:
@@ -1,23 +0,0 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
|
||||
const CaptchaImage = ({ text }: { text: string }) => {
|
||||
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
const ctx = canvas?.getContext('2d');
|
||||
if (canvas && ctx) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.font = '26px Arial';
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.setTransform(1, 0.1, -0.1, 1, 0, 0);
|
||||
ctx.fillText(text, 10, 30);
|
||||
}
|
||||
}, [text]);
|
||||
|
||||
return <canvas ref={canvasRef} width={120} height={40} />;
|
||||
};
|
||||
|
||||
export default CaptchaImage;
|
||||
@@ -1,14 +1,15 @@
|
||||
"use client";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Text, Button, TextInput, PasswordInput, Title, Card, Box, Image } from "@mantine/core";
|
||||
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/logo.jpg';
|
||||
import changePwdImage from '@/app/image/changepw.png';
|
||||
import CaptchaImage from './CaptchaImage';
|
||||
import { IconEye, IconEyeOff, IconLock, IconLogout } from '@tabler/icons-react';
|
||||
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 { generateCaptcha } from '@/app/captcha';
|
||||
import { generateOTP } from "../OTPGenerator";
|
||||
|
||||
export default function SetLoginPwd() {
|
||||
const router = useRouter();
|
||||
@@ -16,33 +17,35 @@ export default function SetLoginPwd() {
|
||||
const [captcha, setCaptcha] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [captchaInput, setCaptchaInput] = useState('');
|
||||
const [captchaError, setCaptchaError] = useState('');
|
||||
const [confirmVisible, setConfirmVisible] = useState(false);
|
||||
const toggleConfirmVisibility = () => setConfirmVisible((v) => !v);
|
||||
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("");
|
||||
|
||||
async function handleGenerateOtp() {
|
||||
// const value = await generateOTP(6);
|
||||
const value = "123456";
|
||||
setGenerateOtp(value);
|
||||
setCountdown(60);
|
||||
setTimerActive(true);
|
||||
// return value;
|
||||
}
|
||||
async function handleLogout(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
localStorage.removeItem("access_token");
|
||||
router.push("/login")
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
generateCaptcha();
|
||||
}, []);
|
||||
|
||||
const generateCaptcha = () => {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
let result = '';
|
||||
for (let i = 0; i < 6; i++) {
|
||||
result += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
setCaptcha(result);
|
||||
setCaptchaInput('');
|
||||
setCaptchaError('');
|
||||
const regenerateCaptcha = () => {
|
||||
const loadCaptcha = async () => {
|
||||
const newCaptcha = await generateCaptcha();
|
||||
setCaptcha(newCaptcha);
|
||||
};
|
||||
loadCaptcha();
|
||||
setCaptchaInput("");
|
||||
};
|
||||
|
||||
async function handleSetLoginPassword(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
const pwdRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
|
||||
@@ -50,36 +53,72 @@ export default function SetLoginPwd() {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "red",
|
||||
title: "Both password fields are required.",
|
||||
message: "Both password fields are required.",
|
||||
title: "Field Required",
|
||||
message: "Password and Confirm Password Both fields are required.",
|
||||
autoClose: 5000,
|
||||
});
|
||||
return;
|
||||
// alert("Both password fields are required.");
|
||||
} else if (password !== confirmPassword) {
|
||||
// alert("Passwords do not match.");
|
||||
}
|
||||
if (!captchaInput) {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "red",
|
||||
title: "Passwords do not match.",
|
||||
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;
|
||||
}
|
||||
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.");
|
||||
if (!pwdRegex.test(password)) {
|
||||
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.",
|
||||
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;
|
||||
}
|
||||
else if (captchaInput !== captcha) {
|
||||
setCaptchaError("Incorrect CAPTCHA.");
|
||||
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);
|
||||
handleGenerateOtp();
|
||||
return;
|
||||
}
|
||||
if (!otp) {
|
||||
notifications.show({
|
||||
title: "Null Field",
|
||||
message: "Please enter the OTP",
|
||||
color: "red",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (otp !== generateOtp) {
|
||||
notifications.show({
|
||||
title: "Invalid OTP",
|
||||
message: "The OTP entered does not match",
|
||||
color: "red",
|
||||
});
|
||||
return;
|
||||
}
|
||||
const token = localStorage.getItem("access_token");
|
||||
@@ -116,6 +155,29 @@ export default function SetLoginPwd() {
|
||||
router.push("/login");
|
||||
}
|
||||
}
|
||||
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]);
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("access_token");
|
||||
@@ -136,16 +198,28 @@ export default function SetLoginPwd() {
|
||||
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%)"
|
||||
background: "linear-gradient(15deg,rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)"
|
||||
}}>
|
||||
<Image
|
||||
// radius="md"
|
||||
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%',
|
||||
@@ -157,80 +231,101 @@ export default function SetLoginPwd() {
|
||||
leftSection={<IconLogout color='white' />} variant="subtle" onClick={handleLogout}>Logout</Button>
|
||||
</Box>
|
||||
<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 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='82vh'>
|
||||
<Title order={3}
|
||||
<Card p="xl" w="40vw" h='85vh'>
|
||||
<Title order={4}
|
||||
// @ts-ignore
|
||||
align="center" mb="md">Set Login Password</Title>
|
||||
|
||||
<form onSubmit={handleSetLoginPassword}>
|
||||
<PasswordInput
|
||||
label="Login Password"
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
withAsterisk
|
||||
id="loginPassword"
|
||||
value={password}
|
||||
minLength={8}
|
||||
maxLength={15}
|
||||
onChange={(e) => setPassword(e.currentTarget.value)}
|
||||
onCopy={(e) => e.preventDefault()}
|
||||
onPaste={(e) => e.preventDefault()}
|
||||
onCut={(e) => e.preventDefault()}
|
||||
readOnly={captchaValidate}
|
||||
/>
|
||||
|
||||
<PasswordInput
|
||||
label="Confirm Login Password"
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
withAsterisk
|
||||
rightSection={icon}
|
||||
id="confirmPassword"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.currentTarget.value)}
|
||||
type={confirmVisible ? 'text' : 'password'}
|
||||
|
||||
onCopy={(e) => e.preventDefault()}
|
||||
onPaste={(e) => e.preventDefault()}
|
||||
onCut={(e) => e.preventDefault()}
|
||||
|
||||
readOnly={captchaValidate}
|
||||
/>
|
||||
|
||||
{/* 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', fontSize: '12px' }}>{captchaError}</p>}
|
||||
</div>
|
||||
|
||||
<Group mt="sm" align="center">
|
||||
<Box style={{ backgroundColor: "#fff", fontSize: "18px", textDecoration: "line-through", padding: "4px 8px", fontFamily: "cursive" }}>{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 && (
|
||||
<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={handleGenerateOtp}
|
||||
leftSection={<IconRefresh size={16} />}
|
||||
>
|
||||
Resend
|
||||
</Button>
|
||||
)}
|
||||
</Group>
|
||||
)}
|
||||
</Box>
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
mt="sm"
|
||||
color="blue"
|
||||
>
|
||||
Set
|
||||
{!captchaValidate ? "Validate" : "Set"}
|
||||
</Button>
|
||||
</form>
|
||||
<br></br>
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
borderLeft: '1px solid #ccc',
|
||||
paddingLeft: 16,
|
||||
minHeight: 90,
|
||||
|
||||
minHeight: 80,
|
||||
gap: "sm"
|
||||
}}
|
||||
>
|
||||
<Text size="sm">
|
||||
<strong>Note:</strong> Password will contains minimum one alphabet, one digit, one special symbol and total 8 charecters.
|
||||
<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>
|
||||
@@ -247,7 +342,7 @@ export default function SetLoginPwd() {
|
||||
}}
|
||||
>
|
||||
<Text c="dimmed" size="xs">
|
||||
© 2025 Kangra Central Co-Operative Bank
|
||||
© 2025 The Kangra Central Co-Operative Bank
|
||||
</Text>
|
||||
</Box>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user