change login password and change transaction password pages validation add

src/app/ChangePassword/page.tsx

@@ -5,14 +5,13 @@ import { notifications } from "@mantine/notifications";
 import { Providers } from "@/app/providers";
 import { useRouter } from "next/navigation";
 import NextImage from "next/image";
-import myImage from '@/app/image/ebanking.jpg';
+import logo from '@/app/image/logo.jpg';
 import changePwdImage from '@/app/image/changepw.png';
 import dynamic from 'next/dynamic';
 import RegistrationTimeline from '../_components/timeline/RegistrationTimeline';
 import CaptchaImage from './CaptchaImage'; // adjust path if needed
 
-
-
+import { IconEye, IconEyeOff } from '@tabler/icons-react';
 
 
 function generateCaptcha(length = 6) {
@@ -30,6 +29,15 @@ export default function Changeloginpwd() {
 
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
+
+
+  //const [loginVisible, setLoginVisible] = useState(false);
+  const [confirmVisible, setConfirmVisible] = useState(false);
+
+  // const toggleLoginVisibility = () => setLoginVisible((v) => !v);
+  const toggleConfirmVisibility = () => setConfirmVisible((v) => !v);
+
+
   const [error, setError] = useState("");
 
   const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
@@ -41,14 +49,7 @@ export default function Changeloginpwd() {
 
 
 
-  // useEffect(() => {
-  //   setCaptcha(generateCaptcha());
-  // }, []);
 
-  // const regenerateCaptcha = () => {
-  //   setCaptcha(generateCaptcha());
-  //   setInputCaptcha("");
-  // };
 
   useEffect(() => {
     generateCaptcha();
@@ -68,11 +69,16 @@ export default function Changeloginpwd() {
   return (
     <Providers>
       <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
-        <Box style={{ position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100 }}>
+        <Box style={{
+          position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100,
+          display: "flex",
+          justifyContent: "flex-start",
+          background: "linear-gradient(15deg,rgba(2, 163, 85, 1) 55%, rgba(101, 101, 184, 1) 100%)"
+        }}>
           <Image
             // radius="md"
             fit="cover"
-            src={myImage}
+            src={logo}
             component={NextImage}
             alt="ebanking"
             style={{ width: "100%", height: "100%" }}
@@ -101,17 +107,33 @@ export default function Changeloginpwd() {
                     onCut={(e) => e.preventDefault()}
                   />
 
+
                   <PasswordInput
+                    mt="md"
                     label="Confirm Login Password"
                     placeholder="Enter your password"
                     required
                     id="confirmPassword"
+                    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()}
-
                   />
 
+
+
+
                   {/* CAPTCHA */}
                   <div style={{ marginTop: 20 }}>
                     <label style={{ fontWeight: 600 }}>Enter CAPTCHA *</label>
@@ -220,3 +242,7 @@ export default function Changeloginpwd() {
     </Providers >
   );
 }
+function setConfirmVisible(arg0: (v: any) => boolean) {
+  throw new Error("Function not implemented.");
+}
+