From 2adf18f7d22db1a0614f891fc5fc4ed4a5226e1e Mon Sep 17 00:00:00 2001 From: Sanskruti Kolgane <96910867+Sansgithub22@users.noreply.github.com> Date: Tue, 11 Jul 2023 09:28:19 +0530 Subject: [PATCH 01/18] commit --- components/AddTask.js | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/components/AddTask.js b/components/AddTask.js index 8b8177f..59ea7e2 100644 --- a/components/AddTask.js +++ b/components/AddTask.js @@ -1,25 +1,25 @@ -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. - */ +import axios from "../utils/axios"; +import { useState } from "react"; +export default function AddTask({ add, token }) { + const addTask = async () => { + try {let id = await axios.post( + "todo/create/",{title,}, + {headers: {Authorization: `Token ${token}`,"Content-Type": "application/json",}, + } + ); +setTitle("");add(); + } catch (err) {console.log(err);} }; - + const [title, setTitle] = useState(""); return ( -
+
{setTitle(e.target.value);}} + value={title} /> - -
+
); } From c2e18a8a8fe3fd81c6436b1828be865e4f00090e Mon Sep 17 00:00:00 2001 From: Sanskruti Kolgane <96910867+Sansgithub22@users.noreply.github.com> Date: Tue, 11 Jul 2023 09:30:12 +0530 Subject: [PATCH 02/18] commit --- components/LoginForm.js | 47 +++++++++++++++++++++++++++++------------ 1 file changed, 33 insertions(+), 14 deletions(-) diff --git a/components/LoginForm.js b/components/LoginForm.js index 244f45a..2387eb7 100644 --- a/components/LoginForm.js +++ b/components/LoginForm.js @@ -1,17 +1,31 @@ +import React, { useState } from "react"; +import { useRouter } from "next/router"; +import { useAuth } from "../context/auth"; +import axios from "../utils/axios"; +import Link from "next/link"; + 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 [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + const { setToken } = useAuth(); + const router = useRouter(); + const login = async (e) => { + e.preventDefault(); + if (username === "" || password === "") { console.log("Don't leave blank fields"); + return; + } + const dataForApiRequest = {username, password}; +try {const { data, status } = await axios.post("auth/login/",dataForApiRequest); + // console.log(data.token); + setToken(data.token); + router.push("/"); + } catch (err) {console.log(err,"same email or username is already used");} }; return (
-
+

Login

setUsername(e.target.value)} /> setPassword(e.target.value)} /> - + + +
+ +
+ Don't have an account?   Register +
From 953fff9180a1ff7ee5e46cef331e6c9312ddd228 Mon Sep 17 00:00:00 2001 From: Sanskruti Kolgane <96910867+Sansgithub22@users.noreply.github.com> Date: Tue, 11 Jul 2023 09:48:04 +0530 Subject: [PATCH 03/18] commit --- components/Nav.js | 139 +++++++++++++++++++++++++++------------------- 1 file changed, 83 insertions(+), 56 deletions(-) diff --git a/components/Nav.js b/components/Nav.js index 00c05d1..d864716 100644 --- a/components/Nav.js +++ b/components/Nav.js @@ -1,60 +1,87 @@ -/* 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 React, { useState } from 'react'; +import PropTypes from 'prop-types'; +import Link from 'next/link'; -export default function Nav() { - const { logout, profileName, avatarImage } = useAuth(); +export default function Nav(props) { + const [bodyColor, setBodyColor] = useState(''); - return ( - - ); + const { logout, profileName, avatarImage, token } = useAuth(); + + const handleColorChange = (color) => { + document.body.style.backgroundColor = color; + setBodyColor(color); + }; + + return ( + + ); } + +Nav.propTypes = { + title: PropTypes.string, + aboutText: PropTypes.string, +}; From cfc6bd9337522c2a7b16b8838d7782988eb8e4c6 Mon Sep 17 00:00:00 2001 From: Sanskruti Kolgane <96910867+Sansgithub22@users.noreply.github.com> Date: Tue, 11 Jul 2023 09:51:39 +0530 Subject: [PATCH 04/18] commit --- components/RegisterForm.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/components/RegisterForm.js b/components/RegisterForm.js index 67bc737..48adaac 100644 --- a/components/RegisterForm.js +++ b/components/RegisterForm.js @@ -15,7 +15,7 @@ export default function Register() { const registerFieldsAreValid = (firstName, lastName, email, username, password) => { if (firstName === "" || lastName === "" || email === "" || username === "" || password === "") { - console.log("Please fill all the fields correctly."); + console.log("fill all the fields correctly."); return false; } if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) { @@ -41,11 +41,12 @@ export default function Register() { axios .post("auth/register/", dataForApiRequest) .then(function ({ data, status }) { + console.log(data.token) setToken(data.token); router.push("/"); }) .catch(function (err) { - console.log("An account using same email or username is already created"); + console.log("An account with same username/email is already created"); }); } }; @@ -106,7 +107,7 @@ export default function Register() { @@ -115,3 +116,6 @@ export default function Register() {
); } + + + From 75efebf39d7392e201b5291ac5ce6a58c2bc24c8 Mon Sep 17 00:00:00 2001 From: Sanskruti Kolgane <96910867+Sansgithub22@users.noreply.github.com> Date: Tue, 11 Jul 2023 10:00:28 +0530 Subject: [PATCH 05/18] commit --- components/TodoListItem.js | 102 ++++++++++++++++--------------------- 1 file changed, 44 insertions(+), 58 deletions(-) diff --git a/components/TodoListItem.js b/components/TodoListItem.js index 5b45bd0..90bbbfd 100644 --- a/components/TodoListItem.js +++ b/components/TodoListItem.js @@ -1,73 +1,59 @@ -/* eslint-disable @next/next/no-img-element */ +import axios from "../utils/axios"; +import React, { useState } from "react"; +export default function TodoListItem({ task, onRemove, token }) { + const [title, setTitle] = useState(task.title); + const [newTitle, setNewTitle] = useState(title); + const [deleted, setDeleted] = useState(false); + const id = task.id; -export default function TodoListItem() { - const editTask = (id) => { - /** - * @todo Complete this function. - * @todo 1. Update the dom accordingly - */ - }; + const [editing, setEditing] = useState(false); + const editTask = () => {setEditing(true);}; - const deleteTask = (id) => { - /** - * @todo Complete this function. - * @todo 1. Send the request to delete the task to the backend server. - * @todo 2. Remove the task from the dom. - */ + const deleteTask = async () => { + console.log(task); + axios + .delete(`todo/${id}/`, {headers: {Authorization: `Token ${token}`,},}) + .then(() => {setDeleted(true);}) + .catch((err) => console.log(err)); }; - const updateTask = (id) => { - /** - * @todo Complete this function. - * @todo 1. Send the request to update the task to the backend server. - * @todo 2. Update the task in the dom. - */ + const updateTask = () => { +axios +.patch(`todo/${id}/`,{title: newTitle,}, + {headers: {Authorization: `Token ${token}`,"Content-Type": "application/json",},}) + .then(() => { + setTitle(newTitle); + setEditing(false); + }) + .catch((err) => console.log(err)); }; - + if(deleted) + return null; return ( - <> -
  • -
  • + setNewTitle(e.target.value)} /> -
    - +
    +
    -
    - Sample Task 1 +
    {title}
    - - - + Edit + +
    • From ff0eed348bc9ea12847b4bb45a11502a5e143116 Mon Sep 17 00:00:00 2001 From: Sanskruti Kolgane <96910867+Sansgithub22@users.noreply.github.com> Date: Tue, 11 Jul 2023 10:05:03 +0530 Subject: [PATCH 06/18] commit --- context/auth.js | 36 +++++++++--------------------------- 1 file changed, 9 insertions(+), 27 deletions(-) diff --git a/context/auth.js b/context/auth.js index 4460270..e9313c8 100644 --- a/context/auth.js +++ b/context/auth.js @@ -10,52 +10,34 @@ export const AuthProvider = ({ children }) => { const [profileName, setProfileName] = useState(""); const [avatarImage, setAvatarImage] = useState("#"); const [cookies, setCookies, removeCookies] = useCookies(["auth"]); - const token = cookies.token; + const [token, SetToken] = useState(cookies.token); - const setToken = (newToken) => setCookies("token", newToken, { path: "/" }); - const deleteToken = () => removeCookies("token"); - const logout = () => { - deleteToken(); - router.push("/login"); - }; + const setToken = (newToken) => {setCookies("token", newToken, { path: "/" }); SetToken(newToken);}; + const deleteToken = () => {removeCookies("token"); SetToken(null);}; + const logout = () => {deleteToken(); router.push("/login");}; useEffect(() => { + console.log("changed token " + token); if (token) { axios .get("auth/profile/", { - headers: { - Authorization: "Token " + token, + headers: {Authorization: "Token " + token, }, }) - .then((response) => { - setAvatarImage( - "https://ui-avatars.com/api/?name=" + - response.data.name + - "&background=fff&size=33&color=007bff" - ); + .then((response) => {setAvatarImage("https://ui-avatars.com/api/?name=" + response.data.name + "&background=fff&size=33&color=007bff"); setProfileName(response.data.name); }) .catch((error) => { - console.log("Some error occurred"); + console.log("error occurred"); }); } }, [setAvatarImage, setProfileName, token]); return ( + value={{token,setToken,deleteToken,profileName,setProfileName,avatarImage,setAvatarImage,logout,}}> {children} ); }; - export const useAuth = () => useContext(AuthContext); From 46a64d4deb32651458720b75bd4e36d8d9078b04 Mon Sep 17 00:00:00 2001 From: Sanskruti Kolgane <96910867+Sansgithub22@users.noreply.github.com> Date: Tue, 11 Jul 2023 10:07:49 +0530 Subject: [PATCH 07/18] commit --- middlewares/auth_required.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/middlewares/auth_required.js b/middlewares/auth_required.js index 7f5e7bc..1b4ce0b 100644 --- a/middlewares/auth_required.js +++ b/middlewares/auth_required.js @@ -1,3 +1,15 @@ -/*** - * @todo Redirect the user to login page if token is not present. - */ +import { useRouter } from "next/router"; +import { useAuth } from "../context/auth"; +import { useEffect } from "react"; + +export default function AuthReqd() { + const { token } = useAuth(); + const router = useRouter(); + useEffect(() => { + if(router.pathname !== "/login" &&router.pathname !== "/register" &&!token) {router.push("/login"); + return null; + } + }, [token]); + return null; +} + From 6b82f2d143ae58ceb13b393f963dac089df4fabb Mon Sep 17 00:00:00 2001 From: Sanskruti Kolgane <96910867+Sansgithub22@users.noreply.github.com> Date: Tue, 11 Jul 2023 10:10:46 +0530 Subject: [PATCH 08/18] commit --- middlewares/no_auth_required.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/middlewares/no_auth_required.js b/middlewares/no_auth_required.js index a35bd04..e0bee33 100644 --- a/middlewares/no_auth_required.js +++ b/middlewares/no_auth_required.js @@ -1,3 +1,15 @@ -/*** - * @todo Redirect the user to main page if token is present. - */ +import { useEffect } from "react"; +import { useRouter } from "next/router"; +import { useAuth } from "../context/auth"; + + +export default function NoAuthReqd() { + const { token } = useAuth(); + const router = useRouter(); + useEffect(() => { + if ((router.pathname === "/login" ||router.pathname === "/register") &&token) {router.push("/"); + return null; + } + }, [token]); + return null; +} From 8bb1d06b53c35916a108870df3cbef9a0e38fc26 Mon Sep 17 00:00:00 2001 From: Sanskruti Kolgane <96910867+Sansgithub22@users.noreply.github.com> Date: Tue, 11 Jul 2023 10:13:21 +0530 Subject: [PATCH 09/18] commit --- pages/_app.js | 37 +++++++++++++++++++++++++++++++++++-- 1 file changed, 35 insertions(+), 2 deletions(-) diff --git a/pages/_app.js b/pages/_app.js index a58a1f5..ed5dd97 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,11 +1,44 @@ import "../styles/globals.css"; -import { AuthProvider } from "../context/auth"; +import { AuthProvider, useAuth } from "../context/auth"; import Nav from "../components/Nav"; +import AuthReqd from "../middlewares/auth_required"; +import NoAuthReqd from "../middlewares/no_auth_required"; +import React, { useState } from 'react'; function MyApp({ Component, pageProps }) { + // const[mode, setMode] = useState('dark'); + const removeBodyClasses=()=>{ + document.body.classList.remove('bg-light') + document.body.classList.remove('bg-dark') + document.body.classList.remove('bg-warning') + document.body.classList.remove('bg-danger') + document.body.classList.remove('bg-success') + } + const toggleMode=(cls)=>{ + removeBodyClasses(); + console.log(cls) + document.body.classList.add('bg-'+ cls) + // if(mode === 'light'){ + // setMode('dark'); + // document.body.style.backgroundColor='white'; + // showAlert("Dark mode has been enabled", "success"); + + // }else{ + // setMode('light'); + // document.body.style.backgroundColor='white'; + // showAlert("Light mode has been enabled", "success"); + + // } + } + const handleColorChange = (color) => { + document.body.style.backgroundColor = color; + }; return ( -