CSOC Task 3 Submission

.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,22 +1,93 @@
-export default function AddTask() {
+import axios from "../utils/axios"
+import { useState } from "react";
+import { useAuth } from "../context/auth";
+import { ToastContainer, toast } from "react-toastify";
+import 'react-toastify/dist/ReactToastify.css';
+export default function AddTask({tasks,setTasks}) {
+  const [text,setText] = 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(!text)
+    { toast.info('Cannot add empty task', {
+      position: "bottom-right",
+      autoClose: 5000,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+      });
+      return;
+    }
+
+    const dataForApiReq = {
+      title:text
+    }
+    toast.info('Task is being added...', {
+      position: "bottom-right",
+      autoClose: 1000,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+      });
+    axios
+        .post('/todo/create/',
+          dataForApiReq,{
+          headers: {
+            Authorization: 'Token '+localStorage.getItem('token'),
+          },
+      })
+        .then(()=>{
+          axios
+          .get('/todo/',{
+            headers: {
+              Authorization: "Token " + localStorage.getItem('token')
+            }
+          })
+          .then(function({data,status}){
+            toast.success('Task Added Successfully', {
+              position: "bottom-right",
+              autoClose: 5000,
+              hideProgressBar: false,
+              closeOnClick: true,
+              pauseOnHover: true,
+              draggable: true,
+              progress: undefined,
+              });
+            console.log(data);
+            setTasks(data);
+            setText('');
+          })
+          .catch(function(err){
+            console.log(err);
+          })
+      })
+        .catch(function(err){
+          console.log(err)
+      })
+
+    }
   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'
+        className='todo-add-task-input px-4 py-2 placeholder-blueGray-300 text-blueGray-600 mr-3 bg-white rounded text-md border border-blueGray-300 outline-none focus:outline-none focus:ring w-full'
         placeholder='Enter Task'
+        value = {text}
+        onChange = {(e)=> setText(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}
+        className='font-bold todo-add-task bg-transparent hover:bg-green-500 text-green-700 text-sm hover:text-white px-7 py-1 border border-green-500 hover:border-transparent rounded'
+        onClick={() => addTask()}
       >
         Add Task
       </button>

components/LoginForm.js

@@ -1,24 +1,103 @@
-export default function RegisterForm() {
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import axios from "../utils/axios";
+import { useAuth } from "../context/auth";
+import noAuthCheck from "../middlewares/no_auth_required";
+import { ToastContainer, toast } from "react-toastify";
+import 'react-toastify/dist/ReactToastify.css';
+export default function LoginForm() {
+  const [username, setUserName] = useState('');
+  const [password, setPassword] = useState('');
+  const {setToken,setToken_1} = useAuth()
+  const router = useRouter();
+
+  noAuthCheck();
+
+    const loginEntriesAreValid = (
+      username,
+      password
+    ) => {
+      if(username === '' || password === '')
+      {
+        toast.error('Pls check the login details', {
+          position: "bottom-right",
+          autoClose: 5000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+          });
+        return false
+      }
+      toast.info('Please Wait...', {
+        position: "bottom-right",
+        autoClose: 500,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        });
+          return true
+    }
   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(loginEntriesAreValid(username,password))
+    {
+    const loginDataForApiRequest = {
+      username: username,
+      password: password
+    }
+
+    axios.post('auth/login/',
+    loginDataForApiRequest,)
+    .then(function({data,status}){
+      toast.success('Login Successfull', {
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        });
+      localStorage.setItem("token",data.token)
+      setToken(data.token)
+      setToken_1(data.token)
+      router.push("/")
+    }).catch(function(err){
+      toast.error('Login failed... Bad Credentials', {
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        });
+      console.log(err)
+    })
+  }
   }
 
   return (
-    <div className='bg-grey-lighter min-h-screen flex flex-col'>
+    <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>
+        <div className='bg-white px-10 py-10 rounded-xl shadow-xl text-black w-full'>
+          <h1 className='mb-8 text-3xl text-center font-bold'>Login</h1>
           <input
             type='text'
             className='block border border-grey-light w-full p-3 rounded mb-4'
             name='inputUsername'
             id='inputUsername'
             placeholder='Username'
+            onChange= {(e)=> setUserName(e.target.value)}
           />
 
           <input
@@ -27,17 +106,19 @@ export default function RegisterForm() {
             name='inputPassword'
             id='inputPassword'
             placeholder='Password'
+            onChange= {(e)=> setPassword(e.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'
+            className='w-full font-bold 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>
+      <ToastContainer/>
     </div>
   )
 }

components/Nav.js

@@ -1,40 +1,54 @@
 /* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable @next/next/no-img-element */
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
 import { useAuth } from '../context/auth'
 /**
  *
  * @todo Condtionally render login/register and Profile name in NavBar
  */
 
 export default function Nav() {
+  const [logState, setLogState] = useState(false);
   const { logout, profileName, avatarImage } = useAuth()
-
+
+  useEffect(()=>{
+    if(localStorage.getItem('token'))
+  {
+    setLogState(true);
+  }
+  else{
+    setLogState(false);
+  }},[profileName])
+
   return (
-    <nav className='bg-blue-600'>
+    <nav className='bg-blue-600 navbar'>
       <ul className='flex items-center justify-between p-5'>
         <ul className='flex items-center justify-between space-x-4'>
           <li>
             <Link href="/" passHref={true}>
               <a>
-                <h1 className='text-white font-bold text-xl'>Todo</h1>
+                <h1 className='text-white font-bold text-3xl ml-4'>Todo</h1>
               </a>
             </Link>
           </li>
         </ul>
-        <ul className='flex'>
-          <li className='text-white mr-2'>
+        {(!logState) &&
+        <ul className='flex' >
+           <li className='text-white mr-3 login'>
             <Link href='/login'>Login</Link>
           </li>
-          <li className='text-white'>
+            <li className='text-white register'>
             <Link href='/register'>Register</Link>
           </li>
         </ul>
-        <div className='inline-block relative w-28'>
+        }
+        {(logState) &&
+        <div className='inline-block relative w-40' >
           <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>
+              <span className='mr-1 ml-3'>{profileName}</span>
               <svg
                 className='fill-current h-4 w-4'
                 xmlns='http://www.w3.org/2000/svg'
@@ -56,6 +70,7 @@ export default function Nav() {
             </ul>
           </div>
         </div>
+        }
       </ul>
     </nav>
   )