CSOC-23 · Sumitwarrior7 · Jul 11, 2023
diff --git a/components/AddTask.js b/components/AddTask.js
@@ -1,22 +1,47 @@
-export default function AddTask() {
+import { useState } from "react";
+import { useAuth } from "../context/auth";
+import axios from "axios";
+
+export default function AddTask({ updateTasks }) {
+	const backendUrl = "https://todo-api-s7vj.onrender.com"
+	const { token } = useAuth();
+	const [taskData, setTaskdata] = useState()
+
 	const addTask = () => {
 		/**
 		 * @todo Complete this function.
 		 * @todo 1. Send the request to add the task to the backend server.
 		 * @todo 2. Add the task in the dom.
 		 */
+		console.log("Token :", token)
+
+		axios.post(`${backendUrl}/todo/create/`, { title: taskData }, {
+			headers: {
+				Authorization: `Token ${token}`, 
+			},
+			})
+			.then(response => {
+				console.log('Todo created successfully:', response);
+				// updateTasks will call the getTasks() function defined in index.js which will rerender all the tasks including the newer task which is just added
+				updateTasks() 
+			})
+			.catch(error => {
+				console.error('Error creating todo:', error);
+			});
+
 	};
 
 	return (
-		<div className="flex items-center max-w-sm mt-24">
+		<div className="flex items-center max-w-lg mt-2 mb-8 justify-center">
 			<input
 				type="text"
-				className="todo-add-task-input px-4 py-2 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full"
+				className="todo-add-task-input px-4 py-2 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-md border border-blueGray-300 outline-none focus:outline-none focus:ring w-full"
 				placeholder="Enter Task"
+				onChange={(e) => { setTaskdata(e.target.value) }}
 			/>
 			<button
 				type="button"
-				className="todo-add-task bg-transparent hover:bg-green-500 text-green-700 text-sm hover:text-white px-3 py-2 border border-green-500 hover:border-transparent rounded"
+				className="todo-add-task bg-transparent hover:bg-green-500 text-green-700 text-md hover:text-white px-3 py-2 border border-green-500 hover:border-transparent rounded"
 				onClick={addTask}>
 				Add Task
 			</button>

diff --git a/components/LoginForm.js b/components/LoginForm.js
@@ -1,23 +1,72 @@
+import React, { useState } from "react";
+import axios from "../utils/axios";
+import { useAuth } from "../context/auth";
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+
 export default function RegisterForm() {
+	const { setToken } = useAuth();
+	const router = useRouter();
+
+	const [uname, setUname] = useState("");
+	const [pass, setPass] = useState("");
+
 	const login = () => {
 		/***
 		 * @todo Complete this function.
 		 * @todo 1. Write code for form validation.
 		 * @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_validations = (username, password) => {
+			if (username === "" || password === "") {
+				console.log("Please fill all the fields correctly.");
+				return false;
+			}
+			return true;
+		};
+
+		if (login_validations(uname, pass)) {
+			console.log("Please wait...");
+
+			const login_credentials = {
+				username: uname,
+				password: pass,
+			};
+
+			axios
+				.post("/auth/login/", login_credentials)
+				.then(function ({ data, status }) {
+					const token = data.token;
+					setToken(token);
+					router.push("/").then(() => {
+						window.location.reload();
+					});
+					// router.push("/");
+					// window.location.reload();
+				})
+				.catch(function (err) {
+					console.log("An error occurred :", err);
+				});
+		}
+
+
 	};
 
 	return (
 		<div className="bg-grey-lighter min-h-screen flex flex-col">
 			<div className="container max-w-sm mx-auto flex-1 flex flex-col items-center justify-center px-2">
-				<div className="bg-white px-6 py-8 rounded shadow-md text-black w-full">
+				<div className="bg-white px-6 py-8 rounded shadow-md text-black w-full" style={{ width: "" }}>
 					<h1 className="mb-8 text-3xl text-center">Login</h1>
 					<input
 						type="text"
 						className="block border border-grey-light w-full p-3 rounded mb-4"
 						name="inputUsername"
 						id="inputUsername"
+						value={uname}
+						onChange={(e) => setUname(e.target.value)}
 						placeholder="Username"
 					/>
 
@@ -26,6 +75,8 @@ export default function RegisterForm() {
 						className="block border border-grey-light w-full p-3 rounded mb-4"
 						name="inputPassword"
 						id="inputPassword"
+						value={pass}
+						onChange={(e) => setPass(e.target.value)}
 						placeholder="Password"
 					/>
 
@@ -35,6 +86,9 @@ export default function RegisterForm() {
 						onClick={login}>
 						Login
 					</button>
+					<div className="mt-3 text-center text-sm">
+						Not registered yet, <Link href="/register"><span className="text-lg font-semibold underline text-blue-500">Register</span></Link> here
+					</div>
 				</div>
 			</div>
 		</div>

diff --git a/components/Nav.js b/components/Nav.js
@@ -2,59 +2,101 @@
 /* eslint-disable @next/next/no-img-element */
 import Link from "next/link";
 import { useAuth } from "../context/auth";
+import { useState, useEffect, useRef } from "react";
 /**
  *
  * @todo Condtionally render login/register and Profile name in NavBar
  */
 
+
 export default function Nav() {
 	const { logout, profileName, avatarImage } = useAuth();
-
+	const [isDropdownOpen, setDropdownOpen] = useState(false);
+	const dropdownRef = useRef(null);
+
+	const toggleDropdown = () => {
+	  setDropdownOpen(!isDropdownOpen);
+	};
+
+	const handleClickOutside = (event) => {
+	  if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+		setDropdownOpen(false);
+	  }
+	};
+
+	useEffect(() => {
+	  document.addEventListener("click", handleClickOutside);
+	  return () => {
+		document.removeEventListener("click", handleClickOutside);
+	  };
+	}, []);
+
 	return (
-		<nav className="bg-blue-600">
-			<ul className="flex items-center justify-between p-5">
-				<ul className="flex items-center justify-between space-x-4">
-					<li>
-						<Link href="/" passHref={true}>
-							<a>
-								<h1 className="text-white font-bold text-xl">Todo</h1>
-							</a>
-						</Link>
-					</li>
-				</ul>
-				<ul className="flex">
-					<li className="text-white mr-2">
-						<Link href="/login">Login</Link>
-					</li>
-					<li className="text-white">
-						<Link href="/register">Register</Link>
-					</li>
+	  <nav className="bg-blue-600">
+		<ul className="flex items-center justify-between px-5 py-3">
+		  <ul className="flex items-center space-x-4">
+			<li>
+			  <Link href="/" passHref={true}>
+				<a className="text-white font-bold text-xl">Todo</a>
+			  </Link>
+			</li>
+		  </ul>
+		  <ul className="flex">
+			{!profileName && (
+			  <>
+				<li className="text-white mr-2">
+				  <Link href="/login">
+					<a className="text-white hover:text-gray-300">Login</a>
+				  </Link>
+				</li>
+				<li className="text-white">
+				  <Link href="/register">
+					<a className="text-white hover:text-gray-300">Register</a>
+				  </Link>
+				</li>
+			  </>
+			)}
+		  </ul>
+		  {profileName && (
+			<div
+			  id="right-part-nav"
+			  className="relative"
+			  onClick={toggleDropdown}
+			  ref={dropdownRef}
+			>
+			  <button className="flex items-center bg-gray-300 text-gray-700 font-semibold py-2 px-3 rounded">
+				<img
+				  className="h-8 w-8 rounded-full mr-2"
+				  src={avatarImage}
+				  alt="Profile"
+				/>
+				<span className="text-sm text-gray-700">{profileName}</span>
+				<svg
+				  className={`ml-1 fill-current h-4 w-4 ${
+					isDropdownOpen ? "transform rotate-180" : ""
+				  }`}
+				  xmlns="http://www.w3.org/2000/svg"
+				  viewBox="0 0 20 20"
+				>
+				  <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+				</svg>
+			  </button>
+			  {isDropdownOpen && (
+				<ul className="absolute right-0 mt-2 text-gray-700 bg-white border rounded shadow-lg">
+				  <li>
+					<a
+					  className="block px-4 py-2 hover:bg-gray-100"
+					  href="#"
+					  onClick={logout}
+					>
+					  Logout
+					</a>
+				  </li>
 				</ul>
-				<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">
-							<img src={avatarImage} />
-							<span className="mr-1">{profileName}</span>
-							<svg
-								className="fill-current h-4 w-4"
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 20 20">
-								<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
-							</svg>
-						</button>
-						<ul className="absolute hidden text-gray-700 pt-1 group-hover:block">
-							<li className="">
-								<a
-									className="rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
-									href="#"
-									onClick={logout}>
-									Logout
-								</a>
-							</li>
-						</ul>
-					</div>
-				</div>
-			</ul>
-		</nav>
+			  )}
+			</div>
+		  )}
+		</ul>
+	  </nav>
 	);
-}
+  }
diff --git a/components/RegisterForm.js b/components/RegisterForm.js
@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import axios from "../utils/axios";
 import { useAuth } from "../context/auth";
 import { useRouter } from "next/router";
+import Link from "next/link";
+
 
 export default function Register() {
 	const { setToken } = useAuth();
@@ -42,7 +44,9 @@ export default function Register() {
 				.post("auth/register/", dataForApiRequest)
 				.then(function ({ data, status }) {
 					setToken(data.token);
-					router.push("/");
+					router.push("/").then(() => {
+						window.location.reload();
+					});
 				})
 				.catch(function (err) {
 					console.log("An account using same email or username is already created");
@@ -51,7 +55,7 @@ export default function Register() {
 	};
 
 	return (
-		<div className="bg-grey-lighter min-h-screen flex flex-col">
+		<div className="bg-grey-lighter min-h-screen flex flex-col px-5">
 			<div className="container max-w-sm mx-auto flex-1 flex flex-col items-center justify-center px-2">
 				<div className="bg-white px-6 py-8 rounded shadow-md text-black w-full">
 					<h1 className="mb-8 text-3xl text-center">Register</h1>
@@ -110,6 +114,9 @@ export default function Register() {
 						onClick={register}>
 						Register
 					</button>
+					<div className="mt-3 text-center text-sm">
+						Already registered, <Link href="/login"><span className="text-lg font-semibold underline text-blue-500">Login</span></Link> here
+					</div>
 				</div>
 			</div>
 		</div>