modified all the files needed

components/AddTask.js

@@ -5,6 +5,29 @@ export default function AddTask() {
 		 * @todo 1. Send the request to add the task to the backend server.
 		 * @todo 2. Add the task in the dom.
 		 */
+
+		const inputField = document.querySelector('.todo-add-task-input');
+		const task = inputField.value;
+
+		// Step 1: Send the request to add the task to the backend server
+		// Example implementation using fetch API
+		fetch('/api/tasks', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({ task }),
+		})
+			.then(response => response.json())
+			.then(data => {
+				// Step 2: Add the task in the DOM
+				const taskElement = document.createElement('div');
+				taskElement.textContent = data.task;
+				document.body.appendChild(taskElement);
+			})
+			.catch(error => {
+				console.error('Error:', error);
+			});
 	};
 
 	return (

components/LoginForm.js

@@ -6,7 +6,46 @@ export default function RegisterForm() {
 		 * @todo 2. Fetch the auth token from backend and login the user.
 		 * @todo 3. Set the token in the context (See context/auth.js)
 		 */
+
+		const login = () => {
+			const inputUsername = document.getElementById('inputUsername');
+			const inputPassword = document.getElementById('inputPassword');
+
+			// Step 1: Form validation
+			if (inputUsername.value.trim() === '') {
+				alert('Please enter your username.');
+				return;
+			}
+
+			if (inputPassword.value.trim() === '') {
+				alert('Please enter your password.');
+				return;
+			}
+
+			// Step 2: Fetch the auth token from the backend and login the user
+			fetch('/api/login', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+				},
+				body: JSON.stringify({
+					username: inputUsername.value,
+					password: inputPassword.value,
+				}),
+			})
+			.then(response => response.json())
+			.then(data => {
+				// Step 3: Set the token in the context (assuming you have an AuthContext)
+				AuthContext.setToken(data.token);
+
+				// Optional: Perform additional actions after successful login
+				// For example, navigate to a different page or update the UI
+			})
+			.catch(error => {
+				console.error('Error:', error);
+			});
 	};
+}
 
 	return (
 		<div className="bg-grey-lighter min-h-screen flex flex-col">

components/Nav.js

@@ -8,7 +8,7 @@ import { useAuth } from "../context/auth";
  */
 
 export default function Nav() {
-	const { logout, profileName, avatarImage } = useAuth();
+	const { isAuthenticated,logout, profileName, avatarImage } = useAuth();
 
 	return (
 		<nav className="bg-blue-600">
@@ -23,13 +23,25 @@ export default function Nav() {
 					</li>
 				</ul>
 				<ul className="flex">
+				{isAuthenticated }? (
+
+							<li className="text-white mr-2">{profileName}</li>
+							<li className="text-white">
+								<a href="#" onClick={logout}>
+									Logout
+								</a>
+							</li>) : 
+							(
+
 					<li className="text-white mr-2">
 						<Link href="/login">Login</Link>
 					</li>
 					<li className="text-white">
 						<Link href="/register">Register</Link>
-					</li>
+					</li>)
 				</ul>
+				{isAuthenticated && (
+
 				<div className="inline-block relative w-28">
 					<div className="group inline-block relative">
 						<button className="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center">
@@ -53,7 +65,7 @@ export default function Nav() {
 							</li>
 						</ul>
 					</div>
-				</div>
+				</div>)}
 			</ul>
 		</nav>
 	);

components/TodoListItem.js

@@ -6,6 +6,16 @@ export default function TodoListItem() {
 		 * @todo Complete this function.
 		 * @todo 1. Update the dom accordingly
 		 */
+		const editInput = document.getElementById(`input-button-${id}`);
+		const doneButton = document.getElementById(`done-button-${id}`);
+		const taskText = document.getElementById(`task-${id}`);
+		const taskActions = document.getElementById(`task-actions-${id}`);
+
+		// Step 1: Update the DOM accordingly
+		editInput.classList.remove('hideme');
+		doneButton.classList.remove('hideme');
+		taskText.classList.add('hideme');
+		taskActions.classList.add('hideme');
 	};
 
 	const deleteTask = (id) => {
@@ -14,6 +24,19 @@ export default function TodoListItem() {
 		 * @todo 1. Send the request to delete the task to the backend server.
 		 * @todo 2. Remove the task from the dom.
 		 */
+		// Step 1: Send the request to delete the task to the backend server
+		fetch(`/api/tasks/${id}`, {
+			method: 'DELETE',
+		})
+			.then(response => response.json())
+			.then(data => {
+				// Step 2: Remove the task from the DOM
+				const taskElement = document.getElementById(`task-${id}`);
+				taskElement.remove();
+			})
+			.catch(error => {
+				console.error('Error:', error);
+			});
 	};
 
 	const updateTask = (id) => {
@@ -22,6 +45,33 @@ export default function TodoListItem() {
 		 * @todo 1. Send the request to update the task to the backend server.
 		 * @todo 2. Update the task in the dom.
 		 */
+		const editInput = document.getElementById(`input-button-${id}`);
+		const doneButton = document.getElementById(`done-button-${id}`);
+		const taskText = document.getElementById(`task-${id}`);
+		const taskActions = document.getElementById(`task-actions-${id}`);
+
+		// Step 1: Send the request to update the task to the backend server
+		fetch(`/api/tasks/${id}`, {
+			method: 'PUT',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({ task: editInput.value }),
+		})
+			.then(response => response.json())
+			.then(data => {
+				// Step 2: Update the task in the DOM
+				taskText.textContent = data.task;
+
+				// Step 3: Update the DOM accordingly
+				editInput.classList.add('hideme');
+				doneButton.classList.add('hideme');
+				taskText.classList.remove('hideme');
+				taskActions.classList.remove('hideme');
+			})
+			.catch(error => {
+				console.error('Error:', error);
+			});
 	};
 
 	return (

middlewares/auth_required.js

@@ -1,3 +1,20 @@
 /***
  * @todo Redirect the user to login page if token is not present.
  */
+
+import { useRouter } from "next/router";
+import { useAuth } from "../context/auth";
+
+export default function TodoListItem() {
+  const { isAuthenticated } = useAuth();
+  const router = useRouter();
+
+
+  // Redirect to login if token is not present
+  if (!isAuthenticated) {
+    router.push("/login");
+    return null; // Render nothing while redirecting
+  }
+
+
+}

middlewares/no_auth_required.js

@@ -1,3 +1,18 @@
 /***
  * @todo Redirect the user to main page if token is present.
  */
+
+import { useRouter } from "next/router";
+import { useAuth } from "../context/auth";
+
+export default function TodoListItem() {
+  const { isAuthenticated } = useAuth();
+  const router = useRouter();
+
+
+  // Redirect to main page if token is present
+  if (isAuthenticated) {
+    router.push("/");
+    return null; // Render nothing while redirecting
+  }
+}