feat : Otp verification Feature active.

src/app/(main)/funds_transfer/view_beneficiary/page.tsx

@@ -294,6 +294,7 @@ export default function ViewBeneficiary() {
                                     value={otp}
                                     onChange={(e) => setOtp(e.currentTarget.value)}
                                     placeholder="Enter OTP"
+                                    maxLength={6}
                                 />
                                 <Group justify="space-between" mt="xs">
                                     {/* Resend OTP Timer or Icon */}

src/app/(main)/home/page.tsx

@@ -100,7 +100,7 @@ export default function Home() {
         setTimeout(() => {
             router.push(`/accounts/account_statement?accNo=${accountNo}`);
             setLoadingAccountNo(null);
-        }, 5000);
+        }, 6000);
     }
 
     useEffect(() => {

src/app/_util/otp.ts

@@ -1,6 +1,3 @@
-import { notifications } from '@mantine/notifications';
-import axios from 'axios';
-
 interface SendOtpPayload {
   mobileNumber?: string;
   type: string;
@@ -12,73 +9,70 @@ interface SendOtpPayload {
   ref?: string;
   date?: string;
   userOtp?: string;
-  username?: string
+  username?: string;
 }
 
-function getStoredMobileNumber(): string | null {
+function getStoredMobileNumber(): string {
   const mobileNumber = localStorage.getItem('remitter_mobile_no');
   // const mobileNumber = "7890544527";
-  if (!mobileNumber) {
+  if (!mobileNumber) throw new Error('Mobile number not found.');
-    notifications.show({
-      title: 'Missing Mobile Number',
-      message: 'Mobile number not found. Please re-login or update your profile.',
-      color: 'red',
-    });
-    return null;
-  }
   return mobileNumber;
 }
 
 export async function sendOtp(payload: SendOtpPayload) {
-  try {
+  const mobileNumber = payload.mobileNumber || getStoredMobileNumber();
-    const mobileNumber = payload.mobileNumber || getStoredMobileNumber();
+
-    const response = await fetch('api/otp/send', {
+  const response = await fetch('/api/otp/send', {
-      method: "POST",
+    method: "POST",
-      headers: {
+    headers: { "Content-Type": "application/json" },
-        "Content-Type": "application/json",
+    body: JSON.stringify({ ...payload, mobileNumber }),
-      },
+  });
-      body: JSON.stringify({ ...payload,mobileNumber}),
+
-    })
+  const data = await response.json();
-    console.log('otp sended.');
+
-    return await response.json();
+  if (!response.ok) {
-  } catch (error: any) {
+    console.log('OTP sended failed.');
-    console.error('Error sending OTP:', error.response?.data || error.message);
+    const errorMsg = data?.error || 'Send OTP failed. Please try again later.';
-    throw error.response?.data || error;
+    throw new Error(errorMsg);
   }
+  console.log('OTP sended.');
+  return data;
 }
 
 export async function verifyOtp(otp: string) {
-  try {
+  const mobileNumber = getStoredMobileNumber();
-    const mobileNumber = getStoredMobileNumber();
+
-    const response = await fetch(`/api/otp/verify?mobileNumber=${mobileNumber}`, {
+  const response = await fetch(`/api/otp/verify?mobileNumber=${mobileNumber}`, {
-      method: "POST",
+    method: "POST",
-      headers: {
+    headers: { "Content-Type": "application/json" },
-        "Content-Type": "application/json",
+    body: JSON.stringify({ otp }),
-      },
+  });
-      body: JSON.stringify({otp}),
+
-    })
+  const data = await response.json();
-    console.log('Otp verified');
+
-    return await response.json();
+  if (!response.ok) {
-  } catch (error: any) {
+    console.log('OTP not verified.');
-    console.error('Error verifying OTP:', error.response?.data || error.message);
+    const errorMsg = data?.error || 'OTP verification failed.';
-    throw error.response?.data || error;
+    throw new Error(errorMsg);
   }
+  console.log('OTP verified.');
+  return data;
 }
 
 export async function verifyLoginOtp(otp: string, mobileNumber: string) {
-  try {
+  const response = await fetch(`/api/otp/verify?mobileNumber=${mobileNumber}`, {
-    // const mobileNumber = getStoredMobileNumber();
+    method: "POST",
-    const response = await fetch(`/api/otp/verify?mobileNumber=${mobileNumber}`, {
+    headers: { "Content-Type": "application/json" },
-      method: "POST",
+    body: JSON.stringify({ otp }),
-      headers: {
+  });
-        "Content-Type": "application/json",
+
-      },
+  const data = await response.json();
-      body: JSON.stringify({otp}),
+
-    })
+  if (!response.ok) {
-    console.log('Otp verified.');
+    console.log('Login OTP not verified.');
-    return await response.json();
+    const errorMsg = data?.error || 'OTP verification failed.';
-  } catch (error: any) {
+    throw new Error(errorMsg);
-    console.error('Error verifying OTP:', error.response?.data || error.message);
-    throw error.response?.data || error;
   }
-}
+  console.log("Login OTP verified");
+  return data;
+}

src/app/login/page.tsx

@@ -35,30 +35,29 @@ export default function Login() {
     const [mobile, setMobile] = useState("");
 
     async function handleSendOtp(mobile?: string) {
-        // console.log("hi mobile", mobile);
         if (!mobile) {
             notifications.show({
                 title: 'Error',
-                message: 'Mobile number not found.Contact to administrator',
+                message: 'Mobile number not found. Contact administrator.',
                 color: 'red',
             });
             return false;
         }
+
         try {
-            // console.log(CIF);
             await sendOtp({ type: 'LOGIN_OTP', username: CIF, mobileNumber: mobile });
-            // await sendOtp({ type: 'LOGIN_OTP', username: CIF, mobileNumber: '7890544527' });
+            // await sendOtp({ type: 'LOGIN_OTP', username: CIF, mobileNumber: "7890544527" });
             notifications.show({
-                color: "orange",
+                color: 'orange',
-                title: "OTP Required",
+                title: 'OTP Required',
-                message: "OTP sent to your registered mobile number",
+                message: 'OTP sent to your registered mobile number.',
             });
+
             return true;
-        }
+        } catch (err: any) {
-        catch (err: any) {
             notifications.show({
                 title: 'Error',
-                message: `${err.error}.SMS vendor facing some issue.Please try again later.` || 'Send OTP failed.Please try again later.',
+                message: err?.message || 'Send OTP failed. Please try again later.',
                 color: 'red',
             });
             return false;
@@ -72,11 +71,18 @@ export default function Login() {
                 // await verifyLoginOtp(otp, '7890544527');
                 return true;
             }
-        } catch {
+        }
+        catch (err: any) {
+            notifications.show({
+                title: `${err.message}`,
+                message: 'OTP verification failed. Please try again later.',
+                color: 'red',
+            });
             return false;
         }
     }
 
+
     useEffect(() => {
         const loadCaptcha = async () => {
             const newCaptcha = await generateCaptcha();
@@ -193,15 +199,8 @@ export default function Login() {
                     setMobile(data.mobile);
                     setOtpRequired(true);
                     setButtonLabel("Verify OTP");
-                    
+
                     const otpSent = await handleSendOtp(data.mobile);
-                    // if (otpSent) {
-                    //     notifications.show({
-                    //         color: "orange",
-                    //         title: "OTP Required",
-                    //         message: "OTP sent to your registered mobile number",
-                    //     });
-                    // }
                     setIsLogging(false);
                     return;
                 }
@@ -271,17 +270,12 @@ export default function Login() {
 
                 const verified = await handleVerifyOtp(mobile);
                 if (!verified) {
-                    notifications.show({
-                        title: "Invalid OTP",
-                        message: "The OTP entered does not match",
-                        color: "red",
-                    });
                     setIsLogging(false);
                     return;
                 }
 
                 notifications.show({
-                    color: "green",
+                    color: "Blue",
                     title: "OTP Verified",
                     message: "Please click Login to continue",
                 });
@@ -583,6 +577,7 @@ export default function Login() {
                                                 label="Enter OTP"
                                                 placeholder="Enter OTP"
                                                 value={otp}
+                                                maxLength={6}
                                                 onChange={(e) => setOtp(e.currentTarget.value)}
                                                 withAsterisk
                                                 style={{ flex: 1 }}