CSOC WEEK 3

.eslintrc

@@ -1,3 +1,3 @@
 {
-  "extends": ["next/babel", "next/core-web-vitals"]
-}
+  "extends": ["next", "next/core-web-vitals"]
+}

components/AddTask.js

@@ -1,20 +1,63 @@
-export default function AddTask() {
+import React, { useState } from 'react'
+import axios from '../utils/axios'
+import { useAuth } from '../context/auth'
+import { useRouter } from 'next/router'
+import { API_URL } from '../utils/constants'
+import { success , error ,warn } from '../pages/_app'
+
+
+export default function AddTask(props) {
+
+  const {token} = useAuth()
+  const router = useRouter()
+
+  const [title, setTitle] = useState('')
+
   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(title=="")
+      {
+        warn('Task name cannot be empty .' )
+        return ;
+      }
+
+      const dataForApiRequest = {
+              title:title
+      }
+      axios({
+        headers: {
+            Authorization: "Token " + token,
+        },
+        url: API_URL+'todo/create/',
+        method: 'post',
+        data: dataForApiRequest,
+          })
+             .then(function ({ data, status }) {
+              success('Task added  .');
+              setTitle('');
+              props.getTasks();
+              })
+             .catch(function (err) {
+              error('Your request cannot be completed .')
+            })
   }
   return (
-    <div className='flex items-center max-w-sm mt-24'>
+    <div className='flex items-center max-w-sm mt-24' id='addtask'>
       <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='login-container 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'
+        id='input-btn'
         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}
       >

components/LoginForm.js

@@ -1,43 +1,98 @@
+import React, { useEffect, useState } from 'react'
+import axios from '../utils/axios'
+import { useAuth } from '../context/auth'
+import { useRouter } from 'next/router'
+import { success , warn, info , error } from '../pages/_app'
+
+
 export default function RegisterForm() {
-  const login = () => {
+
+  const { setToken} = useAuth()
+  const router = useRouter()
+
+  const [password, setPassword] = useState('')
+  const [username, setUsername] = useState('')
+
+  const loginFieldsAreValid = (
+    username,
+    password
+  ) => {
+    if (username === '' || password === '') {
+      warn('Please fill all the fields correctly.')
+      return false
+    }
+    return true
+  }
+
+  const login = (e) => {
     /***
      * @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(e)
+      e.preventDefault()
+
+      if (loginFieldsAreValid(username, password) ) {
+        info('Please wait...')
+
+        const dataForApiRequest = {
+          username: username,
+          password: password,
+        }
+
+        axios.post(
+          'auth/login/',
+          dataForApiRequest
+        )
+          .then(function ({ data, status }) {
+            success('Logged in .');
+            setToken(data.token);
+            router.push('/');
+          })
+          .catch(function (err) {
+            error('Invalid password or email-id .')
+          })
+      }
+
+    }
   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'>
+      <div className='container max-w-sm mx-auto flex-1 flex flex-col items-center justify-center px-2 pb-20'>
+        <div className=' login-container 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'
+            className='login-container 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'
+            className='login-container 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}
+            className=' login-btn 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>
     </div>
+
   )
 }

components/Nav.js

@@ -8,10 +8,10 @@ import { useAuth } from '../context/auth'
  */
 
 export default function Nav() {
-  const { logout, profileName, avatarImage } = useAuth()
-
+
+  const { logout, profileName, avatarImage ,token} = useAuth();
   return (
-    <nav className='bg-blue-600'>
+    <nav className='bg-blue-600' id='nav'>
       <ul className='flex items-center justify-between p-5'>
         <ul className='flex items-center justify-between space-x-4'>
           <li>
@@ -22,19 +22,19 @@ export default function Nav() {
             </Link>
           </li>
         </ul>
-        <ul className='flex'>
+        { !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>
-        <div className='inline-block relative w-28'>
-          <div className='group inline-block relative'>
+          : <div className='inline-block relative w-28'>
+          <div id='details' 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='ml-1 mr-1'>{profileName}</span>
               <svg
                 className='fill-current h-4 w-4'
                 xmlns='http://www.w3.org/2000/svg'
@@ -49,13 +49,13 @@ export default function Nav() {
                   className='rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap'
                   href='#'
                   onClick={logout}
-                >
-                  Logout
+                >Logout
                 </a>
               </li>
             </ul>
           </div>
         </div>
+        }
       </ul>
     </nav>
   )

components/RegisterForm.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import axios from '../utils/axios'
 import { useAuth } from '../context/auth'
 import { useRouter } from 'next/router'
+import { warn , success , error ,info} from '../pages/_app'
 
 export default function Register() {
   const { setToken } = useAuth()
@@ -27,23 +28,25 @@ export default function Register() {
       username === '' ||
       password === ''
     ) {
-      console.log('Please fill all the fields correctly.')
+      warn('Please fill all the fields correctly.')
       return false
     }
     if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
-      console.log('Please enter a valid email address.')
+      error('Please enter a valid email address.')
       return false
     }
     return true
   }
 
   const register = (e) => {
+
+    if(e)
     e.preventDefault()
 
     if (
       registerFieldsAreValid(firstName, lastName, email, username, password)
     ) {
-      console.log('Please wait...')
+      info('Please wait...')
 
       const dataForApiRequest = {
         name: firstName + ' ' + lastName,
@@ -58,24 +61,23 @@ export default function Register() {
       )
         .then(function ({ data, status }) {
           setToken(data.token)
-          router.push('/')
+          router.push('/');
+          success('Registered Successfully !')
         })
         .catch(function (err) {
-          console.log(
-            'An account using same email or username is already created'
-          )
+          error('An account using same email or username is already created');
         })
     }
   }
 
   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'>
+      <div className='container max-w-sm mx-auto flex-1 flex flex-col items-center justify-center px-2 pb-20 '>
+        <div className='login-container bg-white px-6 py-8 rounded shadow-md text-black w-full'>
           <h1 className='mb-8 text-3xl text-center'>Register</h1>
           <input
             type='text'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
+            className='login-container block border border-grey-light w-full p-3 rounded mb-4'
             name='inputFirstName'
             id='inputFirstName'
             value={firstName}
@@ -84,7 +86,7 @@ export default function Register() {
           />
           <input
             type='text'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
+            className='login-container block border border-grey-light w-full p-3 rounded mb-4'
             name='inputLastName'
             id='inputLastName'
             value={lastName}
@@ -94,7 +96,7 @@ export default function Register() {
 
           <input
             type='email'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
+            className=' login-container block border border-grey-light w-full p-3 rounded mb-4'
             name='inputEmail'
             id='inputEmail'
             value={email}
@@ -104,7 +106,7 @@ export default function Register() {
 
           <input
             type='text'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
+            className='login-container block border border-grey-light w-full p-3 rounded mb-4'
             name='inputUsername'
             id='inputUsername'
             value={username}
@@ -114,7 +116,7 @@ export default function Register() {
 
           <input
             type='password'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
+            className='login-container block border border-grey-light w-full p-3 rounded mb-4'
             name='inputPassword'
             id='inputPassword'
             value={password}
@@ -124,7 +126,7 @@ export default function Register() {
 
           <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='login-btn 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={register}
           >
             Register