Dev Week 3

.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,17 +1,61 @@
-export default function AddTask() {
+import React, { useEffect, useState } from 'react'
+import axios from '../utils/axios'
+import { useAuth } from '../context/auth'
+
+import { displayErrorToast, displayInfoToast, displaySuccessToast } from './ToastMessage';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+
+export default function AddTask(props) {
+  const [enteredTask, setEnteredTask] = 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 taskValue = enteredTask.trim();
+
+    if (taskValue === '') {
+      displayErrorToast('Please enter a task')
+    }
+    else {
+      axios({
+        headers: {
+          Authorization: 'Token ' + token
+        },
+        url: "todo/create/",
+        method: 'POST',
+        data: {
+          title: enteredTask
+        },
+      })
+      .then(res => {
+        setEnteredTask("");
+        props.displayTasks();
+        displaySuccessToast("Task added successfully");
+      })
+      .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'
         placeholder='Enter Task'
+        value={enteredTask}
+        onChange={(event) => {
+          setEnteredTask(event.target.value)
+        }}
       />
       <button
         type='button'
@@ -20,6 +64,7 @@ export default function AddTask() {
       >
         Add Task
       </button>
+      {/* <ToastContainer /> */}
     </div>
   )
 }

components/LoginForm.js

@@ -1,11 +1,71 @@
+import React, { useState } from 'react'
+import axios from '../utils/axios'
+import { useAuth } from '../context/auth'
+import { useRouter } from 'next/router'
+import TodoListItem from './TodoListItem'
+
+import no_auth_required from '../middlewares/no_auth_required'
+
+//toastify imports
+import { displayErrorToast, displayInfoToast, displaySuccessToast } from './ToastMessage';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+
+
 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 } = useAuth()
+  const router = useRouter()
+
+  const [password, setPassword] = useState('')
+  const [username, setUsername] = useState('')
+
+  const loginFieldsAreValid = (
+    username,
+    password
+  ) => {
+    if (
+      username === '' ||
+      password === ''
+    ) {
+      displayErrorToast('Please fill all the fields correctly.')
+      return false
+    }
+    return true
+  }
+
+
+
+
+  const login = (e) => {
+    e.preventDefault()
+
+    if (
+      loginFieldsAreValid(username, password)
+    ) {
+      displayInfoToast('Please wait...')
+      const dataForApiRequest = {
+        username: username,
+        password: password,
+      }
+
+      axios.post(
+        'auth/login/',
+        dataForApiRequest,
+      )
+        .then(function ({ data, status }) {
+          displaySuccessToast("Logged in successfully");
+          setToken(data.token)
+          router.push('/');    
+          router.reload()
+
+        })
+        .catch(function (err) {
+          displayErrorToast('Enter Valid Credentials');
+        })
+    }
   }
 
   return (
@@ -19,25 +79,29 @@ export default function RegisterForm() {
             name='inputUsername'
             id='inputUsername'
             placeholder='Username'
+            onChange={(e) => setUsername(e.target.value)}
           />
 
           <input
             type='password'
             className='block border border-grey-light w-full p-3 rounded mb-4'
             name='inputPassword'
             id='inputPassword'
+            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}
+            onClick={login} 
           >
             Login
           </button>
+
         </div>
       </div>
+
     </div>
   )
 }

components/Nav.js

@@ -1,14 +1,25 @@
 /* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable @next/next/no-img-element */
+
+//toastify imports
+import { displayErrorToast, displayInfoToast, displaySuccessToast } from './ToastMessage';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import auth_required from '../middlewares/auth_required';
+import no_auth_required from '../middlewares/no_auth_required';
+
 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()
+  const { logout, profileName, avatarImage, token } = useAuth()
+  auth_required();
+  no_auth_required();
 
   return (
     <nav className='bg-blue-600'>
@@ -22,41 +33,42 @@ export default function Nav() {
             </Link>
           </li>
         </ul>
-        <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'>
-            <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>
-              <svg
-                className='fill-current h-4 w-4'
-                xmlns='http://www.w3.org/2000/svg'
-                viewBox='0 0 20 20'
-              >
-                <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 === 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'>
+            <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>
+                <svg
+                  className='fill-current h-4 w-4'
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='0 0 20 20'
                 >
-                  Logout
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
+                  <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}
+                  >
+                    Logout
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>)}
       </ul>
+      <ToastContainer />
     </nav>
   )
 }

components/RegisterForm.js

@@ -2,6 +2,10 @@ import React, { useState } from 'react'
 import axios from '../utils/axios'
 import { useAuth } from '../context/auth'
 import { useRouter } from 'next/router'
+import { displayErrorToast, displayInfoToast, displaySuccessToast } from './ToastMessage';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
 
 export default function Register() {
   const { setToken } = useAuth()
@@ -27,11 +31,11 @@ export default function Register() {
       username === '' ||
       password === ''
     ) {
-      console.log('Please fill all the fields correctly.')
+      displayErrorToast('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.')
+      displayErrorToast('Please enter a valid email address.')
       return false
     }
     return true
@@ -43,7 +47,7 @@ export default function Register() {
     if (
       registerFieldsAreValid(firstName, lastName, email, username, password)
     ) {
-      console.log('Please wait...')
+      displayInfoToast('Please wait...')
 
       const dataForApiRequest = {
         name: firstName + ' ' + lastName,
@@ -58,12 +62,13 @@ export default function Register() {
       )
         .then(function ({ data, status }) {
           setToken(data.token)
+
           router.push('/')
+          router.reload()
+          displaySuccessToast("Logged in successfully")
         })
         .catch(function (err) {
-          console.log(
-            'An account using same email or username is already created'
-          )
+          displayErrorToast('An account using same email or username is already created');
         })
     }
   }

components/ToastMessage.js

@@ -0,0 +1,38 @@
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+export function displayErrorToast(e){
+    toast.error(e, {
+      position: "bottom-right",
+      autoClose: 5000,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,})
+}
+
+export function displaySuccessToast(e){
+    toast.success(e, {
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        });
+}
+
+
+export function displayInfoToast(e){
+    toast.info(e, {
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        });
+}