From e968cd296f9024f83a71e58679b31feac48acb9a Mon Sep 17 00:00:00 2001 From: "tomosa.sarkar" Date: Tue, 30 Dec 2025 16:39:05 +0530 Subject: [PATCH] fix : responsive for set login and transaction password --- src/app/SetPassword/page.tsx | 399 +++++++++++++++++++++++--------- src/app/SetTxn/page.tsx | 435 ++++++++++++++++++++++++----------- 2 files changed, 585 insertions(+), 249 deletions(-) diff --git a/src/app/SetPassword/page.tsx b/src/app/SetPassword/page.tsx index a7859fd..a3ca3f3 100644 --- a/src/app/SetPassword/page.tsx +++ b/src/app/SetPassword/page.tsx @@ -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 = ; - 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 ( - -
- + + {/* Header */} + - ebanking + ebanking + + fontFamily: "Roboto", + color: "white", + marginBottom: 2, + fontSize: "clamp(0.9rem, 2.5vw, 1.25rem)", + lineHeight: 1.3 + }}> THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. - + + Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 + -
- - Change Password Image - - - Set Login Password -
+ + + + {/* Main Content */} + + + + {/* Image Column */} + + + + + Welcome to KCCB Internet Banking + + + Secure your account with a strong password + + + + + + {/* Form Column */} + + + {/* Decorative top bar */} + + + + + + Set Login Password + + + Create a strong password to secure your account + + + + e.preventDefault()} onCut={(e) => e.preventDefault()} readOnly={captchaValidate} + styles={{ + input: { + borderRadius: "8px", + border: "2px solid #e9ecef" + } + }} /> + setConfirmPassword(e.currentTarget.value)} onCopy={(e) => e.preventDefault()} onPaste={(e) => e.preventDefault()} onCut={(e) => e.preventDefault()} readOnly={captchaValidate} - /> - - e.preventDefault()} - onContextMenu={(e) => e.preventDefault()}> - {captcha} - - - - - setCaptchaInput(e.currentTarget.value)} - withAsterisk - readOnly={captchaValidate} /> - - {captchaValidate && ( + + {/* CAPTCHA Section */} + + Verification Code + + e.preventDefault()} + onContextMenu={(e) => e.preventDefault()} + > + {captcha} + + + + setCaptchaInput(e.currentTarget.value)} + withAsterisk + size="md" + readOnly={captchaValidate} + styles={{ + input: { + borderRadius: "8px" + } + }} + /> + + + {/* OTP Section */} + {captchaValidate && ( + } value={otp} maxLength={6} onChange={(e) => setOtp(e.currentTarget.value)} withAsterisk + size="md" style={{ flex: 1 }} + styles={{ + input: { + borderRadius: "8px", + letterSpacing: "4px" + } + }} /> {timerActive ? ( - - Resend OTP will be enabled in 00:{countdown < 10 ? `0${countdown}` : countdown} min + + Resend in 00:{countdown < 10 ? `0${countdown}` : countdown} ) : ( )} - )} - + + )} + - - - - Note: 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. - - + + {/* Note Box */} + + + Password Requirements: + + + • Minimum 8 characters, maximum 15 characters
+ • At least 1 uppercase letter (A-Z)
+ • At least 1 number (0-9)
+ • At least 1 special character (e.g., @, #, $) + + + -
- - - - © 2025 The Kangra Central Co-Operative Bank Ltd. - - -
-
- - ); + + + + + + {/* Footer */} + + + © 2025 The Kangra Central Co-Operative Bank Ltd. All rights reserved. + + + + + ); } } \ No newline at end of file diff --git a/src/app/SetTxn/page.tsx b/src/app/SetTxn/page.tsx index c14d448..f468d31 100644 --- a/src/app/SetTxn/page.tsx +++ b/src/app/SetTxn/page.tsx @@ -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 = ; - 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 ( - -
- + + {/* Header */} + - ebanking + ebanking + + fontFamily: "Roboto", + color: "white", + marginBottom: 2, + fontSize: "clamp(0.9rem, 2.5vw, 1.25rem)", + lineHeight: 1.3 + }}> THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. - + + Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 + -
- - 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 -
+ {/* Main Content */} + + + + {/* Image Column */} + + + + + Welcome to KCCB Internet Banking + + + Set up your transaction password for secure payments + + + + + + {/* Form Column */} + + + {/* Decorative top bar + */} + + {/* Skip Now Link */} + router.push("/login")} + style={{ + position: 'absolute', + top: '1.5rem', + right: '1.5rem', + cursor: 'pointer', + fontWeight: 600, + color: '#0a7228', + fontSize: "14px" + }} + > + Skip now → + + + + + + Set Transaction Password + + + Secure your transactions with a strong password + + + + 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" + } + }} /> + setConfirmPassword(e.currentTarget.value)} @@ -332,101 +437,161 @@ export default function SetTransactionPwd() { onPaste={(e) => e.preventDefault()} onCut={(e) => e.preventDefault()} readOnly={captchaValidate} - /> - {/* CAPTCHA */} - - e.preventDefault()} - onContextMenu={(e) => e.preventDefault()}> - - {captcha} - - - setCaptchaInput(e.currentTarget.value)} - withAsterisk - mt="sm" - readOnly={captchaValidate} /> - - {captchaValidate && ( + + {/* CAPTCHA Section */} + + Verification Code + + e.preventDefault()} + onContextMenu={(e) => e.preventDefault()} + > + {captcha} + + + + setCaptchaInput(e.currentTarget.value)} + withAsterisk + size="md" + readOnly={captchaValidate} + styles={{ + input: { + borderRadius: "8px" + } + }} + /> + + + {/* OTP Section */} + {captchaValidate && ( + } value={otp} maxLength={6} onChange={(e) => setOtp(e.currentTarget.value)} withAsterisk + size="md" style={{ flex: 1 }} + styles={{ + input: { + borderRadius: "8px", + letterSpacing: "4px" + } + }} /> {timerActive ? ( - - Resend OTP will be enabled in 00:{countdown < 10 ? `0${countdown}` : countdown} min + + Resend in 00:{countdown < 10 ? `0${countdown}` : countdown} ) : ( )} - )} - + + )} + - -

- - - Note: 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. - - + {/* Note Box */} + + + Password Requirements: + + + • Minimum 8 characters, maximum 15 characters
+ • At least 1 uppercase letter (A-Z)
+ • At least 1 number (0-9)
+ • At least 1 special character (e.g., @, #, $) + + + -
- - - - © 2025 Kangra Central Co-Operative Bank - - -
-
- - ); + + + + + + {/* Footer */} + + + © 2025 Kangra Central Co-Operative Bank. All rights reserved. + + + + + ); } }