added input validations

client/package.json

@@ -29,6 +29,7 @@
     "lucide-react": "^0.447.0",
     "match-sorter": "^6.3.4",
     "mdb-react-ui-kit": "^7.2.0",
+    "open-source": "file:",
     "otp-input-react": "^0.3.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
@@ -44,7 +45,8 @@
     "react-top-loading-bar": "^2.3.1",
     "socket.io": "^4.7.5",
     "socket.io-client": "^4.7.5",
-    "sort-by": "^1.2.0"
+    "sort-by": "^1.2.0",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.55",

client/src/component/Login.jsx

@@ -1,40 +1,61 @@
-import PropTypes from 'prop-types';
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Link } from 'react-router-dom';
+import PropTypes from "prop-types";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 // import './css/Auth.css';
-import './css/Login.css'
+import "./css/Login.css";
+import { loginValidation } from "../validations/validation";
 const host = "http://localhost:5000";
 
 const Login = (props) => {
-  const [credentials, setCredentials] = useState({ email: "", password: "" });
+  // const [credentials, setCredentials] = useState({ email: "", password: "" });
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [errors, setErrors] = useState({});
   let navigate = useNavigate();
   const handleSubmit = async (e) => {
-    // To not Reload after click submit 
+    // To not Reload after click submit
     e.preventDefault();
+
+    try {
+      await loginValidation.validate(
+        { email, 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;
+    }
+
     const response = await fetch(`${host}/api/auth/login`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({ email: credentials.email, password: credentials.password }),
+      body: JSON.stringify({ email: email, password: password }),
     });
     const json = await response.json();
     console.log(json);
 
     if (json.success) {
       // Save the auth token and redirect
-      localStorage.setItem('token', json.authtoken);
-      props.showAlert("Logged in Successfully", "success")
+      localStorage.setItem("token", json.authtoken);
+      props.showAlert("Logged in Successfully", "success");
       navigate("/");
+    } else {
+      props.showAlert("Invalid Credentials", "danger");
     }
-    else {
-      props.showAlert("Invalid Credentials", "danger")
-    }
-  }
+  };
   const onChange = (e) => {
-    setCredentials({ ...credentials, [e.target.name]: e.target.value })
-  }
+    setCredentials({ ...credentials, [e.target.name]: e.target.value });
+  };
 
   // return (
   //   <div className="Login">
@@ -57,7 +78,7 @@ const Login = (props) => {
   //           </div>
   //         </form>
   //         <div className="social-account-container">
-  //           <div className='my-4 p-2 text-center'>Don&#39;t have an account? 
+  //           <div className='my-4 p-2 text-center'>Don&#39;t have an account?
   //             <Link to="/Signup"> Signup</Link>
   //           </div>
   //           {/* <span className="title">Or Sign in with</span> */}
@@ -85,41 +106,82 @@ const Login = (props) => {
   //   </div>
   // )
 
- return (
-  <div className="wrapper">
-  <form onSubmit={handleSubmit} className="form">
-
-      <h1 className="title">Login</h1>
-      <span className="title-line"></span>
-      <div className="inp">
-          <input type="email" className="input" placeholder="Email" value={credentials.email} onChange={onChange} id="email" name='email' aria-describedby="emailHelp" autoComplete='on'/>
+  return (
+    <div className="wrapper">
+      <form onSubmit={handleSubmit} className="form" noValidate>
+        <h1 className="title">Login</h1>
+        <span className="title-line"></span>
+        <div className="inp">
+          <input
+            type="email"
+            className="input"
+            placeholder="Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            id="email"
+            name="email"
+            aria-describedby="emailHelp"
+            autoComplete="on"
+          />
+          {errors.email && <div className="text-danger">{errors.email}</div>}
           <i className="fa-solid fa-user"></i>
-      </div>
-      <div className="inp">
-          <input type="password" className="input" placeholder="Password" id='password' value={credentials.password} onChange={onChange} name='password' autoComplete='on'/>
+        </div>
+        <div className="inp">
+          <input
+            type="password"
+            className="input"
+            placeholder="Password"
+            id="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            name="password"
+            autoComplete="on"
+          />
+          {errors.password && (
+            <div className="text-danger">{errors.password}</div>
+          )}
           <i className="fa-solid fa-lock"></i>
-      </div>
-      <button className="submit" type='submit' onChange={onChange} onSubmit={handleSubmit}>Login</button>
-      <p className="footer">Dont have an account?  <Link className='link' to="/Signup"> Please Sign Up</Link></p>
-
-      <a href="/ForgotPassword">Forgot Password ?</a>
-
-  </form>
-  <div></div>
-  <div className="banner">
-      <h1 className="wel_text">WELCOME<br/>BACK !</h1>
-      <p className="para">Please Sign In here<br/>with your some<br/>-- real info</p>
-  </div>
-</div>
-
- )
+        </div>
+        <button
+          className="submit"
+          type="submit"
+          onChange={onChange}
+          onSubmit={handleSubmit}
+        >
+          Login
+        </button>
+        <p className="footer">
+          Dont have an account?{" "}
+          <Link className="link" to="/Signup">
+            {" "}
+            Please Sign Up
+          </Link>
+        </p>
 
-
-}
+        <a href="/ForgotPassword">Forgot Password ?</a>
+      </form>
+      <div></div>
+      <div className="banner">
+        <h1 className="wel_text">
+          WELCOME
+          <br />
+          BACK !
+        </h1>
+        <p className="para">
+          Please Sign In here
+          <br />
+          with your some
+          <br />
+          -- real info
+        </p>
+      </div>
+    </div>
+  );
+};
 
 // Props Vadilation
 Login.propTypes = {
   showAlert: PropTypes.func,
 };
 
-export default Login
+export default Login;