From 67fce2c01e83a1ee8a11639c7be38bc85e5b18e6 Mon Sep 17 00:00:00 2001 From: "tomosa.sarkar" Date: Wed, 30 Jul 2025 15:08:58 +0530 Subject: [PATCH] wip: Forget Password page --- .../CaptchaImage.tsx | 0 .../page.module.css | 0 .../{ChangePassword => SetPassword}/page.tsx | 52 ++-- .../{ChangeTxn => SetTxn}/CaptchaImage.tsx | 0 .../{ChangeTxn => SetTxn}/page.modukle.css | 0 src/app/{ChangeTxn => SetTxn}/page.tsx | 56 ++-- src/app/login/page.tsx | 2 +- src/app/registration/page.tsx | 2 +- src/app/validate_user/page.tsx | 248 +++++++++++++----- 9 files changed, 235 insertions(+), 125 deletions(-) rename src/app/{ChangePassword => SetPassword}/CaptchaImage.tsx (100%) rename src/app/{ChangePassword => SetPassword}/page.module.css (100%) rename src/app/{ChangePassword => SetPassword}/page.tsx (87%) rename src/app/{ChangeTxn => SetTxn}/CaptchaImage.tsx (100%) rename src/app/{ChangeTxn => SetTxn}/page.modukle.css (100%) rename src/app/{ChangeTxn => SetTxn}/page.tsx (85%) diff --git a/src/app/ChangePassword/CaptchaImage.tsx b/src/app/SetPassword/CaptchaImage.tsx similarity index 100% rename from src/app/ChangePassword/CaptchaImage.tsx rename to src/app/SetPassword/CaptchaImage.tsx diff --git a/src/app/ChangePassword/page.module.css b/src/app/SetPassword/page.module.css similarity index 100% rename from src/app/ChangePassword/page.module.css rename to src/app/SetPassword/page.module.css diff --git a/src/app/ChangePassword/page.tsx b/src/app/SetPassword/page.tsx similarity index 87% rename from src/app/ChangePassword/page.tsx rename to src/app/SetPassword/page.tsx index ebe892f..7d547dc 100644 --- a/src/app/ChangePassword/page.tsx +++ b/src/app/SetPassword/page.tsx @@ -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(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 = ; 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={} variant="subtle" onClick={handleLogout}>Logout -
- +
Change Password Image - + Set Login Password @@ -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={ - - } + // rightSection={ + // + // } 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 &&

{captchaError}

} + {captchaError &&

{captchaError}

}
diff --git a/src/app/ChangeTxn/CaptchaImage.tsx b/src/app/SetTxn/CaptchaImage.tsx similarity index 100% rename from src/app/ChangeTxn/CaptchaImage.tsx rename to src/app/SetTxn/CaptchaImage.tsx diff --git a/src/app/ChangeTxn/page.modukle.css b/src/app/SetTxn/page.modukle.css similarity index 100% rename from src/app/ChangeTxn/page.modukle.css rename to src/app/SetTxn/page.modukle.css diff --git a/src/app/ChangeTxn/page.tsx b/src/app/SetTxn/page.tsx similarity index 85% rename from src/app/ChangeTxn/page.tsx rename to src/app/SetTxn/page.tsx index 614dcd2..5a8be52 100644 --- a/src/app/ChangeTxn/page.tsx +++ b/src/app/SetTxn/page.tsx @@ -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(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 = ; async function handleLogout(e: React.FormEvent) { e.preventDefault(); @@ -127,7 +128,7 @@ export default function ChangeTransactionPwd() { } }, []); -if (authorized) { + if (authorized) { return (
@@ -156,11 +157,16 @@ if (authorized) { leftSection={} variant="subtle" onClick={handleLogout}>Logout -
+
Change Password Image - + + router.push("/login")} + style={{ + position: 'absolute', top: '1rem', right: '2rem', cursor: 'pointer', fontWeight: 500, color: '#7091ecff',textDecoration:'underline' + }}> Skip now + Set Transaction Password @@ -181,17 +187,18 @@ if (authorized) { placeholder="Re-enter your Transaction password" required id="confirmPassword" + rightSection={icon} value={confirmPassword} type={confirmVisible ? 'text' : 'password'} - rightSection={ - - } + // rightSection={ + // + // } 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 &&

{captchaError}

} + {captchaError &&

{captchaError}

}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 5f986c5..97db7a0 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -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"); diff --git a/src/app/registration/page.tsx b/src/app/registration/page.tsx index 4f68d0e..b689978 100644 --- a/src/app/registration/page.tsx +++ b/src/app/registration/page.tsx @@ -53,7 +53,7 @@ export default function Register() { return ( - Internet Banking Registration + Internet Banking Registration { + 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 (
- ebanking + ebanking -
+ + Change Password Image + + + {/* @ts-ignore */} + Validate User - - Change Password Image - - - Validate User + {isCifValidated && ( + // @ts-ignore + Welcome {" "}{Cif} + )} +
{ + e.preventDefault(); + isCifValidated?handleSubmitOtp():handleValidateUser(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(); + } + }} + /> - - setCif(e.currentTarget.value)} - /> +
+ {!isCifValidated && ( + <> +

+ NOTE: Your CIF number travels in an encrypted and highly secured mode. + + )} + {isCifValidated && ( + <> + { + 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)} + /> + + OTP sent to your registered mobile number{" "} + {`xxxxxx${mobileNumber.slice(-4)}`} + + + )} +
- setOTP(e.currentTarget.value)} - /> - - -

-
- + + + - - - © 2025 KCC Bank. All rights reserved. {" "} + + + + + © 2025 Kangra Central Co-Operative Bank + + - - -
- + ); - -} \ No newline at end of file +}