Merge pull request #237 from Gauravtb2253/validate

form validation added

backend/package.json

@@ -4,6 +4,7 @@
   "main": "index.js",
   "type": "module",
   "dependencies": {
+    "backend": "file:",
     "bcrypt": "^5.1.1",
     "cookie-parser": "^1.4.7",
     "cors": "^2.8.5",

frontend/package.json

@@ -24,7 +24,9 @@
     "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.26.2",
     "shadcn-ui": "^0.2.3",
-    "styled-components": "^6.1.13"
+    "station-saarthi": "file:",
+    "styled-components": "^6.1.13",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

frontend/src/Pages/LoginPage.jsx

@@ -2,11 +2,13 @@ import React, { useState } from 'react';
 import logo from '../assets/stationsaarthi.svg'; // Import your logo 
 import { useNavigate } from 'react-router-dom';
 import backicon from '../assets/svg/backicon.svg'; // Assuming you have a back icon
+import { loginValidation } from '../validations/validation';
 
 const Login = () => {
     const [username, setUsername] = useState(''); 
     const [password, setPassword] = useState(''); 
     const [loginSuccess, setLoginSuccess] = useState(false); // State for login success message
+    const [errors,setErrors] = useState({})
     const navigate = useNavigate();
 
     const RegisterClick = () => {
@@ -17,8 +19,26 @@ const Login = () => {
         navigate('/'); // Navigates to the home page
     };
 
-    const handleLogin = (e) => { 
+    const handleLogin = async(e) => { 
         e.preventDefault(); 
+
+        try {
+            await loginValidation.validate(
+              { username, password },
+              { abortEarly: false }
+            );
+            setErrors({});
+          } catch (error) {
+            const newErrors = {};
+            error.inner.forEach((err) => {
+              newErrors[err.path] = err.message;
+              // newErrors[err.path] = err.errors[0];
+            });
+
+            setErrors(newErrors);
+            return;
+          }
+
         // Handle login logic here 
         setLoginSuccess(true); // Set login success to true upon successful login
         setUsername(''); // Clear input fields after login
@@ -38,7 +58,7 @@ const Login = () => {
             </div>
 
             {/* Login Form */}
-            <form onSubmit={handleLogin} className="w-full max-w-sm p-8 bg-white rounded-lg shadow-md">
+            <form noValidate onSubmit={handleLogin} className="w-full max-w-sm p-8 bg-white rounded-lg shadow-md">
                 {/* Login Heading */}
                 <h2 className="py-1 mb-4 text-xl font-bold text-center bg-blue-100 border border-blue-300 shadow-sm rounded-3xl">
                     Login
@@ -63,6 +83,7 @@ const Login = () => {
                         className="w-full px-4 py-2 transition duration-300 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                         required
                     /> 
+                    {errors.username && <div className="text-red-800">{errors.username}</div>}
                 </div> 
 
                 {/* Password Input */} 
@@ -77,6 +98,7 @@ const Login = () => {
                         className="w-full px-4 py-2 transition duration-300 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                         required
                     />
+                    {errors.password && <div className="text-red-800">{errors.password}</div>}
                 </div>
 
                 {/* Login Button */}