From 649fc5aceaa4f0bbd8238cdff11e23f8c42822b3 Mon Sep 17 00:00:00 2001 From: "tomosa.sarkar" Date: Thu, 25 Sep 2025 15:27:16 +0530 Subject: [PATCH] feat: make e-mandate screen responsive. --- src/app/(main)/funds_transfer/page.tsx | 4 + src/app/eMandate/login/page.tsx | 296 +++++++++++++++++++++---- src/app/eMandate/mandate_page/page.tsx | 72 ++++-- 3 files changed, 320 insertions(+), 52 deletions(-) diff --git a/src/app/(main)/funds_transfer/page.tsx b/src/app/(main)/funds_transfer/page.tsx index 7dbb20d..62a2295 100644 --- a/src/app/(main)/funds_transfer/page.tsx +++ b/src/app/(main)/funds_transfer/page.tsx @@ -266,6 +266,8 @@ export default function QuickPay() { setOtp(""); setValidationStatus(null); setBeneficiaryName(null); + setTimerActive(false); + setCountdown(180); } else { notifications.show({ title: "Error", @@ -293,6 +295,8 @@ export default function QuickPay() { setShowTxnPassword(false); setShowOtpField(false); setIsSubmitting(false); + setTimerActive(false); + setCountdown(180); } }; diff --git a/src/app/eMandate/login/page.tsx b/src/app/eMandate/login/page.tsx index a835ef6..f7cf676 100644 --- a/src/app/eMandate/login/page.tsx +++ b/src/app/eMandate/login/page.tsx @@ -1,6 +1,6 @@ "use client"; import React, { useState, useEffect, memo, useRef } from "react"; -import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Tooltip, Modal } from "@mantine/core"; +import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Tooltip, Modal, Stack } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { Providers } from "@/app/providers"; import { useRouter } from "next/navigation"; @@ -88,7 +88,7 @@ export default function Login() { method: 'POST', headers: { 'Content-Type': 'application/json', - 'X-Login-Type': 'emandate', + 'X-Login-Type': 'emandate', }, body: JSON.stringify({ customerNo: CIF, @@ -112,7 +112,7 @@ export default function Login() { } setIsLogging(true); if (response.ok) { - console.log(data); + // console.log(data); const token = data.token; localStorage.setItem("mandate_token", token); // localStorage.setItem("pswExpiryDate", data.loginPswExpiry); @@ -160,50 +160,192 @@ export default function Login() {
{/* Header */} + padding: "0.5rem 1rem", + background: + "linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)", + }} + > + {/* Logo */} ebanking - + <Title + order={4} + style={{ + fontFamily: "Roboto", + color: "white", + fontSize: "clamp(14px, 2vw, 20px)", // auto resizes + whiteSpace: "nowrap", + overflow: "hidden", + textOverflow: "ellipsis", + }} + > + THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. + + + Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 + + + + + + {/* Logo */} + ebanking + + {/* Desktop: Title + Address */} + - THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. - - + THE KANGRA CENTRAL CO-OPERATIVE BANK LTD. + + + Head Office: Dharmshala, District Kangra (H.P), Pin: 176215 + + + + {/* Mobile: only Logo + Bank Name */} + - Head Office : Dharmshala, District: Kangra(H.P), Pin: 176215 - + + THE KANGRA CENTRAL + + + CO-OPERATIVE BANK LTD. + + + +
{/* Movable text */} + {/* Main */} -
+
-
+ + + {/* Mobile layout */} + + +
+ + E-Mandate Login + + + { + const input = e.currentTarget.value.replace(/\D/g, ""); + if (input.length <= 11) SetCIF(input); + }} + withAsterisk + mt="sm" + /> + + SetPsw(e.currentTarget.value)} + withAsterisk + mt="sm" + /> + + + + {captcha} + + + + + setInputCaptcha(e.currentTarget.value)} + withAsterisk + mt="sm" + /> + + + +
+ + {/* Footer */} { + try { + const response = await fetch("/api/otp/send", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + mobileNumber: localStorage.getItem("userMobNo"), + type: "EMandate", + }), + }); + + if (!response.ok) throw new Error("Failed to resend OTP"); + + notifications.show({ + withBorder: true, + color: "blue", + title: "OTP Resent", + message: "A new OTP has been sent to your registered mobile number.", + autoClose: 4000, + }); + } catch { + notifications.show({ + withBorder: true, + color: "red", + title: "Error", + message: "Failed to resend OTP. Please try again.", + autoClose: 5000, + }); + } + }; + // STEP 2: Verify OTP and complete action const handleOtpSubmit = async () => { - // if (!otp) { - // notifications.show({ - // withBorder: true, - // color: "red", - // title: "Invalid Input", - // message: "Please enter OTP before proceed", - // autoClose: 5000, - // }); - // } + if (!otp) { + notifications.show({ + withBorder: true, + color: "red", + title: "Invalid Input", + message: "Please enter OTP before proceed", + autoClose: 5000, + }); + } if (!pendingAction) return; try { - const response = await fetch(`/api/otp/verify?mobileNumber=${7890544527}`, { + const response = await fetch(`/api/otp/verify?mobileNumber=${localStorage.getItem("userMobNo")}`, { method: "POST", headers: { "Content-Type": "application/json", @@ -400,8 +432,8 @@ export default function MandatePage() { {/* OTP MODAL */} - setOtpModalOpen(false)} title="Enter OTP" centered> - An OTP has been sent to your registered mobile number. + setOtpModalOpen(false)} title="OTP Verification" centered> + An OTP has been sent to your registered mobile number. - if you did not received the OTP in SMS,you can click click here to resend the SMS + + If you did not receive the OTP in SMS, you can{" "} + + click here to resend the SMS + + . +