feat : api integrated change login password and change transaction password

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

@@ -5,20 +5,27 @@ import { TextInput, PasswordInput, Button, Title, Paper, Group, Box } from "@man
 import { notifications } from "@mantine/notifications";
 import { IconLock } from "@tabler/icons-react";
 import { generateCaptcha } from "@/app/captcha";
+import { useRouter } from "next/navigation";
 
 export default function ChangePassword() {
+    const router = useRouter();
     const [oldPassword, setOldPassword] = useState("");
     const [newPassword, setNewPassword] = useState("");
     const [confirmPassword, setConfirmPassword] = useState("");
     const [captcha, setCaptcha] = useState("");
     const [captchaInput, setCaptchaInput] = useState("");
     const [otp, setOtp] = useState("");
+    const [generatedOtp, setGeneratedOtp] = useState('');
     const [otpValidated, setOtpValidated] = useState(false);
-
-    const [step, setStep] = useState<"form" | "otp" | "final">("form"); // ✅ steps control
-    const [passwordHistory] = useState(["Pass@1234", "OldPass@123", "MyPass#2023"]);
+    const [step, setStep] = useState<"form" | "otp" | "final">("form");
     const icon = <IconLock size={18} stroke={1.5} />;
 
+    const handleGenerateOtp = async () => {
+        const value = "123456"; // Or generate a random OTP
+        setGeneratedOtp(value);
+        return value;
+    };
+
     useEffect(() => {
         regenerateCaptcha();
     }, []);
@@ -33,7 +40,7 @@ export default function ChangePassword() {
         return /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/.test(password);
     };
 
-    const handleSubmit = () => {
+    const handleSubmit = async () => {
         // Step 1 → validate form
         if (step === "form") {
             if (!oldPassword || !newPassword || !confirmPassword || !captchaInput) {
@@ -44,36 +51,15 @@ export default function ChangePassword() {
                 });
                 return;
             }
-
-            const actualOldPassword = "Pass@123";
-            if (oldPassword !== actualOldPassword) {
-                notifications.show({
-                    title: "Old Password Incorrect",
-                    message: "Entered old password does not match.",
-                    color: "red",
-                });
-                return;
-            }
-
             if (!validatePasswordPolicy(newPassword)) {
                 notifications.show({
                     title: "Invalid Password",
                     message:
-                        "Password must be at least 8 characters and contain alphanumeric and special characters.",
+                        "Your new password must be 8–15 characters long and contain at least one number and one special character.",
                     color: "red",
                 });
                 return;
             }
-
-            if (passwordHistory.includes(newPassword)) {
-                notifications.show({
-                    title: "Password Reused",
-                    message: "New password must be different from the last 3 passwords.",
-                    color: "red",
-                });
-                return;
-            }
-
             if (newPassword !== confirmPassword) {
                 notifications.show({
                     title: "Password Mismatch",
@@ -94,6 +80,7 @@ export default function ChangePassword() {
             }
 
             // ✅ Passed → move to OTP
+            await handleGenerateOtp();
             setStep("otp");
             notifications.show({
                 title: "OTP Sent",
@@ -105,7 +92,7 @@ export default function ChangePassword() {
 
         // Step 2 → validate OTP
         if (step === "otp") {
-            if (otp !== "123456") {
+            if (otp !== generatedOtp) {
                 notifications.show({
                     title: "Invalid OTP",
                     message: "Please enter the correct OTP.",
@@ -126,12 +113,55 @@ export default function ChangePassword() {
 
         // Step 3 → Final Change Password
         if (step === "final") {
-            notifications.show({
-                title: "Password Changed",
-                message: "Your password has been successfully updated.",
-                color: "green",
-            });
-            resetForm();
+            const token = localStorage.getItem("access_token");
+            if (!token) {
+                router.push("/login");
+                return;
+            }
+            try {
+                const response = await fetch("/api/auth/change/transaction_password", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        Authorization: `Bearer ${token}`,
+                    },
+                    body: JSON.stringify({
+                        OldTPsw: oldPassword,
+                        newTPsw: newPassword,
+                        confirmTPsw: confirmPassword
+                    }),
+                });
+
+                if (response.status === 401) {
+                    localStorage.removeItem("access_token");
+                    router.push("/login");
+                    return;
+                }
+                const result = await response.json();
+                console.log(result);
+                if (!response.ok) {
+                    notifications.show({
+                        title: "Failed",
+                        message: result.error || "Failed to set transaction password",
+                        color: "Red",
+                        autoClose: false,
+                    });
+                }
+                if (response.ok) {
+                    notifications.show({
+                        title: "Success",
+                        message: "Transaction password change successfully.",
+                        color: "green",
+                    });
+                }
+                resetForm();
+            } catch (err: any) {
+                notifications.show({
+                    title: "Error",
+                    message: err.message || "Server error, please try again later",
+                    color: "red",
+                });
+            }
         }
     };
 
@@ -148,7 +178,6 @@ export default function ChangePassword() {
 
     return (
         <Paper shadow="sm" radius="md" p="md" withBorder h={400}>
-            <Title order={3} style={{color:"red"}}>More Updates comming soon .....</Title>
             <Title order={3} mb="sm">
                 Change Transaction Password
             </Title>