diff --git a/components/AddTask.js b/components/AddTask.js index 9652adb..e78d0c9 100644 --- a/components/AddTask.js +++ b/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 ( +
setTask(e.target.value)} /> + +
) } diff --git a/components/LoginForm.js b/components/LoginForm.js index fa28f9e..96bc571 100644 --- a/components/LoginForm.js +++ b/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 ( -
-
-
+
+
+

Login

setUser(e.target.value)} placeholder='Username' /> - setPwd(e.target.value)} /> - -
+
) + } diff --git a/components/Nav.js b/components/Nav.js index e03cb0f..ebdcde1 100644 --- a/components/Nav.js +++ b/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 = ( +
+
+ + +
+
+); +const notloggedin = ( +
    +
  • + Login +
    • +
  • + Register +
    • +
+); +useEffect(() => { + if (localStorage.getItem('token')) { + setNavlook(loggedin); + console.log('yes'); + } else { + setNavlook(notloggedin); + console.log('no'); + } +},[logout,profileName,avatarImage,RegisterForm,Nav]); return ( -