initial changes

todoapp/src/Components/CreateItem.jsx

@@ -29,7 +29,7 @@ function CreateItem() {
             <form onSubmit={handleSubmit}>
                 <div>
                     <label htmlFor="title">Title</label>
-                    <input type="text" placeholder='Enter Title' name='title' className='form-control' onChange={handleChange}/>
+                    <input type="text" placeholder='Enter Title' required name='title' className='form-control' onChange={handleChange}/>
                 </div>
                 <div>
                     <label htmlFor="description">Description</label>

todoapp/src/Components/Login.jsx

@@ -6,13 +6,24 @@ import axios from 'axios'
 function Login() {
     const [username, setUsername] = useState('')
     const [password, setPassword] = useState('')
+    const [errorMessage, setErrorMessage] = useState('')
     const navigate = useNavigate()
 
     axios.defaults.withCredentials = true;
     const handleSubmit = (e) => {
         e.preventDefault()
+
+        if (!username || !password) {
+            setErrorMessage("Both fields are required.")
+            return
+        }
+        setErrorMessage("")
         axios.post('http://localhost:3001/auth/login', {username, password})
         .then(result => {
+            if(result.data.message == "Invalid Credentials"){
+                setErrorMessage("Invalid Credentials")
+                return
+            }
             window.localStorage.setItem("id", result.data.id)
             navigate('/')
             console.log(result)
@@ -24,6 +35,11 @@ function Login() {
         <div className='p-3 border border-1 w-25'>
             <h3>Login</h3>
             <form onSubmit={handleSubmit}>
+                    {errorMessage && (
+                        <div className="alert alert-danger">
+                            {errorMessage}
+                        </div>
+                    )}
                 <div>
                     <label htmlFor="username">Username</label>
                     <input type="text" placeholder='Enter Username' className='form-control' onChange={(e) => setUsername(e.target.value)}/>

todoapp/src/Components/Nav.jsx

@@ -7,7 +7,7 @@ function Nav() {
   const handleLogout = () => {
     window.localStorage.clear()
     axios.get('http://localhost:3001/auth/logout')
-    .then(result => navigate("/"))
+    .then(result => navigate("/auth/login"))
     .catch(err => console.log(err))
   }
   return (
@@ -19,11 +19,20 @@ function Nav() {
               ToDo-Mern
             </Link>
             <ul className="navbar-nav ms-2 me-auto mb-2 mb-lg-0">
+            {
+              window.localStorage.length ?
               <li className="nav-item">
                 <Link className="nav-link text-white" aria-current="page" to="/item/create-item">
                   Create Item
                 </Link>
               </li>
+              :
+              <li className="nav-item">
+                <Link className="nav-link text-white disabled-link" aria-current="page" to="#">
+                  Create Item
+                </Link>
+              </li>
+            }
               <li className="nav-item">
                 <Link className="nav-link text-white" to="/item/completed-item">
                   Completed-Items

todoapp/src/Components/Registration.jsx

@@ -6,10 +6,16 @@ import { Link, useNavigate } from 'react-router-dom'
 function Registration() {
     const [username, setUsername] = useState('')
     const [password, setPassword] = useState('')
+    const [errorMessage, setErrorMessage] = useState('')
     const navigate = useNavigate()
 
     const handleSubmit = (e) => {
         e.preventDefault()
+
+        if (!username || !password) {
+            setErrorMessage("Both fields are required.")
+            return
+        }
         axios.post('http://localhost:3001/auth/register', {username, password})
         .then(result => {
             navigate('/auth/login')
@@ -22,6 +28,11 @@ function Registration() {
         <div className='p-3 border border-1 w-25'>
             <h3>Registration</h3>
             <form onSubmit={handleSubmit}>
+                    {errorMessage && (
+                        <div className="alert alert-danger">
+                            {errorMessage}
+                        </div>
+                    )}
                 <div>
                     <label htmlFor="username">Username</label>
                     <input type="text" placeholder='Enter Username' className='form-control' onChange={(e) => setUsername(e.target.value)}/>