Completed all tasks

components/AddTask.js

@@ -1,25 +1,86 @@
-export default function AddTask() {
+import axios from "axios";
+import { API_URL } from "../utils/constants";
+import { useState } from "react";
+import { useAuth } from "../context/auth";
+import { Alert } from "react-bootstrap";
+import { ToastContainer, toast } from 
+'react-toastify';
+import { injectStyle } from "react-toastify/dist/inject-style";
+import 'react-toastify/dist/ReactToastify.css';
+export default function AddTask(props) {
+  const {token}=useAuth();
+
+  const [task, setTask] = 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.
-     */
+    injectStyle();
+    // const notify = () => toast.success("Wow so easy!");
+     const taskVal = task.trim();
+     if (taskVal.toString().length===0) {
+         toast.error("Task can't be empty!")
+         return;
+     }
+
+     axios({
+         headers: {
+             Authorization: "Token " + localStorage.getItem("token")
+         },
+         url: API_URL + "todo/create/",
+         method: "post",
+         data: { title: taskVal }
+     })
+         .then((res)=>{
+             axios({
+                 headers: {
+                     Authorization: "Token " + localStorage.getItem("token")
+                 },
+                 url: API_URL + "todo/",
+                 method: "get"
+             }).then(({ data, status })=>{
+                toast.success('New task added')
+                console.log(task);
+              console.log(typeof(data));
+              const k=data.length-1;
+              const addedTask = data[k];
+              console.log(addedTask);
+              props.addNewTask(addedTask);
+             });
+         })
+         .catch((err)=>{
+            console.error(err);
+            toast.error('Error found!')
+         });
+         setTask("")
+
   }
   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 bg-white rounded text-sm border border-gray-700 outline-none focus:outline-none focus:ring w-full'
         placeholder='Enter Task'
+        value={task}
+        onChange={(e) => setTask(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'
+        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-700 hover:border-transparent rounded'
         onClick={addTask}
       >
         Add Task
       </button>
+      <ToastContainer
+position="bottom-right"
+autoClose={5000}
+hideProgressBar={false}
+newestOnTop={false}
+closeOnClick
+rtl={false}
+pauseOnFocusLoss
+draggable
+pauseOnHover
+/>
     </div>
   )
 }

components/LoginForm.js

@@ -1,43 +1,93 @@
+import React from "react";
+import axios from "axios";
+import { useState,useEffect } from "react";
+import { API_URL } from "../utils/constants";
+import { useAuth } from "../context/auth";
+import { useRouter } from "next/router";
+import 'react-toastify/dist/ReactToastify.css';
+import { ToastContainer } from 'react-toastify';
+import {toast} from "react-toastify";
+
 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 [pwd, setPwd] = useState('');
+     const [user, setUser] = useState('');
+     const router=useRouter();
+     const login = (e) => {
+       e.preventDefault();
+       setUser(`${document.getElementById('inputUsername').value.trim()}`);
+       setPwd(`${document.getElementById('inputPassword').value}`);
+       console.log(user,pwd);
+         if (user.toString().length===0||pwd.toString().length===0) {
+             toast.error("Username and password can't be empty!!")
+         } 
+         else {
+             const dataForApiRequest = {
+                 username: user,
+                 password: pwd
+             };
+             axios.post(
+                  API_URL + "auth/login/",
+                  dataForApiRequest
+             )
+                 .then(({ data, status })=>{
+                   toast.success("Logged-In successfully!!")
+                   setToken(data.token);
+                   localStorage.setItem("token", data.token);
+                   router.push('/');
+
+                 })
+                 .catch((err)=>{
+                     console.log(err)
+                     toast.error('Wrong username or password!!')
+                 });
   }
-
+
+     }
   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='bg-gray-200 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='login-box 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'
+            value={user}
+            className='block border border-grey-light w-full p-3 rounded mb-5'
             name='inputUsername'
             id='inputUsername'
+            onChange={(e) => setUser(e.target.value)}
             placeholder='Username'
           />
-
           <input
             type='password'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
+            value={pwd}
+            className='block border border-grey-light w-full p-3 rounded mb-5'
             name='inputPassword'
             id='inputPassword'
             placeholder='Password'
+            onChange={(e) => setPwd(e.target.value)}
           />
-
-          <button
+          <button id="loginbtn"
             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 text-center py-3 rounded bg-transparent text-green-500 hover:text-white hover:bg-green-500 border border-green-700 hover:border-transparent focus:outline-none my-1'
             onClick={login}
           >
             Login
           </button>
         </div>
       </div>
+      <ToastContainer
+position="bottom-right"
+autoClose={5000}
+hideProgressBar={false}
+newestOnTop={false}
+closeOnClick
+rtl={false}
+pauseOnFocusLoss
+draggable
+pauseOnHover
+/>
     </div>
   )
+
 }

components/Nav.js

@@ -1,36 +1,82 @@
-/* eslint-disable jsx-a11y/alt-text */
-/* 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 { useCookies } from 'react-cookie';
+import { useAuth } from '../context/auth';
+import Router, { useRouter } from 'next/router';
+import {useState,useEffect} from 'react';
+import RegisterForm from './LoginForm';
 
 export default function Nav() {
-  const { logout, profileName, avatarImage } = useAuth()
+  const [navlook,setNavlook]=useState(null)
+  let {token, logout, profileName, avatarImage } = useAuth()
 
+const loggedin = (
+  <div className='inline-block relative w-28'>
+    <div className='group inline-block relative'>
+      <button className='bg-green-100 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}
+          >
+            Logout
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+);
+const notloggedin = (
+  <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>
+);
+useEffect(() => {
+  if (localStorage.getItem('token')) {
+    setNavlook(loggedin);
+    console.log('yes');
+  } else {
+    setNavlook(notloggedin);
+    console.log('no');
+  }
+},[logout,profileName,avatarImage,RegisterForm,Nav]);
   return (
-    <nav className='bg-blue-600'>
+    <nav className='bg-red-500'>
       <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-xl'>Projecto</h1>
               </a>
             </Link>
-          </li>
-        </ul>
+
+        {/* </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>
+            <Link href='/register'>Register</Link> */}
           </li>
         </ul>
-        <div className='inline-block relative w-28'>
+        {/* <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} />
@@ -52,11 +98,12 @@ export default function Nav() {
                 >
                   Logout
                 </a>
-              </li>
+              </li> */}
+              {navlook}
             </ul>
-          </div>
+          {/* </div>
         </div>
-      </ul>
+      </ul> */}
     </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 'react-toastify/dist/ReactToastify.css';
+import { ToastContainer } from 
+'react-toastify';
+import {toast} from "react-toastify";
 
 export default function Register() {
   const { setToken } = useAuth()
@@ -58,20 +62,22 @@ export default function Register() {
       )
         .then(function ({ data, status }) {
           setToken(data.token)
-          router.push('/')
+          router.push('/login/');
+          toast.success('Registered successfully!');
         })
         .catch(function (err) {
           console.log(
             'An account using same email or username is already created'
           )
+          toast.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='bg-gray-200 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=' reg-box 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'
@@ -122,7 +128,7 @@ export default function Register() {
             placeholder='Password'
           />
 
-          <button
+          <button id='regbtn'
             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={register}
@@ -131,6 +137,17 @@ export default function Register() {
           </button>
         </div>
       </div>
+      <ToastContainer
+position="bottom-right"
+autoClose={5000}
+hideProgressBar={false}
+newestOnTop={false}
+closeOnClick
+rtl={false}
+pauseOnFocusLoss
+draggable
+pauseOnHover
+/>
     </div>
   )
 }