Feat: For Migration if user not have password

TODO.md

@@ -21,7 +21,7 @@
    - >give rights
    - >view rights 
 - Forget Password
-- For Migration if user not have password
+- >For Migration if user not have password
 
 
 

src/app/login/page.tsx

@@ -23,8 +23,7 @@ export default function Login() {
     const [opened, setOpened] = useState(false);
     const [otpStep, setOtpStep] = useState(false);
     const [otp, setOtp] = useState("");
-    const [isOtpSending, setIsOtpSending] = useState(false);
+    const [loading, setLoading] = useState(false);
-    const [isOtpVerifying, setIsOtpVerifying] = useState(false);
 
     useEffect(() => {
         const loadCaptcha = async () => {
@@ -34,6 +33,21 @@ export default function Login() {
         loadCaptcha();
     }, []);
 
+    useEffect(() => {
+        const headerData = [
+            "THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.",
+            "कांगड़ा केन्द्रीय सहकारी बैंक सीमित",
+        ];
+        let index = 0;
+        const interval = setInterval(() => {
+            index = (index + 1) % headerData.length;
+            if (headerRef.current) {
+                headerRef.current.textContent = headerData[index];
+            }
+        }, 2000);
+        return () => clearInterval(interval);
+    }, []);
+
     const regenerateCaptcha = () => {
         // setCaptcha(generateCaptcha());
         const loadCaptcha = async () => {
@@ -108,7 +122,6 @@ export default function Login() {
                 return;
             }
             if (!response.ok) {
-                //console.log("hiiiii");
                 notifications.show({
                     withBorder: true,
                     color: "red",
@@ -158,20 +171,80 @@ export default function Login() {
             return;
         }
     }
-    useEffect(() => {
+
-        const headerData = [
+    // For migration User
-            "THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.",
+    const sendOtp = async () => {
-            "कांगड़ा केन्द्रीय सहकारी बैंक सीमित",
+        try {
-        ];
+            setLoading(true);
-        let index = 0;
+            const res = await fetch(`/api/otp/send/set-password?customerNo=${CIF}`, {
-        const interval = setInterval(() => {
+                method: "GET",
-            index = (index + 1) % headerData.length;
+                headers: { "Content-Type": "application/json" },
-            if (headerRef.current) {
+            });
-                headerRef.current.textContent = headerData[index];
+
+            if (!res.ok) throw new Error("Failed to send OTP");
+            notifications.show({
+                color: "green",
+                title: "OTP Sent",
+                message: "Please check your registered mobile.",
+            });
+            setOtpStep(true);
+        } catch (err: any) {
+            notifications.show({
+                color: "red",
+                title: "Error",
+                message: err.message || "Could not send OTP",
+            });
+        } finally {
+            setLoading(false);
         }
-        }, 2000);
+    };
-        return () => clearInterval(interval);
+
-    }, []);
+    // For migration User
+    const verifyOtp = async () => {
+        if (!otp) {
+            notifications.show({
+                color: "red",
+                title: "Invalid Input",
+                message: "Please enter OTP before verifying",
+            });
+            return;
+        }
+
+        try {
+            setLoading(true);
+            const res = await fetch(`/api/otp/verify/set-password?customerNo=${CIF}&otp=${otp}`, {
+                method: "GET",
+                headers: { "Content-Type": "application/json" },
+            });
+
+            const data = await res.json();
+            console.log(data)
+            if (!res.ok) {
+                notifications.show({
+                    color: "red",
+                    title: "Error",
+                    message: data.error || "OTP verification failed",
+                });
+                return;
+            }
+            localStorage.setItem("access_token", data.token);
+            notifications.show({
+                color: "green",
+                title: "OTP Verified",
+                message: "Redirecting to set password page...",
+            });
+            setOpened(false);
+            router.push("/SetPassword");
+        } catch (err: any) {
+            notifications.show({
+                color: "red",
+                title: "Error",
+                message: err.message || "OTP verification failed",
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
 
     return (
         <Providers>
@@ -200,13 +273,8 @@ export default function Login() {
                             >
                                 Cancel
                             </Button>
-
+                            {/* Call the API for send otp */}
-                            {/* ✅ Instead of calling API, just open OTP screen */}
+                            <Button onClick={sendOtp} loading={loading}>
-                            <Button
-                                onClick={() => {
-                                    setOtpStep(true); // directly show OTP screen
-                                }}
-                            >
                                 OK
                             </Button>
                         </Group>
@@ -214,61 +282,33 @@ export default function Login() {
                 ) : (
                     // STEP 2: OTP Verification (Frontend-only)
                     <>
-                        <Text mb="sm">
+                        <Text size="sm" c="green">Enter the OTP sent to your registered mobile</Text>
-                            Enter the OTP (for demo, you can accept any value).
-                        </Text>
-
                         <TextInput
                             label="OTP"
                             placeholder="Enter OTP"
                             value={otp}
+                            withAsterisk
                             onChange={(e) => setOtp(e.currentTarget.value)}
                         />
-
                         <Group mt="md" justify="flex-end">
                             <Button
                                 variant="outline"
                                 onClick={() => {
                                     setOtp("");
-                                    setOtpStep(false); // go back to migration notice
+                                    setOtpStep(false);
                                 }}
+                                disabled={loading}
                             >
                                 Back
                             </Button>
-
+                            <Button onClick={verifyOtp} loading={loading}>
-                            <Button
-                                onClick={() => {
-                                    if (!otp) {
-                                        notifications.show({
-                                            color: "red",
-                                            title: "Invalid Input",
-                                            message: "Please enter OTP before verifying",
-                                        });
-                                        return;
-                                    }
-
-                                    // ✅ Simulate OTP success
-                                    localStorage.setItem("token", "dummy-token");
-
-                                    notifications.show({
-                                        color: "green",
-                                        title: "OTP Verified",
-                                        message: "Redirecting to set password page...",
-                                    });
-
-                                    setOpened(false);
-                                    router.push("/SetPassword"); // go to set password
-                                }}
-                            >
                                 Verify OTP
                             </Button>
                         </Group>
                     </>
                 )}
             </Modal>
-
+            {/* Main Screen */}
-
-            {/*  */}
             <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
                 {/* Header */}
                 <Box