merge both code

src/app/ChangePassword/page.tsx

@@ -5,9 +5,10 @@ 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 CaptchaImage from './CaptchaImage';
+import { IconEye, IconEyeOff } from '@tabler/icons-react';
 
 export default function ChangeLoginPwd() {
   const router = useRouter();
@@ -18,6 +19,10 @@ export default function ChangeLoginPwd() {
   const [captchaInput, setCaptchaInput] = useState('');
   const [captchaError, setCaptchaError] = useState('');
 
+
+  const [confirmVisible, setConfirmVisible] = useState(false);
+  const toggleConfirmVisibility = () => setConfirmVisible((v) => !v);
+
   useEffect(() => {
     generateCaptcha();
   }, []);
@@ -122,11 +127,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%" }}
@@ -162,6 +172,16 @@ export default function ChangeLoginPwd() {
                       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()}
@@ -232,4 +252,4 @@ export default function ChangeLoginPwd() {
       </Providers >
     );
   }
-}
+}