feat : APi integrated foe change password and change trans password

feat: Change the UI design

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

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { TextInput, PasswordInput, Button, Title, Paper, Group, Box } from "@mantine/core";
+import { TextInput, PasswordInput, Button, Title, Paper, Group, Box, Text } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { IconLock } from "@tabler/icons-react";
 import { generateCaptcha } from "@/app/captcha";
@@ -183,16 +183,17 @@ export default function ChangePassword() {
             </Title>
 
             {/* Scrollable form area */}
-            <div style={{ overflowY: "auto", maxHeight: "280px", paddingRight: 8 }}>
-                <PasswordInput
-                    label="Old Password"
-                    placeholder="Enter old password"
-                    value={oldPassword}
-                    onChange={(e) => setOldPassword(e.currentTarget.value)}
-                    withAsterisk
-                    mb="xs"
-                />
+            <div style={{ overflowY: "auto", maxHeight: "280px" }}>
                 <Group grow>
+                    <PasswordInput
+                        label="Old Password"
+                        placeholder="Enter old password"
+                        value={oldPassword}
+                        onChange={(e) => setOldPassword(e.currentTarget.value)}
+                        withAsterisk
+                        mb="xs"
+                    />
+
                     <PasswordInput
                         label="New Password"
                         placeholder="Enter new password"
@@ -217,9 +218,7 @@ export default function ChangePassword() {
                     />
 
                 </Group>
-
                 {/* CAPTCHA */}
-
                 <div style={{ marginTop: 5 }}>
                     <label style={{ display: "block", marginBottom: 4, fontSize: "14px" }}>
 
@@ -274,20 +273,22 @@ export default function ChangePassword() {
                         readOnly={otpValidated}
                     />
                 )}
-
+                <Group mt="md" gap="sm">
+                    <Button onClick={handleSubmit}>
+                        {step === "form" && "Submit"}
+                        {step === "otp" && "Validate OTP"}
+                        {step === "final" && "Change Password"}
+                    </Button>
+                    <Button variant="outline" color="gray" onClick={resetForm}>
+                        Reset
+                    </Button>
+                </Group>
             </div>
 
-            {/* Buttons */}
-            <Group mt="md" gap="sm">
-                <Button onClick={handleSubmit}>
-                    {step === "form" && "Submit"}
-                    {step === "otp" && "Validate OTP"}
-                    {step === "final" && "Change Password"}
-                </Button>
-                <Button variant="outline" color="gray" onClick={resetForm}>
-                    Reset
-                </Button>
-            </Group>
+            <Text size="sm" c="dimmed" style={{ marginTop: "40px" }}>
+                Note: Your new Transaction password must be 8–15 characters long and contain at least one number and one special character.
+            </Text>
+
         </Paper>
     );
 }