CSOC -week-3 -React -Done

.eslintrc

@@ -1,3 +1,6 @@
 {
-  "extends": ["next/babel", "next/core-web-vitals"]
+  "extends": [
+  "next",
+  "next/core-web-vitals"
+  ]
 }

components/AddTask.js

@@ -1,17 +1,53 @@
+import React, { useState} from 'react'
+import axios from '../utils/axios'
+import { useAuth } from "../context/auth"
+import { toast, ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
 export default function AddTask() {
+  const [task, setTask] = useState("")
+  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.
-     */
-  }
+
+    if(task==="") {
+      toast.warn("Don't leave task empty......")
+      return;
+    }
+
+     toast.info('Please wait...',{position: "top-center",autoClose: 1000})
+
+      const dataForApiRequest = {
+        title: task
+      }
+
+      const headersForApiRequest = {
+      headers: {Authorization: 'Token ' + token,}
+      }
+
+
+      axios.post(
+        '/todo/create/',dataForApiRequest,headersForApiRequest,
+      )
+        .then(function ({ data, status }) {
+          setTask("");
+          toast.success("Your Task has been added in the Todo Succesfully....",{position: "top-center"})
+        })
+        .catch(function (err) {
+          toast.error("Unable to add Task. Please try again ....",{position: "top-center"})
+        })
+    }
   return (
     <div className='flex items-center max-w-sm mt-24'>
+    <ToastContainer />
       <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'
+        name='task'
+        id='task'
+        value={task}
+        onChange={(e) => setTask(e.target.value)}
       />
       <button
         type='button'
@@ -21,5 +57,8 @@ export default function AddTask() {
         Add Task
       </button>
     </div>
-  )
-}
+  )  
+
+  }
+
+

components/LoginForm.js

@@ -1,24 +1,65 @@
-export default function RegisterForm() {
+import React, { useState } from 'react'
+import { useAuth } from '../context/auth'
+import {noAuthRequired} from '../middlewares/no_auth_required'
+import { useRouter } from 'next/router'
+import axios from '../utils/axios'
+import 'react-toastify/dist/ReactToastify.css';
+import { ToastContainer, toast } from 'react-toastify';
+
+
+export default function LoginForm() {
+
+  const { setToken } = useAuth()
+  const router = useRouter()
+
+  noAuthRequired ();
+
+  const [password, setPassword] = useState('')
+  const [username, setUsername] = 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)
-     */
+     if (username === '' ||password === '') {
+
+      toast.warn("Please Don't leave any empty spaces....",{position: "top-center"});
+      return 
+    }
+
+    const dataForApiRequest = {
+        username: username,
+        password: password
+      }
+
+      axios.post(
+        'auth/login/',
+        dataForApiRequest,
+      )
+        .then(function ({ data, status }) {
+          setToken(data.token)
+          toast.success("You have been logged in succesfully....",{position: "top-center"})
+          router.reload()
+        })
+        .catch(function (err) {
+          toast.error('Unable to log in...Please try again.... ',{position: "top-center"})
+        })  
+
+
   }
 
   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>
+          <ToastContainer />
           <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,6 +68,8 @@ export default function RegisterForm() {
             name='inputPassword'
             id='inputPassword'
             placeholder='Password'
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
           />
 
           <button

components/Nav.js

@@ -1,14 +1,8 @@
-/* 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
- */
 
 export default function Nav() {
-  const { logout, profileName, avatarImage } = useAuth()
+  const { logout, profileName, avatarImage,token } = useAuth()
 
   return (
     <nav className='bg-blue-600'>
@@ -17,24 +11,25 @@ export default function Nav() {
           <li>
             <Link href="/" passHref={true}>
               <a>
-                <h1 className='text-white font-bold text-xl'>Todo</h1>
+                <h1 className='text-white font-bold text-xl'> Todo</h1>
               </a>
             </Link>
           </li>
         </ul>
+        {token===undefined?
         <ul className='flex'>
           <li className='text-white mr-2'>
-            <Link href='/login'>Login</Link>
+            <Link href='/login'> Login</Link>
           </li>
           <li className='text-white'>
-            <Link href='/register'>Register</Link>
+            <Link href='/register'> Register</Link>
           </li>
-        </ul>
+        </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>
+              <img src={token!==undefined&&avatarImage} />
+              <span className='mr-1'>{token!==undefined&&profileName}</span>
               <svg
                 className='fill-current h-4 w-4'
                 xmlns='http://www.w3.org/2000/svg'
@@ -56,6 +51,7 @@ export default function Nav() {
             </ul>
           </div>
         </div>
+        }
       </ul>
     </nav>
   )

components/RegisterForm.js

@@ -1,12 +1,21 @@
 import React, { useState } from 'react'
 import axios from '../utils/axios'
 import { useAuth } from '../context/auth'
+import {noAuthRequired} from '../middlewares/no_auth_required'
+import { ToastContainer, toast } from 'react-toastify';
 import { useRouter } from 'next/router'
+import 'react-toastify/dist/ReactToastify.css';
+
+
 
 export default function Register() {
   const { setToken } = useAuth()
   const router = useRouter()
 
+
+  noAuthRequired();
+
+
   const [firstName, setFirstName] = useState('')
   const [lastName, setLastName] = useState('')
   const [email, setEmail] = useState('')
@@ -27,11 +36,11 @@ export default function Register() {
       username === '' ||
       password === ''
     ) {
-      console.log('Please fill all the fields correctly.')
+      toast.warn('Fill all the fields correctly...',{position: "top-center"})
       return false
     }
     if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
-      console.log('Please enter a valid email address.')
+      toast.warn('Enter a valid email address...',{position: "top-center"})
       return false
     }
     return true
@@ -61,18 +70,20 @@ export default function Register() {
           router.push('/')
         })
         .catch(function (err) {
-          console.log(
+          toast.error(
             'An account using same email or username is already created'
-          )
+          ,{position: "top-center"})
         })
     }
   }
 
   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'>Register</h1>
+           <ToastContainer />
           <input
             type='text'
             className='block border border-grey-light w-full p-3 rounded mb-4'