React-to-do

.eslintrc

@@ -1,3 +1,8 @@
 {
-  "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,25 +1,110 @@
-export default function AddTask() {
+import React, { useEffect, useState } from 'react'
+
+import axios from '../utils/axios'
+
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { useAuth } from '../context/auth';
+import {Home} from '../pages/index';
+import { route } from 'next/dist/next-server/server/router';
+import TodoListItem from './TodoListItem';
+
+
+
+export default function AddTask(props) {
+  const [title, setTitle] = 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 dataForApiRequest = {
+
+      title: title
+    }
+//      axios.post(
+//       'todo/create/',
+//       dataForApiRequest,
+//       {
+//         headers: {
+//           Authorization: "Token " + token
+//         }
+//       }
+
+//     )
+//     .then((data,status)=>{
+// toast.success("Added Task")
+//     })
+//     .catch(function (err) {
+//       console.log(err,
+//         'Error in adding task'
+//       )
+
+//       toast.error("Error in adding task")
+
+
+//     })
+if(title.length==0){toast.error("Please enter a valid task!")}
+else
+axios({
+  headers: {
+      Authorization: "Token " + token
+    },
+   url: 'https://todo-app-csoc.herokuapp.com/' + 'todo/create/',
+   method: 'post',
+   data: dataForApiRequest,
+}).then(function(res) {
+ toast.success("Added Task!")
+
+props.refget()
+
+ setTitle('')
+
+
+
+
+
+}).catch(function(err) { console.log(err);
+ toast.error('Something went wrong!');
+})
+
+}   
+
+
   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'
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
         placeholder='Enter Task'
       />
       <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}
+        style={{ backgroundColor: 'black' }}
       >
-        Add Task
+        <h1 className='neonText'>Add Task</h1>
       </button>
+
+      <ToastContainer
+      position="bottom-right"
+      theme="light"
+      autoClose={1000}
+      hideProgressBar={false}
+      newestOnTop={false}
+      closeOnClick
+      rtl={false}
+      pauseOnFocusLoss
+      draggable
+      pauseOnHover
+       />
+
     </div>
   )
 }

components/LoginForm.js

@@ -1,12 +1,84 @@
+import React, { useEffect, useState } from 'react'
+import axios from '../utils/axios'
+import { useAuth } from '../context/auth'
+import { useRouter } from 'next/router'
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { no_auth_required } from '../middlewares/no_auth_required';
+//import { useNavigate } from 'react-router-dom';
+
+
 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_required();
+     const { setToken } = useAuth()
+     const router = useRouter()
+
+
+     const [password, setPassword] = useState('')
+     const [username, setUsername] = useState('')
+
+     const registerFieldsAreValid = (
+       username,
+       password
+     ) => {
+       if (
+        username === '' ||
+        password === ''
+       ) {
+         console.log('Please fill all the fields correctly.')
+         toast.error('Please fill all the fields correctly.')
+         return false
+       }
+
+       return true
+     }
+
+
+     const login = (e) => {
+
+      e.preventDefault()
+      if (
+        registerFieldsAreValid(username, password)
+      ){
+        console.log('Please wait...')
+        toast.info('Please Wait...')
+        const dataForApiRequest = {
+
+          username: username,
+          password: password,
+        }
+
+        axios.post(
+          'auth/login/',
+          dataForApiRequest,
+        )
+        .then(function ({ data, status }) {
+          setToken(data.token)
+          console.log(data.token)
+
+          window.location.href = '/';
+        })
+        .catch(function (err) {
+          console.log(
+            'Invalid Username or Password'
+          )
+
+          toast.error("Invalid Username or Password")
+
+
+        })
+
+
+      }
+     }
+
 
   return (
     <div className='bg-grey-lighter min-h-screen flex flex-col'>
@@ -18,6 +90,8 @@ export default function RegisterForm() {
             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'
           />
 
@@ -26,6 +100,8 @@ export default function RegisterForm() {
             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'
           />
 
@@ -38,6 +114,18 @@ export default function RegisterForm() {
           </button>
         </div>
       </div>
+      <ToastContainer
+      position="bottom-right"
+      theme="light"
+      autoClose={1000}
+      hideProgressBar={false}
+      newestOnTop={false}
+      closeOnClick
+      rtl={false}
+      pauseOnFocusLoss
+      draggable
+      pauseOnHover
+       />
     </div>
   )
 }

components/Nav.js

@@ -2,39 +2,51 @@
 /* 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
  */
+function stylefunc({isActive}){
+return {
+  fontWeight: isActive?'bold':'normal',
+  textDecoration: isActive? 'none': 'underline'
+}
+}
 
 export default function Nav() {
+
   const { logout, profileName, avatarImage } = useAuth()
-
+  const {token}=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}>
-              <a>
-                <h1 className='text-white font-bold text-xl'>Todo</h1>
-              </a>
+
+                <h1 className='neonText'>Todo</h1>
+
             </Link>
           </li>
         </ul>
-        <ul className='flex'>
+
+        {(!token) && <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>
+
           </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>
+              <span className='mr-1'><h1 className='neonText'>{profileName}</h1></span>
               <svg
                 className='fill-current h-4 w-4'
                 xmlns='http://www.w3.org/2000/svg'
@@ -43,20 +55,23 @@ export default function Nav() {
                 <path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
               </svg>
             </button>
-            <ul className='absolute hidden text-gray-700 pt-1 group-hover:block'>
-              <li className=''>
-                <a
-                  className='rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap'
-                  href='#'
-                  onClick={logout}
+            {(token)&&<ul className='absolute hidden text-gray-700 pt-1 group-hover:block'>
+              <li className='rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap' onClick={logout}>
+                <Link
+                  //className='rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap'
+                  href='/'
+
                 >
                   Logout
-                </a>
+                </Link>
               </li>
-            </ul>
+            </ul>}
           </div>
         </div>
       </ul>
     </nav>
+
   )
+
+
 }