From 0b9ab79c85f46c9b2dae1bf9ad062f9b9b6ab3e4 Mon Sep 17 00:00:00 2001 From: atulyadav745 <106299466+atulyadav745@users.noreply.github.com> Date: Sat, 30 Jul 2022 09:46:46 +0530 Subject: [PATCH] Added changes --- components/AddTask.js | 69 ++++++++++++--- components/LoginForm.js | 98 +++++++++++++++------ components/Nav.js | 18 ++-- components/RegisterForm.js | 21 +++-- components/TodoListItem.js | 145 ++++++++++++++++++++++---------- context/auth.js | 28 +++--- middlewares/auth_required.js | 24 +++++- middlewares/no_auth_required.js | 20 ++++- package.json | 1 + pages/index.js | 58 +++++++++---- styles/globals.css | 40 +++++++++ yarn.lock | 12 +++ 12 files changed, 401 insertions(+), 133 deletions(-) diff --git a/components/AddTask.js b/components/AddTask.js index 9652adb..40da735 100644 --- a/components/AddTask.js +++ b/components/AddTask.js @@ -1,25 +1,66 @@ -export default function AddTask() { +import React, { useState } from "react"; +import axios from "../utils/axios"; +import { useAuth } from "../context/auth"; +import { toast, ToastContainer } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; + +export default function AddTask(props) { + const { token } = useAuth(); + const [addtask, setAddtask] = useState(""); + + const addTaskFieldsAreValid = (addtask) => { + if (addtask === "") { + toast.warn("Please fill a Task....", { position: "top-center" }); + return false; + } + return true; + }; 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 (addTaskFieldsAreValid(addtask)) { + toast.info("Please wait...", { position: "top-center", autoClose: 1000 }); + + const dataForApiRequest = { + title: addtask, + }; + + const headersForApiRequest = { + headers: { Authorization: "Token " + token }, + }; + + axios + .post("/todo/create/", dataForApiRequest, headersForApiRequest) + .then(function ({ data, status }) { + setAddtask(""); + toast.success("Task Added in the Todo Succesfully....", { + position: "top-center", + }); + }) + .catch(function (err) { + toast.error("Task Not Added in the Todo ....", { + position: "top-center", + }); + }); + } + }; return ( -
+
+ setAddtask(e.target.value)} />
- ) + ); } diff --git a/components/LoginForm.js b/components/LoginForm.js index fa28f9e..663a5ce 100644 --- a/components/LoginForm.js +++ b/components/LoginForm.js @@ -1,37 +1,85 @@ -export default function RegisterForm() { +import React, { useState } from "react"; +import axios from "../utils/axios"; +import { useAuth } from "../context/auth"; +import { useRouter } from "next/router"; +import no_authRequired from "../middlewares/no_auth_required"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; + +export default function LoginForm() { + const { setToken } = useAuth(); + const router = useRouter(); + + no_authRequired(); + + const [password, setPassword] = useState(""); + const [username, setUsername] = useState(""); + + const loginFieldsAreValid = (username, password) => { + if (username === "" || password === "") { + toast.warn("Please fill all the fields correctly....", { + position: "top-center", + }); + return false; + } + return true; + }; 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) - */ - } + if (loginFieldsAreValid(username, password)) { + console.log("Please wait..."); + + const dataForApiRequest = { + username: username, + password: password, + }; + + axios + .post("auth/login/", dataForApiRequest) + .then(function ({ data, status }) { + setToken(data.token); + toast.success("Logged in Successfully....", { + position: "top-center", + autoClose: 2000, + }); + setTimeout(() => router.reload(), 2000); + }) + .catch(function (err) { + toast.error("Incorrect Username or Password,Try again ....", { + position: "top-center", + }); + }); + } + }; return ( -
-
-
-

Login

+
+
+
+

Login

+ setUsername(e.target.value)} + placeholder="Username" /> setPassword(e.target.value)} + placeholder="Password" />
- ) + ); } diff --git a/components/Nav.js b/components/Nav.js index e03cb0f..1cdc6b3 100644 --- a/components/Nav.js +++ b/components/Nav.js @@ -2,16 +2,18 @@ /* eslint-disable @next/next/no-img-element */ import Link from 'next/link' import { useAuth } from '../context/auth' +import 'react-toastify/dist/ReactToastify.css'; + /** * * @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() return ( -