Merge main into watchlist branch

frontend/src/components/dashboard/AddTransactionForm.js

@@ -1,15 +1,39 @@
 import React from "react";
 import { useDash } from "../../contexts/DashBoardContext";
+import { useState } from "react";
+import { useRef } from "react";
 
 const AddTransactionForm = () => {
     const { setTransactionType, handleDateChange, handleTransaction } = useDash();
     const { expenseCategories, incomeCategories, transactionType, dateValue } = useDash();
 
+    // const [formState, setFormState] = useState({
+    //     title: '',
+    //     amount: '',
+    //     type: '',
+    //     label: '',
+    //     // date: dateValue,
+    // });
+
+    const formRef = useRef(null);
+
+    const cleanAfterSubmit = async (ev) => {
+        try {
+            await handleTransaction(ev);
+            formRef.current.reset();
+            formRef.current.querySelector('select[name="type"]').value = '';
+            formRef.current.querySelector('select[name="label"]').value = '';
+        } catch (err) {
+            console.error(err);
+        }
+
+    };
+
 
     return (
         <div className="w-5/12 p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
             <h2 className="mb-4 text-xl font-medium text-gray-900 dark:text-white">Add Transaction</h2>
-            <form id="transaction-form" className="w-full" onSubmit={handleTransaction}>
+            <form id="transaction-form" className="w-full" onSubmit={cleanAfterSubmit} ref={formRef}>
                 <div className="mb-4">
                     <input name="title" type="text" id="description" placeholder="Description" required className="w-full p-2 border border-gray-300 rounded dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
                 </div>

frontend/src/contexts/AuthContext.js

@@ -49,6 +49,26 @@ const AuthContextProvider = ({ children }) => {
         }
     }, [authTokens]);
 
+
+    /**
+     * validate email format
+     * @param {*} email 
+     * @returns 
+     */
+    const validateEmail = (email) => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    };
+
+    /**
+     * validate password length
+     * @param {*} password 
+     * @returns 
+     */
+    const validatePassword = (password) => {
+    return password.length >= 4; // Ensure password is at least 4 characters long
+    };
+
     /**
      * Handle Login
      */
@@ -165,6 +185,7 @@ const AuthContextProvider = ({ children }) => {
             isLoggedIn, authTokens, user,
             setIsLoggedIn, setAuthTokens, setUser,
             Logout, Register, Login, refresh,
+            validateEmail, validatePassword,
         }}>
             {children}
         </AuthContext.Provider>

frontend/src/contexts/DashBoardContext.js

@@ -17,7 +17,6 @@ const DashboardContextProvider = ({ children }) => {
         // Initialize with today's date
         return new Date().toLocaleString('en-CA', { timeZone: 'Asia/Singapore' }).split(',')[0];
     });
-    console.log(dateValue)
     const handleDateChange = (event) => {
         setDateValue(event.target.value);
     };

frontend/src/pages/Login.js

@@ -8,7 +8,7 @@ import { toast } from "react-toastify";
 const Login = () => {
     let navigate = useNavigate();
 
-    const { Login, isLoggedIn } = useAuth();
+    const { Login, isLoggedIn, validateEmail, validatePassword } = useAuth();
     const TokenObtainURL = process.env.REACT_APP_BACKEND_URL + "/api/token/";
 
     useEffect(() => {
@@ -22,6 +22,15 @@ const Login = () => {
         event.preventDefault();
         const email = event.target.email.value;
         const password = event.target.password.value;
+        if (!validateEmail(email)) {
+            toast.error("Wrong email format");
+            return;
+        } 
+        if (!validatePassword(password)) {
+            toast.error("Password should be at least 4 characters long");
+            return;
+        } 
+
         try {
             const response = await axios.post(TokenObtainURL, { email, password });
             console.log("Login response get!");

frontend/src/pages/Register.js

@@ -4,9 +4,10 @@ import { useAuth } from "../contexts/AuthContext";
 import React, { useState } from 'react';
 import Popup from 'reactjs-popup';
 import 'reactjs-popup/dist/index.css';
+import { toast } from "react-toastify";
 
 const Register = () => {
-    const { Register, isLoggedIn } = useAuth();
+    const { Register, isLoggedIn, validateEmail, validatePassword } = useAuth();
 
     let navigate = useNavigate();
 
@@ -18,6 +19,16 @@ const Register = () => {
 
 
     const handleRegister = async (ev) => {
+        ev.preventDefault();
+        if (!validateEmail(ev.target.email.value)) {
+            toast.error("Wrong email format");
+            return;
+        } 
+        if (!validatePassword(ev.target.password.value)) {
+            toast.error("Password should be at least 4 characters long");
+            return;
+        } 
+
         Register(ev);
     };