wip: Forget Password page

src/app/SetPassword/page.tsx

@@ -8,9 +8,9 @@ import NextImage from "next/image";
 import logo from '@/app/image/logo.jpg';
 import changePwdImage from '@/app/image/changepw.png';
 import CaptchaImage from './CaptchaImage';
-import { IconEye, IconEyeOff, IconLogout } from '@tabler/icons-react';
+import { IconEye, IconEyeOff, IconLock, IconLogout } from '@tabler/icons-react';
 
-export default function ChangeLoginPwd() {
+export default function SetLoginPwd() {
   const router = useRouter();
   const [authorized, SetAuthorized] = useState<boolean | null>(null);
   const [captcha, setCaptcha] = useState("");
@@ -20,6 +20,7 @@ export default function ChangeLoginPwd() {
   const [captchaError, setCaptchaError] = useState('');
   const [confirmVisible, setConfirmVisible] = useState(false);
   const toggleConfirmVisibility = () => setConfirmVisible((v) => !v);
+  const icon = <IconLock size={18} stroke={1.5} />;
 
   async function handleLogout(e: React.FormEvent) {
     e.preventDefault();
@@ -102,7 +103,7 @@ export default function ChangeLoginPwd() {
         message: "Login Password has been set",
         autoClose: 5000,
       });
-      router.push("/ChangeTxn");
+      router.push("/SetTxn");
     }
     else {
       notifications.show({
@@ -155,12 +156,11 @@ export default function ChangeLoginPwd() {
             }}
               leftSection={<IconLogout color='white' />} variant="subtle" onClick={handleLogout}>Logout</Button>
           </Box>
-          <div style={{ marginTop: '10px' }}>
+          <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">
+                <Card p="xl" w="40vw" h='82vh'>
                   <Title order={3}
                     // @ts-ignore
                     align="center" mb="md">Set Login Password</Title>
@@ -182,19 +182,20 @@ export default function ChangeLoginPwd() {
                       label="Confirm Login Password"
                       placeholder="Enter your password"
                       required
+                      rightSection={icon}
                       id="confirmPassword"
                       value={confirmPassword}
                       onChange={(e) => setConfirmPassword(e.currentTarget.value)}
                       type={confirmVisible ? 'text' : 'password'}
-                      rightSection={
+                      // rightSection={
-                        <button
+                      //   <button
-                          type="button"
+                      //     type="button"
-                          onClick={toggleConfirmVisibility}
+                      //     onClick={toggleConfirmVisibility}
-                          style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'grey' }}
+                      //     style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'grey' }}
-                        >
+                      //   >
-                          {confirmVisible ? <IconEyeOff size={18} /> : <IconEye size={18} />}
+                      //     {confirmVisible ? <IconEyeOff size={18} /> : <IconEye size={18} />}
-                        </button>
+                      //   </button>
-                      }
+                      // }
                       onCopy={(e) => e.preventDefault()}
                       onPaste={(e) => e.preventDefault()}
                       onCut={(e) => e.preventDefault()}
@@ -214,7 +215,7 @@ export default function ChangeLoginPwd() {
                         onChange={(e) => setCaptchaInput(e.currentTarget.value)}
                         required
                       />
-                      {captchaError && <p style={{ color: 'red' }}>{captchaError}</p>}
+                      {captchaError && <p style={{ color: 'red',fontSize:'12px' }}>{captchaError}</p>}
                     </div>
 
                     <Button
@@ -244,20 +245,17 @@ export default function ChangeLoginPwd() {
               </Box>
             </Box>
             <Box
-              component="footer"
               style={{
-                width: "100%",
+                flexShrink: 0,
-                textAlign: "center",
+                display: "flex",
-                padding: "10px 0",
+                justifyContent: "center",
-                bottom: 0,
+                alignItems: "center",
-                left: 0,
+                backgroundColor: "#f8f9fa",
-                zIndex: 1000,
+                marginTop: "0.5rem",
-                fontSize: "14px",
               }}
             >
-              <Text>
+              <Text c="dimmed" size="xs">
-                © 2025 KCC Bank. All rights reserved. {" "}
+                © 2025 Kangra Central Co-Operative Bank
-
               </Text>
             </Box>
           </div>

src/app/SetTxn/page.tsx

@@ -8,9 +8,9 @@ import NextImage from "next/image";
 import logo from '@/app/image/logo.jpg';
 import changePwdImage from '@/app/image/changepw.png';
 import CaptchaImage from './CaptchaImage';
-import { IconEye, IconEyeOff, IconLogout } from '@tabler/icons-react';
+import { IconEye, IconEyeOff, IconLock, IconLogout } from '@tabler/icons-react';
 
-export default function ChangeTransactionPwd() {
+export default function SetTransactionPwd() {
     const router = useRouter();
     const [authorized, SetAuthorized] = useState<boolean | null>(null);
     const [password, setPassword] = useState("");
@@ -20,6 +20,7 @@ export default function ChangeTransactionPwd() {
     const [captchaError, setCaptchaError] = useState('');
     const [confirmVisible, setConfirmVisible] = useState(false);
     const toggleConfirmVisibility = () => setConfirmVisible((v) => !v);
+    const icon = <IconLock size={18} stroke={1.5} />;
 
     async function handleLogout(e: React.FormEvent) {
         e.preventDefault();
@@ -127,7 +128,7 @@ export default function ChangeTransactionPwd() {
         }
     }, []);
 
-if (authorized) {
+    if (authorized) {
         return (
             <Providers>
                 <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
@@ -156,11 +157,16 @@ if (authorized) {
                             leftSection={<IconLogout color='white' />} variant="subtle" onClick={handleLogout}>Logout
                         </Button>
                     </Box>
-                    <div style={{ marginTop: '10px' }}>
+                    <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">
+                                <Card p="xl" w="40vw" h='82vh'>
+                                    <Text onClick={()=>router.push("/login")} 
+                                    style={{
+                                        position: 'absolute', top: '1rem', right: '2rem', cursor: 'pointer', fontWeight: 500, color: '#7091ecff',textDecoration:'underline'
+                                    }}> Skip now</Text>
+                                    
                                     <Title order={3}
                                         // @ts-ignore
                                         align="center" mb="md">Set Transaction Password</Title>
@@ -181,17 +187,18 @@ if (authorized) {
                                             placeholder="Re-enter your Transaction password"
                                             required
                                             id="confirmPassword"
+                                            rightSection={icon}
                                             value={confirmPassword}
                                             type={confirmVisible ? 'text' : 'password'}
-                                            rightSection={
+                                            // rightSection={
-                                                <button
+                                            //     <button
-                                                    type="button"
+                                            //         type="button"
-                                                    onClick={toggleConfirmVisibility}
+                                            //         onClick={toggleConfirmVisibility}
-                                                    style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'grey' }}
+                                            //         style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'grey' }}
-                                                >
+                                            //     >
-                                                    {confirmVisible ? <IconEyeOff size={18} /> : <IconEye size={18} />}
+                                            //         {confirmVisible ? <IconEyeOff size={18} /> : <IconEye size={18} />}
-                                                </button>
+                                            //     </button>
-                                            }
+                                            // }
                                             onChange={(e) => setConfirmPassword(e.currentTarget.value)}
                                             onCopy={(e) => e.preventDefault()}
                                             onPaste={(e) => e.preventDefault()}
@@ -210,7 +217,7 @@ if (authorized) {
                                                 onChange={(e) => setCaptchaInput(e.currentTarget.value)}
                                                 required
                                             />
-                                            {captchaError && <p style={{ color: 'red' }}>{captchaError}</p>}
+                                            {captchaError && <p style={{ color: 'red', fontSize: '12px' }}>{captchaError}</p>}
                                         </div>
 
                                         <Button
@@ -243,20 +250,17 @@ if (authorized) {
                             </Box>
                         </Box>
                         <Box
-                            component="footer"
                             style={{
-                                width: "100%",
+                                flexShrink: 0,
-                                textAlign: "center",
+                                display: "flex",
-                                padding: "10px 0",
+                                justifyContent: "center",
-                                bottom: 0,
+                                alignItems: "center",
-                                left: 0,
+                                backgroundColor: "#f8f9fa",
-                                zIndex: 1000,
+                                marginTop: "0.5rem",
-                                fontSize: "14px",
                             }}
                         >
-                            <Text>
+                            <Text c="dimmed" size="xs">
-                                © 2025 KCC Bank. All rights reserved. {" "}
+                                © 2025 Kangra Central Co-Operative Bank
-
                             </Text>
                         </Box>
                     </div>

src/app/login/page.tsx

@@ -71,7 +71,7 @@ export default function Login() {
             const token = data.token;
             localStorage.setItem("access_token", token);
             if (data.FirstTimeLogin === true) {
-                router.push("/ChangePassword")
+                router.push("/SetPassword")
             }
             else {
                 router.push("/home");

src/app/registration/page.tsx

@@ -53,7 +53,7 @@ export default function Register() {
   return (
     <Providers>
       <Box maw={600} mx="auto" p="md">
-        <Title order={2} mb="md"style={{align: "center"}}>Internet Banking Registration</Title>
+        <Title order={2} mb="md" style={{ align: "center" }}>Internet Banking Registration</Title>
         <Paper shadow="xs" p="md">
           <Stack gap="sm">
             <TextInput

src/app/validate_user/page.tsx

@@ -1,101 +1,209 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import React, { useState } 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';
+import { useRouter } from "next/navigation";
+import { generateOTP } from '@/app/OTPGenerator';
 
 export default function ValidateUser() {
+    const router = useRouter();
     const [Cif, setCif] = useState("");
     const [otp, setOTP] = useState("");
+    const [mobileNumber, setMobileNumber] = useState("");
+    const [isCifValidated, setIsCifValidated] = useState(false);
+    const [generateOtp, setGenerateOtp] = useState("");
 
+    const validUsers = [
+        { cif: "11111111111", mobile: "7890544527" },
+        { cif: "30022497139", mobile: "6230573848" },
+        { cif: "11122233344", mobile: "9998887776" },
+    ];
+    async function handleGenerateOtp() {
+        // const value = await generateOTP(6);
+        const value = "123456";
+        setGenerateOtp(value);
+        return value;
+    }
+
+    const handleValidateUser = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!Cif) {
+            notifications.show({
+                title: "Invalid CIF",
+                message: "Please Enter your 11 digit CIF number.",
+                color: "red",
+            });
+            setIsCifValidated(false);
+            return;
+        }
+        if (!/^\d{11}$/.test(Cif)) {
+            notifications.show({
+                title: "Invalid CIF",
+                message: "CIF number must be exactly 11 digits.",
+                color: "red",
+            });
+            setIsCifValidated(false);
+            return;
+        }
+
+        const user = validUsers.find((u) => u.cif === Cif);
+        if (user) {
+            setMobileNumber(user.mobile);
+            setIsCifValidated(true);
+            const Otp = await handleGenerateOtp();
+            const masked = `xxxxxx${user.mobile.slice(-4)}`;
+            notifications.show({
+                title: "OTP Sent",
+                message: `OTP sent to your registered mobile number ${masked}`,
+                color: "green",
+            });
+        } else {
+            setIsCifValidated(false);
+            notifications.show({
+                title: "User Not Found",
+                message: "No such user is present.",
+                color: "red",
+            });
+        }
+    };
+
+    const handleSubmitOtp = () => {
+        if(!otp){
+            notifications.show({
+                title: "Invalid OTP",
+                message: "Please Enter OTP Before You Submit.",
+                color: "red",
+            });
+            return;
+        }
+        if (otp === generateOtp) {
+            notifications.show({
+                title: "OTP Verified",
+                message: `OTP matched successfully`,
+                color: "green",
+            });
+            router.push("/ForgetPassword")
+        }
+        else {
+            setOTP("");
+            notifications.show({
+                title: "Invalid OTP",
+                message: `The OTP you entered is incorrect`,
+                color: "red",
+            });
+            return;
+        }
 
-    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,
+                    position: 'fixed', width: '100%', height: '15%', 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
+                    <Image fit="cover" src={logo} component={NextImage} alt="ebanking"
-                        // radius="md"
+                        style={{ width: "100%", height: "100%" }} />
-                        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" h="65vh" style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
+                            {/* @ts-ignore */}
+                            <Title order={3} align="center" mb="md">Validate User</Title>
 
-                    <Box style={{ display: "flex", justifyContent: "center", alignItems: "center", columnGap: "5rem" }} bg="#c1e0f0">
+                            {isCifValidated && (
-                        <Image h="85vh" fit="contain" component={NextImage} src={changePwdImage} alt="Change Password Image" />
+                                //  @ts-ignore
-                        <Box h="100%" style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+                                <Text align="center"> Welcome {" "}{Cif}</Text>
-                            <Card p="xl" w="35vw">
+                            )}
-                                <Title order={3}
+                            <form onSubmit={(e)=>{
-                                    // @ts-ignore
+                                e.preventDefault();
-                                    align="center" mb="md">Validate User</Title>
+                                isCifValidated?handleSubmitOtp():handleValidateUser(e);
+                                }}>
+                                <TextInput
+                                    label="Enter Your CIF Number"
+                                    placeholder="Enter your CIF"
+                                    withAsterisk
+                                    value={Cif}
+                                    disabled={isCifValidated}
+                                    onChange={(e) => {
+                                        const input = e.currentTarget.value;
+                                        if (input.length <= 11) {
+                                            setCif(input);
+                                        }
+                                    }}
+                                    onKeyDown={(e) => {
+                                        const isNumberKey = /[0-9]/.test(e.key);
+                                        const isControlKey = ["Backspace", "Tab", "ArrowLeft", "ArrowRight"].includes(e.key);
+                                        if (!isNumberKey && !isControlKey) {
+                                            e.preventDefault();
+                                        }
+                                    }}
+                                />
 
-                                <form onSubmit={handleSetLoginPassword}>
+                                <div style={{ marginTop: "1rem", minHeight: "80px" }}>
-                                    <TextInput
+                                    {!isCifValidated && (
-                                        label="Enter Your CIF Number"
+                                        <>
-                                        placeholder="Enter your CIF"
+                                            <br></br>
-                                        required
+                                            <Text fs="italic" c="dimmed">NOTE: Your CIF number travels in an encrypted and highly secured mode.</Text>
-                                        id="CIFNumber"
+                                        </>
-                                        value={Cif}
+                                    )}
-                                        onChange={(e) => setCif(e.currentTarget.value)}
+                                    {isCifValidated && (
-                                    />
+                                        <>
+                                            <PasswordInput
+                                                label="Enter OTP"
+                                                placeholder="Enter your OTP"
+                                                withAsterisk
+                                                value={otp}
+                                                maxLength={6}
+                                                onKeyDown={(e) => {
+                                                    const isNumberKey = /[0-9]/.test(e.key);
+                                                    const isControlKey = ["Backspace", "Tab", "ArrowLeft", "ArrowRight"].includes(e.key);
+                                                    if (!isNumberKey && !isControlKey) {
+                                                        e.preventDefault();
+                                                    }
+                                                }}
+                                                onChange={(e) => setOTP(e.currentTarget.value)}
+                                            />
+                                            <Text size="xs" mt="xs" c='green'>
+                                                OTP sent to your registered mobile number{" "}
+                                                <b>{`xxxxxx${mobileNumber.slice(-4)}`}</b>
+                                            </Text>
+                                        </>
+                                    )}
+                                </div>
 
-                                    <PasswordInput
+                                <Button type="submit" mt="lg" color="blue">
-                                        label="Enter OTP"
+                                    {isCifValidated ? "Submit OTP" : "Validate"}
-                                        placeholder="Enter your OTP"
+                                </Button>
-                                        required
+                            </form>
-                                        id="confirmPassword"
+                        </Card>
-                                        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
+                </Box>
-                        component="footer"
+
-                        style={{
+                <Box
-                            width: "100%",
+                    style={{
-                            textAlign: "center",
+                        flexShrink: 0,
-                            padding: "10px 0",
+                        display: "flex",
-                            bottom: 0,
+                        justifyContent: "center",
-                            left: 0,
+                        alignItems: "center",
-                            zIndex: 1000,
+                        backgroundColor: "#f8f9fa",
-                            fontSize: "14px",
+                        marginTop: "0.5rem",
-                        }}
+                    }}
-                    >
+                >
-                        <Text>
+                    <Text c="dimmed" size="xs">
-                            © 2025 KCC Bank. All rights reserved. {" "}
+                        © 2025 Kangra Central Co-Operative Bank
+                    </Text>
+                </Box>
 
-                        </Text>
-                    </Box>
-                </div>
             </div>
-        </Providers >
+        </Providers>
     );
-
 }