feat: add input validation to login form

src/pages/LoginPage.jsx

@@ -8,15 +8,47 @@ function LoginPage() {
     password: "",
   });
 
+  const [errors, setErrors] = useState({});
+
+  const validateForm = () => {
+    const newErrors = {};
+
+    if (!formData.email.trim()) {
+      newErrors.email = "Email is required.";
+    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+      newErrors.email = "Please enter a valid email address.";
+    }
+
+    if (!formData.password.trim()) {
+      newErrors.password = "Password is required.";
+    } else if (formData.password.length < 6) {
+      newErrors.password = "Password must be at least 6 characters.";
+    }
+
+    return newErrors;
+  };
+
   const handleChange = (e) => {
     setFormData((prev) => ({
       ...prev,
       [e.target.name]: e.target.value,
     }));
+
+    setErrors((prev) => ({
+      ...prev,
+      [e.target.name]: "",
+    }));
   };
 
   const handleSubmit = (e) => {
     e.preventDefault();
+
+    const validationErrors = validateForm();
+    if (Object.keys(validationErrors).length > 0) {
+      setErrors(validationErrors);
+      return;
+    }
+
     navigate("/landing");
   };
 
@@ -38,6 +70,7 @@ function LoginPage() {
             value={formData.email}
             onChange={handleChange}
           />
+          {errors.email && <p className="field-error">{errors.email}</p>}
 
           <label>Password</label>
           <input
@@ -47,6 +80,7 @@ function LoginPage() {
             value={formData.password}
             onChange={handleChange}
           />
+          {errors.password && <p className="field-error">{errors.password}</p>}
 
           <button type="submit" className="primary-btn full-width">
             Login