Wip: update the login page,

feat: update Otp in set login and transaction page.
Feat: Add validation for external account in add beneficiary.

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

@@ -1,27 +1,20 @@
 "use client";
 
-import React, { useState } from 'react';
-import {
-    TextInput,
-    Button,
-    Select,
-    Title,
-    Paper,
-    Grid,
-    Group,
-    Radio,
-    Text,
-    PasswordInput,
-} from '@mantine/core';
+import React, { useEffect, useState } from 'react';
+import {TextInput,Button,Select,Title,Paper,Grid,Group,Radio,Text,PasswordInput} from '@mantine/core';
+import { useRouter } from "next/navigation";
 import { notifications } from '@mantine/notifications';
 import AddBeneficiaryOthers from './addBeneficiaryOthers';
+import { generateOTP } from '@/app/OTPGenerator';
 
 const bankOptions = [
     { value: 'KCCB', label: 'KCCB - The Kangra Central Co-Operative Bank' },
 ];
 
 const AddBeneficiary: React.FC = () => {
+    const router = useRouter();
     const [bankName, setBankName] = useState('');
+    const [authorized, setAuthorized] = useState<boolean | null>(null);
     const [bankType, setBankType] = useState('own');
     const [accountNo, setAccountNo] = useState('');
     const [confirmAccountNo, setConfirmAccountNo] = useState('');
@@ -37,11 +30,20 @@ const AddBeneficiary: React.FC = () => {
     const getFullMaskedAccount = (acc: string) => { return "X".repeat(acc.length); };
 
     const handleGenerateOtp = async () => {
+        // const value = await generateOTP(6);
         const value = "123456"; // Or generate a random OTP
         setGeneratedOtp(value);
         return value;
     };
-
+    useEffect(() => {
+        const token = localStorage.getItem("access_token");
+        if (!token) {
+            setAuthorized(false);
+            router.push("/login");
+        } else {
+            setAuthorized(true);
+        }
+    }, []);
     // const isValidBankName = (name: string) => {
     //     const regex = /^[A-Za-z\s]{3,5}$/;
     //     return regex.test(name.trim());
@@ -51,8 +53,6 @@ const AddBeneficiary: React.FC = () => {
     //     return /^[A-Z]{4}0[0-9]{6}$/.test(code);
     // };
 
-
-
     const validateAndSendOtp = async () => {
         if (!bankName || !accountNo || !confirmAccountNo) {
             notifications.show({
@@ -86,10 +86,6 @@ const AddBeneficiary: React.FC = () => {
         //     return;
         // }
 
-
-
-
-
         if (accountNo.length < 10 || accountNo.length > 17) {
             notifications.show({
                 withBorder: true,
@@ -101,9 +97,6 @@ const AddBeneficiary: React.FC = () => {
             return;
         }
 
-
-
-
         if (accountNo !== confirmAccountNo) {
             notifications.show({
                 withBorder: true,
@@ -193,6 +186,7 @@ const AddBeneficiary: React.FC = () => {
         });
     };
 
+    if (!authorized) return null;
 
     return (
         <Paper shadow="sm" radius="md" p="md" withBorder h={400}>
@@ -254,9 +248,9 @@ const AddBeneficiary: React.FC = () => {
                             // disabled={isVisibilityLocked}
                             readOnly={isVisibilityLocked}
                             required
-                        onCopy={(e) => e.preventDefault()}
-                        onPaste={(e) => e.preventDefault()}
-                        onCut={(e) => e.preventDefault()}
+                            onCopy={(e) => e.preventDefault()}
+                            onPaste={(e) => e.preventDefault()}
+                            onCut={(e) => e.preventDefault()}
                         />
 
                         {validationStatus === "error" && (