week 3 assignment

components/AddTask.js

@@ -1,25 +1,25 @@
-export default function AddTask() {
-	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.
-		 */
+import axios from "../utils/axios";
+import { useState } from "react";
+export default function AddTask({ add, token }) {
+	const addTask = async () => {
+	try {let id = await axios.post(
+		"todo/create/",{title,},
+				{headers: {Authorization: `Token ${token}`,"Content-Type": "application/json",},
+				}
+			);
+setTitle("");add();
+		} catch (err) {console.log(err);}
 	};
-
+	const [title, setTitle] = useState("");
 	return (
-		<div className="flex items-center max-w-sm mt-24">
+		<div className= "flex items-center max-w-sm mt-24">
 			<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"
 				placeholder="Enter Task"
+				onChange={(e) => {setTitle(e.target.value);}}
+				value={title}
 			/>
-			<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"
-				onClick={addTask}>
-				Add Task
-			</button>
-		</div>
+			<button type="button" className="todo-add-task bg-transparent hover:bg-yellow-500 text-green-700 text-sm hover:text-white px-3 py-2 border border-green-500 hover:border-transparent rounded" onClick={addTask}>Add Task</button></div>
 	);
 }

components/LoginForm.js

@@ -1,24 +1,40 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { useAuth } from "../context/auth";
+import axios from "../utils/axios";
+import Link from "next/link";
+
 export default function RegisterForm() {
-	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 [username, setUsername] = useState("");
+	const [password, setPassword] = useState("");
+	const { setToken } = useAuth();
+	const router = useRouter();
+	const login = async (e) => {
+		e.preventDefault();
+		if (username === "" || password === "") { console.log("Don't leave blank fields");
+		return;
+		}
+		const dataForApiRequest = {username, password};
+try {const { data, status } = await axios.post("auth/login/",dataForApiRequest);
+			// console.log(data.token);
+			setToken(data.token);
+			router.push("/");
+		} catch (err) {console.log(err,"same email or username is already used");}
 	};
 
 	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-pink px-6 py-8 rounded shadow-md text-black w-full">
 					<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"
 						placeholder="Username"
+						value={username}
+						onChange={(e) => setUsername(e.target.value)}
 					/>
 
 					<input
@@ -27,14 +43,17 @@ export default function RegisterForm() {
 						name="inputPassword"
 						id="inputPassword"
 						placeholder="Password"
+						value={password}
+						onChange={(e) => setPassword(e.target.value)}
 					/>
 
-					<button
-						type="submit"
-						className="w-full text-center py-3 rounded bg-transparent text-green-500 hover:text-white hover:bg-green-500 border border-green-500 hover:border-transparent focus:outline-none my-1"
-						onClick={login}>
-						Login
-					</button>
+					<button type="submit" className="w-full text-center py-3 rounded bg-transparent text-yellow-500 hover:text-white hover:bg-yellow-500 border border-yellow-500 hover:border-transparent focus:outline-none my-1" onClick={login}>Login</button>
+
+					<hr className="relative top-3" />
+
+					<div className="flex justify-center relative top-5 text-sm text-gray-500">
+						Don&apos;t have an account?<span className="text-blue-600"><Link href="/register"> &nbsp; Register</Link></span>
+					</div>
 				</div>
 			</div>
 		</div>

components/Nav.js

@@ -1,60 +1,89 @@
 /* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable @next/next/no-img-element */
-import Link from "next/link";
 import { useAuth } from "../context/auth";
-/**
- *
- * @todo Condtionally render login/register and Profile name in NavBar
- */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Link from 'next/link';
 
-export default function Nav() {
-	const { logout, profileName, avatarImage } = useAuth();
+export default function Nav(props) {
+  const [bodyColor, setBodyColor] = useState('');
 
-	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>
-				</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>
-	);
+  const { logout, profileName, avatarImage, token } = useAuth();
+
+  const handleColorChange = (color) => {
+    document.body.style.backgroundColor = color;
+    setBodyColor(color);
+  };
+
+  return (
+    <nav className="Navbar">
+      <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-pink font-bold text-xl">Todo</h1></a></Link>
+          </li>
+        </ul>
+        {!token && (
+          <ul className="flex">
+            <li className="text-pink mr-2">
+              <Link href="/login">Login</Link>
+            </li>
+            <li className="text-pink">
+              <Link href="/register">Register</Link>
+            </li>
+          </ul>
+        )}
+        <div className="d-flex">
+          <div
+            className="bg-primary rounded mx-2"
+            onClick={() => handleColorChange('primary')}
+            style={{ height: '30px', width: '30px', cursor: 'pointer' }}
+          ></div>
+          <div
+            className="bg-danger rounded mx-2"
+            onClick={() => handleColorChange('danger')}
+            style={{ height: '30px', width: '30px', cursor: 'pointer' }}
+          ></div>
+          <div
+            className="bg-success rounded mx-2"
+            onClick={() => handleColorChange('success')}
+            style={{ height: '30px', width: '30px', cursor: 'pointer' }}
+          ></div>
+          <div
+            className="bg-warning rounded mx-2"
+            onClick={() => handleColorChange('warning')}
+            style={{ height: '30px', width: '30px', cursor: 'pointer' }}
+          ></div>
+        </div>
+
+        <li className="inline-block relative h-12">
+							<div className="group inline-block relative ">
+								<button className="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded-xl inline-flex items-center hover:bg-gray-400 transition-all duration-500">
+									<img src={avatarImage} className="mx-3" />
+									<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 w-full text-center">
+									<li className="">
+										<span
+											className="transition-all duration-500 rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap cursor-pointer"
+											onClick={logout}>
+											Logout
+										</span>
+									</li>
+								</ul>
+							</div>
+						</li>
+      </ul>
+    </nav>
+  );
 }
+
+Nav.propTypes = {
+  title: PropTypes.string,
+  aboutText: PropTypes.string,
+};

components/RegisterForm.js

@@ -15,7 +15,7 @@ export default function Register() {
 
 	const registerFieldsAreValid = (firstName, lastName, email, username, password) => {
 		if (firstName === "" || lastName === "" || email === "" || username === "" || password === "") {
-			console.log("Please fill all the fields correctly.");
+			console.log("fill all the fields correctly.");
 			return false;
 		}
 		if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
@@ -41,11 +41,12 @@ export default function Register() {
 			axios
 				.post("auth/register/", dataForApiRequest)
 				.then(function ({ data, status }) {
+					console.log(data.token)
 					setToken(data.token);
 					router.push("/");
 				})
 				.catch(function (err) {
-					console.log("An account using same email or username is already created");
+					console.log("An account with same username/email is already created");
 				});
 		}
 	};
@@ -106,7 +107,7 @@ export default function Register() {
 
 					<button
 						type="submit"
-						className="w-full text-center py-3 rounded bg-transparent text-green-500 hover:text-white hover:bg-green-500 border border-green-500 hover:border-transparent focus:outline-none my-1"
+						className="w-full text-center py-3 rounded bg-transparent text-yellow-500 hover:text-white hover:bg-yellow-500 border border-yellow-500 hover:border-transparent focus:outline-none my-1"
 						onClick={register}>
 						Register
 					</button>
@@ -115,3 +116,6 @@ export default function Register() {
 		</div>
 	);
 }
+
+
+