Complete all functionality of the website

components/AddTask.js

@@ -1,17 +1,78 @@
-export default function AddTask() {
+import React, { useState } from 'react'
+import axios from '../utils/axios'
+import { useAuth } from '../context/auth'
+import { store } from 'react-notifications-component';
+
+export default function AddTask(props) {
+
+  const { token } = useAuth()
+  const [newTask,setNewTask]=useState("")
+
+
+  const refreshTasks=() =>props.refreshTasks();
   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 dataForApiRequest = {
+         title: newTask,
+     }
+
+     axios({
+         url:  'todo/create/',
+         headers: {
+             Authorization: 'Token ' + token,
+         },
+         method: 'post',
+         data: dataForApiRequest,
+     }).then(function({data, status}) {
+        setNewTask("")
+        refreshTasks()
+        store.addNotification({
+          title: "Task added!",
+          message:" ",
+          type: "success",
+          insert: "bottom-right",
+          container: "bottom-right",
+          animationIn: ["animate__animated", "animate__fadeIn"],
+          animationOut: ["animate__animated", "animate__fadeOut"],
+          dismiss: {
+            duration: 2000,
+            onScreen: true
+          }
+        });
+
+
+
+     }).catch(function(err) {
+      store.addNotification({
+        title: "Task cannot be left empty!",
+        message:" ",
+        type: "danger",
+        insert: "bottom-right",
+        container: "bottom-right",
+        animationIn: ["animate__animated", "animate__fadeIn"],
+        animationOut: ["animate__animated", "animate__fadeOut"],
+        dismiss: {
+          duration: 2000,
+          onScreen: true
+        }
+      });
+
+     })
+
   }
+
   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) =>setNewTask(e.target.value)}
+        value={newTask}
       />
       <button
         type='button'

components/LoginForm.js

@@ -1,43 +1,105 @@
+import React, { useState } from 'react'
+import axios from '../utils/axios'
+import { useAuth } from '../context/auth'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+import { store } from 'react-notifications-component';
+
 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,token } = useAuth()
+  const router = useRouter()
+
+  const [password, setPassword] = useState('')
+  const [username, setUsername] = useState('')
+
+
+  const login = (e) => {
+
+    e.preventDefault()
+
+    const dataForApiRequest = {
+      username: username,
+      password: password,
+    }
+    axios.post(
+      'auth/login/',
+      dataForApiRequest,
+    )
+      .then(function ({ data, status }) {
+        setToken(data.token)
+        router.push('/')
+        store.addNotification({
+          title: "Loading tasks...",
+          message:" ",
+          type: "success",
+          insert: "bottom-center",
+          container: "bottom-center",
+          animationIn: ["animate__animated", "animate__fadeIn"],
+          animationOut: ["animate__animated", "animate__fadeOut"],
+          dismiss: {
+            duration: 1500,
+            onScreen: true
+          }
+        });
+
+      })
+      .catch(function (err) {
+        // console.log(
+        //   'Wrong username or password'
+        // )
+        store.addNotification({
+          title: "Wrong username or password",
+          message:" ",
+          type: "danger",
+          insert: "bottom-right",
+          container: "bottom-right",
+          animationIn: ["animate__animated", "animate__fadeIn"],
+          animationOut: ["animate__animated", "animate__fadeOut"],
+          dismiss: {
+            duration: 1500,
+            onScreen: true
+          }
+        });
+      })
+
+
   }
 
   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>
+    <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 className='register'>New user? <u className='signUp'><Link href='/register' >Sign up</Link></u></div>
       </div>
     </div>
+  </div>
   )
 }

components/Nav.js

@@ -2,35 +2,36 @@
 /* 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()
+export default function Nav(props) {
+  const { token, logout, profileName, avatarImage } = useAuth()
+
+
+
 
   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}>
+            <Link href="/"  passHref={true}>
               <a>
                 <h1 className='text-white font-bold text-xl'>Todo</h1>
               </a>
             </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!="null" && token!=undefined)&&<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} />
@@ -55,7 +56,7 @@ export default function Nav() {
               </li>
             </ul>
           </div>
-        </div>
+        </div>}
       </ul>
     </nav>
   )

components/RegisterForm.js

@@ -2,6 +2,8 @@ import React, { useState } from 'react'
 import axios from '../utils/axios'
 import { useAuth } from '../context/auth'
 import { useRouter } from 'next/router'
+import Link from 'next/link'
+import { store } from 'react-notifications-component';
 
 export default function Register() {
   const { setToken } = useAuth()
@@ -27,11 +29,38 @@ export default function Register() {
       username === '' ||
       password === ''
     ) {
-      console.log('Please fill all the fields correctly.')
+      // console.log('Please fill all the fields correctly.')
+      store.addNotification({
+        title: "Please fill all the fields correctly.",
+        message:" ",
+        type: "danger",
+        insert: "bottom-right",
+        container: "bottom-right",
+        animationIn: ["animate__animated", "animate__fadeIn"],
+        animationOut: ["animate__animated", "animate__fadeOut"],
+        dismiss: {
+          duration: 2000,
+          onScreen: true
+        }
+      });
       return false
     }
     if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
-      console.log('Please enter a valid email address.')
+      // console.log('Please enter a valid email address.')
+      store.addNotification({
+        title: "Please enter a valid email address.",
+        message:" ",
+        type: "warning",
+        insert: "bottom-right",
+        container: "bottom-right",
+        animationIn: ["animate__animated", "animate__fadeIn"],
+        animationOut: ["animate__animated", "animate__fadeOut"],
+        dismiss: {
+          duration: 2000,
+          onScreen: true
+        }
+      });
+
       return false
     }
     return true
@@ -61,9 +90,23 @@ export default function Register() {
           router.push('/')
         })
         .catch(function (err) {
-          console.log(
-            'An account using same email or username is already created'
-          )
+          // console.log(
+          //   'An account using same email or username is already created'
+          // )
+          store.addNotification({
+            title: "An account using same email or username is already created",
+            message:" ",
+            type: "danger",
+            insert: "bottom-right",
+            container: "bottom-right",
+            animationIn: ["animate__animated", "animate__fadeIn"],
+            animationOut: ["animate__animated", "animate__fadeOut"],
+            dismiss: {
+              duration: 1500,
+              onScreen: true
+            }
+          });
+
         })
     }
   }
@@ -129,6 +172,7 @@ export default function Register() {
           >
             Register
           </button>
+          <div className='login'>Already registered? <u className='signIn'><Link href='/login' >Sign In</Link></u></div>
         </div>
       </div>
     </div>