diff --git a/index.html b/index.html index ffda4cf..71c7b7b 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,7 @@ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Loading ...
- Logout + Logout
@@ -54,61 +54,23 @@
- +
- + +
+
+
+ +
+
diff --git a/login/index.html b/login/index.html index 305d461..52ff2a2 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..2fbc7e4 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..aa8566f 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..969f17e 100644 --- a/src/init.js +++ b/src/init.js @@ -1,10 +1,49 @@ 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..e9a41da 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', @@ -70,40 +85,147 @@ function register() { } function login() { - /*** - * @todo Complete this function. - * @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() { - /** - * @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. - */ + 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'); document.getElementById('done-button-' + id).classList.remove('hideme'); } -function 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. - */ +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) { - /** - * @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. - */ +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..62c755a 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 = '/'; +} diff --git a/style.css b/style.css index 2817a0d..2d14af2 100644 --- a/style.css +++ b/style.css @@ -11,6 +11,9 @@ margin-bottom:30px; max-width:400px; } +.todo-search-task { + max-width:400px; +} .todo-available-tasks-text { margin-left:30%;