COPS-CSOC-2022 · amyra98 · Jun 24, 2022
diff --git a/img/delete.svg b/img/delete.svg
diff --git a/img/edit.png b/img/edit.png
diff --git a/index.html b/index.html
@@ -25,6 +25,7 @@
 <body>
     <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
         <a class="navbar-brand" href="#">Todo</a>
+        <input type="text" id="search-box" placeholder="Search your task here..." autocomplete="off">
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
             aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
@@ -33,25 +34,22 @@
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <ul class="navbar-nav mr-auto">
                 <li class="nav-item active">
-                    <a class="nav-link" href="/">Tasks
-                        <span class="sr-only">(current)</span>
-                    </a>
                 </li>
-            </ul>
+            </ul>       
             <form class="form-inline my-2 my-lg-0">
                 <ul class="navbar-nav mr-auto">
                     <li class="nav-item dropdown active">
                         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                             data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             <img src="#" class="rounded-circle" id="avatar-image"><span class="todo-profile-name" id="profile-name">Loading ...</span></a>
                         <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                            <a class="dropdown-item" href="#" onclick="logout()">Logout</a>
+                            <a class="dropdown-item" href="#" onclick="logout()">Log out</a>
                         </div>
                     </li>
                 </ul>
             </form>
         </div>
-    </nav>
+    </nav>   
     <center>
         <div class="input-group mb-3 todo-add-task">
             <input type="text" class="form-control" placeholder="Enter Task">
@@ -63,57 +61,9 @@
             <span class="badge badge-primary badge-pill todo-available-tasks-text">
                 Available Tasks
             </span>
-
-
-            <li class="list-group-item d-flex justify-content-between align-items-center">
-                    <input id="input-button-1" type="text" class="form-control todo-edit-task-input hideme" placeholder="Edit The Task">
-                    <div id="done-button-1"  class="input-group-append hideme">
-                        <button class="btn btn-outline-secondary todo-update-task" type="button" onclick="updateTask(1)">Done</button>
-                    </div>
-                    <div id="task-1" class="todo-task">
-                        Sample Task 1
-                    </div>
-
-                    <span id="task-actions-1">
-                        <button style="margin-right:5px;" type="button" onclick="editTask(1)"
-                            class="btn btn-outline-warning">
-                            <img src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486663/CSOC/edit.png"
-                                width="18px" height="20px">
-                        </button>
-                        <button type="button" class="btn btn-outline-danger" onclick="deleteTask(1)">
-                            <img src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg"
-                                width="18px" height="22px">
-                        </button>
-                    </span>
-            </li>
-
-
-            <li class="list-group-item d-flex justify-content-between align-items-center">
-                    <input id="input-button-2" type="text" class="form-control todo-edit-task-input hideme" placeholder="Edit The Task">
-                    <div id="done-button-2" class="input-group-append hideme">
-                        <button class="btn btn-outline-secondary todo-update-task" type="button" onclick="updateTask(2)">Done</button>
-                    </div>
-
-                    <div id="task-2" class="todo-task">
-                        Sample Task 2
-                    </div>
-                    <span id="task-actions-2">
-                        <button style="margin-right:5px;" type="button" onclick="editTask(2)"
-                            class="btn btn-outline-warning">
-                            <img src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486663/CSOC/edit.png"
-                                width="18px" height="20px">
-                        </button>
-                        <button type="button" class="btn btn-outline-danger" onclick="deleteTask(2)">
-                            <img src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg"
-                                width="18px" height="22px">
-                        </button>
-                    </span>
-            </li>
-
-
         </ul>
     </center>
     <script type="module" src="./src/init.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git 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/'
diff --git a/src/init.js b/src/init.js
@@ -1,10 +1,50 @@
 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=`<span class="badge badge-secondary badge-pill todo-available-tasks-text"> Tasks to do </span>`
+        for (let element of data){
+        todo.innerHTML+=
+        `   
+            <li class="list-group-item d-flex justify-content-between align-items-center">
+                    <input id="input-button-${element.id}" type="text" class="form-control todo-edit-task-input hideme" placeholder="Edit your task" value=${element.title}>
+                    <div id="done-button-${element.id}"  class="input-group-append hideme">
+                        <button class="btn btn-outline-secondary todo-update-task" type="button" onclick="updateTask(${element.id})">Done</button>
+                    </div>
+                    <div id="task-${element.id}" class="todo-task">
+                        ${element.title}
+                    </div>
+                    <span id="task-actions-${element.id}">
+                        <button style="margin-right:4px;" type="button" onclick="editTask(${element.id})"
+                            class="btn btn-outline-warning">
+                            <img src="../img/edit.png"
+                                width="15px" height="20px">
+                        </button>
+                        <button type="button" class="btn btn-outline-danger" onclick="deleteTask(${element.id})">
+                            <img src="../img/delete.svg"
+                                width="15px" height="20px">
+                        </button>
+                    </span>
+            </li>
+        `
+        }
+        searchbox.addEventListener('keyup',search)
+    })
 }
 
 axios({
@@ -18,3 +58,5 @@ axios({
   document.getElementById('profile-name').innerHTML = data.name;
   getTasks();
 })
+
+window.getTasks=getTasks
diff --git a/src/main.js b/src/main.js
@@ -75,6 +75,29 @@ 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;
+    // validation
+    if (username === '' || password === '') {
+        displayErrorToast("Please enter correct credentials!!");
+        return;
+    }
+     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() {
@@ -83,6 +106,27 @@ function addTask() {
      * @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 your task";
+        displaySuccessToast("Task Added yee!!")
+    })
 }
 
 function editTask(id) {
@@ -98,6 +142,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.
      */
+     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) {
@@ -106,4 +165,38 @@ function updateTask(id) {
      * @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 your task";
+                displaySuccessToast("Task Updated")
+            })
+     }
+     else
+     displayErrorToast('Task should nt 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
@@ -1,3 +1,5 @@
 /***
  * @todo Redirect the user to main page if token is present.
- */
+ */
+ if(window.localStorage.getItem('token'))
+ window.location.href = '/'