settings:change login password page implementation.

src/app/(main)/funds_transfer/send_beneficiary/page.tsx

@@ -14,7 +14,7 @@ interface accountData {
     custname: string;
 }
 
-export const MockBeneficiaryData =
+const MockBeneficiaryData =
     [
         {
             'stBankName': 'Kangra Central Co-operative Bank',

src/app/(main)/funds_transfer/send_beneficiary/sendBeneficiaryOthers.tsx

@@ -5,7 +5,6 @@ import { Button, Group, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, Te
 import { notifications } from "@mantine/notifications";
 import { useRouter } from "next/navigation";
 import { generateOTP } from '@/app/OTPGenerator';
-import { MockBeneficiaryData } from './page';
 
 interface accountData {
     stAccountNo: string;
@@ -13,6 +12,37 @@ interface accountData {
     stAvailableBalance: string;
     custname: string;
 }
+const MockBeneficiaryData =
+    [
+        {
+            'stBankName': 'Kangra Central Co-operative Bank',
+            'stBenAccountNo': '50077736845',
+            'stBenName': 'RAJAT MAHARANA',
+        },
+        {
+            'stBankName': 'Kangra Central Co-operative Bank',
+            'stBenAccountNo': '50077742351',
+            'stBenName': 'RAJAT MAHARANA',
+        },
+        {
+            'stBankName': 'Kangra Central Co-operative Bank',
+            'stBenAccountNo': '20002076570',
+            'stBenName': 'Mr. PUSHKAR . SHARMA',
+        },
+        {
+            'stBankName': 'State Bank of India',
+            'stBenAccountNo': '50077742361',
+            'stIFSC': 'SBIN0004567',
+            'stBenName': 'Sachin Sharma',
+        },
+        {
+            'stBankName': 'ICICI',
+            'stBenAccountNo': '90088842361',
+            'stIFSC': 'ICICI0004567',
+            'stBenName': 'Eshika Paul',
+        },
+    ]
+
 
 export default function SendToBeneficiaryOthers() {
     const router = useRouter();

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

@@ -0,0 +1,235 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import {
+    TextInput,
+    PasswordInput,
+    Button,
+    Title,
+    Paper,
+    Box,
+    Text,
+    Group,
+    Grid,
+} from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { IconEye, IconEyeOff, IconLock } from "@tabler/icons-react";
+import CaptchaImage from "@/app/SetPassword/CaptchaImage";
+import { generateCaptcha } from "@/app/captcha";
+
+const ChangePassword: React.FC = () => {
+    const [oldPassword, setOldPassword] = useState("");
+    const [newPassword, setNewPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [captcha, setCaptcha] = useState("");
+    const [showOld, setShowOld] = useState(false);
+    const [showNew, setShowNew] = useState(false);
+    const [showConfirm, setShowConfirm] = useState(false);
+    // const [captchaCode] = useState("X7pK9");
+    const [inputCaptcha, setInputCaptcha] = useState("");
+    const [captchaInput, setCaptchaInput] = useState('');
+    const [captchaError, setCaptchaError] = useState('');
+    const [passwordHistory] = useState(["Pass@1234", "OldPass@123", "MyPass#2023"]);
+    const icon = <IconLock size={18} stroke={1.5} />;
+
+
+    useEffect(() => {
+        const loadCaptcha = async () => {
+            const newCaptcha = await generateCaptcha();
+            setCaptcha(newCaptcha);
+        };
+        loadCaptcha();
+    }, []);
+
+    const regenerateCaptcha = () => {
+        // setCaptcha(generateCaptcha());
+        const loadCaptcha = async () => {
+            const newCaptcha = await generateCaptcha();
+            setCaptcha(newCaptcha);
+        };
+        loadCaptcha();
+        setInputCaptcha("");
+    };
+
+
+
+
+    const validatePasswordPolicy = (password: string) => {
+        return /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/.test(password);
+    };
+
+    const handleSubmit = () => {
+        // 1. Check all mandatory fields
+        if (!oldPassword || !newPassword || !confirmPassword || !captcha) {
+            notifications.show({
+                title: "Missing Field",
+                message: "Please fill all mandatory fields.",
+                color: "red",
+            });
+            return;
+        }
+
+        // 2. Validate old password (simulate real check)
+        const actualOldPassword = "OldPass@123"; // Simulated stored password
+        if (oldPassword !== actualOldPassword) {
+            notifications.show({
+                title: "Old Password Incorrect",
+                message: "Entered old password does not match.",
+                color: "red",
+            });
+            return;
+        }
+
+        // 3. New password validation
+        if (!validatePasswordPolicy(newPassword)) {
+            notifications.show({
+                title: "Invalid Password",
+                message:
+                    "Password must be at least 8 characters and contain alphanumeric and special characters.",
+                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;
+        }
+
+        // 4. Confirm password check
+        if (newPassword !== confirmPassword) {
+            notifications.show({
+                title: "Password Mismatch",
+                message: "Confirm password does not match new password.",
+                color: "red",
+            });
+            return;
+        }
+
+
+        // else if (captchaInput !== captcha) {
+        //     setCaptchaError("Incorrect CAPTCHA.");
+        //     return;
+        // }
+        // // Success
+        // notifications.show({
+        //     title: "Success",
+        //     message: "Your password has been reset successfully.",
+        //     color: "green",
+        // });
+
+        if (captchaInput !== captcha) {
+            setCaptchaError("Incorrect CAPTCHA.");
+            return;
+        }
+
+        // ✅ Clear error if CAPTCHA is correct
+        setCaptchaError("");
+
+        // Success
+        notifications.show({
+            title: "Success",
+            message: "Your password has been reset successfully.",
+            color: "green",
+        });
+
+    };
+
+    return (
+        <Paper shadow="sm" radius="md" p="md" withBorder h={400}>
+
+            <Title order={3} mb="sm" >
+                Change Login Password
+            </Title>
+
+            {/* Scrollable form section */}
+            <div style={{ overflowY: 'auto', maxHeight: '310px', paddingRight: 8 }}>
+                <PasswordInput
+                    label="Old Password"
+                    placeholder="Enter old password"
+                    value={oldPassword}
+                    onChange={(e) => setOldPassword(e.currentTarget.value)}
+                    visible={showOld}
+                    onVisibilityChange={setShowOld}
+                    required
+                    mb="xs"
+                />
+
+                <PasswordInput
+                    label="New Password"
+                    placeholder="Enter new password"
+                    value={newPassword}
+                    onChange={(e) => setNewPassword(e.currentTarget.value)}
+                    visible={showNew}
+                    onVisibilityChange={setShowNew}
+                    required
+                    mb="xs"
+                />
+
+                <PasswordInput
+                    label="Confirm Password"
+                    placeholder="Re-enter new password"
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.currentTarget.value)}
+                    visible={showConfirm}
+                    onVisibilityChange={setShowConfirm}
+                    required
+                    rightSection={icon}
+                    mb="sm"
+
+                    onCopy={(e) => e.preventDefault()}
+                    onPaste={(e) => e.preventDefault()}
+                    onCut={(e) => e.preventDefault()}
+                />
+
+                {/* CAPTCHA */}
+                <div style={{ marginTop: 5 }}>
+                    <label style={{ display: 'block', marginBottom: 4, fontSize: '14px' }}>Enter CAPTCHA</label>
+
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 5 }}>
+                        {/* CAPTCHA Image */}
+                        <div style={{ display: 'flex', alignItems: 'center', height: 30 }}>
+                            <CaptchaImage text={captcha} />
+                        </div>
+
+                        {/* Refresh Button */}
+                        <Button
+                            size="xs"
+                            variant="outline"
+                            onClick={regenerateCaptcha}
+                            style={{ height: 30, padding: '0 10px', lineHeight: '1' }}
+                        >
+                            Refresh
+                        </Button>
+
+                        {/* TextInput */}
+                        <TextInput
+                            placeholder="Enter above text"
+                            value={captchaInput}
+                            onChange={(e) => setCaptchaInput(e.currentTarget.value)}
+                            required
+                            style={{ height: 30, flexGrow: 1 }}
+                        />
+                    </div>
+
+                    <p style={{ color: captchaError ? 'red' : 'transparent', fontSize: '12px', textAlign: 'center', minHeight: 16 }}>
+                        {captchaError || '\u00A0'}
+                    </p>
+                </div>
+            </div>
+
+            {/* Fixed Save Button */}
+            <Button onClick={handleSubmit}>
+                Submit
+            </Button>
+
+        </Paper>
+
+    );
+};
+
+export default ChangePassword;

src/app/SetPassword/page.tsx

@@ -187,15 +187,7 @@ export default function SetLoginPwd() {
                       value={confirmPassword}
                       onChange={(e) => setConfirmPassword(e.currentTarget.value)}
                       type={confirmVisible ? 'text' : 'password'}
-                      // rightSection={
-                      //   <button
-                      //     type="button"
-                      //     onClick={toggleConfirmVisibility}
-                      //     style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'grey' }}
-                      //   >
-                      //     {confirmVisible ? <IconEyeOff size={18} /> : <IconEye size={18} />}
-                      //   </button>
-                      // }
+
                       onCopy={(e) => e.preventDefault()}
                       onPaste={(e) => e.preventDefault()}
                       onCut={(e) => e.preventDefault()}