diff --git a/index.html b/index.html index ffda4cf..992a6f9 100644 --- a/index.html +++ b/index.html @@ -25,19 +25,22 @@ +
+ +
@@ -65,7 +71,7 @@ -
  • + @@ -116,4 +118,4 @@ - + \ No newline at end of file diff --git a/login/index.html b/login/index.html index 305d461..18b8ed2 100644 --- a/login/index.html +++ b/login/index.html @@ -54,4 +54,4 @@
    • - + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 58aab2e..387beb5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,10 +1,11 @@ { "name": "csoc-task-2-web", "version": "1.0.0", - "lockfileVersion": 1, + "lockfileVersion": 2, "requires": true, "packages": { "": { + "name": "csoc-task-2-web", "version": "1.0.0", "license": "ISC", "dependencies": { diff --git a/register/index.html b/register/index.html index 3a1f03d..bb48f08 100644 --- a/register/index.html +++ b/register/index.html @@ -68,4 +68,4 @@
    - + \ No newline at end of file diff --git a/src/auth_required.js b/src/auth_required.js index 7f5e7bc..c59657d 100644 --- a/src/auth_required.js +++ b/src/auth_required.js @@ -1,3 +1,5 @@ /*** * @todo Redirect the user to login page if token is not present. */ + if(!window.localStorage.getItem('token')) + window.location.href = '/login/' \ No newline at end of file diff --git a/src/init.js b/src/init.js index 3a88d74..966d1e7 100644 --- a/src/init.js +++ b/src/init.js @@ -1,10 +1,52 @@ import axios from 'axios'; const API_BASE_URL = 'https://todo-app-csoc.herokuapp.com/'; +let searchbox=document.querySelector("#search-box"); + function getTasks() { /*** * @todo Fetch the tasks created by the user and display them in the dom. */ + const header={ + 'Authorization': `Token ${window.localStorage.getItem('token')}`, + 'Content-Type': "application/json" + } + + axios({ + url: API_BASE_URL + 'todo/', + method: 'get', + headers: header + }).then(function({data, status}) { + + let todo =document.querySelector(".todo-available-tasks") + todo.innerHTML=` Available Tasks ` + for (let element of data){ + todo.innerHTML+= + ` +
  • + +
    + +
    +
    + ${element.title} +
    + + + + +
    • + ` + } + searchbox.addEventListener('keyup',search) + }) } axios({ @@ -17,4 +59,28 @@ axios({ document.getElementById('avatar-image').src = 'https://ui-avatars.com/api/?name=' + data.name + '&background=fff&size=33&color=007bff'; document.getElementById('profile-name').innerHTML = data.name; getTasks(); + }) + +window.getTasks=getTasks + + +function search(){ + let search=document.querySelectorAll(".list-group-item") + let input=searchbox.value + if(input) + { + Array.from(search).forEach((e)=>{ + let test=e.querySelector(".todo-task").textContent.trim() + if(test.search(input) == -1) + e.classList.add("hideme") + else + e.classList.remove("hideme") + }) + } + else{ + Array.from(search).forEach((e)=>{ + e.classList.remove("hideme") + }) + } +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index 05849df..c92493d 100644 --- a/src/main.js +++ b/src/main.js @@ -27,6 +27,7 @@ function logout() { window.location.href = '/login/'; } + function registerFieldsAreValid(firstName, lastName, email, username, password) { if (firstName === '' || lastName === '' || email === '' || username === '' || password === '') { displayErrorToast("Please fill all the fields correctly."); @@ -62,6 +63,7 @@ function register() { data: dataForApiRequest, }).then(function({data, status}) { localStorage.setItem('token', data.token); + console.log(data.token); window.location.href = '/'; }).catch(function(err) { displayErrorToast('An account using same email or username is already created'); @@ -69,22 +71,72 @@ 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 fields correctly."); + return; + } + // displayInfoToast("Please wait..."); + const dataForApiRequest = { + username: username, + password: password + } + axios({ + url: API_BASE_URL + 'auth/login/', + method: 'post', + data: dataForApiRequest, + }).then(function({data, status}) { + window.localStorage.setItem("token",data.token); + console.log(data.token); + console.log(window.localStorage.getItem("token")); + window.location.href = '/'; + }).catch(function(err) { + displayErrorToast('Invalid Login Credentials!!'); + }) } + + 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. */ + let task = document.querySelector(".form-control").value; + const dataForApiRequest = { + title: task + } + const header={ + 'Authorization': `Token ${window.localStorage.getItem('token')}`, + 'Content-Type': "application/json" + } + + axios({ + url: API_BASE_URL + 'todo/create/', + method: 'post', + data: dataForApiRequest, + headers: header + }).then(function({data, status}) { + + getTasks(); + document.querySelector(".form-control").value=""; + document.querySelector(".form-control").placeholder="Enter Task"; + displaySuccessToast("Task Successfully Added!!") + }) + } + function editTask(id) { document.getElementById('task-' + id).classList.add('hideme'); document.getElementById('task-actions-' + id).classList.add('hideme'); @@ -92,18 +144,71 @@ function editTask(id) { 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. */ + if(confirm("This task will be deleted")) + { + const header={ + 'Authorization': `Token ${window.localStorage.getItem('token')}`, + 'Content-Type': "application/json" + } + + axios({ + url: API_BASE_URL + `todo/${id}/`, + method: 'delete', + headers: header + }).then(function({data, status}) { + displaySuccessToast("Task Deleted") + getTasks(); + }) + } } + 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. */ + let update=document.querySelector(".todo-edit-task-input").value; + if(update) + { + const dataForApiRequest = { + title: update + } + const header={ + 'Authorization': `Token ${window.localStorage.getItem('token')}`, + 'Content-Type': "application/json" + } + + axios({ + url: API_BASE_URL + `todo/${id}/`, + method: 'patch', + data: dataForApiRequest, + headers: header + }).then(function({data, status}) { + + getTasks(); + document.querySelector(".form-control").value=""; + document.querySelector(".form-control").placeholder="Enter Task"; + displaySuccessToast("Task Updated") + }) + } + else + displayErrorToast('Task cannot be empty') } + + +window.logout=logout +window.updateTask=updateTask +window.deleteTask=deleteTask +window.editTask=editTask +window.addTask=addTask; +window.login=login; +window.register=register; diff --git a/src/no_auth_required.js b/src/no_auth_required.js index 82558d4..cbf2c5f 100644 --- a/src/no_auth_required.js +++ b/src/no_auth_required.js @@ -1,3 +1,5 @@ /*** * @todo Redirect the user to main page if token is present. - */ \ No newline at end of file + */ + if(window.localStorage.getItem('token')) + window.location.href = '/' \ No newline at end of file