feat:change login password and change transaction password page created with all validation

src/app/ChangePassword/CaptchaImage.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect, useRef } from 'react';
+
+const CaptchaImage = ({ text }: { text: string }) => {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext('2d');
+    if (canvas && ctx) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.font = '26px Arial';
+      ctx.fillStyle = '#000';
+      ctx.setTransform(1, 0.1, -0.1, 1, 0, 0);
+      ctx.fillText(text, 10, 30);
+    }
+  }, [text]);
+
+  return <canvas ref={canvasRef} width={120} height={40} />;
+};
+
+export default CaptchaImage;

src/app/ChangePassword/clientCarousel.tsx

@@ -0,0 +1,98 @@
+'use client';
+ 
+import { Box, Image, ActionIcon } from '@mantine/core';
+import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
+import { useRef } from 'react';
+import DICGC from '@/app/image/DICGC_image.jpg';
+import objective from '@/app/image/objective.jpg';
+import frontPage from '@/app/image/ib_front_page.jpg';
+ 
+export default function CustomCarousel() {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const scrollBy = 300; // px per click
+ 
+  const scrollLeft = () => {
+    scrollRef.current?.scrollBy({ left: -scrollBy, behavior: 'smooth' });
+  };
+ 
+  const scrollRight = () => {
+    scrollRef.current?.scrollBy({ left: scrollBy, behavior: 'smooth' });
+  };
+ 
+  const images = [DICGC, objective, frontPage];
+ 
+  return (
+    <Box style={{ position: 'relative', width: '100%', overflow: 'hidden' }}>
+      {/* Scrollable container */}
+      <Box
+        ref={scrollRef}
+        style={{
+          display: 'flex',
+          overflowX: 'auto',
+          scrollSnapType: 'x mandatory',
+          gap: '1rem',
+          padding: '1rem',
+          scrollBehavior: 'smooth',
+        }}
+      >
+        {images.map((img, i) => (
+          <Box
+            key={i}
+            style={{
+              flex: '0 0 100%',
+              scrollSnapAlign: 'start',
+              height: '250px',
+              minWidth: '100%',
+              maxWidth: '100%',
+              borderRadius: '8px',
+              backgroundColor: '#f2f2f2',
+            }}
+          >
+            <Image
+              src={img.src}
+              alt={`Slide ${i + 1}`}
+              style={{
+                width: '100%',
+                height: '100%',
+                objectFit: 'contain',
+              }}
+            />
+          </Box>
+        ))}
+      </Box>
+ 
+      {/* Left Scroll Button */}
+      <ActionIcon
+        variant="filled"
+        color="blue"
+        onClick={scrollLeft}
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: '10px',
+          transform: 'translateY(-50%)',
+          zIndex: 10,
+        }}
+      >
+        <IconChevronLeft size={24} />
+      </ActionIcon>
+ 
+      {/* Right Scroll Button */}
+      <ActionIcon
+        variant="filled"
+        color="blue"
+        onClick={scrollRight}
+        style={{
+          position: 'absolute',
+          top: '50%',
+          right: '10px',
+          transform: 'translateY(-50%)',
+          zIndex: 10,
+        }}
+      >
+        <IconChevronRight size={24} />
+      </ActionIcon>
+    </Box>
+  );
+}
+ 

src/app/ChangePassword/page.module.css

@@ -0,0 +1,62 @@
+.root {
+    width: 100vw;
+    height: 100vh;
+    
+  }
+
+.title {
+    color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+    font-family:
+        Greycliff CF,
+        var(--mantine-font-family);
+}
+  
+  
+  .mobileImage {
+    @media (min-width: 48em) {
+      display: none;
+    }
+  }
+  
+.desktopImage {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    @media (max-width: 47.99em) {
+      display: none;
+    }
+  }
+
+.carousel-wrapper {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+ 
+.gradient-control {
+  width: 15%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  z-index: 2;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.6;
+  color: white;
+  pointer-events: all;
+}
+ 
+/* First control is left */
+.gradient-control:first-of-type {
+  left: 0;
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
+}
+ 
+/* Last control is right */
+.gradient-control:last-of-type {
+  right: 0;
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
+}

src/app/ChangePassword/page.tsx

@@ -0,0 +1,218 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Stack, Container, rem, Grid } from "@mantine/core";
+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 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
+
+
+
+
+
+function generateCaptcha(length = 6) {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
+}
+
+export default function Login() {
+  const router = useRouter();
+  // const [error, setError] = useState<string | null>(null);
+  //const [CIF, SetCIF] = useState("");
+  // const [psw, SetPsw] = useState("");
+  const [captcha, setCaptcha] = useState("");
+  const [inputCaptcha, setInputCaptcha] = useState("");
+
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState("");
+
+  const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
+
+  // const [captcha, setCaptcha] = useState('');
+  const [captchaInput, setCaptchaInput] = useState('');
+  const [captchaError, setCaptchaError] = useState('');
+
+
+
+
+  // useEffect(() => {
+  //   setCaptcha(generateCaptcha());
+  // }, []);
+
+  // const regenerateCaptcha = () => {
+  //   setCaptcha(generateCaptcha());
+  //   setInputCaptcha("");
+  // };
+
+  useEffect(() => {
+    generateCaptcha();
+  }, []);
+
+  const generateCaptcha = () => {
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < 6; i++) {
+      result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    setCaptcha(result);
+    setCaptchaInput('');
+    setCaptchaError('');
+  };
+
+  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" />
+            <Box h="100%" style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+              <Card p="xl" w="35vw">
+                <Title order={3}
+                  // @ts-ignore
+                  align="center" mb="md">Change User Login Password</Title>
+
+                <form >
+                  <PasswordInput
+                    label="Login Password"
+                    placeholder="Enter your password"
+                    required
+                    id="loginPassword"
+                    onCopy={(e) => e.preventDefault()}
+                    onPaste={(e) => e.preventDefault()}
+                    onCut={(e) => e.preventDefault()}
+                  />
+
+                  <PasswordInput
+                    label="Confirm Login Password"
+                    placeholder="Enter your password"
+                    required
+                    id="confirmPassword"
+                    onCopy={(e) => e.preventDefault()}
+                    onPaste={(e) => e.preventDefault()}
+                    onCut={(e) => e.preventDefault()}
+
+                  />
+
+                  {/* CAPTCHA */}
+                  <div style={{ marginTop: 20 }}>
+                    <label style={{ fontWeight: 600 }}>Enter CAPTCHA *</label>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 5 }}>
+                      <CaptchaImage text={captcha} />
+                      <Button size="xs" variant="outline" onClick={generateCaptcha}>Refresh</Button>
+                    </div>
+                    <TextInput
+                      placeholder="Enter above text"
+                      value={captchaInput}
+                      onChange={(e) => setCaptchaInput(e.currentTarget.value)}
+                      required
+                    />
+                    {captchaError && <p style={{ color: 'red' }}>{captchaError}</p>}
+                  </div>
+
+
+
+
+                  {/* <Button fullWidth mt="sm" color="blue" onClick={() => {
+                    router.push("/ChangeTxn")
+                  }} >
+                    Set
+                  </Button> */}
+
+                  <Button
+                    fullWidth
+                    mt="sm"
+                    color="blue"
+                    onClick={() => {
+                      let pwd = (document.getElementById("loginPassword") as HTMLInputElement).value;
+                      let confirmPwd = (document.getElementById("confirmPassword") as HTMLInputElement).value;
+                      const pwdRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
+                      if (!pwd || !confirmPwd) {
+                        alert("Both password fields are required.");
+                      } else if (pwd !== confirmPwd) {
+                        alert("Passwords do not match.");
+                      }
+                      else if (!pwdRegex.test(pwd)) {
+                        alert("Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.");
+                      }
+                      else if (captchaInput !== captcha) {
+                        setCaptchaError("Incorrect CAPTCHA.");
+                      }
+
+                      else {
+                        // If all checks pass
+                        router.push("/ChangeTxn");
+                        notifications.show({
+                          title: 'Password Change',
+                          message: 'Login Password has been sucessfully updated',
+                          color: "green",
+                          position: 'bottom-center',
+                        })
+                      }
+                    }}
+                  >
+                    Set
+                  </Button>
+                  {/* <Button onClick={() => {
+                    notifications.show({
+                      title: 'Default notification',
+                      message: 'Do not forget to star Mantine on GitHub! test',
+                    })
+                  }} >Test</Button> */}
+                </form>
+
+                <br></br>
+                <Box
+                  style={{
+                    flex: 1,
+                    borderLeft: '1px solid #ccc',
+                    paddingLeft: 16,
+                    minHeight: 90,
+
+                  }}
+                >
+                  <Text size="sm">
+                    <strong>Note:</strong> Password will contains minimum one alphabet, one digit, one special symbol and total 8 charecters.
+                  </Text>
+                </Box>
+              </Card>
+            </Box>
+          </Box>
+          <Box
+            component="footer"
+            style={{
+              width: "100%",
+              textAlign: "center",
+              padding: "10px 0",
+              bottom: 0,
+              left: 0,
+              zIndex: 1000,
+              fontSize: "14px",
+            }}
+          >
+            <Text>
+              © 2025 KCC Bank. All rights reserved. {" "}
+
+            </Text>
+          </Box>
+        </div>
+      </div>
+    </Providers >
+  );
+}

src/app/ChangeTxn/CaptchaImage.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect, useRef } from 'react';
+
+const CaptchaImage = ({ text }: { text: string }) => {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext('2d');
+    if (canvas && ctx) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.font = '26px Arial';
+      ctx.fillStyle = '#000';
+      ctx.setTransform(1, 0.1, -0.1, 1, 0, 0);
+      ctx.fillText(text, 10, 30);
+    }
+  }, [text]);
+
+  return <canvas ref={canvasRef} width={120} height={40} />;
+};
+
+export default CaptchaImage;

src/app/ChangeTxn/clientCarousel.tsx

@@ -0,0 +1,98 @@
+'use client';
+ 
+import { Box, Image, ActionIcon } from '@mantine/core';
+import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
+import { useRef } from 'react';
+import DICGC from '@/app/image/DICGC_image.jpg';
+import objective from '@/app/image/objective.jpg';
+import frontPage from '@/app/image/ib_front_page.jpg';
+ 
+export default function CustomCarousel() {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const scrollBy = 300; // px per click
+ 
+  const scrollLeft = () => {
+    scrollRef.current?.scrollBy({ left: -scrollBy, behavior: 'smooth' });
+  };
+ 
+  const scrollRight = () => {
+    scrollRef.current?.scrollBy({ left: scrollBy, behavior: 'smooth' });
+  };
+ 
+  const images = [DICGC, objective, frontPage];
+ 
+  return (
+    <Box style={{ position: 'relative', width: '100%', overflow: 'hidden' }}>
+      {/* Scrollable container */}
+      <Box
+        ref={scrollRef}
+        style={{
+          display: 'flex',
+          overflowX: 'auto',
+          scrollSnapType: 'x mandatory',
+          gap: '1rem',
+          padding: '1rem',
+          scrollBehavior: 'smooth',
+        }}
+      >
+        {images.map((img, i) => (
+          <Box
+            key={i}
+            style={{
+              flex: '0 0 100%',
+              scrollSnapAlign: 'start',
+              height: '250px',
+              minWidth: '100%',
+              maxWidth: '100%',
+              borderRadius: '8px',
+              backgroundColor: '#f2f2f2',
+            }}
+          >
+            <Image
+              src={img.src}
+              alt={`Slide ${i + 1}`}
+              style={{
+                width: '100%',
+                height: '100%',
+                objectFit: 'contain',
+              }}
+            />
+          </Box>
+        ))}
+      </Box>
+ 
+      {/* Left Scroll Button */}
+      <ActionIcon
+        variant="filled"
+        color="blue"
+        onClick={scrollLeft}
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: '10px',
+          transform: 'translateY(-50%)',
+          zIndex: 10,
+        }}
+      >
+        <IconChevronLeft size={24} />
+      </ActionIcon>
+ 
+      {/* Right Scroll Button */}
+      <ActionIcon
+        variant="filled"
+        color="blue"
+        onClick={scrollRight}
+        style={{
+          position: 'absolute',
+          top: '50%',
+          right: '10px',
+          transform: 'translateY(-50%)',
+          zIndex: 10,
+        }}
+      >
+        <IconChevronRight size={24} />
+      </ActionIcon>
+    </Box>
+  );
+}
+ 

src/app/ChangeTxn/page.modukle.css

@@ -0,0 +1,62 @@
+.root {
+    width: 100vw;
+    height: 100vh;
+    
+  }
+
+.title {
+    color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+    font-family:
+        Greycliff CF,
+        var(--mantine-font-family);
+}
+  
+  
+  .mobileImage {
+    @media (min-width: 48em) {
+      display: none;
+    }
+  }
+  
+.desktopImage {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    @media (max-width: 47.99em) {
+      display: none;
+    }
+  }
+
+.carousel-wrapper {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+ 
+.gradient-control {
+  width: 15%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  z-index: 2;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.6;
+  color: white;
+  pointer-events: all;
+}
+ 
+/* First control is left */
+.gradient-control:first-of-type {
+  left: 0;
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
+}
+ 
+/* Last control is right */
+.gradient-control:last-of-type {
+  right: 0;
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
+}

src/app/ChangeTxn/page.tsx

@@ -0,0 +1,279 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Stack, Container, rem, Grid } from "@mantine/core";
+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 changePwdImage from '@/app/image/changepw.png';
+import dynamic from 'next/dynamic';
+import CaptchaImage from './CaptchaImage';
+
+function generateCaptcha(length = 6) {
+    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
+}
+
+export default function Login() {
+    const router = useRouter();
+    const [error, setError] = useState<string | null>(null);
+    const [CIF, SetCIF] = useState("");
+    const [psw, SetPsw] = useState("");
+    const [captcha, setCaptcha] = useState("");
+    const [inputCaptcha, setInputCaptcha] = useState("");
+    const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
+    //const [captcha, setCaptcha] = useState('');
+    const [captchaInput, setCaptchaInput] = useState('');
+    const [captchaError, setCaptchaError] = useState('');
+    // const [isClient,SetIsClient] =useState(false);
+
+
+    // useEffect(()=> SetIsClient(true),[]);
+
+    // useEffect(() => {
+    //     setCaptcha(generateCaptcha());
+    // }, []);
+
+    // const regenerateCaptcha = () => {
+    //     setCaptcha(generateCaptcha());
+    //     setInputCaptcha("");
+    // };
+
+    useEffect(() => {
+        generateCaptcha();
+    }, []);
+
+    const generateCaptcha = () => {
+        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        let result = '';
+        for (let i = 0; i < 6; i++) {
+            result += chars.charAt(Math.floor(Math.random() * chars.length));
+        }
+        setCaptcha(result);
+        setCaptchaInput('');
+        setCaptchaError('');
+    };
+
+    async function handleLogin(e: React.FormEvent) {
+        e.preventDefault();
+        const onlyDigit = /^\d{11}$/;
+        if (!onlyDigit.test(CIF)) {
+            setError('Input value must be 11 digit');
+        }
+
+        if (inputCaptcha !== captcha) {
+            notifications.show({
+                withBorder: true,
+                color: "red",
+                title: "Captcha Error",
+                message: "Please enter the correct captcha",
+                autoClose: 5000,
+            });
+            return;
+        }
+
+        if (CIF === "30022497139" && psw === "SecurePass123!") {
+            const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30";
+            localStorage.setItem("customerNumber", CIF);
+            localStorage.setItem("password", psw);
+            localStorage.setItem("access_token", token);
+            router.push("/home");
+        } else {
+            // SetCIF('');
+            // SetPsw('');
+            // setCaptcha('');
+            notifications.show({
+                withBorder: true,
+                color: "red",
+                title: "Wrong User Id or Password",
+                message: "Wrong User Id or Password",
+                autoClose: 5000,
+            });
+        }
+    }
+
+    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' }}>
+                    {/* <div style={{ display: "flex", height: "70vh", overflow: "hidden", position: "relative" }}>
+            <div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
+              <Image
+                fit="cover"
+                src={changePwdImage}
+                component={NextImage}
+                alt="ebanking"
+                style={{ width: "100%", height: "100%" }}
+              />
+            </div>
+            <Card p="xl">
+              <Title order={3}
+                // @ts-ignore
+                align="center" mb="md">Change User Login Password</Title>
+              <form>
+                <PasswordInput
+                  label="Login Password"
+                  placeholder="Enter your password"
+                  required
+                />
+                <PasswordInput
+                  label="Confirm Login Password"
+                  placeholder="Enter your password"
+                  required
+                />
+                <Button fullWidth mt="sm" color="blue"  >
+                  Set
+                </Button>
+              </form>
+
+              <br></br>
+              <Box
+                style={{
+                  flex: 1,
+                  borderLeft: '1px solid #ccc',
+                  paddingLeft: 16,
+                  minHeight: 90,
+
+                }}
+              >
+                <Text size="sm">
+                  <strong>Note:</strong> Password will contains minimum one alphabet, one digit, one special symbol and total 8 charecters.
+                </Text>
+              </Box>
+            </Card>
+          </div> */}
+                    <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">Change Transaction Password</Title>
+                                <form>
+                                    <PasswordInput
+                                        label="Login Password"
+                                        placeholder="Enter your password"
+                                        required
+                                        id="loginPassword"
+                                        onCopy={(e) => e.preventDefault()}
+                                        onPaste={(e) => e.preventDefault()}
+                                        onCut={(e) => e.preventDefault()}
+                                    />
+                                    <PasswordInput
+                                        label="Confirm Login Password"
+                                        placeholder="Enter your password"
+                                        required
+                                        id="confirmPassword"
+                                        onCopy={(e) => e.preventDefault()}
+                                        onPaste={(e) => e.preventDefault()}
+                                        onCut={(e) => e.preventDefault()}
+                                    />
+                                    {/* <Button fullWidth mt="sm" color="blue" onClick={() => {
+                                        router.push("/login")
+                                    }} >
+                                        Set
+                                    </Button> */}
+
+                                    {/* CAPTCHA */}
+                                    <div style={{ marginTop: 20 }}>
+                                        <label style={{ fontWeight: 600 }}>Enter CAPTCHA *</label>
+                                        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 5 }}>
+                                            <CaptchaImage text={captcha} />
+                                            <Button size="xs" variant="outline" onClick={generateCaptcha}>Refresh</Button>
+                                        </div>
+                                        <TextInput
+                                            placeholder="Enter above text"
+                                            value={captchaInput}
+                                            onChange={(e) => setCaptchaInput(e.currentTarget.value)}
+                                            required
+                                        />
+                                        {captchaError && <p style={{ color: 'red' }}>{captchaError}</p>}
+                                    </div>
+
+
+                                    <Button
+                                        fullWidth
+                                        mt="sm"
+                                        color="blue"
+                                        onClick={() => {
+                                            let pwd = (document.getElementById("loginPassword") as HTMLInputElement).value;
+                                            let confirmPwd = (document.getElementById("confirmPassword") as HTMLInputElement).value;
+                                            const pwdRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
+                                            if (!pwd || !confirmPwd) {
+                                                alert("Both password fields are required.");
+                                            } else if (pwd !== confirmPwd) {
+                                                alert("Passwords do not match.");
+                                            }
+                                            else if (!pwdRegex.test(pwd)) {
+                                                alert("Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.");
+                                            }
+                                            else if (captchaInput !== captcha) {
+                                                setCaptchaError("Incorrect CAPTCHA.");
+                                            }
+                                            else {
+
+                                                notifications.show({
+                                                    title: 'Password Change',
+                                                    message: 'Transaction Password has been sucessfully updated',
+                                                    color: "green",
+                                                    position: 'bottom-center',
+                                                })
+                                                router.push("/login");
+                                            }
+                                        }}  >
+                                        Set
+                                    </Button>
+
+
+                                </form>
+
+                                <br></br>
+                                <Box
+                                    style={{
+                                        flex: 1,
+                                        borderLeft: '1px solid #ccc',
+                                        paddingLeft: 16,
+                                        minHeight: 90,
+
+                                    }}
+                                >
+                                    <Text size="sm">
+                                        <strong>Note:</strong> Password will contains minimum one alphabet, one digit, one special symbol and total 8 charecters.
+                                    </Text>
+                                </Box>
+                            </Card>
+                        </Box>
+                    </Box>
+                    <Box
+                        component="footer"
+                        style={{
+                            width: "100%",
+                            textAlign: "center",
+                            padding: "10px 0",
+                            bottom: 0,
+                            left: 0,
+                            zIndex: 1000,
+                            fontSize: "14px",
+                        }}
+                    >
+                        <Text>
+                            © 2025 KCC Bank. All rights reserved. {" "}
+
+                        </Text>
+                    </Box>
+                </div>
+            </div>
+        </Providers >
+    );
+}

src/app/_components/timeline/RegistrationTimeline.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { Stepper, Button, Group } from '@mantine/core';
+
+export default function RegistrationTimeline() {
+    const [active, setActive] = useState(1);
+    const nextStep = () => setActive((current) => (current < 3 ? current + 1 : current));
+    const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
+
+    return (
+        <>
+            <Stepper active={active} onStepClick={setActive}>
+                <Stepper.Step label="First step" description="Change Login password">
+
+                </Stepper.Step>
+                <Stepper.Step label="Second step" description="Change Tranaction password">
+
+                </Stepper.Step>
+                {/* <Stepper.Step label="Final step" description="Verify OTP">
+
+                </Stepper.Step> */}
+                <Stepper.Completed>
+                    Completed, click back button to get to previous step
+                </Stepper.Completed>
+            </Stepper>
+            {/* 
+            <Group justify="center" mt="xl">
+                <Button variant="default" onClick={prevStep}>Back</Button>
+                <Button onClick={nextStep}>Next step</Button>
+            </Group> */}
+        </>
+    );
+}

src/app/global.css

@@ -5,6 +5,7 @@
     /* border: 1px solid black; */
 }
 
-html, body {
+html,
+body {
     height: 100vh;
 }

src/app/login/page.tsx

@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from "react";
 import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Stack } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
-import { Carousel } from '@mantine/carousel';
+// import { Carousel } from '@mantine/carousel';
 import { Providers } from "@/app/providers";
 import { useRouter } from "next/navigation";
 import NextImage from "next/image";