COPS-CSOC-2022 · Roaster05 · Jun 20, 2022 · Jun 20, 2022 · Jun 20, 2022
diff --git a/index.html b/index.html
@@ -10,11 +10,12 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <meta charset=utf-8>
     <meta http-equiv=X-UA-Compatible content="IE=edge">
     <meta name=viewport content="width=device-width,initial-scale=1">
     <script type="module" src="./src/auth_required.js"></script>
-    <script type="module" src="./src/main.js"></script>
+    <script src="./src/main.js" type="module"></script>
     <style>
         .hideme {
             display: none !important;
@@ -45,7 +46,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="logout-btn">Logout</a>
                         </div>
                     </li>
                 </ul>
@@ -54,63 +55,17 @@
     </nav>
     <center>
         <div class="input-group mb-3 todo-add-task">
-            <input type="text" class="form-control" placeholder="Enter Task">
+            <input type="text" id="task-title" 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="addTask-btn">Add Task</button>
             </div>
         </div>
         <ul class="list-group todo-available-tasks">
             <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>
-
-
+            <div id="TaskData">
+            </div>    
         </ul>
     </center>
     <script type="module" src="./src/init.js"></script>

diff --git a/login/index.html b/login/index.html
@@ -9,6 +9,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <meta charset=utf-8>
   <meta http-equiv=X-UA-Compatible content="IE=edge">
   <meta name=viewport content="width=device-width,initial-scale=1">
@@ -50,7 +51,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 class="btn btn-outline-success my-2 my-sm-0" id="login-btn" type="submit">Log In</button>
   </div>
 </body>
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/register/index.html b/register/index.html
@@ -9,6 +9,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <meta charset=utf-8>
   <meta http-equiv=X-UA-Compatible content="IE=edge">
   <meta name=viewport content="width=device-width,initial-scale=1">
@@ -64,7 +65,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 class="btn btn-outline-success my-2 my-sm-0" id="register-btn" type="submit">Register</button>
   </div>
 </body>
 

diff --git a/src/auth_required.js b/src/auth_required.js
@@ -1,3 +1,7 @@
 /***
  * @todo Redirect the user to login page if token is not present.
  */
+ const token = window.localStorage.getItem('token');
+ if(!token){
+     window.location.href ='/login/'
+ }
diff --git a/src/init.js b/src/init.js
@@ -1,12 +1,52 @@
 import axios from 'axios';
+import {editTask, updateTask,deleteTask} from './main';
 const API_BASE_URL = 'https://todo-app-csoc.herokuapp.com/';
+var tasks = [];
 
 function getTasks() {
-    /***
-     * @todo Fetch the tasks created by the user and display them in the dom.
-     */
+    const TaskData = document.getElementById("TaskData");
+
+    axios({
+        headers: {
+            Authorization: 'Token ' + localStorage.getItem('token'),
+        },
+        url: API_BASE_URL + 'todo/',
+
+    }).then((data) => {
+        TaskData.innerHTML="";
+        tasks=data.data;
+        Array.from(tasks).forEach((e) => {
+            TaskData.innerHTML +=
+                `
+            <li class="list-group-item d-flex justify-content-between align-items-center">
+            <input id="input-button-${e.id}" type="text" class="form-control todo-edit-task-input hideme" placeholder="Edit The Task">
+            <div id="done-button-${e.id}" class="input-group-append hideme">
+                <button class="btn btn-outline-secondary todo-update-task" id="updateTask-${e.id}" type="button" onclick="updateTask(${e.id})">Done</button>
+            </div>
+
+            <div id="task-${e.id}" class="todo-task" value=${e.id}>
+               ${e.title}
+            </div>
+            <span id="task-actions-${e.id}">
+                <button style="margin-right:5px;" type="button"  
+                class="btn btn-outline-warning" onclick="editTask(${e.id})">
+                <img src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486663/CSOC/edit.png"
+                width="18px" height="20px">
+            </button>
+            <button type="button" id="deleteBtn-${e.id}" onclick="deleteTask(${e.id})" class="btn btn-outline-danger">
+                <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({
     headers: {
         Authorization: 'Token ' + localStorage.getItem('token'),
@@ -18,3 +58,4 @@ axios({
   document.getElementById('profile-name').innerHTML = data.name;
   getTasks();
 })
+window.getTasks =getTasks;