COPS-CSOC-2022 · amyra98 · Jun 27, 2022 · Jun 27, 2022
diff --git a/components/AddTask.js b/components/AddTask.js
@@ -1,21 +1,58 @@
+import axios from "axios"
+import { useState } from "react"
+import { useAuth } from "../context/auth"
+import { API_URL } from "../utils/constants"
+import {toast} from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+
+
 export default function AddTask() {
+  const [task, setTask] = useState("")
+  const {token, theme} = 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(task.length===0){
+       toast.warn("Write some task")
+    }
+    else{
+    axios({
+      headers : {Authorization : "Token "+token},
+      url : API_URL + 'todo/',
+      method : 'get',
+
+    }).then((res)=>{
+      const {data,status}=res
+      const apiData = {id : data.length, title : task}
+      axios({
+        headers : {Authorization : "Token "+token},
+        url : API_URL + 'todo/create/',
+        method: "post",
+        data : apiData
+      }).then(
+          toast.success("Task added"),
+          setTask('')
+      ).catch((error)=>
+      toast.notify("Task couldn't be added",{type: "error"})
+      )
+    })
+  }
   }
   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'
+        className='todo-add-task-input px-4 py-3 placeholder-blue-300 text-black bg-white rounded text-sm border border-blue-300 outline-none focus:outline-none focus:ring w-full'
+        placeholder='Enter your 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-blue-500 text-blue-700 text-sm hover:text-white px-3 py-3 border border-blue-500 hover:border-transparent rounded'
         onClick={addTask}
       >
         Add Task

diff --git a/components/LoginForm.js b/components/LoginForm.js
@@ -1,37 +1,69 @@
+import axios from "axios";
+import { useState } from "react";
+import {no_auth_required} from "../middlewares/no_auth_required";
+import { API_URL } from "../utils/constants";
+import {useAuth} from "../context/auth"
+import { useRouter } from "next/router";
+import 'react-toastify/dist/ReactToastify.css'
+import { toast } from "react-toastify";
 export default function RegisterForm() {
+  no_auth_required();
+  const [inpame,setName] = useState("")
+  const [pass,setPass] = useState("")
+  const {setToken,theme} = useAuth()
+  const route = useRouter()
   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)
      */
+  (inpame=="" || pass=="") ? toast.warn("Username and Password should be filled"):
+    axios({
+      url : API_URL+"auth/login/",
+      method : "post",
+      data : {username: inpame , password: pass}
+  })
+  .then((res)=>{
+    const {data,status} = res;
+    setToken(data.token)
+    toast.info("Wait..!!")
+    route.reload()
+  }).catch((err)=> toast.error("Incorrect Credentials"))
+
+
   }
 
   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-blue-900 px-6 py-8 rounded shadow-md text-white 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='block border border-grey-light w-full p-3 rounded mb-4 text-black '
             name='inputUsername'
             id='inputUsername'
             placeholder='Username'
+            value={inpame}
+            onChange={(e)=>{setName(e.target.value)}}
           />
 
           <input
             type='password'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
+            className='block border border-grey-light w-full p-3 rounded mb-4 text-black'
             name='inputPassword'
             id='inputPassword'
             placeholder='Password'
+            value={pass}
+            onChange={(e)=>{setPass(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 text-center py-3 rounded bg-transparent text-black-500 hover:text-black hover:bg-blue-500 border border-white hover:border-transparent focus:outline-none my-1'
             onClick={login}
           >
             Login

diff --git a/components/Nav.js b/components/Nav.js
@@ -1,18 +1,22 @@
 /* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable @next/next/no-img-element */
 import Link from 'next/link'
+import { useEffect } from 'react'
 import { useAuth } from '../context/auth'
+import { useState } from 'react'
 /**
  *
  * @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()
+  const [mounted,setMounted] = useState(true) 
+  useEffect(()=>{(token)?setMounted(true):setMounted(false)},[])
+  useEffect(()=>{(token)?setMounted(true):setMounted(false)},[token])
 
   return (
-    <nav className='bg-blue-600'>
-      <ul className='flex items-center justify-between p-5'>
+    <nav className='bg-blue-900'>
+      <ul className='flex items-center justify-between p-8'>
         <ul className='flex items-center justify-between space-x-4'>
           <li>
             <Link href="/" passHref={true}>
@@ -21,42 +25,52 @@ export default function Nav() {
               </a>
             </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}
+          </ul>
+         { !mounted &&
+            <div>
+              <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>
+        }
+          <div className='inline-block relative w-28'>
+            <div className='group inline-block relative'>
+        { mounted && ( <>
+              <button className='bg-blue-300 text-blue-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>
+                  <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-blue-200 hover:bg-blue-400 py-2 px-4 block whitespace-no-wrap'
+                    href='#'
+                    onClick={logout}
+                  >
+                    Logout
+                  </a>
+                </li>
+              </ul>
+              </>
+             )}
+            </div>
           </div>
-        </div>
+
+
       </ul>
     </nav>
   )
 }
+
diff --git a/components/RegisterForm.js b/components/RegisterForm.js
@@ -2,16 +2,21 @@ import React, { useState } from 'react'
 import axios from '../utils/axios'
 import { useAuth } from '../context/auth'
 import { useRouter } from 'next/router'
+import { no_auth_required } from '../middlewares/no_auth_required'
+import {toast} from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 
 export default function Register() {
-  const { setToken } = useAuth()
+  no_auth_required()
+  const { setToken} = useAuth()
   const router = useRouter()
 
   const [firstName, setFirstName] = useState('')
   const [lastName, setLastName] = useState('')
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [username, setUsername] = useState('')
+  const [confpass, setConfPass] = useState("")
 
   const registerFieldsAreValid = (
     firstName,
@@ -27,11 +32,12 @@ export default function Register() {
       username === '' ||
       password === ''
     ) {
-      console.log('Please fill all the fields correctly.')
+
+      toast.warn("Please fill the field correctly")
       return false
     }
     if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
-      console.log('Please enter a valid email address.')
+      toast.warn("Invalid email address")
       return false
     }
     return true
@@ -43,8 +49,8 @@ export default function Register() {
     if (
       registerFieldsAreValid(firstName, lastName, email, username, password)
     ) {
-      console.log('Please wait...')
-
+      if(confpass===password){
+      toast.info("Wait..!!")
       const dataForApiRequest = {
         name: firstName + ' ' + lastName,
         email: email,
@@ -58,24 +64,27 @@ export default function Register() {
       )
         .then(function ({ data, status }) {
           setToken(data.token)
-          router.push('/')
+          router.reload()
+          toast.info("Wait..!!")
         })
         .catch(function (err) {
-          console.log(
-            'An account using same email or username is already created'
-          )
+         toast.error("Email or Username already exists")
         })
     }
+    else{
+       toast.error("Passwords dont match!!!")
+    }
+  }
   }
 
   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-blue-900 px-6 py-5 rounded shadow-md text-white 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='block border border-grey-light w-full p-3 rounded mb-4 text-black'
             name='inputFirstName'
             id='inputFirstName'
             value={firstName}
@@ -84,7 +93,7 @@ export default function Register() {
           />
           <input
             type='text'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
+            className='block border border-grey-light w-full p-3 rounded mb-4 text-black'
             name='inputLastName'
             id='inputLastName'
             value={lastName}
@@ -94,7 +103,7 @@ export default function Register() {
 
           <input
             type='email'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
+            className='block border border-grey-light w-full p-3 rounded mb-4 text-black'
             name='inputEmail'
             id='inputEmail'
             value={email}
@@ -104,7 +113,7 @@ export default function Register() {
 
           <input
             type='text'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
+            className='block border border-grey-light w-full p-3 rounded mb-4 text-black'
             name='inputUsername'
             id='inputUsername'
             value={username}
@@ -114,17 +123,26 @@ export default function Register() {
 
           <input
             type='password'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
+            className='block border border-grey-light w-full p-3 rounded mb-4 text-black'
             name='inputPassword'
             id='inputPassword'
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             placeholder='Password'
           />
+           <input
+            type='password'
+            className='block border border-grey-light dark:text-white w-full p-3 rounded mb-4 text-black' 
+            name='inputConfirmPassword'
+            id='inputConfirmPassword'
+            placeholder='Confirm Password'
+            value={confpass}
+            onChange={(e)=>{setConfPass(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 text-center py-3 rounded bg-transparent text-black-500 hover:text-black hover:bg-blue-500 border border-white hover:border-transparent focus:outline-none my-1'
             onClick={register}
           >
             Register