From 8e78947210ba08f564ca31a3a0e7e3d485b24588 Mon Sep 17 00:00:00 2001 From: Subodh Verma Date: Sun, 26 Apr 2020 21:04:22 +0530 Subject: [PATCH 1/3] Completed all tasks --- .gitignore | 1 + auth_required.js | 7 ++- favicon.ico | Bin 0 -> 3782 bytes index.html | 60 ++++------------------- init.js | 50 +++++++++++++++++++ login/index.html | 2 +- main.js | 117 ++++++++++++++++++++++++++++++++++++++++---- no_auth_required.js | 7 ++- style.css | 5 +- 9 files changed, 183 insertions(+), 66 deletions(-) create mode 100644 .gitignore create mode 100644 favicon.ico diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/auth_required.js b/auth_required.js index 7b693a3..e43061d 100644 --- a/auth_required.js +++ b/auth_required.js @@ -1,3 +1,8 @@ /*** * @todo Redirect the user to login page if token is not present. - */ \ No newline at end of file + */ +token = localStorage.token; +console.log(token); +if(token == undefined){ + window.location.href = '/login'; +} \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..48984a3c8656b3721896a2e4893630eb4520b0cb GIT binary patch literal 3782 zcmbtX2~?EV6@G3t(WJ&UX>3)D;+C39ZL6ucFbl)5h+vKTij9E#R(E7z7#KlROe98Q zG}=}p?$#PXVVHebW`<=HSrkFpSC5Db%gy(G*XC5qIsNBc-v8cz@BQw*@80_!jCI1# z$%*0bN9^3s8T%DuY&Zx@Y&?js^XEN$>&WAMUBSE^3g%M~!({1^%riTti^Qb-N^A(P zl$ax2+^tb>NzBRx5=+E5kv5dctm>{}WB74UG1kQ3WxkG6%)jOv_F2s#Hlyy_{|PJ2 zh+;DPb_NV4(khtCfyGR$S1{m6pzo|SP1Re#H7O6mh8fTK@NKii7@jD#L<|Nm^T>&T zTo~gv3|T2=?$GcbN3ORr1_+(KVfZ~G+osX^K+nG;QtVK zli;@%--ZE)^D~cYvE3v_WfIoTxLeila=ov6WOg-^JE8?ScbmF9^sVMTbAH5b7I2$E zO=3e>p-3Or3VMY1d{7-<2hVh$yYZdj+pi%T49q>SVX({|-C1Va{$F9ajqroHC5JHA zi|d&@EsD7sL*3mBifa=Lq2Eu`hn50|+zm?dGDecGdAmT~rYMpbB8bPrO|Pg2?~#cH z#YMam&o$%lK5W!0_4KufRWp^5&4pUdF^=ZHi{`Y-!Z^fxVQ|Lg^v5sH^XJe zOd+4Se?0&Bp2E+iz{$nhRLloTGa`p$euVGWL|rIF7o2-VW5-^%=bsZ~xemlG33=0N zTI(skmwy8FqPRhrm+@hOJl>)B@GDl0b#Oq*g<`?8)RNb9m4s#as+(oT=(`JxbtQ>)TX>zqkEg!ynwIE7$TM{{c%Jfd znZR^4#UeLO+%*yOJw8*B?h{pXj(HWub&)$_eg?naM|>}cP2s8;*0_E1GxxU04GQv1 z2_#k44l-4n;m0k?ZFJDl!hh0i-EtDAt`qu%SRan}^)yYpl)lM7Oxg9>0&jXv2JOh* zLq5>qq2ET(Ny~E%tsG}j^a0i`&{5#Nh1_zLnj`v)OyRTON3&N-5S_Srl3LnZsQgYj zr6g;}Zq1@6kDrjE!9f9r)g;nx1Z|;Nu!G~Yw6suej)Rh~rcg<73AMJj(#6tCa=>2N@O(Hc_@7{!iB=Zl=P_i z5hayfMLdE@ma>FS7oVlpC#|$|=WcQtIf|SI4W;qp-00sIFHt*wagKNrYgV>NOc4>N z<;lR-qnB8bSABu$37RD~D&sv;g4;9|T54`;rs>mWQs3VUpaD*Us2|3`&ci4v@d`Dz zG{WaqG*cT)+o~*StnxqM86q%Kyfyw(vALP>j zyyu~>G{XOOjOmj#ffbGhhJAsyvHDf-%gkGZ+TrzsGx9jF zkAW_T(;^4?B~RaFstOU)bTPSYKMxA@j=_-><` z>Kb8gtF=>rKF}!A28{;pV&u?wi0cXTE`NR?E~?rmoQ0^TArecZk2ukD!~)%7ZNjZn zRQ8~Zn%kPG;YkCTs?4-DJ%ps170>DyJwvmKmYFwFYPpu`9@h!Hl@BZFe96CPo*sQh zyVfGji0+48$?L`oxqJuHcQq9%Ny}y;ZqSnyKzBNsC17DX+qg{FhiS z{B6hDV__Y>Nh~Vagp-T-`8o_bv>1iE?W;k8w_(e-`2H!+ z5ee=Te1semaI<1xVEyz3b<8n^x)N;Wxd3^$t6P~oZzsRYt3dlFm3`F-apQOQRNxi@ z%a7+IzAeL=4me{lqTj2SZ^1g|R~`3Ls5j32TMltN-di}m3%z@x?>KU!_ov@4;XRM{ zS|{vDS8f}=N5IFsz?~xDbpu~t_dLSCjE#)-drr6Up32xeVW8K^bYva!j8p1U;yMMo K4ZL>7T7LvbC#~QB literal 0 HcmV?d00001 diff --git a/index.html b/index.html index a3bde5b..547d8dc 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ rel="stylesheet"> - + @@ -55,63 +55,21 @@
- +
-
    +
      Available Tasks - - -
    • - -
      - -
      -
      - Sample Task 1 -
      - - - - - -
      • - - -
    • - -
      - -
      - -
      - Sample Task 2 -
      - - - - -
      • - - +
      + +
diff --git a/init.js b/init.js index 10e2b05..bfbbb56 100644 --- a/init.js +++ b/init.js @@ -1,7 +1,57 @@ +function appendTask(id,name){ + ul = $('#taskList'); + template = ` +
  • + +
    + +
    +
    + `+name+` +
    + + + + + +
    • + ` + $(template).appendTo(ul).hide().fadeIn(); +} + function getTasks() { /*** * @todo Fetch the tasks created by the user and display them in the dom. */ + ul = $('#taskList'); + $.ajax({ + headers: { + Authorization: 'Token ' + localStorage.getItem('token'), + }, + url: API_BASE_URL + 'todo/', + method: 'GET', + success: function(data, status, xhr) { + tasks = data; + $('#loadingButton').hide(); + tasks.forEach((element,i) => { + setTimeout( + function(){ + appendTask(element.id, element.title); + } + , i * 300); + }); + }, + error: function(data){ + displayErrorToast("Unable to fetch Tasks, please try again."); + } + }) } $.ajax({ diff --git a/login/index.html b/login/index.html index fe0129d..d5000b5 100644 --- a/login/index.html +++ b/login/index.html @@ -49,7 +49,7 @@
    - +
    diff --git a/main.js b/main.js index 3929d68..7dca648 100644 --- a/main.js +++ b/main.js @@ -76,21 +76,84 @@ function login() { * @todo 1. Write code for form validation. * @todo 2. Fetch the auth token from backend and login the user. */ + const username = document.getElementById('inputUsername').value.trim(); + const password = document.getElementById('inputPassword').value; + + if( username === "" || password === "" ){ + displayErrorToast("Enter both username and password"); + return; + } else { + const dataForApiRequest = { + username: username, + password: password, + Authorization: "Token " + localStorage.token + } + + $.ajax({ + url: API_BASE_URL + "auth/login/", + method: 'POST', + data: dataForApiRequest, + success: function(data){ + localStorage.token = data['token']; + displaySuccessToast("Login Successfull") + setTimeout(function(){window.location.href = '/';} , 400) + }, + error: function(data){ + displayErrorToast("Login Failed, invalid 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. - */ + task = document.getElementById('newTask').value; + if(task === ""){ + displayErrorToast("No task to add."); + return; + } else { + const authHeader = { + Authorization: "Token " + localStorage.token + } + const dataForApiRequest = { + title:task + } + $.ajax({ + url: API_BASE_URL + "todo/create/", + method: 'POST', + headers: authHeader, + data: dataForApiRequest, + success: function(data){ + document.getElementById('newTask').value = ""; + displaySuccessToast("Task succesfully added."); + }, + error: function(data){ + displayErrorToast("Unable to add task."); + } + }) + $.ajax({ + headers: { + Authorization: 'Token ' + localStorage.getItem('token'), + }, + url: API_BASE_URL + 'todo/', + method: 'GET', + success: function(data, status, xhr) { + appendTask(data[data.length - 1].id, data[data.length - 1].title); + }, + error: function(data){ + setTimeout(function(){ + displayErrorToast("Unable to fetch data, reloading page...."); + }, 300); + window.location.href = "/"; + } + }) + } } 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'); + document.getElementById('task-' + id).classList.toggle('hideme'); + document.getElementById('task-actions-' + id).classList.toggle('hideme'); + document.getElementById('input-button-' + id).classList.toggle('hideme'); + document.getElementById('done-button-' + id).classList.toggle('hideme'); } function deleteTask(id) { @@ -99,6 +162,21 @@ function deleteTask(id) { * @todo 1. Send the request to delete the task to the backend server. * @todo 2. Remove the task from the dom. */ + const authHeader = { + Authorization: "Token " + localStorage.token + } + $.ajax({ + url: API_BASE_URL + "todo/" + id + "/", + method: "DELETE", + headers: authHeader, + success: function(data){ + document.getElementById("li-"+id).remove(); + displaySuccessToast("Task succesfully Deleted."); + }, + error: function(data){ + displayErrorToast("Unable to delete task, please try again."); + } + }) } function updateTask(id) { @@ -107,4 +185,25 @@ function updateTask(id) { * @todo 1. Send the request to update the task to the backend server. * @todo 2. Update the task in the dom. */ + var new_title = document.getElementById("input-button-" + id).value; + const authHeader = { + Authorization: "Token " + localStorage.token + } + const dataForApiRequest = { + title:new_title + } + $.ajax({ + url: API_BASE_URL + "todo/" + id + "/", + method: "PATCH", + headers: authHeader, + data: dataForApiRequest, + success: function(data){ + displaySuccessToast("Task succesfully updated."); + document.getElementById('task-'+id).innerHTML = new_title; + editTask(id); + }, + error: function(data){ + displayErrorToast("Unable to update task, please try again."); + } + }) } diff --git a/no_auth_required.js b/no_auth_required.js index 82558d4..b35fb34 100644 --- a/no_auth_required.js +++ b/no_auth_required.js @@ -1,3 +1,8 @@ /*** * @todo Redirect the user to main page if token is present. - */ \ No newline at end of file + */ +token = localStorage.token; +console.log(token); +if(token != undefined){ + window.location.href = '/'; +} \ No newline at end of file diff --git a/style.css b/style.css index 2817a0d..1ce5c02 100644 --- a/style.css +++ b/style.css @@ -14,11 +14,10 @@ .todo-available-tasks-text { margin-left:30%; - padding-bottom:5px; - padding-top:5px; + padding: 13px 0px; margin-bottom:20px; max-width:170px; - font-size:15px; + font-size:16px; } .todo-edit-task-input { From 0a1aef93c820bfb39357d77c8126c1a52bb1bb90 Mon Sep 17 00:00:00 2001 From: Subodh Verma Date: Mon, 27 Apr 2020 02:11:05 +0530 Subject: [PATCH 2/3] All tasks completed --- README.md | 2 ++ main.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 360ad59..ceb8502 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ # Todo Application - CSoC Dev Task 1 +[![Netlify Status](https://api.netlify.com/api/v1/badges/5e95359e-c76e-4d86-93a6-3b7ccb5f523a/deploy-status)](https://app.netlify.com/sites/condescending-varahamihira-7c50fd/deploys) + ## Introduction In this task you will be working on a todo application made using basic HTML, CSS and JS. The main motive of this task is to make you familiar with: - Rest APIs diff --git a/main.js b/main.js index 7dca648..63d87f4 100644 --- a/main.js +++ b/main.js @@ -83,12 +83,12 @@ function login() { displayErrorToast("Enter both username and password"); return; } else { + displayInfoToast("Please wait..."); const dataForApiRequest = { username: username, password: password, Authorization: "Token " + localStorage.token } - $.ajax({ url: API_BASE_URL + "auth/login/", method: 'POST', From 73edd403b8fde2746940982f48eecccf4c42fb18 Mon Sep 17 00:00:00 2001 From: Subodh Verma Date: Wed, 29 Apr 2020 18:45:02 +0530 Subject: [PATCH 3/3] removed auth token from login() --- main.js | 1 - 1 file changed, 1 deletion(-) diff --git a/main.js b/main.js index 63d87f4..1139bd6 100644 --- a/main.js +++ b/main.js @@ -87,7 +87,6 @@ function login() { const dataForApiRequest = { username: username, password: password, - Authorization: "Token " + localStorage.token } $.ajax({ url: API_BASE_URL + "auth/login/",