diff --git a/.eslintrc b/.eslintrc index a2ceebe..15db834 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,3 +1,7 @@ { - "extends": ["next/babel", "next/core-web-vitals"] + "extends": ["next", "next/core-web-vitals"], + "rules": { + // Other rules + "@next/next/no-img-element": "off" + } } diff --git a/components/AddTask.js b/components/AddTask.js index 9652adb..f0b7ee1 100644 --- a/components/AddTask.js +++ b/components/AddTask.js @@ -1,25 +1,56 @@ +import axios from "../utils/axios" +import { useState } from "react" +import { useAuth } from "../context/auth" +import toast, { Toaster } from 'react-hot-toast'; + export default function AddTask() { + const [taskData,settaskData] = useState('') + const { token, check, setCheck } = 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 (token){ + if (taskData == ''){ + toast.error('Enter some data') + return + } + const dataForApiPost = { + title : taskData, + } + axios.post('todo/create/',dataForApiPost,{ + headers:{ + Authorization: 'Token '+ token + } + }).then((res)=>{ + settaskData('') + setCheck(!check) + toast.success('Task added successfully!') + }).catch((err)=>{ + toast.error('Failed to add task') + }) + } } + return (
settaskData(e.target.value)} /> +
) } diff --git a/components/LoginForm.js b/components/LoginForm.js index fa28f9e..5ec6421 100644 --- a/components/LoginForm.js +++ b/components/LoginForm.js @@ -1,41 +1,94 @@ -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 noAuthRequired from '../middlewares/no_auth_required' +import toast, { Toaster } from 'react-hot-toast'; + +export default function LoginForm() { + + const { setToken } = useAuth() + const router = useRouter() + + noAuthRequired() + + const [username, setUsername] = useState('') + const [password, setPassword] = useState('') + + const loginFieldsAreValid = (username, password) => { + if( username == '' || password == ''){ + toast.error("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)) { + + toast('Please wait...') + + const dataForApiRequest = { + username: username, + password: password + } + + axios.post('auth/login/',dataForApiRequest) + .then( + ({ data, status }) => { + setToken(data.token) + window.location.reload() + toast.success('Logged in!') + } + ) + .catch( + (err) => { + toast.error("Invalid Credentials") + } + ) + } } return (
-

Login

+

Login

setUsername(e.target.value)} /> setPassword(e.target.value)} /> +
diff --git a/components/Nav.js b/components/Nav.js index e03cb0f..b317654 100644 --- a/components/Nav.js +++ b/components/Nav.js @@ -8,33 +8,33 @@ import { useAuth } from '../context/auth' */ export default function Nav() { - const { logout, profileName, avatarImage } = useAuth() + const { logout, profileName, avatarImage, token } = useAuth() return ( -