completed week2

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5503
+}

index.html

@@ -45,7 +45,7 @@
                             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="#" id='logoutBtn' >Logout</a>
                         </div>
                     </li>
                 </ul>
@@ -54,12 +54,12 @@
     </nav>
     <center>
         <div class="input-group mb-3 todo-add-task">
-            <input type="text" class="form-control" placeholder="Enter Task">
+            <input id="inpTask" type="text" class="form-control" placeholder="Enter Task">
             <div class="input-group-append">
-                <button type="button" class="btn btn-outline-success" onclick="addTask()">Add Task</button>
+                <button type="button" class="btn btn-outline-success" id="addTaskBtn" >Add Task</button>
             </div>
         </div>
-        <ul class="list-group todo-available-tasks">
+        <ul class="list-group todo-available-tasks" id="listOfTodos">
             <span class="badge badge-primary badge-pill todo-available-tasks-text">
                 Available Tasks
             </span>

login/index.html

@@ -50,7 +50,7 @@
       <label>Password</label>
       <input type="Password" class="form-control" id="inputPassword">
     </div>
-    <button class="btn btn-outline-success my-2 my-sm-0" onclick="login()" type="submit">Log In</button>
+    <button id='loginbtn' class="btn btn-outline-success my-2 my-sm-0"  type="submit">Log In</button>
   </div>
 </body>
 

register/index.html

@@ -64,7 +64,7 @@
       <label for="inputAddress2">Password</label>
       <input type="Password" class="form-control" id="inputPassword">
     </div>
-    <button class="btn btn-outline-success my-2 my-sm-0" onclick="register()" type="submit">Register</button>
+    <button id="registerBtn" class="btn btn-outline-success my-2 my-sm-0" type="submit">Register</button>
   </div>
 </body>
 

src/auth_required.js

@@ -1,3 +1,6 @@
 /***
  * @todo Redirect the user to login page if token is not present.
  */
+if(localStorage.token == null || localStorage.token == undefined){
+    window.location.href = 'login/'
+}

src/init.js

@@ -5,6 +5,48 @@ function getTasks() {
     /***
      * @todo Fetch the tasks created by the user and display them in the dom.
      */
+    fetch(API_BASE_URL+'todo/', {
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+            'Authorization' : `Token ${localStorage.token}`,  
+        },
+        mode: 'cors',
+        method: 'GET'
+    })
+    .then(response => response.json())
+    .then(function(data){
+
+        let listOfTodos = document.getElementById('listOfTodos');
+        listOfTodos.innerHTML = `<span class="badge badge-primary badge-pill todo-available-tasks-text">Available Tasks</span>`
+
+        for(let entry of data){
+            listOfTodos.innerHTML += `<li class="list-group-item d-flex justify-content-between align-items-center">
+                <input id="input-button-${entry.id}" type="text" class="form-control todo-edit-task-input hideme" placeholder="Edit The Task">
+                <div id="done-button-${entry.id}"  class="input-group-append hideme">
+                    <button class="btn btn-outline-secondary todo-update-task" type="button" onclick="updateTask(${entry.id})">Done</button>
+                </div>
+                <div id="task-${entry.id}" class="todo-task">
+                    ${entry.title}
+                </div>
+
+                <span id="task-actions-${entry.id}">
+                    <button style="margin-right:5px;" type="button" onclick="editTask(${entry.id})"
+                        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(${entry.id})">
+                        <img src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg"
+                            width="18px" height="22px">
+                    </button>
+                </span>
+            </li>`;
+        }
+    })
+    .catch(err => console.log(err));
+
+
 }
 
 axios({
@@ -18,3 +60,5 @@ axios({
   document.getElementById('profile-name').innerHTML = data.name;
   getTasks();
 })
+
+window.getTasks = getTasks;