New branch

.eslintrc

@@ -1,3 +1,7 @@
 {
-  "extends": ["next/babel", "next/core-web-vitals"]
+  "extends": ["next", "next/core-web-vitals"],
+  "rules": {
+    // Other rules
+    "@next/next/no-img-element": "off"
+  }
 }

components/AddTask.js

@@ -1,25 +1,65 @@
-export default function AddTask() {
+import { useState } from "react"
+import axios from '../utils/axios'
+import { useAuth } from "../context/auth";
+
+import {displaySuccess, displayWarning, displayError, displayInfo} from '../pages/_app'
+
+
+export default function AddTask(props) {
+
+  const [task, setTask] = useState('');
+  const { token } = useAuth();
+
+
+  const refreshTask = () => props.getTasks();
+
+
   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.
-     */
+
+    if (task === '') {
+      displayWarning("Task Cannot be Empty")
+      return
+    }
+
+    const dataForApiRequest = {
+      title: task,
+    }
+
+    axios({
+      url: 'todo/create/',
+      headers: {
+        Authorization: 'Token ' + token,
+      },
+      method: 'post',
+      data: dataForApiRequest,
+    })
+      .then(function ({ data, status }) {
+        setTask("")
+        refreshTask();
+        displaySuccess("Task Added Successfully")
+      })
+      .catch(function (err) {
+        displayError("Some Error Occurred")
+      })
   }
   return (
-    <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'
-      />
-      <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>
+    <>
+      <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'
+          value={task}
+          onChange={(e) => setTask(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'
+          onClick={addTask}
+        >
+          Add Task
+        </button>
+      </div>
+    </>
   )
 }

components/LoginForm.js

@@ -1,43 +1,97 @@
+import React, { useEffect, useState } from 'react'
+import axios from '../utils/axios'
+import { useAuth } from '../context/auth'
+import { useRouter } from 'next/router'
+import {displaySuccess, displayWarning, displayError, displayInfo} from '../pages/_app'
+
+
 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 router = useRouter();
+  const { setToken, token } = useAuth();
+
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  function logInValidate(username, password) {
+    if (username === '' || password === '') {
+      displayError("Invalid Credential")
+      return false;
+    }
+    return true;
+  }
+
+
+  const login = (e) => {
+
+    e.preventDefault();
+
+    if (logInValidate(username, password)) {
+
+      displayInfo("Please Wait ....");
+
+      const data = {
+        username: username,
+        password: password,
+      }
+
+      axios.post(
+        'auth/login/',
+        data,
+      )
+        .then(function ({ data, status }) {
+
+          displaySuccess("Logged In Succssfully");
+
+          setTimeout(() => {
+            setToken(data.token)
+            router.push('/')
+          }, 3000);
+
+        })
+        .catch(function (err) {
+          displayError('Failed To Log In Try Again')
+        })
+    }
   }
 
   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'>
-          <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'
-          />
-
-          <input
-            type='password'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
-            name='inputPassword'
-            id='inputPassword'
-            placeholder='Password'
-          />
-
-          <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>
+    <>
+      <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'>
+            <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'
+            />
+
+            <input
+              type='password'
+              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'
+            />
+
+            <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>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   )
 }

components/Nav.js

@@ -1,14 +1,22 @@
-/* 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 { displayError } from '../pages/_app'
+
+
+
+
 
 export default function Nav() {
-  const { logout, profileName, avatarImage } = useAuth()
+
+
+  const { logout, profileName, avatarImage, token } = useAuth()
+
+
+  function handleLogout() {
+    logout();
+    displayError("Logged Out Successfully")
+  }
 
   return (
     <nav className='bg-blue-600'>
@@ -22,18 +30,23 @@ export default function Nav() {
             </Link>
           </li>
         </ul>
-        <ul className='flex'>
+
+
+        {(token == "null" || token == undefined) && <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'>
+
+        </ul>}
+
+
+        {token && <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} />
+               <img src={avatarImage} />
               <span className='mr-1'>{profileName}</span>
               <svg
                 className='fill-current h-4 w-4'
@@ -48,14 +61,14 @@ export default function Nav() {
                 <a
                   className='rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap'
                   href='#'
-                  onClick={logout}
+                  onClick={handleLogout}
                 >
                   Logout
                 </a>
               </li>
             </ul>
           </div>
-        </div>
+        </div>}
       </ul>
     </nav>
   )