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

src/app/ChangePassword/clientCarousel.tsx

@@ -1,98 +0,0 @@
-'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.tsx

@@ -1,55 +1,23 @@
 "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 { 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 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
+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 Changeloginpwd() {
+export default function ChangeLoginPwd() {
   const router = useRouter();
-  // const [error, setError] = useState<string | null>(null);
-  //const [CIF, SetCIF] = useState("");
-  // const [psw, SetPsw] = useState("");
+  const [authorized, SetAuthorized] = useState<boolean | null>(null);
   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();
   }, []);
@@ -65,158 +33,203 @@ export default function Changeloginpwd() {
     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' }}>
+  async function handleSetLoginPassword(e: React.FormEvent) {
+    e.preventDefault();
+    const pwdRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
+    if (!password || !confirmPassword) {
+      notifications.show({
+        withBorder: true,
+        color: "red",
+        title: "Both password fields are required.",
+        message: "Both password fields are required.",
+        autoClose: 5000,
+      });
+      return;
+      // alert("Both password fields are required.");
+    } else if (password !== confirmPassword) {
+      // alert("Passwords do not match.");
+      notifications.show({
+        withBorder: true,
+        color: "red",
+        title: "Passwords do not match.",
+        message: "Passwords do not match.",
+        autoClose: 5000,
+      });
+      return;
+    }
+    else if (!pwdRegex.test(password)) {
+      // alert("Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.");
+      notifications.show({
+        withBorder: true,
+        color: "red",
+        title: "Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.",
+        message: "Password must contain at least 1 capital letter, 1 number, 1 special character, and be at least 8 characters long.",
+        autoClose: 5000,
+      });
+      return;
+    }
+    else if (captchaInput !== captcha) {
+      setCaptchaError("Incorrect CAPTCHA.");
+      return;
+    }
+    const token = localStorage.getItem("access_token");
+    const response = await fetch('api/auth/login_password', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
+      },
+      body: JSON.stringify({
+        login_password: password,
+      }),
+    });
+    const data = await response.json();
+    if (response.ok) {
+      // console.log(data);
+      notifications.show({
+        withBorder: true,
+        color: "green",
+        title: "Login Password has been set",
+        message: "Login Password has been set",
+        autoClose: 5000,
+      });
+      router.push("/ChangeTxn");
+    }
+    else {
+      notifications.show({
+        withBorder: true,
+        color: "red",
+        title: "Please try again later ",
+        message: "Please try again later ",
+        autoClose: 5000,
+      });
+      router.push("/login");
+    }
+  }
 
-          <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 Login Password</Title>
+  useEffect(() => {
+    const token = localStorage.getItem("access_token");
+    if (!token) {
+      SetAuthorized(false);
+      router.push("/login");
+    }
+    else {
+      SetAuthorized(true);
+    }
+  }, []);
 
-                <form >
-                  <PasswordInput
-                    label="Login Password"
-                    placeholder="Enter your password"
-                    required
-                    id="loginPassword"
-                    value={password}
-                    onChange={(e) => setPassword(e.currentTarget.value)}
-                    onCopy={(e) => e.preventDefault()}
-                    onPaste={(e) => e.preventDefault()}
-                    onCut={(e) => e.preventDefault()}
-                  />
+  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' }}>
 
-                  <PasswordInput
-                    label="Confirm Login Password"
-                    placeholder="Enter your password"
-                    required
-                    id="confirmPassword"
-                    onCopy={(e) => e.preventDefault()}
-                    onPaste={(e) => e.preventDefault()}
-                    onCut={(e) => e.preventDefault()}
+            <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 Login Password</Title>
 
-                  />
-
-                  {/* 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)}
+                  <form onSubmit={handleSetLoginPassword}>
+                    <PasswordInput
+                      label="Login Password"
+                      placeholder="Enter your password"
                       required
+                      id="loginPassword"
+                      value={password}
+                      onChange={(e) => setPassword(e.currentTarget.value)}
+                      onCopy={(e) => e.preventDefault()}
+                      onPaste={(e) => e.preventDefault()}
+                      onCut={(e) => e.preventDefault()}
                     />
-                    {captchaError && <p style={{ color: 'red' }}>{captchaError}</p>}
-                  </div>
 
+                    <PasswordInput
+                      label="Confirm Login Password"
+                      placeholder="Enter your password"
+                      required
+                      id="confirmPassword"
+                      value={confirmPassword}
+                      onChange={(e) => setConfirmPassword(e.currentTarget.value)}
+                      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
+                      type="submit"
+                      fullWidth
+                      mt="sm"
+                      color="blue"
+                    >
+                      Set
+                    </Button>
+                  </form>
+                  <br></br>
+                  <Box
+                    style={{
+                      flex: 1,
+                      borderLeft: '1px solid #ccc',
+                      paddingLeft: 16,
+                      minHeight: 90,
 
-                  <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
-                        localStorage.setItem("password", password);
-                        localStorage.setItem("Tpin_setup", "Y");
-                        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>
+                    <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>
-          <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. {" "}
+            <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>
+              </Text>
+            </Box>
+          </div>
         </div>
-      </div>
-    </Providers >
-  );
+      </Providers >
+    );
+  }
 }