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()}

src/app/ChangeTxn/page.tsx

@@ -12,27 +12,14 @@ import { IconEye, IconEyeOff } from '@tabler/icons-react';
 
 export default function ChangeTransactionPwd() {
     const router = useRouter();
-<<<<<<< HEAD
     const [authorized, SetAuthorized] = useState<boolean | null>(null);
     const [password, setPassword] = useState("");
     const [confirmPassword, setConfirmPassword] = useState("");
-=======
-    const [error, setError] = useState<string | null>(null);
-    const [CIF, SetCIF] = useState("");
-    const [psw, SetPsw] = useState("");
-
-
-    //const [loginVisible, setLoginVisible] = useState(false);
-    const [confirmVisible, setConfirmVisible] = useState(false);
-
-    // const toggleLoginVisibility = () => setLoginVisible((v) => !v);
-    const toggleConfirmVisibility = () => setConfirmVisible((v) => !v);
-
-
->>>>>>> 293a7dbea0766fdf05804199800c4e3fd9174507
     const [captcha, setCaptcha] = useState("");
     const [captchaInput, setCaptchaInput] = useState('');
     const [captchaError, setCaptchaError] = useState('');
+    const [confirmVisible, setConfirmVisible] = useState(false);
+    const toggleConfirmVisibility = () => setConfirmVisible((v) => !v);
 
     useEffect(() => {
         generateCaptcha();
@@ -123,7 +110,6 @@ export default function ChangeTransactionPwd() {
         }
     }
 
-<<<<<<< HEAD
     useEffect(() => {
         const token = localStorage.getItem("access_token");
         if (!token) {
@@ -134,7 +120,8 @@ export default function ChangeTransactionPwd() {
             SetAuthorized(true);
         }
     }, []);
-=======
+
+    if (authorized) {
         return (
             <Providers>
                 <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
@@ -153,80 +140,6 @@ export default function ChangeTransactionPwd() {
                             style={{ width: "100%", height: "100%" }}
                         />
                     </Box>
-                <div style={{ marginTop: '10px' }}>
-
-                    <Box style={{ display: "flex", justifyContent: "center", alignItems: "center", columnGap: "5rem" }} bg="#c1e0f0">
-                        <Image h="85vh" fit="contain" component={NextImage} src={changePwdImage} alt="Change Password Image" />
-                        <Box h="100%" style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
-                            <Card p="xl" w="35vw">
-                                <Title order={3}
-                                    // @ts-ignore
-                                    align="center" mb="md">Set Transaction Password</Title>
-                                <form>
-                                    <PasswordInput
-                                        label="Transaction Password"
-                                        placeholder="Enter your password"
-                                        required
-                                        id="loginPassword"
-                                        onCopy={(e) => e.preventDefault()}
-                                        onPaste={(e) => e.preventDefault()}
-                                        onCut={(e) => e.preventDefault()}
-                                    />
-                                    {/* <PasswordInput
-                                        label="Confirm Transaction Password"
-                                        placeholder="Enter your password"
-                                        required
-                                        id="confirmPassword"
-                                        onCopy={(e) => e.preventDefault()}
-                                        onPaste={(e) => e.preventDefault()}
-                                        onCut={(e) => e.preventDefault()}
-                                    /> */}
-                                    <PasswordInput
-                                        mt="md"
-                                        label="Confirm Login Password"
-                                        placeholder="Enter your password"
-                                        required
-                                        id="confirmPassword"
-                                        value={psw}
-                                        onChange={(e) => SetPsw(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()}
-                                    />
-
-
-
-                                    {/* <Button fullWidth mt="sm" color="blue" onClick={() => {
-                                        router.push("/login")
-                                    }} >
-                                        Set
-                                    </Button> */}
->>>>>>> 293a7dbea0766fdf05804199800c4e3fd9174507
-
-    if (authorized) {
-        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 }}>
-                        <Image
-                            // radius="md"
-                            fit="cover"
-                            src={myImage}
-                            component={NextImage}
-                            alt="ebanking"
-                            style={{ width: "100%", height: "100%" }}
-                        />
-                    </Box>
                     <div style={{ marginTop: '10px' }}>
                         <Box style={{ display: "flex", justifyContent: "center", alignItems: "center", columnGap: "5rem" }} bg="#c1e0f0">
                             <Image h="85vh" fit="contain" component={NextImage} src={changePwdImage} alt="Change Password Image" />
@@ -253,6 +166,16 @@ export default function ChangeTransactionPwd() {
                                             required
                                             id="confirmPassword"
                                             value={confirmPassword}
+                                            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>
+                                            }
                                             onChange={(e) => setConfirmPassword(e.currentTarget.value)}
                                             onCopy={(e) => e.preventDefault()}
                                             onPaste={(e) => e.preventDefault()}