CSOC Task 3 Submission

README.md

@@ -107,3 +107,6 @@ You'll have a week to complete this task. Hence, the deadline of this task is **
 * When done, commit your work locally and push it to your origin (forked repository).
 * Make a pull request to our repository, stating the tasks which you have completed.
 * Let us review your pull request.
+
+## Solution
+https://csoc-2021-task-3-reactjs-one.vercel.app/login

components/AddTask.js

@@ -1,17 +1,77 @@
-export default function AddTask() {
+import { useEffect, useState, useContext } from 'react'
+import axios from '../utils/axios'
+import { useAuth } from '../context/auth'
+import { useRouter } from 'next/router'
+import { infoToast, errorToast, sucsessToast } from './toast'
+import { toast } from 'react-toastify'
+
+export default function AddTask({ tasks, setTasks, getTasks }) {
+  const API_BASE_URL = 'https://todo-app-csoc.herokuapp.com/';
+
+  const router = useRouter()
+  const [title, setTitle] = useState('');
+
+  const { token } = useAuth();
+
   const addTask = () => {
+
+    const dataForApiRequest = {
+      title: title
+    }
+
+    if(!title)
+    {
+      errorToast("Please add title to the task")
+      return;
+    }
+
+    infoToast("Please wait...")
+
+    axios({
+      url: API_BASE_URL + 'todo/create/',
+      method: 'POST',
+      data: dataForApiRequest,
+      headers: {
+        Authorization: "Token " + token
+      }
+    })
+
+      .then(function (res) {
+        toast.dismiss()
+
+        setTitle('')
+        getTasks();
+
+        sucsessToast("Task Addded")
+
+      })
+
+
+      .catch(function (err) {
+        console.log(err)
+
+        toast.dismiss()
+        errorToast('error in adding tasks')
+      })
+
+
     /**
      * @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.
      */
   }
+
+
   return (
     <div className='flex items-center max-w-sm mt-24'>
       <input
+        id="inputTask"
         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={title}
+        onChange={(e) => setTitle(e.target.value)}
       />
       <button
         type='button'
@@ -20,6 +80,7 @@ export default function AddTask() {
       >
         Add Task
       </button>
+
     </div>
   )
-}
+}

components/LoginForm.js

@@ -1,11 +1,75 @@
-export default function RegisterForm() {
-  const login = () => {
+import React, { useState } from 'react'
+import axios from '../utils/axios'
+import { useAuth } from '../context/auth'
+import { useRouter } from 'next/router'
+import { errorToast, infoToast, sucsessToast } from './toast'
+import { toast } from 'react-toastify'
+
+export default function LoginForm() {
+
+  const { setToken } = useAuth()
+  const router = useRouter()
+
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  const loginFieldsAreValid = (
+    username,
+    password
+  ) => {
+    if (
+      username === '' ||
+      password === ''
+    ) {
+      errorToast('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)
      */
+
+     e.preventDefault()
+
+     if (
+       loginFieldsAreValid(username, password)
+     ) {
+
+       infoToast("Please wait...")
+
+       const dataForApiRequest = {
+         username: username,
+         password: password,
+       }
+
+
+       axios.post(
+         'auth/login/',
+         dataForApiRequest,
+       )
+         .then(({ data, status }) => {
+
+
+           toast.dismiss();
+           setToken(data.token)
+           router.push('/')
+           sucsessToast("Logged in")
+
+         })
+         .catch(function (err) {
+
+           toast.dismiss();
+           errorToast('Wrong Credentials')
+         })
+     }
+
   }
 
   return (
@@ -19,6 +83,8 @@ export default function RegisterForm() {
             name='inputUsername'
             id='inputUsername'
             placeholder='Username'
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
           />
 
           <input
@@ -27,6 +93,8 @@ export default function RegisterForm() {
             name='inputPassword'
             id='inputPassword'
             placeholder='Password'
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
           />
 
           <button

components/Nav.js

@@ -8,7 +8,7 @@ import { useAuth } from '../context/auth'
  */
 
 export default function Nav() {
-  const { logout, profileName, avatarImage } = useAuth()
+  const { token, logout, profileName, avatarImage } = useAuth()
 
   return (
     <nav className='bg-blue-600'>
@@ -22,15 +22,15 @@ export default function Nav() {
             </Link>
           </li>
         </ul>
-        <ul className='flex'>
+        {(token=="null"||token==undefined) && <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>
-        <div className='inline-block relative w-28'>
+        </ul>}
+        { (token!="null" && token!=undefined) && <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} />
@@ -55,7 +55,7 @@ export default function Nav() {
               </li>
             </ul>
           </div>
-        </div>
+        </div>}
       </ul>
     </nav>
   )

components/RegisterForm.js

@@ -3,6 +3,9 @@ import axios from '../utils/axios'
 import { useAuth } from '../context/auth'
 import { useRouter } from 'next/router'
 
+import { infoToast, errorToast, sucsessToast } from './toast'
+import { toast } from 'react-toastify'
+
 export default function Register() {
   const { setToken } = useAuth()
   const router = useRouter()
@@ -27,23 +30,25 @@ export default function Register() {
       username === '' ||
       password === ''
     ) {
-      console.log('Please fill all the fields correctly.')
+      infoToast('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.')
+      errorToast('Please enter a valid email address.')
       return false
     }
     return true
   }
 
   const register = (e) => {
+    toast.dismiss();
     e.preventDefault()
 
     if (
       registerFieldsAreValid(firstName, lastName, email, username, password)
     ) {
-      console.log('Please wait...')
+      toast.dismiss();
+      infoToast('Please wait...')
 
       const dataForApiRequest = {
         name: firstName + ' ' + lastName,
@@ -57,11 +62,14 @@ export default function Register() {
         dataForApiRequest,
       )
         .then(function ({ data, status }) {
+          toast.dismiss();
           setToken(data.token)
           router.push('/')
+          sucsessToast("Registered Successfully..")
         })
         .catch(function (err) {
-          console.log(
+          toast.dismiss();
+          errorToast(
             'An account using same email or username is already created'
           )
         })