Feat : Api integrate on login screen, set login password and set transaction password screen

src/app/login/page.tsx

@@ -8,12 +8,7 @@ import NextImage from "next/image";
 import logo from '@/app/image/logo.jpg';
 import frontPage from '@/app/image/ib_front_page.jpg';
 import dynamic from 'next/dynamic';
-
-
-function generateCaptcha(length = 6) {
-    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-    return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
-}
+import { generateCaptcha } from '@/app/captcha';
 
 export default function Login() {
     const router = useRouter();
@@ -24,21 +19,29 @@ export default function Login() {
     const [inputCaptcha, setInputCaptcha] = useState("");
     const [isLogging, setIsLogging] = useState(false);
     const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
-    localStorage.setItem("password", "SecurePass123!");
-    localStorage.setItem("Tpin_setup", "F");
 
     useEffect(() => {
-        setCaptcha(generateCaptcha());
+        const loadCaptcha = async () => {
+            const newCaptcha = await generateCaptcha();
+            setCaptcha(newCaptcha);
+        };
+        loadCaptcha();
     }, []);
 
     const regenerateCaptcha = () => {
-        setCaptcha(generateCaptcha());
+        // setCaptcha(generateCaptcha());
+        const loadCaptcha = async () => {
+            const newCaptcha = await generateCaptcha();
+            setCaptcha(newCaptcha);
+        };
+        loadCaptcha();
         setInputCaptcha("");
     };
 
     async function handleLogin(e: React.FormEvent) {
         e.preventDefault();
         setIsLogging(false);
+
         const onlyDigit = /^\d{11}$/;
         if (!onlyDigit.test(CIF)) {
             setError('Input value must be 11 digit');
@@ -54,25 +57,30 @@ export default function Login() {
             });
             return;
         }
-
-        if (CIF === "30022497139" && psw === localStorage.getItem("password")) {
-            const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30";
-            // localStorage.setItem("customerNumber", CIF);
-            // localStorage.setItem("password", psw);
-            // console.log("Tithi:", localStorage.getItem("password"));
-            console.log("Tithi:", localStorage.getItem("Tpin_setup"));
+        const response = await fetch('api/auth/login', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                customerNo: CIF,
+                password: psw,
+            }),
+        });
+        const data = await response.json();
+        if (response.ok) {
+            console.log(data);
+            const token = data.token;
             localStorage.setItem("access_token", token);
-            setIsLogging(true);
-            // if (localStorage.getItem("Tpin_setup") === 'F')
-            //     router.push("/ChangePassword");
-            // else
-            router.push("/home");
-        } else {
-            // SetCIF('');
-            // SetPsw('');
-            // setCaptcha('');
-            console.log("Tithi:", localStorage.getItem("password"));
-            console.log("Tithi:", localStorage.getItem("Tpin_setup"));
+            if (data.FirstTimeLogin === true) {
+                router.push("/ChangePassword")
+            }
+            else {
+                router.push("/home");
+            }
+
+        }
+        else {
             notifications.show({
                 withBorder: true,
                 color: "red",
@@ -160,16 +168,6 @@ export default function Login() {
                                 style={{ width: "100%", height: "100%" }}
                             />
                         </div>
-                        {/* <div
-                            style={{
-                                flex: 1,
-                                backgroundColor: "#c1e0f0",
-                                display: "flex",
-                                justifyContent: "center",
-                                alignItems: "center",
-                                height: "100%"
-                            }}
-                        > */}
                         <Card
                             shadow="lg"
                             padding="xl"
@@ -179,12 +177,6 @@ export default function Login() {
                                 display: "flex",
                                 justifyContent: "center",
                                 alignItems: "center",
-
-                                // width: "400%",
-                                // maxWidth: 480,
-                                // height: 400,
-                                // marginTop: 0,
-                                // paddingTop: 5,
                                 backgroundColor: "#f0f0f0",
                                 borderRadius: 0,
                                 height: "100%",
@@ -240,7 +232,7 @@ export default function Login() {
                                                         alignItems: "center",
                                                         backgroundColor: "#fff",
                                                         fontFamily: "'UnifrakturCook',cursive",
-                                                        textDecoration: "line-through",
+                                                        // textDecoration: "line-through",
                                                         fontSize: "16px",
                                                         userSelect: "none",
                                                         display: "flex",
@@ -278,10 +270,10 @@ export default function Login() {
                         textAlign: "left",
                         marginTop: 10,
                         display: "flex",
-                        border: "1px solid blue"
+                        // border: "1px solid blue"
                     }}>
                         <ClientCarousel />
-                        <Box style={{ width: "40%", border: "1px solid black", textAlign: "center" }}>
+                        <Box style={{ width: "40%", textAlign: "center" }}>
                             <Title order={2}>Security Notes :</Title>
                             <br></br>
                             <Text size="lg">When you Login,Your User Id and Password travels in an encrypted and highly secured mode .</Text>