wip: Forget Password page
This commit is contained in:
@@ -8,9 +8,9 @@ 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, IconLogout } from '@tabler/icons-react';
|
||||
import { IconEye, IconEyeOff, IconLock, IconLogout } from '@tabler/icons-react';
|
||||
|
||||
export default function ChangeLoginPwd() {
|
||||
export default function SetLoginPwd() {
|
||||
const router = useRouter();
|
||||
const [authorized, SetAuthorized] = useState<boolean | null>(null);
|
||||
const [captcha, setCaptcha] = useState("");
|
||||
@@ -20,6 +20,7 @@ export default function ChangeLoginPwd() {
|
||||
const [captchaError, setCaptchaError] = useState('');
|
||||
const [confirmVisible, setConfirmVisible] = useState(false);
|
||||
const toggleConfirmVisibility = () => setConfirmVisible((v) => !v);
|
||||
const icon = <IconLock size={18} stroke={1.5} />;
|
||||
|
||||
async function handleLogout(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
@@ -102,7 +103,7 @@ export default function ChangeLoginPwd() {
|
||||
message: "Login Password has been set",
|
||||
autoClose: 5000,
|
||||
});
|
||||
router.push("/ChangeTxn");
|
||||
router.push("/SetTxn");
|
||||
}
|
||||
else {
|
||||
notifications.show({
|
||||
@@ -155,12 +156,11 @@ export default function ChangeLoginPwd() {
|
||||
}}
|
||||
leftSection={<IconLogout color='white' />} variant="subtle" onClick={handleLogout}>Logout</Button>
|
||||
</Box>
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
|
||||
<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" }}>
|
||||
<Card p="xl" w="35vw">
|
||||
<Card p="xl" w="40vw" h='82vh'>
|
||||
<Title order={3}
|
||||
// @ts-ignore
|
||||
align="center" mb="md">Set Login Password</Title>
|
||||
@@ -182,19 +182,20 @@ export default function ChangeLoginPwd() {
|
||||
label="Confirm Login Password"
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
rightSection={icon}
|
||||
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>
|
||||
}
|
||||
// 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()}
|
||||
@@ -214,7 +215,7 @@ export default function ChangeLoginPwd() {
|
||||
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
{captchaError && <p style={{ color: 'red' }}>{captchaError}</p>}
|
||||
{captchaError && <p style={{ color: 'red',fontSize:'12px' }}>{captchaError}</p>}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
@@ -244,20 +245,17 @@ export default function ChangeLoginPwd() {
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
component="footer"
|
||||
style={{
|
||||
width: "100%",
|
||||
textAlign: "center",
|
||||
padding: "10px 0",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
zIndex: 1000,
|
||||
fontSize: "14px",
|
||||
flexShrink: 0,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#f8f9fa",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<Text>
|
||||
© 2025 KCC Bank. All rights reserved. {" "}
|
||||
|
||||
<Text c="dimmed" size="xs">
|
||||
© 2025 Kangra Central Co-Operative Bank
|
||||
</Text>
|
||||
</Box>
|
||||
</div>
|
||||
@@ -8,9 +8,9 @@ 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, IconLogout } from '@tabler/icons-react';
|
||||
import { IconEye, IconEyeOff, IconLock, IconLogout } from '@tabler/icons-react';
|
||||
|
||||
export default function ChangeTransactionPwd() {
|
||||
export default function SetTransactionPwd() {
|
||||
const router = useRouter();
|
||||
const [authorized, SetAuthorized] = useState<boolean | null>(null);
|
||||
const [password, setPassword] = useState("");
|
||||
@@ -20,6 +20,7 @@ export default function ChangeTransactionPwd() {
|
||||
const [captchaError, setCaptchaError] = useState('');
|
||||
const [confirmVisible, setConfirmVisible] = useState(false);
|
||||
const toggleConfirmVisibility = () => setConfirmVisible((v) => !v);
|
||||
const icon = <IconLock size={18} stroke={1.5} />;
|
||||
|
||||
async function handleLogout(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
@@ -127,7 +128,7 @@ export default function ChangeTransactionPwd() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (authorized) {
|
||||
if (authorized) {
|
||||
return (
|
||||
<Providers>
|
||||
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
|
||||
@@ -156,11 +157,16 @@ if (authorized) {
|
||||
leftSection={<IconLogout color='white' />} variant="subtle" onClick={handleLogout}>Logout
|
||||
</Button>
|
||||
</Box>
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
<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" }}>
|
||||
<Card p="xl" w="35vw">
|
||||
<Card p="xl" w="40vw" h='82vh'>
|
||||
<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>
|
||||
@@ -181,17 +187,18 @@ if (authorized) {
|
||||
placeholder="Re-enter your Transaction password"
|
||||
required
|
||||
id="confirmPassword"
|
||||
rightSection={icon}
|
||||
value={confirmPassword}
|
||||
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>
|
||||
}
|
||||
// rightSection={
|
||||
// <button
|
||||
// type="button"
|
||||
// onClick={toggleConfirmVisibility}
|
||||
// style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'grey' }}
|
||||
// >
|
||||
// {confirmVisible ? <IconEyeOff size={18} /> : <IconEye size={18} />}
|
||||
// </button>
|
||||
// }
|
||||
onChange={(e) => setConfirmPassword(e.currentTarget.value)}
|
||||
onCopy={(e) => e.preventDefault()}
|
||||
onPaste={(e) => e.preventDefault()}
|
||||
@@ -210,7 +217,7 @@ if (authorized) {
|
||||
onChange={(e) => setCaptchaInput(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
{captchaError && <p style={{ color: 'red' }}>{captchaError}</p>}
|
||||
{captchaError && <p style={{ color: 'red', fontSize: '12px' }}>{captchaError}</p>}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
@@ -243,20 +250,17 @@ if (authorized) {
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
component="footer"
|
||||
style={{
|
||||
width: "100%",
|
||||
textAlign: "center",
|
||||
padding: "10px 0",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
zIndex: 1000,
|
||||
fontSize: "14px",
|
||||
flexShrink: 0,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#f8f9fa",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<Text>
|
||||
© 2025 KCC Bank. All rights reserved. {" "}
|
||||
|
||||
<Text c="dimmed" size="xs">
|
||||
© 2025 Kangra Central Co-Operative Bank
|
||||
</Text>
|
||||
</Box>
|
||||
</div>
|
||||
@@ -71,7 +71,7 @@ export default function Login() {
|
||||
const token = data.token;
|
||||
localStorage.setItem("access_token", token);
|
||||
if (data.FirstTimeLogin === true) {
|
||||
router.push("/ChangePassword")
|
||||
router.push("/SetPassword")
|
||||
}
|
||||
else {
|
||||
router.push("/home");
|
||||
|
||||
@@ -53,7 +53,7 @@ export default function Register() {
|
||||
return (
|
||||
<Providers>
|
||||
<Box maw={600} mx="auto" p="md">
|
||||
<Title order={2} mb="md"style={{align: "center"}}>Internet Banking Registration</Title>
|
||||
<Title order={2} mb="md" style={{ align: "center" }}>Internet Banking Registration</Title>
|
||||
<Paper shadow="xs" p="md">
|
||||
<Stack gap="sm">
|
||||
<TextInput
|
||||
|
||||
@@ -1,101 +1,209 @@
|
||||
"use client";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState } from "react";
|
||||
import { Text, Button, TextInput, PasswordInput, Title, Card, Box, Image } 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 { IconEye, IconEyeOff, IconLogout } from '@tabler/icons-react';
|
||||
import { useRouter } from "next/navigation";
|
||||
import { generateOTP } from '@/app/OTPGenerator';
|
||||
|
||||
export default function ValidateUser() {
|
||||
const router = useRouter();
|
||||
const [Cif, setCif] = useState("");
|
||||
const [otp, setOTP] = useState("");
|
||||
const [mobileNumber, setMobileNumber] = useState("");
|
||||
const [isCifValidated, setIsCifValidated] = useState(false);
|
||||
const [generateOtp, setGenerateOtp] = useState("");
|
||||
|
||||
const validUsers = [
|
||||
{ cif: "11111111111", mobile: "7890544527" },
|
||||
{ cif: "30022497139", mobile: "6230573848" },
|
||||
{ cif: "11122233344", mobile: "9998887776" },
|
||||
];
|
||||
async function handleGenerateOtp() {
|
||||
// const value = await generateOTP(6);
|
||||
const value = "123456";
|
||||
setGenerateOtp(value);
|
||||
return value;
|
||||
}
|
||||
|
||||
const handleValidateUser = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!Cif) {
|
||||
notifications.show({
|
||||
title: "Invalid CIF",
|
||||
message: "Please Enter your 11 digit CIF number.",
|
||||
color: "red",
|
||||
});
|
||||
setIsCifValidated(false);
|
||||
return;
|
||||
}
|
||||
if (!/^\d{11}$/.test(Cif)) {
|
||||
notifications.show({
|
||||
title: "Invalid CIF",
|
||||
message: "CIF number must be exactly 11 digits.",
|
||||
color: "red",
|
||||
});
|
||||
setIsCifValidated(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const user = validUsers.find((u) => u.cif === Cif);
|
||||
if (user) {
|
||||
setMobileNumber(user.mobile);
|
||||
setIsCifValidated(true);
|
||||
const Otp = await handleGenerateOtp();
|
||||
const masked = `xxxxxx${user.mobile.slice(-4)}`;
|
||||
notifications.show({
|
||||
title: "OTP Sent",
|
||||
message: `OTP sent to your registered mobile number ${masked}`,
|
||||
color: "green",
|
||||
});
|
||||
} else {
|
||||
setIsCifValidated(false);
|
||||
notifications.show({
|
||||
title: "User Not Found",
|
||||
message: "No such user is present.",
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmitOtp = () => {
|
||||
if(!otp){
|
||||
notifications.show({
|
||||
title: "Invalid OTP",
|
||||
message: "Please Enter OTP Before You Submit.",
|
||||
color: "red",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (otp === generateOtp) {
|
||||
notifications.show({
|
||||
title: "OTP Verified",
|
||||
message: `OTP matched successfully`,
|
||||
color: "green",
|
||||
});
|
||||
router.push("/ForgetPassword")
|
||||
}
|
||||
else {
|
||||
setOTP("");
|
||||
notifications.show({
|
||||
title: "Invalid OTP",
|
||||
message: `The OTP you entered is incorrect`,
|
||||
color: "red",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
async function handleSetLoginPassword(e: React.FormEvent) {
|
||||
}
|
||||
|
||||
return (
|
||||
<Providers>
|
||||
<div style={{ backgroundColor: "#f8f9fa", width: "100%", paddingTop: "5%" }}>
|
||||
<Box style={{
|
||||
position: 'fixed', width: '100%', height: '10%', top: 0, left: 0, zIndex: 100,
|
||||
position: 'fixed', width: '100%', height: '15%', 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%" }}
|
||||
/>
|
||||
<Image fit="cover" src={logo} component={NextImage} alt="ebanking"
|
||||
style={{ width: "100%", height: "100%" }} />
|
||||
</Box>
|
||||
<div style={{ marginTop: '10px' }}>
|
||||
<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" }}>
|
||||
<Card p="xl" w="35vw" h="65vh" style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
|
||||
{/* @ts-ignore */}
|
||||
<Title order={3} align="center" mb="md">Validate User</Title>
|
||||
|
||||
<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" }}>
|
||||
<Card p="xl" w="35vw">
|
||||
<Title order={3}
|
||||
// @ts-ignore
|
||||
align="center" mb="md">Validate User</Title>
|
||||
{isCifValidated && (
|
||||
// @ts-ignore
|
||||
<Text align="center"> Welcome {" "}{Cif}</Text>
|
||||
)}
|
||||
<form onSubmit={(e)=>{
|
||||
e.preventDefault();
|
||||
isCifValidated?handleSubmitOtp():handleValidateUser(e);
|
||||
}}>
|
||||
<TextInput
|
||||
label="Enter Your CIF Number"
|
||||
placeholder="Enter your CIF"
|
||||
withAsterisk
|
||||
value={Cif}
|
||||
disabled={isCifValidated}
|
||||
onChange={(e) => {
|
||||
const input = e.currentTarget.value;
|
||||
if (input.length <= 11) {
|
||||
setCif(input);
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
const isNumberKey = /[0-9]/.test(e.key);
|
||||
const isControlKey = ["Backspace", "Tab", "ArrowLeft", "ArrowRight"].includes(e.key);
|
||||
if (!isNumberKey && !isControlKey) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<form onSubmit={handleSetLoginPassword}>
|
||||
<TextInput
|
||||
label="Enter Your CIF Number"
|
||||
placeholder="Enter your CIF"
|
||||
required
|
||||
id="CIFNumber"
|
||||
value={Cif}
|
||||
onChange={(e) => setCif(e.currentTarget.value)}
|
||||
/>
|
||||
<div style={{ marginTop: "1rem", minHeight: "80px" }}>
|
||||
{!isCifValidated && (
|
||||
<>
|
||||
<br></br>
|
||||
<Text fs="italic" c="dimmed">NOTE: Your CIF number travels in an encrypted and highly secured mode.</Text>
|
||||
</>
|
||||
)}
|
||||
{isCifValidated && (
|
||||
<>
|
||||
<PasswordInput
|
||||
label="Enter OTP"
|
||||
placeholder="Enter your OTP"
|
||||
withAsterisk
|
||||
value={otp}
|
||||
maxLength={6}
|
||||
onKeyDown={(e) => {
|
||||
const isNumberKey = /[0-9]/.test(e.key);
|
||||
const isControlKey = ["Backspace", "Tab", "ArrowLeft", "ArrowRight"].includes(e.key);
|
||||
if (!isNumberKey && !isControlKey) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
onChange={(e) => setOTP(e.currentTarget.value)}
|
||||
/>
|
||||
<Text size="xs" mt="xs" c='green'>
|
||||
OTP sent to your registered mobile number{" "}
|
||||
<b>{`xxxxxx${mobileNumber.slice(-4)}`}</b>
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<PasswordInput
|
||||
label="Enter OTP"
|
||||
placeholder="Enter your OTP"
|
||||
required
|
||||
id="confirmPassword"
|
||||
value={otp}
|
||||
onChange={(e) => setOTP(e.currentTarget.value)}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
mt="sm"
|
||||
color="blue"
|
||||
>
|
||||
Validate
|
||||
</Button>
|
||||
</form>
|
||||
<br></br>
|
||||
</Card>
|
||||
</Box>
|
||||
<Button type="submit" mt="lg" color="blue">
|
||||
{isCifValidated ? "Submit OTP" : "Validate"}
|
||||
</Button>
|
||||
</form>
|
||||
</Card>
|
||||
</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. {" "}
|
||||
</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>
|
||||
|
||||
</Text>
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
</Providers >
|
||||
</Providers>
|
||||
);
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user