From 6ab14c828f20ea504855cf4791cfc38263746099 Mon Sep 17 00:00:00 2001 From: Anikaaasingh <96921017+Anikaaasingh@users.noreply.github.com> Date: Sun, 19 Jun 2022 15:23:59 +0530 Subject: [PATCH 01/19] initial change --- index.html | 158 ++++++------------- login/index.html | 30 +++- package-lock.json | 3 +- src/auth_required.js | 3 + src/init.js | 46 +++++- src/main.js | 333 ++++++++++++++++++++++++++++++---------- src/no_auth_required.js | 7 +- 7 files changed, 380 insertions(+), 200 deletions(-) diff --git a/index.html b/index.html index ffda4cf..7983c60 100644 --- a/index.html +++ b/index.html @@ -1,119 +1,57 @@ - Tasks - Todo - - - - - - - - - - - - - + Login - Todo + + + + + + + + + + + - -
-
- -
- -
-
- -
- + +
+
+ + Login + +
+
+ + +
+
+ + +
+ +
diff --git a/login/index.html b/login/index.html index 305d461..673ef67 100644 --- a/login/index.html +++ b/login/index.html @@ -1,7 +1,7 @@ - Login - Todo + Register- Todo @@ -39,19 +39,33 @@
- Login + Register
+
+
+ + +
+
+ + +
+
+
+ + +
- +
- +
- +
- + \ 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/src/auth_required.js b/src/auth_required.js index 7f5e7bc..f1d38dd 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/'; +} \ No newline at end of file diff --git a/src/init.js b/src/init.js index 3a88d74..3c2c57a 100644 --- a/src/init.js +++ b/src/init.js @@ -1,11 +1,28 @@ import axios from 'axios'; +import { updateTask, deleteTask, editTask } from './main'; const API_BASE_URL = 'https://todo-app-csoc.herokuapp.com/'; +window.deleteTask = deleteTask; +window.updateTask = updateTask; +window.editTask = editTask; +const taskList = document.getElementById("taskList"); -function getTasks() { +export function getTasks() { /*** * @todo Fetch the tasks created by the user and display them in the dom. */ + const headersForApiRequest = { + Authorization: 'Token ' + localStorage.getItem('token') } + axios({ + headers: headersForApiRequest, + url: API_BASE_URL + 'todo/', + method: 'GET', + }).then(function ({ data, status }) { + console.log(data); + taskList.innerHTML = ""; + for (var index = 0; index < data.length; index++) displayTask(data[index].id, data[index].title); + }) + } axios({ headers: { @@ -18,3 +35,30 @@ axios({ document.getElementById('profile-name').innerHTML = data.name; getTasks(); }) + +export function displayTask(id, title) { + + var template = ` +
  • + +
    + +
    +
    + REPLACE_TASK_TITLE +
    + + + + +
    • + ` + var result1 = template.replace(/REPLACE_ID/g, id); + var result2 = result1.replace("REPLACE_TASK_TITLE", title); + + taskList.innerHTML += result2; +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index 05849df..0de8a58 100644 --- a/src/main.js +++ b/src/main.js @@ -1,109 +1,284 @@ -import axios from 'axios'; +import axios from "axios"; +import { displayTask, getTasks } from "./init"; +window.deleteTask = deleteTask; +window.updateTask = updateTask; +window.editTask = editTask; +const taskList = document.getElementById("taskList"); + +const registerBtn = document.getElementById("registerBtn"); +if (registerBtn) registerBtn.onclick = register; +const loginBtn = document.getElementById("loginBtn"); +if (loginBtn) loginBtn.onclick = login; +const logoutBtn = document.getElementById("logoutBtn"); +if (logoutBtn) logoutBtn.onclick = logout; +const addTaskBtn = document.getElementById("addTaskBtn"); +if (addTaskBtn) addTaskBtn.onclick = addTask; +const searchTaskBtn = document.getElementById("searchTaskBtn"); +if (searchTaskBtn) searchTaskBtn.onclick = searchTask; + function displaySuccessToast(message) { - iziToast.success({ - title: 'Success', - message: message - }); + iziToast.success({ + title: "Success", + message: message, + }); } function displayErrorToast(message) { - iziToast.error({ - title: 'Error', - message: message - }); + iziToast.error({ + title: "Error", + message: message, + }); } function displayInfoToast(message) { - iziToast.info({ - title: 'Info', - message: message - }); + iziToast.info({ + title: "Info", + message: message, + }); } -const API_BASE_URL = 'https://todo-app-csoc.herokuapp.com/'; +const API_BASE_URL = "https://todo-app-csoc.herokuapp.com/"; function logout() { - localStorage.removeItem('token'); - window.location.href = '/login/'; + localStorage.removeItem("token"); + window.location.href = "/login/"; } -function registerFieldsAreValid(firstName, lastName, email, username, password) { - if (firstName === '' || lastName === '' || email === '' || username === '' || password === '') { - displayErrorToast("Please fill all the fields correctly."); - return false; - } - if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))) { - displayErrorToast("Please enter a valid email address.") - return false; - } - return true; +function registerFieldsAreValid( + firstName, + lastName, + email, + username, + password +) { + if ( + firstName === "" || + lastName === "" || + email === "" || + username === "" || + password === "" + ) { + displayErrorToast("Please fill all the fields correctly."); + return false; + } + if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) { + displayErrorToast("Please enter a valid email address."); + return false; + } + return true; } function register() { - const firstName = document.getElementById('inputFirstName').value.trim(); - const lastName = document.getElementById('inputLastName').value.trim(); - const email = document.getElementById('inputEmail').value.trim(); - const username = document.getElementById('inputUsername').value.trim(); - const password = document.getElementById('inputPassword').value; - - if (registerFieldsAreValid(firstName, lastName, email, username, password)) { - displayInfoToast("Please wait..."); - - const dataForApiRequest = { - name: firstName + " " + lastName, - email: email, - username: username, - password: password - } + const firstName = document.getElementById("inputFirstName").value.trim(); + const lastName = document.getElementById("inputLastName").value.trim(); + const email = document.getElementById("inputEmail").value.trim(); + const username = document.getElementById("inputUsername").value.trim(); + const password = document.getElementById("inputPassword").value; - axios({ - url: API_BASE_URL + 'auth/register/', - method: 'post', - data: dataForApiRequest, - }).then(function({data, status}) { - localStorage.setItem('token', data.token); - window.location.href = '/'; - }).catch(function(err) { - displayErrorToast('An account using same email or username is already created'); - }) - } + if (registerFieldsAreValid(firstName, lastName, email, username, password)) { + displayInfoToast("Loading..."); + + const dataForApiRequest = { + name: firstName + " " + lastName, + email: email, + username: username, + password: password, + }; + + axios({ + url: API_BASE_URL + "auth/register/", + method: "post", + data: dataForApiRequest, + }) + .then(function ({ data, status }) { + localStorage.setItem("token", data.token); + window.location.href = "/"; + }) + .catch(function (err) { + displayErrorToast( + "An account using same email or username is already created" + ); + }); + } } 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. - */ + /*** + * @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("Following fields can't be empty"); + 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 }) { + displaySuccessToast("Successfully logged in"); + localStorage.setItem("token", data.token); + window.location.href = "/"; + }) + .catch(function (err) { + displayErrorToast("Entered credentials are wrong"); + 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. - */ + /** + * @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 task = document.getElementById("inputTask").value.trim(); + + if (task == "") { + displayErrorToast("Todo can't be empty"); + return; + } + + displayInfoToast("Please wait"); + + const dataForApiRequest = { + title: task, + }; + const headersForApiRequest = { + Authorization: "Token " + localStorage.getItem("token"), + }; + + axios({ + headers: headersForApiRequest, + url: API_BASE_URL + "todo/create/", + method: "POST", + data: dataForApiRequest, + }) + .then(function ({ data, status }) { + displaySuccessToast("Successfully added todo"); + document.getElementById("inputTask").value = ""; + getTasks(); + }) + .catch(function (err) { + displayErrorToast("Unable to add todo"); + }); } -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'); +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) { + /** + * @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. + */ + + displayInfoToast("Please wait"); + + const headersForApiRequest = { + Authorization: "Token " + localStorage.getItem("token"), + }; + + axios({ + headers: headersForApiRequest, + url: API_BASE_URL + "todo/" + id + "/", + method: "DELETE", + }) + .then(function ({ data, status }) { + displaySuccessToast("Todo deleted successfully"); + getTasks(); + }) + .catch(function (err) { + displayErrorToast("Unable to delete todo"); + }); } -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. - */ +function searchTask() { + const task = document.getElementById("searchTask").value.trim(); + + if (task == "") { + displayErrorToast("Todo can't be empty"); + return; + } + + displayInfoToast("please wait"); + + 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 index = 0; index < data.length; index++) + if (data[index].title == task) { + taskList.innerHTML = ""; + displaySuccessToast("Task found"); + displayTask(data[index].id, data[index].title); + return; + } + displayErrorToast("Given task couldn't be found"); + }); + } + + +export 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. + */ + + const newTask = document.getElementById("input-button-" + id).value.trim(); + const taskItem = document.getElementById("task-" + id); + + if (newTask == "") { + displayErrorToast("Todo can't be blank"); + 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 }) { + taskItem.textContent = data.title; + editTask(data.id); + displaySuccessToast("Todo updated successfully"); + getTasks(); + }) + .catch(function (err) { + displayErrorToast("Unable to update todo. "); + }); } + diff --git a/src/no_auth_required.js b/src/no_auth_required.js index 82558d4..ba80092 100644 --- a/src/no_auth_required.js +++ b/src/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 + */ + + + if (localStorage.token) { + window.location.href = '/'; +} \ No newline at end of file From 1ca9d84fe8b4d0dd5a7f04b5f41620733b9588dd Mon Sep 17 00:00:00 2001 From: Anikaaasingh <96921017+Anikaaasingh@users.noreply.github.com> Date: Sun, 19 Jun 2022 23:47:46 +0530 Subject: [PATCH 02/19] . --- register/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/register/index.html b/register/index.html index 3a1f03d..4415907 100644 --- a/register/index.html +++ b/register/index.html @@ -64,8 +64,8 @@ - + - + \ No newline at end of file From 3e0ae78fa18c486b58959b0afccb950598784d03 Mon Sep 17 00:00:00 2001 From: Anikaaasingh <96921017+Anikaaasingh@users.noreply.github.com> Date: Mon, 20 Jun 2022 10:15:09 +0530 Subject: [PATCH 03/19] updated --- register/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/register/index.html b/register/index.html index 4415907..75705a3 100644 --- a/register/index.html +++ b/register/index.html @@ -64,7 +64,7 @@ - + From 38a8e8024445ab855599018af99027a23b89d668 Mon Sep 17 00:00:00 2001 From: Anikaaasingh <96921017+Anikaaasingh@users.noreply.github.com> Date: Mon, 20 Jun 2022 10:17:58 +0530 Subject: [PATCH 04/19] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1f8de65..5ee209d 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ }, "homepage": "https://github.com/COPS-CSOC-2022/csoc-task-2-web#readme", "dependencies": { - "axios": "^0.21.1", + "axios": "^0.21.2", "vite": "^2.3.7" } } From 04d31e5945da4558cac1edfca621aca2e221f2de Mon Sep 17 00:00:00 2001 From: Anikaaasingh <96921017+Anikaaasingh@users.noreply.github.com> Date: Mon, 20 Jun 2022 10:18:26 +0530 Subject: [PATCH 05/19] Update package-lock.json --- package-lock.json | 195 ++-------------------------------------------- 1 file changed, 8 insertions(+), 187 deletions(-) diff --git a/package-lock.json b/package-lock.json index 387beb5..3a9cab7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,194 +1,15 @@ { "name": "csoc-task-2-web", "version": "1.0.0", - "lockfileVersion": 2, + "lockfileVersion": 1, "requires": true, - "packages": { - "": { - "name": "csoc-task-2-web", - "version": "1.0.0", - "license": "ISC", - "dependencies": { - "axios": "^0.21.1", - "vite": "^2.3.7" - } - }, - "node_modules/axios": { - "version": "0.21.1", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", - "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", - "dependencies": { - "follow-redirects": "^1.10.0" - } - }, - "node_modules/colorette": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", - "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==" - }, - "node_modules/esbuild": { - "version": "0.12.8", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.8.tgz", - "integrity": "sha512-sx/LwlP/SWTGsd9G4RlOPrXnIihAJ2xwBUmzoqe2nWwbXORMQWtAGNJNYLBJJqa3e9PWvVzxdrtyFZJcr7D87g==", - "hasInstallScript": true, - "bin": { - "esbuild": "bin/esbuild" - } - }, - "node_modules/follow-redirects": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz", - "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==", - "funding": [ - { - "type": "individual", - "url": "https://github.com/sponsors/RubenVerborgh" - } - ], - "engines": { - "node": ">=4.0" - }, - "peerDependenciesMeta": { - "debug": { - "optional": true - } - } - }, - "node_modules/fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, - "node_modules/function-bind": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" - }, - "node_modules/has": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", - "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", - "dependencies": { - "function-bind": "^1.1.1" - }, - "engines": { - "node": ">= 0.4.0" - } - }, - "node_modules/is-core-module": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz", - "integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==", - "dependencies": { - "has": "^1.0.3" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/nanoid": { - "version": "3.1.23", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz", - "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==", - "bin": { - "nanoid": "bin/nanoid.cjs" - }, - "engines": { - "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" - } - }, - "node_modules/path-parse": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", - "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" - }, - "node_modules/postcss": { - "version": "8.3.4", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.4.tgz", - "integrity": "sha512-/tZY0PXExXXnNhKv3TOvZAOUYRyuqcCbBm2c17YMDK0PlVII3K7/LKdt3ScHL+hhouddjUWi+1sKDf9xXW+8YA==", - "dependencies": { - "colorette": "^1.2.2", - "nanoid": "^3.1.23", - "source-map-js": "^0.6.2" - }, - "engines": { - "node": "^10 || ^12 || >=14" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - } - }, - "node_modules/resolve": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", - "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==", - "dependencies": { - "is-core-module": "^2.2.0", - "path-parse": "^1.0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/rollup": { - "version": "2.51.2", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.51.2.tgz", - "integrity": "sha512-ReV2eGEadA7hmXSzjxdDKs10neqH2QURf2RxJ6ayAlq93ugy6qIvXMmbc5cWMGCDh1h5T4thuWO1e2VNbMq8FA==", - "bin": { - "rollup": "dist/bin/rollup" - }, - "engines": { - "node": ">=10.0.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.1" - } - }, - "node_modules/source-map-js": { - "version": "0.6.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz", - "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/vite": { - "version": "2.3.7", - "resolved": "https://registry.npmjs.org/vite/-/vite-2.3.7.tgz", - "integrity": "sha512-Y0xRz11MPYu/EAvzN94+FsOZHbSvO6FUvHv127CyG7mV6oDoay2bw+g5y9wW3Blf8OY3chaz3nc/DcRe1IQ3Nw==", - "dependencies": { - "esbuild": "^0.12.5", - "postcss": "^8.3.0", - "resolve": "^1.19.0", - "rollup": "^2.38.5" - }, - "bin": { - "vite": "bin/vite.js" - }, - "engines": { - "node": ">=12.0.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.1" - } - } - }, "dependencies": { "axios": { - "version": "0.21.1", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", - "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", + "version": "0.21.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.2.tgz", + "integrity": "sha512-87otirqUw3e8CzHTMO+/9kh/FSgXt/eVDvipijwDtEuwbkySWZ9SBm6VEubmJ/kLKEoLQV/POhxXFb66bfekfg==", "requires": { - "follow-redirects": "^1.10.0" + "follow-redirects": "^1.14.0" } }, "colorette": { @@ -202,9 +23,9 @@ "integrity": "sha512-sx/LwlP/SWTGsd9G4RlOPrXnIihAJ2xwBUmzoqe2nWwbXORMQWtAGNJNYLBJJqa3e9PWvVzxdrtyFZJcr7D87g==" }, "follow-redirects": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz", - "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==" + "version": "1.15.1", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz", + "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==" }, "fsevents": { "version": "2.3.2", From fe396cac248c12bc5a47e958bfc1331784922285 Mon Sep 17 00:00:00 2001 From: Anikaaasingh <96921017+Anikaaasingh@users.noreply.github.com> Date: Mon, 20 Jun 2022 10:19:03 +0530 Subject: [PATCH 06/19] Update style.css --- style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/style.css b/style.css index 2817a0d..28897e6 100644 --- a/style.css +++ b/style.css @@ -7,6 +7,10 @@ max-width:400px; } +.todo-search-task { + margin-top:10px; + max-width:400px; +} .todo-available-tasks { margin-bottom:30px; max-width:400px; From c1b8bd98a75a4ea88f7cc0b025db1ed79abf6efe Mon Sep 17 00:00:00 2001 From: Anikaaasingh <96921017+Anikaaasingh@users.noreply.github.com> Date: Mon, 20 Jun 2022 10:19:26 +0530 Subject: [PATCH 07/19] Update vite.config.js From e51ea41741cc77ea34cc1a3b8479198fc866bbf8 Mon Sep 17 00:00:00 2001 From: Anikaaasingh <96921017+Anikaaasingh@users.noreply.github.com> Date: Mon, 20 Jun 2022 10:20:08 +0530 Subject: [PATCH 08/19] Update index.html --- index.html | 168 ++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 120 insertions(+), 48 deletions(-) diff --git a/index.html b/index.html index 7983c60..8bc382b 100644 --- a/index.html +++ b/index.html @@ -1,57 +1,129 @@ - Login - Todo - - - - - - - - - - - + Tasks - Todo + + + + + + + + + + + + + - -
    -
    - - Login - -
    -
    - - -
    -
    - - -
    - -
    + +
    +
    + +
    + +
    +
    + +
    + +
    + +
    +
    + + +
    + From a76e8db6fbdd688e6892f0157549e535b4abb7e3 Mon Sep 17 00:00:00 2001 From: Anikaaasingh <96921017+Anikaaasingh@users.noreply.github.com> Date: Mon, 20 Jun 2022 10:20:40 +0530 Subject: [PATCH 09/19] Update index.html --- index.html | 47 +---------------------------------------------- 1 file changed, 1 insertion(+), 46 deletions(-) diff --git a/index.html b/index.html index 8bc382b..5c1f3da 100644 --- a/index.html +++ b/index.html @@ -74,52 +74,7 @@
    - - - +
    From 5327ad30b1d258941968eca200aa1f0d50612a64 Mon Sep 17 00:00:00 2001 From: Anikaaasingh <96921017+Anikaaasingh@users.noreply.github.com> Date: Mon, 20 Jun 2022 10:22:02 +0530 Subject: [PATCH 10/19] Update index.html --- login/index.html | 30 ++++++++---------------------- 1 file changed, 8 insertions(+), 22 deletions(-) diff --git a/login/index.html b/login/index.html index 673ef67..7983c60 100644 --- a/login/index.html +++ b/login/index.html @@ -1,7 +1,7 @@ - Register- Todo + Login - Todo @@ -39,33 +39,19 @@
    - Register + Login
    -
    -
    - - -
    -
    - - -
    -
    -
    - - -
    - +
    - +
    - +
    - \ No newline at end of file + From f514846d805a4c300aa8e87b86c0cafc5986ca6b Mon Sep 17 00:00:00 2001 From: Anikaaasingh <96921017+Anikaaasingh@users.noreply.github.com> Date: Mon, 20 Jun 2022 10:24:34 +0530 Subject: [PATCH 11/19] Update auth_required.js --- src/auth_required.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/auth_required.js b/src/auth_required.js index f1d38dd..935c0d7 100644 --- a/src/auth_required.js +++ b/src/auth_required.js @@ -1,6 +1,6 @@ /*** * @todo Redirect the user to login page if token is not present. */ - if (localStorage.token === undefined) { +if (localStorage.token === undefined) { window.location.href = 'login/'; -} \ No newline at end of file +} From 74cf5b982663c06ae4d7cdebbb9176e51d2ffc80 Mon Sep 17 00:00:00 2001 From: Anikaaasingh <96921017+Anikaaasingh@users.noreply.github.com> Date: Mon, 20 Jun 2022 10:24:56 +0530 Subject: [PATCH 12/19] Update no_auth_required.js --- src/no_auth_required.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/no_auth_required.js b/src/no_auth_required.js index ba80092..b31cac4 100644 --- a/src/no_auth_required.js +++ b/src/no_auth_required.js @@ -3,6 +3,6 @@ */ - if (localStorage.token) { +if (localStorage.token) { window.location.href = '/'; -} \ No newline at end of file +} From 02d42085f2a9beef6c70a1a1d661748607884454 Mon Sep 17 00:00:00 2001 From: Anikaaasingh <96921017+Anikaaasingh@users.noreply.github.com> Date: Mon, 20 Jun 2022 10:25:32 +0530 Subject: [PATCH 13/19] Update main.js --- src/main.js | 429 ++++++++++++++++++++++++---------------------------- 1 file changed, 195 insertions(+), 234 deletions(-) diff --git a/src/main.js b/src/main.js index 0de8a58..649ab02 100644 --- a/src/main.js +++ b/src/main.js @@ -1,284 +1,245 @@ -import axios from "axios"; -import { displayTask, getTasks } from "./init"; +import axios from 'axios'; +import { displayTask, getTasks } from './init'; + window.deleteTask = deleteTask; window.updateTask = updateTask; window.editTask = editTask; + const taskList = document.getElementById("taskList"); -const registerBtn = document.getElementById("registerBtn"); -if (registerBtn) registerBtn.onclick = register; -const loginBtn = document.getElementById("loginBtn"); -if (loginBtn) loginBtn.onclick = login; -const logoutBtn = document.getElementById("logoutBtn"); -if (logoutBtn) logoutBtn.onclick = logout; -const addTaskBtn = document.getElementById("addTaskBtn"); -if (addTaskBtn) addTaskBtn.onclick = addTask; -const searchTaskBtn = document.getElementById("searchTaskBtn"); -if (searchTaskBtn) searchTaskBtn.onclick = searchTask; +// Making all the buttons functional +const logoutButton = document.getElementById("logoutButton"); +if (logoutButton) logoutButton.onclick = logout; +const loginButton = document.getElementById("loginButton"); +if (loginButton) loginButton.onclick = login; +const registerButton = document.getElementById("registerButton"); +if (registerButton) registerButton.onclick = register; +const addTaskButton = document.getElementById("addTaskButton"); +if (addTaskButton) addTaskButton.onclick = addTask; +const searchTaskButton = document.getElementById("searchTaskButton"); +if (searchTaskButton) searchTaskButton.onclick = searchTask; + +// Displaying toasts function displaySuccessToast(message) { - iziToast.success({ - title: "Success", - message: message, - }); + iziToast.success({ + title: 'Success', + message: message + }); } function displayErrorToast(message) { - iziToast.error({ - title: "Error", - message: message, - }); + iziToast.error({ + title: 'Error', + message: message + }); } function displayInfoToast(message) { - iziToast.info({ - title: "Info", - message: message, - }); + iziToast.info({ + title: 'Info', + message: message + }); } -const API_BASE_URL = "https://todo-app-csoc.herokuapp.com/"; +const API_BASE_URL = 'https://todo-app-csoc.herokuapp.com/'; function logout() { - localStorage.removeItem("token"); - window.location.href = "/login/"; + localStorage.removeItem('token'); + window.location.href = '/login/'; } -function registerFieldsAreValid( - firstName, - lastName, - email, - username, - password -) { - if ( - firstName === "" || - lastName === "" || - email === "" || - username === "" || - password === "" - ) { - displayErrorToast("Please fill all the fields correctly."); - return false; - } - if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) { - displayErrorToast("Please enter a valid email address."); - return false; - } - return true; +function registerFieldsAreValid(firstName, lastName, email, username, password) { + if (firstName === '' || lastName === '' || email === '' || username === '' || password === '') { + displayErrorToast("Please fill all the fields correctly."); + return false; + } + if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))) { + displayErrorToast("Please enter a valid email address.") + return false; + } + return true; } function register() { - const firstName = document.getElementById("inputFirstName").value.trim(); - const lastName = document.getElementById("inputLastName").value.trim(); - const email = document.getElementById("inputEmail").value.trim(); - const username = document.getElementById("inputUsername").value.trim(); - const password = document.getElementById("inputPassword").value; + const firstName = document.getElementById('inputFirstName').value.trim(); + const lastName = document.getElementById('inputLastName').value.trim(); + const email = document.getElementById('inputEmail').value.trim(); + const username = document.getElementById('inputUsername').value.trim(); + const password = document.getElementById('inputPassword').value; + + if (registerFieldsAreValid(firstName, lastName, email, username, password)) { + displayInfoToast("Please wait..."); + + const dataForApiRequest = { + name: firstName + " " + lastName, + email: email, + username: username, + password: password + } - if (registerFieldsAreValid(firstName, lastName, email, username, password)) { - displayInfoToast("Loading..."); + axios({ + url: API_BASE_URL + 'auth/register/', + method: 'post', + data: dataForApiRequest, + }).then(function ({ data, status }) { + localStorage.setItem('token', data.token); + window.location.href = '/'; + }).catch(function (err) { + displayErrorToast('An account using same email or username is already created'); + }) + } +} + +function login() { + const username = document.getElementById('inputUsername').value.trim(); + const password = document.getElementById('inputPassword').value; + + if (username == '' || password == '') { + displayErrorToast("Please enter the required fields."); + return; + } + + displayInfoToast("Please wait..."); const dataForApiRequest = { - name: firstName + " " + lastName, - email: email, - username: username, - password: password, - }; + username: username, + password: password + } axios({ - url: API_BASE_URL + "auth/register/", - method: "post", - data: dataForApiRequest, + url: API_BASE_URL + 'auth/login/', + method: 'POST', + data: dataForApiRequest, + }).then(function ({ data, status }) { + displaySuccessToast("Login Successful..."); + localStorage.setItem('token', data.token); + window.location.href = '/'; + }).catch(function (err) { + displayErrorToast("The credentials used are invalid."); + document.getElementById('inputUsername').value = ''; + document.getElementById('inputPassword').value = ''; }) - .then(function ({ data, status }) { - localStorage.setItem("token", data.token); - window.location.href = "/"; - }) - .catch(function (err) { - displayErrorToast( - "An account using same email or username is already created" - ); - }); - } + } -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("Following fields can't be empty"); - 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 }) { - displaySuccessToast("Successfully logged in"); - localStorage.setItem("token", data.token); - window.location.href = "/"; + +function searchTask(){ + const task = document.getElementById('searchTask').value.trim(); + + if (task == '') { + displayErrorToast("Task cannot be blank...."); + return; + } + + displayInfoToast("Please wait..."); + + 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 index = 0; index < data.length; index++) if (data[index].title == task){ + taskList.innerHTML = ""; + displaySuccessToast("Task found..."); + displayTask(data[index].id, data[index].title); + return; + } + displayErrorToast("The specified task wasn't found...") }) - .catch(function (err) { - displayErrorToast("Entered credentials are wrong"); - 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 task = document.getElementById("inputTask").value.trim(); - - if (task == "") { - displayErrorToast("Todo can't be empty"); - return; - } - - displayInfoToast("Please wait"); - - const dataForApiRequest = { - title: task, - }; - const headersForApiRequest = { - Authorization: "Token " + localStorage.getItem("token"), - }; - - axios({ - headers: headersForApiRequest, - url: API_BASE_URL + "todo/create/", - method: "POST", - data: dataForApiRequest, - }) - .then(function ({ data, status }) { - displaySuccessToast("Successfully added todo"); - document.getElementById("inputTask").value = ""; - getTasks(); + const task = document.getElementById('inputTask').value.trim(); + + if (task == '') { + displayErrorToast("Task cannot be blank...."); + return; + } + + displayInfoToast("Please wait..."); + + const dataForApiRequest = { + title: task + } + const headersForApiRequest = { + Authorization: 'Token ' + localStorage.getItem('token') + } + + axios({ + headers: headersForApiRequest, + url: API_BASE_URL + 'todo/create/', + method: 'POST', + data: dataForApiRequest, + }).then(function ({ data, status }) { + displaySuccessToast("Todo added successfully..."); + document.getElementById('inputTask').value = ''; + getTasks(); + }).catch(function (err) { + displayErrorToast("Unable to add the task. Please try again..."); }) - .catch(function (err) { - displayErrorToast("Unable to add todo"); - }); + } + 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"); + 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'); } export 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. - */ - - displayInfoToast("Please wait"); - - const headersForApiRequest = { - Authorization: "Token " + localStorage.getItem("token"), - }; - - axios({ - headers: headersForApiRequest, - url: API_BASE_URL + "todo/" + id + "/", - method: "DELETE", - }) - .then(function ({ data, status }) { - displaySuccessToast("Todo deleted successfully"); - getTasks(); + displayInfoToast("Please wait..."); + + const headersForApiRequest = { + Authorization: 'Token ' + localStorage.getItem('token') + } + + axios({ + headers: headersForApiRequest, + url: API_BASE_URL + 'todo/' + id + '/', + method: 'DELETE', + }).then(function ({ data, status }) { + displaySuccessToast("Todo deleted successfully..."); + getTasks(); + }).catch(function (err) { + displayErrorToast("Unable to delete the given task. Please try again..."); }) - .catch(function (err) { - displayErrorToast("Unable to delete todo"); - }); } -function searchTask() { - const task = document.getElementById("searchTask").value.trim(); - - if (task == "") { - displayErrorToast("Todo can't be empty"); - return; +export function updateTask(id) { + const newTask = document.getElementById("input-button-" + id).value.trim(); + const taskItem = document.getElementById("task-" + id); + + if (newTask==""){ + displayErrorToast("The task title can't be blank"); + return; + } + + const dataForApiRequest = { + title: newTask } - - displayInfoToast("please wait"); - const headersForApiRequest = { - Authorization: "Token " + localStorage.getItem("token"), - }; - + Authorization: 'Token ' + localStorage.getItem('token') + } + axios({ - headers: headersForApiRequest, - url: API_BASE_URL + "todo/", - method: "GET", + headers: headersForApiRequest, + url: API_BASE_URL + 'todo/' + id + '/', + method: 'PUT', + data: dataForApiRequest, }).then(function ({ data, status }) { - console.log(data); - for (var index = 0; index < data.length; index++) - if (data[index].title == task) { - taskList.innerHTML = ""; - displaySuccessToast("Task found"); - displayTask(data[index].id, data[index].title); - return; - } - displayErrorToast("Given task couldn't be found"); - }); - } - - -export 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. - */ - - const newTask = document.getElementById("input-button-" + id).value.trim(); - const taskItem = document.getElementById("task-" + id); - - if (newTask == "") { - displayErrorToast("Todo can't be blank"); - 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 }) { - taskItem.textContent = data.title; - editTask(data.id); - displaySuccessToast("Todo updated successfully"); - getTasks(); + taskItem.textContent=data.title; + editTask(data.id); + displaySuccessToast("Todo updated successfully..."); + getTasks(); + }).catch(function (err) { + displayErrorToast("Unable to update the task. Please try again..."); }) - .catch(function (err) { - displayErrorToast("Unable to update todo. "); - }); } - From ea9f6edabb376a820b1f4a7df074957f11341e91 Mon Sep 17 00:00:00 2001 From: Anikaaasingh <96921017+Anikaaasingh@users.noreply.github.com> Date: Mon, 20 Jun 2022 10:25:53 +0530 Subject: [PATCH 14/19] Update init.js --- src/init.js | 49 +++++++++++++++++++++++++++++-------------------- 1 file changed, 29 insertions(+), 20 deletions(-) diff --git a/src/init.js b/src/init.js index 3c2c57a..d5891cf 100644 --- a/src/init.js +++ b/src/init.js @@ -1,18 +1,30 @@ import axios from 'axios'; import { updateTask, deleteTask, editTask } from './main'; -const API_BASE_URL = 'https://todo-app-csoc.herokuapp.com/'; + window.deleteTask = deleteTask; window.updateTask = updateTask; window.editTask = editTask; + const taskList = document.getElementById("taskList"); +const API_BASE_URL = 'https://todo-app-csoc.herokuapp.com/'; + +axios({ + headers: { + Authorization: 'Token ' + localStorage.getItem('token'), + }, + url: API_BASE_URL + 'auth/profile/', + method: 'get', +}).then(function ({ data, status }) { + 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(); +}) export function getTasks() { - /*** - * @todo Fetch the tasks created by the user and display them in the dom. - */ const headersForApiRequest = { - Authorization: 'Token ' + localStorage.getItem('token') -} + Authorization: 'Token ' + localStorage.getItem('token') + } + axios({ headers: headersForApiRequest, url: API_BASE_URL + 'todo/', @@ -22,23 +34,12 @@ export function getTasks() { taskList.innerHTML = ""; for (var index = 0; index < data.length; index++) displayTask(data[index].id, data[index].title); }) - } +} -axios({ - headers: { - Authorization: 'Token ' + localStorage.getItem('token'), - }, - url: API_BASE_URL + 'auth/profile/', - method: 'get', -}).then(function({data, status}) { - 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(); -}) export function displayTask(id, title) { - var template = ` + var template = `
  • @@ -47,6 +48,7 @@ export function displayTask(id, title) {
    REPLACE_TASK_TITLE
    +