feat : api integrated change login password and change transaction password

.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+/package-lock.json
 /.pnp
 .pnp.js
 .yarn/install-state.gz

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

@@ -1,24 +1,31 @@
 "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";
+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");
-    const [step, setStep] = useState<"form" | "otp" | "final">("form"); // ✅ steps control
-    const [passwordHistory] = useState(["Pass@1234", "OldPass@123", "MyPass#2023"]);
     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,14 @@ 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:
+                    message: "Password must contain at least one capital letter(A-Z), one digit(0-9), one special symbol(e.g.,@,#,$), and be 8-15 characters long.",
-                        "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;
-            }
-
             if (newPassword !== confirmPassword) {
                 notifications.show({
                     title: "Password Mismatch",
@@ -82,7 +67,6 @@ export default function ChangePassword() {
                 });
                 return;
             }
-
             if (captchaInput !== captcha) {
                 notifications.show({
                     title: "Invalid Captcha",
@@ -93,7 +77,8 @@ export default function ChangePassword() {
                 return;
             }
 
-            // ✅ Passed → move to OTP
+            // Passed → move to OTP
+            await handleGenerateOtp();
             setStep("otp");
             notifications.show({
                 title: "OTP Sent",
@@ -105,7 +90,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 +111,55 @@ export default function ChangePassword() {
 
         // Step 3 → Final Change Password
         if (step === "final") {
+            const token = localStorage.getItem("access_token");
+            if (!token) {
+                router.push("/login");
+                return;
+            }
+            try {
+                const response = await fetch("/api/auth/change/login_password", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        Authorization: `Bearer ${token}`,
+                    },
+                    body: JSON.stringify({
+                        OldLPsw: oldPassword,
+                        newLPsw: newPassword,
+                        confirmLPsw: 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: "Password Changed",
+                        title: "Failed",
-                message: "Your password has been successfully updated.",
+                        message: result.error || "Failed to set login password",
+                        color: "Red",
+                        autoClose: false,
+                    });
+                }
+                if (response.ok) {
+                    notifications.show({
+                        title: "Success",
+                        message: "Login 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,12 +176,12 @@ 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 Login Password
             </Title>
             {/* Scrollable form area */}
-            <div style={{ overflowY: "auto", maxHeight: "280px", paddingRight: 8 }}>
+            <div style={{ overflowY: "auto", maxHeight: "280px" }}>
+                <Group grow>
                     <PasswordInput
                         label="Old Password"
                         placeholder="Enter old password"
@@ -163,13 +191,14 @@ export default function ChangePassword() {
                         mb="xs"
                         readOnly={step !== "form"}
                     />
-                <Group grow>
                     <PasswordInput
                         label="New Password"
                         placeholder="Enter new password"
                         value={newPassword}
                         onChange={(e) => setNewPassword(e.currentTarget.value)}
                         withAsterisk
+                        minLength={8}
+                        maxLength={15}
                         mb="xs"
                         readOnly={step !== "form"}
                     />
@@ -187,11 +216,8 @@ export default function ChangePassword() {
                         onPaste={(e) => e.preventDefault()}
                         onCut={(e) => e.preventDefault()}
                     />
-
                 </Group>
-
                 {/* CAPTCHA */}
-
                 <div style={{ marginTop: 5 }}>
                     <label style={{ display: "block", marginBottom: 4, fontSize: "14px" }}>
 
@@ -246,10 +272,6 @@ export default function ChangePassword() {
                         readOnly={otpValidated}
                     />
                 )}
-
-            </div>
-
-            {/* Buttons */}
                 <Group mt="md" gap="sm">
                     <Button onClick={handleSubmit}>
                         {step === "form" && "Submit"}
@@ -260,6 +282,10 @@ export default function ChangePassword() {
                         Reset
                     </Button>
                 </Group>
+            </div>
+            <Text size="sm" c="dimmed" style={{ marginTop: "40px" }}>
+                Note: Your new password must be 8–15 characters long and contain at least one number and one special character.
+            </Text>
         </Paper>
     );
 }

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");
-    const [step, setStep] = useState<"form" | "otp" | "final">("form"); // ✅ steps control
-    const [passwordHistory] = useState(["Pass@1234", "OldPass@123", "MyPass#2023"]);
     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") {
+            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: "Password Changed",
+                        title: "Failed",
-                message: "Your password has been successfully updated.",
+                        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>

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

@@ -135,7 +135,6 @@ export default function ChangePassword() {
                 router.push("/login");
                 return;
             }
-
             try {
                 const response = await fetch("/api/auth/transaction_password", {
                     method: "POST",
@@ -196,8 +195,8 @@ export default function ChangePassword() {
             <div style={{ overflowY: "auto", maxHeight: "280px", paddingRight: 8 }}>
                 <Group grow>
                     <PasswordInput
-                        label="New Password"
+                        label="New Transaction Password"
-                        placeholder="Enter new password"
+                        placeholder="Enter new Transaction password"
                         value={newPassword}
                         onChange={(e) => setNewPassword(e.currentTarget.value)}
                         withAsterisk

src/app/_util/getBankLogo.ts

@@ -9,15 +9,18 @@ import kccb from "@/app/image/bank_logo/kccb.jpg";
 import logo from "@/app/image/bank_logo/bank.jpg";
  
 export function getBankLogo(bankName: string): StaticImageData {
-    const logos: Record<string, StaticImageData> = {
+  if (!bankName) return logo;
-        "STATE BANK": sbi,
-        "PUNJAB NATIONAL": pnb,
-        "HDFC": hdfc,
-        "ICICI": icici,
-        "AXIS": axis,
-        "BANK OF INDIA": BOI,
-        "KANGRA": kccb,
-    };
  
-    return logos[bankName.toUpperCase()] ?? logo;
+  const upperName = bankName.toUpperCase();
+ 
+  if (upperName.startsWith("HDFC")) return hdfc;
+  if (upperName.startsWith("SBI") || upperName.startsWith("STATE BANK")) return sbi;
+  if (upperName.startsWith("ICICI")) return icici;
+  if (upperName.startsWith("PNB") || upperName.startsWith("PUNJAB NATIONAL")) return pnb;
+  if (upperName.startsWith("AXIS")) return axis;
+  if (upperName.startsWith("THE KANGRA CENTRAL")) return kccb;
+  if (upperName.startsWith("BANK OF INDIA") || upperName.startsWith("BOI")) return BOI;
+ 
+  return logo;
 }
+ 

src/app/administrator/home/UserConfiguration.tsx

@@ -86,8 +86,6 @@ export default function UserConfiguration() {
     else {
       const rightsData = {
         CIF,
-        // internetBanking,
-        // mobileBanking,
       };
       console.log('Submitting rights:', rightsData);
       notifications.show({

src/app/login/page.tsx

@@ -6,7 +6,7 @@ import { Providers } from "@/app/providers";
 import { useRouter } from "next/navigation";
 import NextImage from "next/image";
 import logo from '@/app/image/logo1.jpg';
-import frontPage from '@/app/image/ib_front.jpg';
+import frontPage from '@/app/image/ib_front_1.jpg';
 import dynamic from 'next/dynamic';
 import { generateCaptcha } from '@/app/captcha';
 import { IconShieldLockFilled } from "@tabler/icons-react";
@@ -95,20 +95,20 @@ export default function Login() {
                     password: psw,
                 }),
             });
+            const data = await response.json();
+            console.log(data);
             if (!response.ok) {
                 notifications.show({
                     withBorder: true,
                     color: "red",
                     title: "Error",
-                    message: "Internal Server Error",
+                    message: data?.error || "Internal Server Error",
                     autoClose: 5000,
                 });
                 localStorage.removeItem("access_token");
                 localStorage.removeItem("remitter_name");
                 return;
             }
-            const data = await response.json();
-            console.log(data);
             setIsLogging(true);
             if (response.ok) {
                 console.log(data);