CSOC task3

.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,17 +1,61 @@
-export default function AddTask() {
-  const addTask = () => {
+import { useState } from 'react'
+import { useAuth } from '../context/auth'
+import 'react-toastify/dist/ReactToastify.css';
+import { ToastContainer, toast } from 'react-toastify';
+import axios from '../utils/axios'
+
+
+
+export default function AddTask({getTasks}) {
+  const [Task, setTask] = useState('')
+  const {token} =useAuth()
+  const registerFieldsAreValid = (Task ) => {
+    if ( Task === ''    ) {
+      toast.error('Title cannot be empty',{position: 'bottom-right'}) 
+      return false
+    }
+    return true
+  }
+  const addTask = (e) => {
     /**
      * @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.
      */
-  }
+      e.preventDefault()
+      if (
+        registerFieldsAreValid(Task)
+      ) {
+          const dataForApiRequest = {
+          title: Task
+        }
+
+        axios.post(
+          'todo/create/',dataForApiRequest,{
+          headers: {
+            Authorization: 'Token ' + token,
+        },}
+
+        )
+        .then(function () {
+            toast.success('Task created successfully',{position: 'bottom-right'})
+            getTasks()
+            setTask('')
+        })
+          .catch(function (err) {
+            toast.error('Error!!',{position: 'bottom-right'})
+          })
+      }
+    }
+
   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'
+        onChange={(e) => setTask(e.target.value)}
+        value={Task}
       />
       <button
         type='button'
@@ -20,6 +64,7 @@ export default function AddTask() {
       >
         Add Task
       </button>
+      <ToastContainer />
     </div>
   )
 }

components/LoginForm.js

@@ -1,15 +1,73 @@
+import React, { useState } from 'react'
+import axios from '../utils/axios'
+import 'react-toastify/dist/ReactToastify.css';
+import { ToastContainer, toast } from 'react-toastify';
+import { useAuth } from '../context/auth'
+import { useRouter } from 'next/router'
+
+
 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 { setToken ,setProfileName} = useAuth()
+     const router = useRouter()
+
+     const [password, setPassword] = useState('')
+     const [username, setUsername] = useState('')
+
+     const registerFieldsAreValid = (
+       username,
+       password
+     ) => {
+       if (
+         username === '' ||
+         password === ''
+       ) {
+         toast.error('Please fill all the fields',{position: 'bottom-right'}) 
+         return false
+       }
+       return true
+     }
+
+     const login = (e) => {
+       e.preventDefault()
+
+       if (
+         registerFieldsAreValid(username, password)
+       ) {
+         console.log('Please wait...')
+
+         const dataForApiRequest = {
+           username: username,
+           password: password,
+         }
+
+         axios.post(
+           'auth/login/',
+           dataForApiRequest,
+         )
+           .then(function ({ data, status }) {
+            toast.success('Login Success',{position: 'bottom-right'})
+             setToken(data.token)
+             router.push('/')
+           })
+           .catch(function (err) {
+             console.log(
+              toast.error('Invalid username or password',{position: 'bottom-right'}) 
+             )
+           })
+       }
+     }
+
 
   return (
-    <div className='bg-grey-lighter min-h-screen flex flex-col'>
+    <div className='bg-grey-light min-h-screen flex flex-col'>
+      <ToastContainer />
       <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>
@@ -19,6 +77,8 @@ export default function RegisterForm() {
             name='inputUsername'
             id='inputUsername'
             placeholder='Username'
+            onChange={(e) => setUsername(e.target.value)}
+            value={username}
           />
 
           <input
@@ -27,6 +87,8 @@ export default function RegisterForm() {
             name='inputPassword'
             id='inputPassword'
             placeholder='Password'
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
           />
 
           <button

components/Nav.js

@@ -8,8 +8,9 @@ import { useAuth } from '../context/auth'
  */
 
 export default function Nav() {
-  const { logout, profileName, avatarImage } = useAuth()
-
+  const { logout, profileName, avatarImage,token } = useAuth()
+  // console.log(profileName)
+  // console.log(token)
   return (
     <nav className='bg-blue-600'>
       <ul className='flex items-center justify-between p-5'>
@@ -22,14 +23,16 @@ export default function Nav() {
             </Link>
           </li>
         </ul>
+        {!token &&
         <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>
+        </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'>
@@ -55,7 +58,8 @@ export default function Nav() {
               </li>
             </ul>
           </div>
-        </div>
+        </div>)
+      }
       </ul>
     </nav>
   )

components/RegisterForm.js

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
 import axios from '../utils/axios'
+import 'react-toastify/dist/ReactToastify.css';
+import { ToastContainer, toast } from 'react-toastify';
 import { useAuth } from '../context/auth'
 import { useRouter } from 'next/router'
 
@@ -27,11 +29,11 @@ export default function Register() {
       username === '' ||
       password === ''
     ) {
-      console.log('Please fill all the fields correctly.')
+      toast.error('Please fill all the fields',{position: 'bottom-right'}) 
       return false
     }
     if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
-      console.log('Please enter a valid email address.')
+      toast.error('Enter a valid email address',{position: 'bottom-right'}) 
       return false
     }
     return true
@@ -57,19 +59,19 @@ export default function Register() {
         dataForApiRequest,
       )
         .then(function ({ data, status }) {
+          toast.success('Registration Success',{position: 'bottom-right'})
           setToken(data.token)
           router.push('/')
         })
         .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',{position: 'bottom-right'}) 
         })
     }
   }
 
   return (
     <div className='bg-grey-lighter min-h-screen flex flex-col'>
+      <ToastContainer />
       <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>