From 16284f4519ac1a4231bc9b4891b88d5ee1a43e70 Mon Sep 17 00:00:00 2001
From: "nabanita.jana" <nabanita.jana@tcs.com>
Date: Tue, 29 Jul 2025 13:30:41 +0530
Subject: [PATCH] feat: forget password

---
 src/app/login/page.tsx         |  17 +++++-
 src/app/validate_user/page.tsx | 101 +++++++++++++++++++++++++++++++++
 2 files changed, 115 insertions(+), 3 deletions(-)
 create mode 100644 src/app/validate_user/page.tsx

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 78fe811..5f986c5 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -160,8 +160,10 @@ export default function Login() {
                         </style>
                     </Box>
                     {/* Main */}
-                    <div style={{ display: "flex", height: "75vh", overflow: "hidden", position: "relative",
-                        background:'linear-gradient(to right, #02081eff, #0a3d91)' }}>
+                    <div style={{
+                        display: "flex", height: "75vh", overflow: "hidden", position: "relative",
+                        background: 'linear-gradient(to right, #02081eff, #0a3d91)'
+                    }}>
                         <div style={{ flex: 1, backgroundColor: "#c1e0f0", position: "relative" }}>
                             <Image
                                 fit="cover"
@@ -172,7 +174,7 @@ export default function Login() {
                             />
                         </div>
                         <Box w={{ base: "100%", md: "50%" }} p="lg">
-                            <Card shadow="md" padding="xl" radius="md" style={{ maxWidth: 400,margin: "0 auto",height:'68vh'}}>
+                            <Card shadow="md" padding="xl" radius="md" style={{ maxWidth: 400, margin: "0 auto", height: '68vh' }}>
                                 <form onSubmit={handleLogin}>
                                     <TextInput
                                         label="User ID"
@@ -193,9 +195,18 @@ export default function Login() {
                                         required
                                         mt="sm"
                                     />
+                                    <Box style={{ textAlign: "right"}}>
+                                        <Anchor
+                                            style={{ fontSize: "14px", color: "#1c7ed6", cursor: "pointer" }}
+                                        onClick={() => router.push("/validate_user")}
+                                        >
+                                            Forgot Password?
+                                        </Anchor>
+                                    </Box>
                                     <Group mt="sm" align="center">
                                         <Box style={{ backgroundColor: "#fff", fontSize: "18px", textDecoration: "line-through", padding: "4px 8px", fontFamily: "cursive" }}>{captcha}</Box>
                                         <Button size="xs" variant="light" onClick={regenerateCaptcha}>Refresh</Button>
+
                                     </Group>
                                     <TextInput
                                         label="Enter CAPTCHA"
diff --git a/src/app/validate_user/page.tsx b/src/app/validate_user/page.tsx
new file mode 100644
index 0000000..9db05b9
--- /dev/null
+++ b/src/app/validate_user/page.tsx
@@ -0,0 +1,101 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { Text, Button, TextInput, PasswordInput, Title, Card, Box, Image } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { Providers } from "@/app/providers";
+import { useRouter } from "next/navigation";
+import NextImage from "next/image";
+import logo from '@/app/image/logo.jpg';
+import changePwdImage from '@/app/image/changepw.png';
+import { IconEye, IconEyeOff, IconLogout } from '@tabler/icons-react';
+
+export default function ValidateUser() {
+    const [Cif, setCif] = useState("");
+    const [otp, setOTP] = useState("");
+
+
+    async function handleSetLoginPassword(e: React.FormEvent) {
+    }
+
+    return (
+        <Providers>
+            <div style={{ backgroundColor: "#f8f9fa", width: "100%", paddingTop: "5%" }}>
+                <Box style={{
+                    position: 'fixed', width: '100%', height: '10%', 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={logo}
+                        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">Validate User</Title>
+
+                                <form onSubmit={handleSetLoginPassword}>
+                                    <TextInput
+                                        label="Enter Your CIF Number"
+                                        placeholder="Enter your CIF"
+                                        required
+                                        id="CIFNumber"
+                                        value={Cif}
+                                        onChange={(e) => setCif(e.currentTarget.value)}
+                                    />
+
+                                    <PasswordInput
+                                        label="Enter OTP"
+                                        placeholder="Enter your OTP"
+                                        required
+                                        id="confirmPassword"
+                                        value={otp}
+                                        onChange={(e) => setOTP(e.currentTarget.value)}
+                                    />
+                                    <Button
+                                        type="submit"
+                                        fullWidth
+                                        mt="sm"
+                                        color="blue"
+                                    >
+                                        Validate
+                                    </Button>
+                                </form>
+                                <br></br>
+                            </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 >
+    );
+
+}
\ No newline at end of file