From f44ae098cec41b25775d59dc2e24e9ac3411de72 Mon Sep 17 00:00:00 2001 From: Nandini Saagar Date: Wed, 22 Jun 2022 19:50:07 +0530 Subject: [PATCH] new changes --- index.html | 12 ++++ login/index.html | 2 +- register/index.html | 2 +- src/auth_required.js | 3 + src/init.js | 43 ++++++++++++ src/main.js | 148 +++++++++++++++++++++++++++++++++++++++- src/no_auth_required.js | 5 +- style.css | 4 +- 8 files changed, 213 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index ffda4cf..9a7922c 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,7 @@ display: none !important; } + @@ -46,6 +47,7 @@ Loading ...
Logout + Logout
@@ -55,8 +57,16 @@
+
+ +
+
+
+ +
+
diff --git a/login/index.html b/login/index.html index 305d461..7983c60 100644 --- a/login/index.html +++ b/login/index.html @@ -50,7 +50,7 @@ - + diff --git a/register/index.html b/register/index.html index 3a1f03d..1a84696 100644 --- a/register/index.html +++ b/register/index.html @@ -64,7 +64,7 @@ - + diff --git a/src/auth_required.js b/src/auth_required.js index 7f5e7bc..1ac3357 100644 --- a/src/auth_required.js +++ b/src/auth_required.js @@ -1,3 +1,6 @@ /*** * @todo Redirect the user to login page if token is not present. */ + if(localStorage.token == undefined) { + window.location.href = '/login/'; +} diff --git a/src/init.js b/src/init.js index 3a88d74..df3ca7f 100644 --- a/src/init.js +++ b/src/init.js @@ -1,10 +1,53 @@ import axios from 'axios'; +import {updateTask, deleteTask, editTask} from './main'; +window.deleteTask = deleteTask; +window.updateTask = updateTask; +window.editTask = editTask; const API_BASE_URL = 'https://todo-app-csoc.herokuapp.com/'; function getTasks() { /*** * @todo Fetch the tasks created by the user and display them in the dom. */ + export function getTasks() { + + const headersForApiRequest = { + Authorization: 'Token ' + localStorage.getItem('token') + } + + axios({ + headers: headersForApiRequest, + url: API_BASE_URL + "todo/", + }) + .then(function({data, status}) { + document.getElementById('tasksList').innerHTML = ""; + for(let i=0; i + +
+ +
+
+ ${data[i].title} +
+ + + + + + ` + document.getElementById('tasksList').innerHTML += content; + } + }) + .catch((err) => { + displayErrorToast("Error!") + }); } axios({ diff --git a/src/main.js b/src/main.js index 05849df..08cf36f 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,19 @@ import axios from 'axios'; +import { getTasks } from './init'; +const logoutBtn = document.getElementById("logout") +const registerBtn = document.getElementById("register") +const loginBtn = document.getElementById("login") +const addTaskBtn = document.getElementById("addTaskButton"); +const searchTaskBtn = document.getElementById("searchTaskBtn"); + + +window.onload = ()=>{ + if (logoutBtn) logoutBtn.onclick = logout + if (loginBtn) loginBtn.onclick = login + if (registerBtn) registerBtn.onclick = register + if (addTaskBtn) addTaskButton.onclick = addTask; + if (searchTaskBtn) searchTaskBtn.onclick = searchTask; +} function displaySuccessToast(message) { iziToast.success({ title: 'Success', @@ -75,6 +90,31 @@ function login() { * @todo 1. Write code for form validation. * @todo 2. Fetch the auth token from backend, login and direct user to home page. */ + const username = document.getElementById('inputUsername').value.trim(); + const password = document.getElementById('inputPassword').value; + + if (username == '' || password == '') { + displayErrorToast("Please fill all the required fields."); + return; + } + displayInfoToast("Loading"); + const dataForApiRequest = { + username: username, + password: password + } + axios({ + url: API_BASE_URL + 'auth/login/', + method: 'POST', + data: dataForApiRequest, + }).then(function ({ data, status }) { + displaySuccessToast("Logged in successfully"); + localStorage.setItem('token', data.token); + window.location.href = '/'; + }).catch(function (err) { + displayErrorToast("Invalid credentials"); + document.getElementById('inputUsername').value = ''; + document.getElementById('inputPassword').value = ''; + }) } function addTask() { @@ -83,9 +123,36 @@ function addTask() { * @todo 1. Send the request to add the task to the backend server. * @todo 2. Add the task in the dom. */ + const enteredTask = document.getElementById('inputTask').value.trim(); + + if (enteredTask == '') { + displayErrorToast("Invalid Task Title : Empty"); + return; + } + + displayInfoToast("Adding Task"); + + const headersForApiRequest = { + Authorization: 'Token ' + localStorage.getItem('token') + } + + axios({ + headers: headersForApiRequest, + url: API_BASE_URL + 'todo/create/', + method: 'POST', + data: { + title: enteredTask, + }, + }).then(({ data, status }) => { + displaySuccessToast("Task added successfully"); + document.getElementById('inputTask').value = ''; + getTasks(); + }).catch((err) => { + displayErrorToast("Failed to add task"); + }) } -function editTask(id) { +export function editTask(id) { document.getElementById('task-' + id).classList.add('hideme'); document.getElementById('task-actions-' + id).classList.add('hideme'); document.getElementById('input-button-' + id).classList.remove('hideme'); @@ -98,6 +165,23 @@ function deleteTask(id) { * @todo 1. Send the request to delete the task to the backend server. * @todo 2. Remove the task from the dom. */ + export function deleteTask(id) { + displayInfoToast("Deleting Task"); + + const headersForApiRequest = { + Authorization: 'Token ' + localStorage.getItem('token') + } + + axios({ + headers: headersForApiRequest, + url: API_BASE_URL + 'todo/' + id + '/', + method: 'DELETE', + }).then(function ({ data, status }) { + displaySuccessToast("Task deleted successfully"); + getTasks(); + }).catch(function (err) { + displayErrorToast("Failed to delete task.Try again later"); + }) } function updateTask(id) { @@ -106,4 +190,64 @@ function updateTask(id) { * @todo 1. Send the request to update the task to the backend server. * @todo 2. Update the task in the dom. */ -} + export function updateTask(id) { + const newTask = document.getElementById("input-button-" + id).value.trim(); + const task = document.getElementById("task-" + id); + + if (newTask==""){ + displayErrorToast("Invalid Task Title : Empty"); + return; + } + + const dataForApiRequest = { + title: newTask + } + const headersForApiRequest = { + Authorization: 'Token ' + localStorage.getItem('token') + } + + axios({ + headers: headersForApiRequest, + url: API_BASE_URL + 'todo/' + id + '/', + method: 'PUT', + data: dataForApiRequest, + }).then(function ({ data, status }) { + task.textContent=data.title; + editTask(data.id); + displaySuccessToast("Task updated successfully"); + getTasks(); + }).catch(function (err) { + displayErrorToast("Failed to update task. Try again later"); + }) + } + + function searchTask(){ + const taskforSearch = document.getElementById('searchTask').value.trim(); + + if (taskforSearch == '') { + displayErrorToast("Invalid Task Title : Empty"); + return; + } + + displayInfoToast("Searching"); + + const headersForApiRequest = { + Authorization: 'Token ' + localStorage.getItem('token') + } + + axios({ + headers: headersForApiRequest, + url: API_BASE_URL + 'todo/', + method: 'GET', + }).then(function ({ data, status }) { + console.log(data); + for (var j = 0; j < data.length; j++) if (data[j].title == taskforSearch){ + displaySuccessToast("Task found"); + + + + return; + } + displayErrorToast("Specified task does not exist") + }) + } diff --git a/src/no_auth_required.js b/src/no_auth_required.js index 82558d4..5b33324 100644 --- a/src/no_auth_required.js +++ b/src/no_auth_required.js @@ -1,3 +1,6 @@ /*** * @todo Redirect the user to main page if token is present. - */ \ No newline at end of file + */ + if (localStorage.token) { + window.location.href = '/'; +} \ No newline at end of file diff --git a/style.css b/style.css index 2817a0d..9d74b11 100644 --- a/style.css +++ b/style.css @@ -6,7 +6,9 @@ margin-top:90px; max-width:400px; } - +.todo-search-task { + max-width:400px; +} .todo-available-tasks { margin-bottom:30px; max-width:400px;