From 48cda96e9854dbbc62ed0591d0f2b1d0c21492f5 Mon Sep 17 00:00:00 2001 From: Ankur-Agrawal-ece20 Date: Mon, 28 Jun 2021 18:03:33 +0530 Subject: [PATCH 1/7] Completed-All-TASKS!!! --- components/AddTask.js | 38 ++++++++++++++--- components/LoginForm.js | 41 ++++++++++++++----- components/Nav.js | 41 ++++++++++++++----- components/RegisterForm.js | 22 +++++----- components/TodoListItem.js | 72 +++++++++++++++++++++------------ context/auth.js | 39 +++++++++++++++--- middlewares/auth_required.js | 25 ++++++++++-- middlewares/no_auth_required.js | 9 +++-- package.json | 1 + pages/_app.js | 2 +- pages/index.js | 36 ++++++++++++----- pages/login.js | 2 + yarn.lock | 12 ++++++ 13 files changed, 257 insertions(+), 83 deletions(-) diff --git a/components/AddTask.js b/components/AddTask.js index 9652adb..f469a56 100644 --- a/components/AddTask.js +++ b/components/AddTask.js @@ -1,14 +1,40 @@ +import { useState } from 'react' +import axios from '../utils/axios' +import { useAuth } from '../context/auth' +import {toast} from 'react-toastify' +import 'react-toastify/dist/ReactToastify.css' + +toast.configure() export default function AddTask() { - 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 [Todotxt, setTodotxt] = useState(""); + const { config,API_BASE_URL} = useAuth(); + const addTask = (e) => { + e.preventDefault() + if (!Todotxt || Todotxt=="") { + return; + } + axios + .post(API_BASE_URL + "todo/create/",{ title: Todotxt },config) + .then(function (response) { + axios + .get(API_BASE_URL + "todo/",config) + .then(function ({ data, status }) { + const newTodo = data[data.length - 1]; + const taskNo = newTodo.id; + setTodotxt(""); + toast.success('Task added',{position: toast.POSITION.BOTTOM_RIGHT}) + }); + }) + .catch(function (err) { + toast.error("An error occurred!"); + }); } + return (
{setTodotxt(e.target.value)}} 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' diff --git a/components/LoginForm.js b/components/LoginForm.js index fa28f9e..1bc95a5 100644 --- a/components/LoginForm.js +++ b/components/LoginForm.js @@ -1,12 +1,35 @@ +import axios from '../utils/axios'; +import { useAuth } from '../context/auth' +import {toast} from 'react-toastify' +import 'react-toastify/dist/ReactToastify.css' +import { useEffect } from 'react' + +toast.configure() 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 { login,API_BASE_URL,setpagetype } = useAuth() + useEffect(()=>{setpagetype("LOGIN");return;},[]) + const loginnow = () => { + const user_name = document.getElementById("inputUsername").value.trim(); + const user_pass = document.getElementById("inputPassword").value; + if (user_name == "" || user_pass == "") { + toast.error("Please fill the empty fields.",{position: toast.POSITION.BOTTOM_RIGHT}) + return; + } + toast.info("Checking credentials...",{position: toast.POSITION.BOTTOM_RIGHT}) + axios + .post(API_BASE_URL + "auth/login/",{ + username: user_name, + password: user_pass + }) + .then(({ data, status }) => { + toast.success("Successfully logged in!",{position: toast.POSITION.BOTTOM_RIGHT}) + localStorage.setItem("token", data.token); + login(data.token); + }) + .catch((err) => { + toast.error("Cannot Login! :( Check credentials.",{position: toast.POSITION.BOTTOM_RIGHT}) + }); + } return (
@@ -32,7 +55,7 @@ export default function RegisterForm() { diff --git a/components/Nav.js b/components/Nav.js index e03cb0f..7169f84 100644 --- a/components/Nav.js +++ b/components/Nav.js @@ -1,15 +1,34 @@ -/* 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 {useState,useEffect } from 'react' +import {toast} from 'react-toastify' +import 'react-toastify/dist/ReactToastify.css' +toast.configure() export default function Nav() { - const { logout, profileName, avatarImage } = useAuth() - + const { logout, profileName, avatarImage,pagetype,setpagetype,token } = useAuth(); + const [showlogin, setShowlogin] = useState(false); + const [showregister, setShowregister] = useState(false); + const [showavtar, setShowavtar] = useState(true); + + function pagechange(){ + if(pagetype=="HOME"){ + setShowlogin(false); + setShowregister(false); + setShowavtar(true); + } + if(pagetype=="LOGIN"){ + setShowlogin(false); + setShowregister(true); + setShowavtar(false); + } + if(pagetype=="REGISTER"){ + setShowlogin(true); + setShowregister(false); + setShowavtar(false); + } + } + useEffect(() => {pagechange()},[pagetype]); return (