Task for Week 3 completed

.github/workflows/node.js.yml

@@ -0,0 +1,31 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x, 18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm test

README.md

@@ -1,5 +1,6 @@
 # ReactJS Todo Application - CSoC Dev Web Task 3
 
+### While registering on the register page , keep the inspect/console panel ON TO know if you have to try again !
 ## Introduction
 
 In this task you will be working on a todo application made using NextJS a SSR framework for ReactJS. The main motive of this task is to make you familiar with:

components/AddTask.js

@@ -1,18 +1,51 @@
+import { useState } from "react";
+import axios from "../utils/axios";
+import { useAuth } from "../context/auth";
+import { toast } from 'react-toastify';
+
 export default function AddTask() {
+
+	const [Thistask , setThistask]=useState('task');
+	const {token} = useAuth();
+
 	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.
 		 */
+
+
+		const data={
+			"title": Thistask
+		  }
+		  axios
+		  .post(
+			'todo/create/',
+			data,
+			{
+			  headers:{
+				'Authorization': 'Token ' + token,
+				'Content-Type': 'application/json',
+			  }
+			})
+			.then(()=>{
+			setThistask('');
+			toast.success('Task added succesfully!!');
+		  }).catch((err)=>{
+			toast.error('Some error Occured!')
+			console.log(err);
+		  })
 	};
 
 	return (
-		<div className="flex items-center max-w-sm mt-24">
+		<div className="flex items-center max-w-sm mt-10">
 			<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"
+				value={Thistask}
+				onChange={(e)=> setThistask(e.target.value)}
 			/>
 			<button
 				type="button"

components/LoginForm.js

@@ -1,23 +1,85 @@
+import { useRouter } from 'next/router'
+// import { useEffect } from 'react'
+import { useAuth } from '../context/auth'
+import { useState } from 'react';
+import axios from 'axios';
+import { NoAuthrequired } from '../middlewares/no_auth_required';
+import { toast } from 'react-toastify';
+import Link from "next/link";
+
+
 export default function RegisterForm() {
-	const login = () => {
+	NoAuthrequired();
+
+	const { setToken } = useAuth();
+	const router = useRouter();
+
+	const [password, setPassword] = useState("");
+	const [username, setUsername] = useState("");
+
+	const registerFieldsAreValid = (username, password) => {
+		if (username === "" || password === "") {
+			console.log("Please fill all the fields correctly.");
+			return false;
+		}
+
+		return true;
+	};
+
+
+
+	const login = (e) => {
 		/***
 		 * @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)
-		 */
+		Stackoverflow
+
+	1.)idea of using Toast
+	2.)axios format and other info  
+
+		*/
+
+		e.preventDefault();
+
+		if (registerFieldsAreValid(username, password)) {
+			console.log("Please wait...");
+
+			const dataForApiRequest = {
+				username: username,
+				password: password,
+			};
+
+			axios
+				.post("auth/login/", dataForApiRequest)
+				.then(() => {
+					setToken(data.token);
+					toast.sucess('Login was successful!!')
+					router.push('/');
+					router.reload();
+				})
+				.catch(function (err) {
+					toast.error('Try Checking the Credentials if they are Right or were You Rick-Rolled!');
+					console.log(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-xl 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"
+						value={username}
+						onChange={(e) => setUsername(e.target.value)}
 						placeholder="Username"
 					/>
 
@@ -26,6 +88,8 @@ export default function RegisterForm() {
 						className="block border border-grey-light w-full p-3 rounded mb-4"
 						name="inputPassword"
 						id="inputPassword"
+						value={password}
+						onChange={(e) => setPassword(e.target.value)}
 						placeholder="Password"
 					/>
 
@@ -35,6 +99,7 @@ export default function RegisterForm() {
 						onClick={login}>
 						Login
 					</button>
+					<h6 className="m-8 text-xs text-center font-extralight">No account yet ? No Worries!<span className='font-bold'> <Link href="/register" >Register Here!</Link> </span></h6>
 				</div>
 			</div>
 		</div>

components/Nav.js

@@ -7,47 +7,50 @@ import { useAuth } from "../context/auth";
  * @todo Condtionally render login/register and Profile name in NavBar
  */
 
+
+
+
 export default function Nav() {
 	const { logout, profileName, avatarImage } = useAuth();
 
 	return (
-		<nav className="bg-blue-600">
+		<nav className="bg-pink-500">
 			<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>
+								<h1 className="text-blue font-bold text-xl">Todo</h1>
 							</a>
 						</Link>
 					</li>
 				</ul>
 				<ul className="flex">
-					<li className="text-white mr-2">
+					<li className="text-blue ml-20 mr-20 font-normal hover:font-bold ">
 						<Link href="/login">Login</Link>
-					</li>
-					<li className="text-white">
+					</li> 
+					<li className="text-blue font-normal hover:font-bold " >
 						<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>
+				<div className="inline-block relative w-50  ">
+					<div className="group inline-block relative hover: delay-1000">
+						<button className="bg-transparent border-2  text-gray-700 font-semibold py-2 px-4 rounded-xl  items-center flex flex-row">
+							<img src={avatarImage} className="rounded-xl " />
+							<span className="mr-1 ml-2">{profileName}</span>
 							<svg
-								className="fill-current h-4 w-4"
+								className="fill-current h-4 w-4 rounded-xl"
 								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">
+						<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"
+									className="rounded-xl bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
 									href="#"
-									onClick={logout}>
+									onClick={()=>logout()}>
 									Logout
 								</a>
 							</li>

components/RegisterForm.js

@@ -2,8 +2,14 @@ import React, { useState } from "react";
 import axios from "../utils/axios";
 import { useAuth } from "../context/auth";
 import { useRouter } from "next/router";
+import { NoAuthrequired } from "../middlewares/no_auth_required";
+import Link from "next/link";
+import { toast } from 'react-toastify';
+
+
 
 export default function Register() {
+	NoAuthrequired();
 	const { setToken } = useAuth();
 	const router = useRouter();
 
@@ -15,17 +21,17 @@ 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.");
+			toast.error("Please fill all the fields correctly.");
 			return false;
 		}
 		if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
-			console.log("Please enter a valid email address.");
+			toast.error("Please enter a valid email address.");
 			return false;
 		}
 		return true;
 	};
 
-	const register = (e) => {
+	const register = async (e) => {
 		e.preventDefault();
 
 		if (registerFieldsAreValid(firstName, lastName, email, username, password)) {
@@ -38,22 +44,23 @@ export default function Register() {
 				password: password,
 			};
 
-			axios
+			await axios
 				.post("auth/register/", dataForApiRequest)
 				.then(function ({ data, status }) {
 					setToken(data.token);
 					router.push("/");
+					router.reload();
 				})
 				.catch(function (err) {
-					console.log("An account using same email or username is already created");
+					toast.error("An account using same email or username is already created");
 				});
 		}
 	};
 
 	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-xl text-black w-full">
 					<h1 className="mb-8 text-3xl text-center">Register</h1>
 					<input
 						type="text"
@@ -107,9 +114,10 @@ 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"
-						onClick={register}>
+						onClick={(e)=>register(e)}>
 						Register
 					</button>
+					<h6 className="m-8 text-xs text-center font-extralight">Do you have an Account? <span className='font-bold'> <Link href="/login" >Login Here!</Link> </span></h6>
 				</div>
 			</div>
 		</div>