From b424381b1940c185b58ad0a81dfe3825de910dbf Mon Sep 17 00:00:00 2001 From: Shivendra Date: Sun, 19 Jun 2022 23:37:06 +0530 Subject: [PATCH] Added all functionalities --- index.html | 64 +++---------- login/index.html | 2 +- package-lock.json | 187 ++++++++++++++++++++++++++++++++++++- register/index.html | 2 +- src/auth_required.js | 9 ++ src/init.js | 43 ++++++++- src/main.js | 202 ++++++++++++++++++++++++++++++++++++++++ src/no_auth_required.js | 11 ++- 8 files changed, 463 insertions(+), 57 deletions(-) diff --git a/index.html b/index.html index ffda4cf..0a49ed0 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,7 @@ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Loading ...
- Logout + Logout
@@ -54,62 +54,28 @@
- +
- +
-
diff --git a/login/index.html b/login/index.html index 305d461..dad824b 100644 --- a/login/index.html +++ b/login/index.html @@ -50,7 +50,7 @@ - + diff --git a/package-lock.json b/package-lock.json index 3a9cab7..8cc7763 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,8 +1,187 @@ { "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": { + "axios": "^0.21.2", + "vite": "^2.3.7" + } + }, + "node_modules/axios": { + "version": "0.21.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.2.tgz", + "integrity": "sha512-87otirqUw3e8CzHTMO+/9kh/FSgXt/eVDvipijwDtEuwbkySWZ9SBm6VEubmJ/kLKEoLQV/POhxXFb66bfekfg==", + "dependencies": { + "follow-redirects": "^1.14.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.15.1", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz", + "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==", + "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.3.4", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", + "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "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.2", @@ -55,9 +234,9 @@ } }, "nanoid": { - "version": "3.1.23", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz", - "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==" + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", + "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==" }, "path-parse": { "version": "1.0.7", diff --git a/register/index.html b/register/index.html index 3a1f03d..16609dc 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..f2d803a 100644 --- a/src/auth_required.js +++ b/src/auth_required.js @@ -1,3 +1,12 @@ /*** * @todo Redirect the user to login page if token is not present. */ +function authRequired (){ + const token = localStorage.getItem('token'); + if(!token) + { + window.location.href = '/login/'; + } +} + +authRequired(); \ No newline at end of file diff --git a/src/init.js b/src/init.js index 3a88d74..66d6d63 100644 --- a/src/init.js +++ b/src/init.js @@ -1,10 +1,51 @@ import axios from 'axios'; const API_BASE_URL = 'https://todo-app-csoc.herokuapp.com/'; -function getTasks() { +export function getTasks() { /*** * @todo Fetch the tasks created by the user and display them in the dom. */ + const tasks = document.getElementById('tasks'); + + axios({ + headers: { + Authorization: "Token " + localStorage.getItem("token"), + }, + url: API_BASE_URL + "todo/", + }) + .then(function ({ data, status }) { + tasks.innerHTML=` + Available Tasks + `; + for(var i=0;i + +
+ +
+
+ ${data[i].title} +
+ + + + + `; + } + }) + .catch(function (err) { + displayErrorToast("Oops! Something went wrong!"); + }); } axios({ diff --git a/src/main.js b/src/main.js index 05849df..1dfeab1 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,38 @@ import axios from 'axios'; +import { getTasks } from './init'; + +const loginBtn = document.getElementById('login-btn'); +const logoutBtn = document.getElementById('logout-btn'); +const registerBtn = document.getElementById('register-btn'); +const addtaskBtn = document.getElementById('add-task'); +const searchBtn = document.getElementById('search-btn'); +const cancelBtn = document.getElementById('cancel-btn'); + +window.editTask=editTask; +window.updateTask=updateTask; +window.deleteTask=deleteTask; + +window.onload = ()=>{ + +if(loginBtn) + loginBtn.onclick = login; + +if(logoutBtn) + logoutBtn.onclick = logout; + +if(registerBtn) + registerBtn.onclick = register; + +if(addtaskBtn) + addtaskBtn.onclick = addTask; + +if(searchBtn) + searchBtn.onclick = search; + +if(cancelBtn) + cancelBtn.onclick = cancel; +} + function displaySuccessToast(message) { iziToast.success({ title: 'Success', @@ -39,6 +73,14 @@ function registerFieldsAreValid(firstName, lastName, email, username, password) return true; } +function loginFieldsAreValid(username, password) { + if (username === '' || password === '') { + displayErrorToast("Please fill all the fields correctly."); + return false; + } + return true; +} + function register() { const firstName = document.getElementById('inputFirstName').value.trim(); const lastName = document.getElementById('inputLastName').value.trim(); @@ -75,6 +117,28 @@ 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 (loginFieldsAreValid(username, password)) { + displayInfoToast("Please wait..."); + + const dataForApiRequest = { + username: username, + password: password + } + + axios({ + url: API_BASE_URL + 'auth/login/', + method: 'post', + data: dataForApiRequest, + }).then(function({data, status}) { + localStorage.setItem('token', data.token); + window.location.href = '/'; + }).catch(function(err) { + displayErrorToast('Invalid username or password'); + }) + } } function addTask() { @@ -83,6 +147,32 @@ function addTask() { * @todo 1. Send the request to add the task to the backend server. * @todo 2. Add the task in the dom. */ + + const title = document.getElementById('new-task').value.trim(); + + if (title == '') { + displayErrorToast("Task name cannot be epmty ."); + return; + } + + const dataForApiRequest = { + title: title + } + + axios({ + headers: { + Authorization: "Token " + localStorage.getItem("token"), + }, + url: API_BASE_URL + 'todo/create/', + method: 'post', + data: dataForApiRequest, + }).then(function ({ data, status }) { + displaySuccessToast("Task added successfully ."); + getTasks(); + document.getElementById('new-task').value =""; + }).catch(function (err) { + displayErrorToast("Oops ! Something went wrong ."); + }) } function editTask(id) { @@ -98,6 +188,19 @@ function deleteTask(id) { * @todo 1. Send the request to delete the task to the backend server. * @todo 2. Remove the task from the dom. */ + axios({ + headers: { + Authorization: "Token " + localStorage.getItem("token"), + }, + url: API_BASE_URL + 'todo/' + id + '/', + method: 'delete', + }).then(function ({ data, status }) { + console.log(localStorage.getItem('token')); + displaySuccessToast("Task deleted successfully ."); + getTasks(); + }).catch(function (err) { + displayErrorToast("Oops ! Something went wrong ."); + }) } function updateTask(id) { @@ -106,4 +209,103 @@ function updateTask(id) { * @todo 1. Send the request to update the task to the backend server. * @todo 2. Update the task in the dom. */ + + const taskname =document.getElementById("input-button-" + id).value.trim(); + + if (taskname == ""){ + displayErrorToast("Task name cannot be empty ."); + return; + } + + const dataForApiRequest = { + title: taskname + } + + axios({ + headers: { + Authorization: "Token " + localStorage.getItem("token"), + }, + url: API_BASE_URL + 'todo/' + id + '/', + method: 'put', + data: dataForApiRequest, + }).then(function ({ data, status }) { + displaySuccessToast("Task updated successfully ."); + getTasks(); + }).catch(function (err) { + displayErrorToast("Oops ! Something went wrong . "); + }) +} + +function search(){ + + const title = document.getElementById('search-input').value.trim(); + const tasks = document.getElementById('tasks'); + document.getElementById('search-btn').classList.add('hideme'); + document.getElementById('cancel-btn').classList.remove('hideme'); + + if(title == ""){ + displayErrorToast("Search field cannot be empty ."); + return ; + } + + axios({ + headers: { + Authorization: "Token " + localStorage.getItem("token"), + }, + url: API_BASE_URL + "todo/", + }) + .then(function ({ data, status }) { + tasks.innerHTML=` + Search Result + `; + for(var i=0;i + +
+ +
+
+ ${data[i].title} +
+ + + + + `; + } + } + + if(tasks.innerHTML == ` + Search Result + ` ) + displayErrorToast('Required task not found .') + else + displaySuccessToast('Required task found successfully .'); + }) + .catch(function (err) { + displayErrorToast("Oops ! Something went wrong . "); + }); + +} + + +function cancel(){ + + document.getElementById('search-input').value=""; + document.getElementById('search-btn').classList.remove('hideme'); + document.getElementById('cancel-btn').classList.add('hideme'); + getTasks(); + } diff --git a/src/no_auth_required.js b/src/no_auth_required.js index 82558d4..1351727 100644 --- a/src/no_auth_required.js +++ b/src/no_auth_required.js @@ -1,3 +1,12 @@ /*** * @todo Redirect the user to main page if token is present. - */ \ No newline at end of file + */ + function noauthRequired (){ + const token = localStorage.getItem('token'); + if(token) + { + window.location.href = '/'; + } +} + +noauthRequired(); \ No newline at end of file