From 893ac6fb62aaa263343a23a0c99c19b9d0c08730 Mon Sep 17 00:00:00 2001
From: yash6318 <yash.agrawal.cse21@iitbhu.ac.in>
Date: Fri, 15 Jul 2022 02:25:52 +0530
Subject: [PATCH 1/2] initial commit

---
 .eslintrc                       |  2 +-
 components/AddTask.js           | 29 ++++++++++++
 components/LoginForm.js         | 46 +++++++++++++++----
 components/Nav.js               | 15 ++++---
 components/RegisterForm.js      |  2 +
 components/TodoListItem.js      | 80 ++++++++++++++++++++++-----------
 context/auth.js                 | 15 +++++--
 middlewares/auth_required.js    | 16 +++++++
 middlewares/no_auth_required.js | 15 ++++++-
 pages/index.js                  | 31 ++++++++++++-
 10 files changed, 204 insertions(+), 47 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index a2ceebe..97a2bb8 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,3 +1,3 @@
 {
-  "extends": ["next/babel", "next/core-web-vitals"]
+  "extends": ["next", "next/core-web-vitals"]
 }
diff --git a/components/AddTask.js b/components/AddTask.js
index 9652adb..522f3ae 100644
--- a/components/AddTask.js
+++ b/components/AddTask.js
@@ -1,10 +1,37 @@
+import { useState } from "react"
+import axios from "../utils/axios";
+import { useAuth } from "../context/auth"
+import { position } from "tailwindcss/lib/plugins";
+
 export default function AddTask() {
+  const [newtodo,setNewTodo]=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.
      */
+    const dataToPost={
+      "title": newtodo
+    }
+    axios
+    .post(
+      'todo/create/',
+      dataToPost,
+      {
+        headers:{
+          Authorization: 'Token ' + token
+        }
+      })
+      .then((res)=>{
+      setNewTodo('');
+      alert("Task added succesfully!!");
+    }).catch((err)=>{
+      // alert("Some error Occured!")
+      console.log(err);
+    })
+
   }
   return (
     <div className='flex items-center max-w-sm mt-24'>
@@ -12,6 +39,8 @@ export default function AddTask() {
         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={newtodo}
+        onChange={(e)=>{setNewTodo(e.target.value)}}
       />
       <button
         type='button'
diff --git a/components/LoginForm.js b/components/LoginForm.js
index fa28f9e..32ffa28 100644
--- a/components/LoginForm.js
+++ b/components/LoginForm.js
@@ -1,11 +1,37 @@
+import router from "next/router";
+import {No_Auth_req} from "../middlewares/no_auth_required"
+import { useState } from "react";
+import { useAuth } from "../context/auth";
+import axios from '../utils/axios'
+import {API_URL} from "../utils/constants"
+
 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)
-     */
+  No_Auth_req();
+  const [username,setUserName] = useState("");
+  const [password,setPassword] = useState("");
+  const {setToken} = useAuth();
+  const Login = () => {
+        
+    if (username === '' || password === '') {
+      alert("Do not use empty fields!");
+      return;
+    }
+    const dataForApiRequest = {
+      username: username,
+      password: password
+    }
+
+    axios.post(
+      'auth/login/',
+      dataForApiRequest,
+    ).then(function({data, status}) {
+      setToken(data.token);
+      router.reload();
+      alert('Login was successful!!')
+    }).catch(function(err) {
+      alert('Invalid credentials! :(');
+      console.log(err);
+    })
   }
 
   return (
@@ -19,6 +45,8 @@ export default function RegisterForm() {
             name='inputUsername'
             id='inputUsername'
             placeholder='Username'
+            value={username}
+            onChange={(event) => setUserName(event.target.value)}
           />
 
           <input
@@ -27,12 +55,14 @@ export default function RegisterForm() {
             name='inputPassword'
             id='inputPassword'
             placeholder='Password'
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
           />
 
           <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}
+            onClick={Login}
           >
             Login
           </button>
diff --git a/components/Nav.js b/components/Nav.js
index e03cb0f..85563e7 100644
--- a/components/Nav.js
+++ b/components/Nav.js
@@ -2,13 +2,14 @@
 /* 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 { useState ,useEffect } from 'react'
+
 
 export default function Nav() {
-  const { logout, profileName, avatarImage } = useAuth()
+  const { logout, profileName, avatarImage ,token } = useAuth()
+  const [tokPresent,settokPresent] = useState(true)
+
+  useEffect(()=>{(token)?settokPresent(true):settokPresent(false)},[token])
 
   return (
     <nav className='bg-blue-600'>
@@ -22,7 +23,7 @@ export default function Nav() {
             </Link>
           </li>
         </ul>
-        <ul className='flex'>
+        <ul className={tokPresent ? 'hideme' :'flex'}>
           <li className='text-white mr-2'>
             <Link href='/login'>Login</Link>
           </li>
@@ -30,7 +31,7 @@ export default function Nav() {
             <Link href='/register'>Register</Link>
           </li>
         </ul>
-        <div className='inline-block relative w-28'>
+        <div className={tokPresent ?'inline-block relative w-28':'hideme'}>
           <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} />
diff --git a/components/RegisterForm.js b/components/RegisterForm.js
index a6ef2e3..595b65e 100644
--- a/components/RegisterForm.js
+++ b/components/RegisterForm.js
@@ -1,10 +1,12 @@
 import React, { useState } from 'react'
 import axios from '../utils/axios'
 import { useAuth } from '../context/auth'
+import { No_Auth_req } from '../middlewares/no_auth_required'
 import { useRouter } from 'next/router'
 
 export default function Register() {
   const { setToken } = useAuth()
+  No_Auth_req();
   const router = useRouter()
 
   const [firstName, setFirstName] = useState('')
diff --git a/components/TodoListItem.js b/components/TodoListItem.js
index 7965f3b..0b1285c 100644
--- a/components/TodoListItem.js
+++ b/components/TodoListItem.js
@@ -1,55 +1,85 @@
 /* eslint-disable @next/next/no-img-element */
 
-export default function TodoListItem() {
-  const editTask = (id) => {
-    /**
-     * @todo Complete this function.
-     * @todo 1. Update the dom accordingly
-     */
+import { data } from "autoprefixer";
+import axios from "../utils/axios";
+import { useState } from "react";
+import processPlugins from "tailwindcss/lib/util/processPlugins";
+import { useAuth } from "../context/auth";
+import { API_URL} from "../utils/constants"
+
+
+export default function TodoListItem(props) {
+  const [isEditActive,setEditActive] = useState(false);
+  const [todo,setTodo] = useState('');
+  const {token} = useAuth();
+  
+  const editTask = () => {
+    
+    setEditActive(true);
   }
 
   const deleteTask = (id) => {
-    /**
-     * @todo Complete this function.
-     * @todo 1. Send the request to delete the task to the backend server.
-     * @todo 2. Remove the task from the dom.
-     */
+    
+    axios.delete(
+      'todo/'+id+'/',
+      {
+        headers: {
+          Authorization: 'Token ' + token,
+        }
+      }
+    ).then(()=>alert("Task Deleted!"))
+    .catch((err)=>{console.log(err);})
   }
 
   const updateTask = (id) => {
-    /**
-     * @todo Complete this function.
-     * @todo 1. Send the request to update the task to the backend server.
-     * @todo 2. Update the task in the dom.
-     */
+    
+    if(token){
+
+      axios({
+        headers : {Authorization : "Token " + token},
+        url : API_URL + 'todo/' + id + '/',
+        method : 'patch',
+        data : {title : todo}
+      }).then((res)=>{
+        setEditActive(false)
+        alert("Task updated!")
+      })
+      .catch((err)=>{console.log(err);})
+      
+    }
+    else console.log("Token not present");
+    
+      
   }
 
   return (
     <>
       <li className='border flex border-gray-500 rounded px-2 py-2 justify-between items-center mb-2'>
         <input
-          id='input-button-1'
+          id={'input-button-'+props.id}
           type='text'
-          className='hideme appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring  todo-edit-task-input'
+          className={isEditActive?'appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring  todo-edit-task-input':'hideme'}
           placeholder='Edit The Task'
+          value={todo}
+          onChange={(e)=>{setTodo(e.target.value)}}
         />
-        <div id='done-button-1' className='hideme'>
+        <div id={'done-button-'+props.id} className={isEditActive?'':'hideme'}>
           <button
             className='bg-transparent hover:bg-gray-500 text-gray-700 text-sm  hover:text-white py-2 px-3 border border-gray-500 hover:border-transparent rounded todo-update-task'
             type='button'
-            onClick={updateTask(1)}
+            onClick={()=>updateTask(props.id)}
           >
             Done
           </button>
         </div>
-        <div id='task-1' className='todo-task  text-gray-600'>
-          Sample Task 1
+        <div id={'task-'+props.id} className={isEditActive ? 'hideme':'todo-task  text-gray-600'}>
+          {props.title}
         </div>
-        <span id='task-actions-1' className=''>
+        <span id={'task-actions-'+props.id} className={isEditActive?'hideme':''}>
           <button
             style={{ marginRight: '5px' }}
             type='button'
-            onClick={editTask(1)}
+            onClick={editTask}
             className='bg-transparent hover:bg-yellow-500 hover:text-white border border-yellow-500 hover:border-transparent rounded px-2 py-2'
           >
             <img
@@ -62,7 +92,7 @@ export default function TodoListItem() {
           <button
             type='button'
             className='bg-transparent hover:bg-red-500 hover:text-white border border-red-500 hover:border-transparent rounded px-2 py-2'
-            onClick={deleteTask(1)}
+            onClick={()=> deleteTask(props.id)}
           >
             <img
               src='https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg'
diff --git a/context/auth.js b/context/auth.js
index 646b10e..f765eb9 100644
--- a/context/auth.js
+++ b/context/auth.js
@@ -3,6 +3,7 @@ import { useCookies } from 'react-cookie'
 import axios from '../utils/axios'
 import { useRouter } from 'next/router'
 
+
 const AuthContext = createContext({})
 
 export const AuthProvider = ({ children }) => {
@@ -10,13 +11,17 @@ export const AuthProvider = ({ children }) => {
   const [profileName, setProfileName] = useState('')
   const [avatarImage, setAvatarImage] = useState('#')
   const [cookies, setCookies, removeCookies] = useCookies(['auth'])
-  const token = cookies.token
+  const token=cookies.token;
 
   const setToken = (newToken) => setCookies('token', newToken, { path: '/' })
   const deleteToken = () => removeCookies('token')
+
   const logout = () => {
+    setProfileName('')
+    setAvatarImage('#')
     deleteToken()
-    router.push('/login')
+    router.reload();
+    alert('Logged out!')
   }
 
   useEffect(() => {
@@ -34,9 +39,11 @@ export const AuthProvider = ({ children }) => {
               '&background=fff&size=33&color=007bff'
           )
           setProfileName(response.data.name)
+          console.log(token);
         })
-        .catch((error) => {
-          console.log('Some error occurred')
+        .catch((err) => {
+          alert('Some error occurred')
+          console.log(err);
         })
     }
   }, [setAvatarImage, setProfileName, token])
diff --git a/middlewares/auth_required.js b/middlewares/auth_required.js
index 7f5e7bc..9cddacd 100644
--- a/middlewares/auth_required.js
+++ b/middlewares/auth_required.js
@@ -1,3 +1,19 @@
 /***
  * @todo Redirect the user to login page if token is not present.
  */
+
+ import { useRouter } from 'next/router'
+ import { useEffect } from 'react'
+ import { useAuth } from '../context/auth'
+
+ export const Auth_req= ()=>{
+     const {token} = useAuth()
+     const router = useRouter()
+     useEffect(()=>{
+        if(!token){
+            router.push('/login')
+        }
+     },[token])
+ }
+
+
diff --git a/middlewares/no_auth_required.js b/middlewares/no_auth_required.js
index 82558d4..c939ae8 100644
--- a/middlewares/no_auth_required.js
+++ b/middlewares/no_auth_required.js
@@ -1,3 +1,16 @@
 /***
  * @todo Redirect the user to main page if token is present.
- */
\ No newline at end of file
+ */
+ import { useRouter } from 'next/router'
+ import { useEffect } from 'react'
+ import { useAuth } from '../context/auth'
+
+ export const No_Auth_req= ()=>{
+     const {token} = useAuth()
+     const router = useRouter()
+     useEffect(()=>{
+        if(token){
+            router.push('/')
+        }
+     },[token])
+ }
diff --git a/pages/index.js b/pages/index.js
index c3c9134..12c54f7 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -3,10 +3,14 @@ import AddTask from '../components/AddTask'
 import { useEffect, useState } from 'react'
 import axios from '../utils/axios'
 import { useAuth } from '../context/auth'
+import {Auth_req} from '../middlewares/auth_required'
+
 
 export default function Home() {
   const { token } = useAuth()
   const [tasks, setTasks] = useState([])
+  
+  Auth_req();
 
   function getTasks() {
     /***
@@ -14,8 +18,28 @@ export default function Home() {
      * @todo Set the tasks state and display them in the using TodoListItem component
      * The user token can be accessed from the context using useAuth() from /context/auth.js
      */
+    axios
+    .get(
+      'todo/',
+      {
+        headers: {
+          Authorization: 'Token ' + token,
+        }
+      })
+      .then(({data,status})=>{
+        setTasks(data);
+      })
+      .catch((err)=>{
+        console.log(err);
+      })
+
+      
   }
 
+  useEffect(()=>{
+    getTasks();
+  },[tasks])
+  
   return (
     <div>
       <center>
@@ -24,7 +48,12 @@ export default function Home() {
           <span className='inline-block bg-blue-600 py-1 mb-2 px-9 text-sm text-white font-bold rounded-full '>
             Available Tasks
           </span>
-          <TodoListItem />
+          <div>
+            {tasks.map((todo)=>{
+              return <TodoListItem key={todo.id} id={todo.id} title={todo.title}/>
+            })}          
+          </div>
+          
         </ul>
       </center>
     </div>

From 599a357148913145099ea3f121034e5e93f8d254 Mon Sep 17 00:00:00 2001
From: yash6318 <yash.agrawal.cse21@iitbhu.ac.in>
Date: Fri, 15 Jul 2022 13:33:32 +0530
Subject: [PATCH 2/2] csoc task done

---
 components/AddTask.js      | 13 +++++--------
 components/LoginForm.js    |  8 ++++----
 components/Nav.js          | 10 +++++-----
 components/RegisterForm.js | 14 +++++++++-----
 components/TodoListItem.js | 27 ++++++++++++++++++++-------
 context/auth.js            |  7 ++++---
 package.json               |  1 +
 pages/index.js             |  3 +++
 pages/login.js             |  3 +++
 pages/register.js          |  3 +++
 yarn.lock                  | 12 ++++++++++++
 11 files changed, 69 insertions(+), 32 deletions(-)

diff --git a/components/AddTask.js b/components/AddTask.js
index 522f3ae..d136def 100644
--- a/components/AddTask.js
+++ b/components/AddTask.js
@@ -1,17 +1,14 @@
 import { useState } from "react"
 import axios from "../utils/axios";
 import { useAuth } from "../context/auth"
-import { position } from "tailwindcss/lib/plugins";
+import {toast} from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 
 export default function AddTask() {
   const [newtodo,setNewTodo]=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.
-     */
+    
     const dataToPost={
       "title": newtodo
     }
@@ -26,9 +23,9 @@ export default function AddTask() {
       })
       .then((res)=>{
       setNewTodo('');
-      alert("Task added succesfully!!");
+      toast.success('Task added succesfully!!',{position:"bottom-right",theme:"colored"});
     }).catch((err)=>{
-      // alert("Some error Occured!")
+      toast.error('Some error Occured!',{position:"bottom-right",theme:"colored"})
       console.log(err);
     })
 
diff --git a/components/LoginForm.js b/components/LoginForm.js
index 32ffa28..98cdd38 100644
--- a/components/LoginForm.js
+++ b/components/LoginForm.js
@@ -3,7 +3,7 @@ import {No_Auth_req} from "../middlewares/no_auth_required"
 import { useState } from "react";
 import { useAuth } from "../context/auth";
 import axios from '../utils/axios'
-import {API_URL} from "../utils/constants"
+import { toast } from "react-toastify";
 
 export default function RegisterForm() {
   No_Auth_req();
@@ -13,7 +13,7 @@ export default function RegisterForm() {
   const Login = () => {
         
     if (username === '' || password === '') {
-      alert("Do not use empty fields!");
+      toast.warn('Do not use empty fields!',{position:"top-center",theme:"colored"});
       return;
     }
     const dataForApiRequest = {
@@ -26,10 +26,10 @@ export default function RegisterForm() {
       dataForApiRequest,
     ).then(function({data, status}) {
       setToken(data.token);
+      toast.success('Login was successful!!',{position:"top-center",theme:"colored"})
       router.reload();
-      alert('Login was successful!!')
     }).catch(function(err) {
-      alert('Invalid credentials! :(');
+      toast.error('Invalid credentials! :(',{position:"top-center",theme:"colored"});
       console.log(err);
     })
   }
diff --git a/components/Nav.js b/components/Nav.js
index 85563e7..4bce2aa 100644
--- a/components/Nav.js
+++ b/components/Nav.js
@@ -24,18 +24,18 @@ export default function Nav() {
           </li>
         </ul>
         <ul className={tokPresent ? 'hideme' :'flex'}>
-          <li className='text-white mr-2'>
+          <li className='text-white mr-5'>
             <Link href='/login'>Login</Link>
           </li>
-          <li className='text-white'>
+          <li className='text-white mr-5'>
             <Link href='/register'>Register</Link>
           </li>
         </ul>
-        <div className={tokPresent ?'inline-block relative w-28':'hideme'}>
+        <div className={tokPresent ?'inline-block relative w-35':'hideme'}>
           <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 className='mr-1' src={avatarImage} />
+              <span className='ml-1 mr-1'>{profileName}</span>
               <svg
                 className='fill-current h-4 w-4'
                 xmlns='http://www.w3.org/2000/svg'
diff --git a/components/RegisterForm.js b/components/RegisterForm.js
index 595b65e..9059940 100644
--- a/components/RegisterForm.js
+++ b/components/RegisterForm.js
@@ -3,6 +3,8 @@ import axios from '../utils/axios'
 import { useAuth } from '../context/auth'
 import { No_Auth_req } from '../middlewares/no_auth_required'
 import { useRouter } from 'next/router'
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 export default function Register() {
   const { setToken } = useAuth()
@@ -29,11 +31,11 @@ export default function Register() {
       username === '' ||
       password === ''
     ) {
-      console.log('Please fill all the fields correctly.')
+      toast.warn('Please fill all the fields correctly.',{position:"top-center",theme:"colored"})
       return false
     }
     if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
-      console.log('Please enter a valid email address.')
+      toast.warn('Please enter a valid email address.',{position:"top-center",theme:"colored"})
       return false
     }
     return true
@@ -45,7 +47,7 @@ export default function Register() {
     if (
       registerFieldsAreValid(firstName, lastName, email, username, password)
     ) {
-      console.log('Please wait...')
+      toast.info('Please wait...',{position:"top-center",theme:"colored"})
 
       const dataForApiRequest = {
         name: firstName + ' ' + lastName,
@@ -60,11 +62,13 @@ export default function Register() {
       )
         .then(function ({ data, status }) {
           setToken(data.token)
+          toast.success('Registration Successful!!',{position:"top-center",theme:"colored"})
           router.push('/')
         })
         .catch(function (err) {
-          console.log(
-            'An account using same email or username is already created'
+          toast.warn(
+            'An account using same email or username is already created',
+            {position:"top-center",theme:"colored"}
           )
         })
     }
diff --git a/components/TodoListItem.js b/components/TodoListItem.js
index 0b1285c..493bed5 100644
--- a/components/TodoListItem.js
+++ b/components/TodoListItem.js
@@ -1,11 +1,12 @@
 /* eslint-disable @next/next/no-img-element */
 
-import { data } from "autoprefixer";
 import axios from "../utils/axios";
 import { useState } from "react";
-import processPlugins from "tailwindcss/lib/util/processPlugins";
 import { useAuth } from "../context/auth";
 import { API_URL} from "../utils/constants"
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import router from "next/router";
 
 
 export default function TodoListItem(props) {
@@ -27,8 +28,13 @@ export default function TodoListItem(props) {
           Authorization: 'Token ' + token,
         }
       }
-    ).then(()=>alert("Task Deleted!"))
-    .catch((err)=>{console.log(err);})
+    ).then(()=>{
+      toast.success('Task Deleted!',{position:"bottom-right",theme:"colored"})
+    })
+    .catch((err)=>{
+      console.log(err);
+      toast.error('Some error Occured!',{position:"bottom-right",theme:"colored"});
+    })
   }
 
   const updateTask = (id) => {
@@ -42,12 +48,19 @@ export default function TodoListItem(props) {
         data : {title : todo}
       }).then((res)=>{
         setEditActive(false)
-        alert("Task updated!")
+        toast.success('Task updated!',{position:"bottom-right",theme:"colored"})
+      })
+      .catch((err)=>{
+        console.log(err);
+        toast.error('Some error Occured!',{position:"bottom-right",theme:"colored"});;
       })
-      .catch((err)=>{console.log(err);})
       
     }
-    else console.log("Token not present");
+    else {
+      toast.warn('Token not present',{position:"top-center",theme:"colored"});
+      toast.info('Please login to continue..',{position:"top-center",theme:"colored"})
+      router.push('/login');
+    }
     
       
   }
diff --git a/context/auth.js b/context/auth.js
index f765eb9..13441c0 100644
--- a/context/auth.js
+++ b/context/auth.js
@@ -2,7 +2,8 @@ import { useEffect, useState, useContext, createContext } from 'react'
 import { useCookies } from 'react-cookie'
 import axios from '../utils/axios'
 import { useRouter } from 'next/router'
-
+import {toast} from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 
 const AuthContext = createContext({})
 
@@ -20,8 +21,8 @@ export const AuthProvider = ({ children }) => {
     setProfileName('')
     setAvatarImage('#')
     deleteToken()
+    toast.info('Logged out!',{position:"top-center",theme:"colored"})
     router.reload();
-    alert('Logged out!')
   }
 
   useEffect(() => {
@@ -42,7 +43,7 @@ export const AuthProvider = ({ children }) => {
           console.log(token);
         })
         .catch((err) => {
-          alert('Some error occurred')
+          toast.error('Some error occurred',{position:"top-center",theme:"colored"})
           console.log(err);
         })
     }
diff --git a/package.json b/package.json
index 98b7437..cfc0a22 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "react": "17.0.2",
     "react-cookie": "^4.0.3",
     "react-dom": "17.0.2",
+    "react-toastify": "^9.0.5",
     "tailwindcss": "^2.2.2"
   },
   "devDependencies": {
diff --git a/pages/index.js b/pages/index.js
index 12c54f7..8678a20 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -4,6 +4,8 @@ import { useEffect, useState } from 'react'
 import axios from '../utils/axios'
 import { useAuth } from '../context/auth'
 import {Auth_req} from '../middlewares/auth_required'
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 
 export default function Home() {
@@ -56,6 +58,7 @@ export default function Home() {
           
         </ul>
       </center>
+      <ToastContainer />
     </div>
   )
 }
diff --git a/pages/login.js b/pages/login.js
index 5f2bbe0..63e99f6 100644
--- a/pages/login.js
+++ b/pages/login.js
@@ -1,9 +1,12 @@
 import LoginForm from '../components/LoginForm'
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 export default function Login() {
   return (
     <div>
       <LoginForm />
+      <ToastContainer />
     </div>
   )
 }
diff --git a/pages/register.js b/pages/register.js
index 456003a..00a0c3e 100644
--- a/pages/register.js
+++ b/pages/register.js
@@ -1,9 +1,12 @@
 import RegisterForm from '../components/RegisterForm'
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 export default function Register() {
   return (
     <div>
       <RegisterForm />
+      <ToastContainer />
     </div>
   )
 }
diff --git a/yarn.lock b/yarn.lock
index 11dbcb7..cd8ba45 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -720,6 +720,11 @@ classnames@2.2.6:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -2803,6 +2808,13 @@ react-refresh@0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-toastify@^9.0.5:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.0.5.tgz#310d7bcfcf3887c0e8461ac6068fe1abb8d720e1"
+  integrity sha512-dszPCeQINY+Nm6HmsiAXT/7wsazPqv0S/RuhIYLAW+fTKcd3T1iRjZG0XqrN9nvAzqaE5J6uxMaiBrOevxjY8g==
+  dependencies:
+    clsx "^1.1.1"
+
 react@17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"