feat: Resend button and timer

src/app/(main)/settings/change_txn_password/page.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useState } from "react";
 import { TextInput, PasswordInput, Button, Title, Paper, Group, Box, Text } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
-import { IconLock } from "@tabler/icons-react";
+import { IconLock, IconRefresh } from "@tabler/icons-react";
 import { generateCaptcha } from "@/app/captcha";
 import { useRouter } from "next/navigation";
 
@@ -15,6 +15,8 @@ export default function ChangePassword() {
     const [captcha, setCaptcha] = useState("");
     const [captchaInput, setCaptchaInput] = useState("");
     const [otp, setOtp] = useState("");
+    const [countdown, setCountdown] = useState(180);
+    const [timerActive, setTimerActive] = useState(false);
     const [generatedOtp, setGeneratedOtp] = useState('');
     const [otpValidated, setOtpValidated] = useState(false);
     const [step, setStep] = useState<"form" | "otp" | "final">("form");
@@ -23,6 +25,8 @@ export default function ChangePassword() {
     const handleGenerateOtp = async () => {
         const value = "123456"; // Or generate a random OTP
         setGeneratedOtp(value);
+        setCountdown(180);
+        setTimerActive(true);
         return value;
     };
 
@@ -30,6 +34,22 @@ export default function ChangePassword() {
         regenerateCaptcha();
     }, []);
 
+    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]);
+
     const regenerateCaptcha = async () => {
         const newCaptcha = await generateCaptcha();
         setCaptcha(newCaptcha);
@@ -79,7 +99,7 @@ export default function ChangePassword() {
                 return;
             }
 
-            // ✅ Passed → move to OTP
+            // Passed → move to OTP
             await handleGenerateOtp();
             setStep("otp");
             notifications.show({
@@ -263,18 +283,41 @@ export default function ChangePassword() {
                         />
                     </div>
                 </div>
-                {step !== "form" && (
-                    <PasswordInput
-                        label="Enter OTP"
-                        placeholder="Enter 6-digit OTP"
-                        value={otp}
-                        onChange={(e) => setOtp(e.currentTarget.value)}
-                        withAsterisk
-                        mt="sm"
-                        maxLength={6}
-                        readOnly={otpValidated}
-                    />
-                )}
+                <Group grow>
+                    {step !== "form" && (
+                        <>
+                            <Group gap="xs" align="flex-end">
+                                <PasswordInput
+                                    label="OTP"
+                                    placeholder="Enter OTP"
+                                    type="otp"
+                                    value={otp}
+                                    maxLength={6}
+                                    onChange={(e) => setOtp(e.currentTarget.value)}
+                                    withAsterisk
+                                    disabled={otpValidated}
+                                    style={{ flex: 1 }}
+                                />
+                                {!otpValidated && (
+                                    timerActive ? (
+                                        <Text size="xs" c="dimmed" style={{ minWidth: "120px" }}>
+                                            Resend OTP will be enabled in{" "}
+                                            {String(Math.floor(countdown / 60)).padStart(2, "0")}:
+                                            {String(countdown % 60).padStart(2, "0")}
+                                        </Text>
+                                    ) : (
+                                        <IconRefresh
+                                            size={22}
+                                            style={{ cursor: "pointer", color: "blue", marginBottom: "6px" }}
+                                            onClick={handleGenerateOtp}
+                                        />
+                                    )
+                                )}
+
+                            </Group>
+                        </>
+                    )}
+                </Group>
                 <Group mt="md" gap="sm">
                     <Button onClick={handleSubmit}>
                         {step === "form" && "Submit"}