Done

index.html

@@ -16,7 +16,8 @@
     <script type="module" src="./src/auth_required.js"></script>
     <script type="module" src="./src/main.js"></script>
     <style>
-        .hideme {
+        .hideme 
+        {
             display: none !important;
         }
     </style>
@@ -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="logoutButton">Logout</a>
                         </div>
                     </li>
                 </ul>
@@ -54,18 +55,26 @@
     </nav>
     <center>
         <div class="input-group mb-3 todo-add-task">
-            <input type="text" class="form-control" placeholder="Enter Task">
+            <input type="text" class="form-control" placeholder="Enter Task" id="entervalue">
             <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="addTaskButton">Addd Task</button>
             </div>
         </div>
+
+        <div class="input-group mb-3 todo-add-task">
+            <input type="text" class="form-control" placeholder="Search Task" id="searchvalue">
+            <div class="input-group-append">
+                <button type="button" class="btn btn-outline-primary" id="searchTaskButton">Search 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">
+            <!-- <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>
@@ -85,30 +94,7 @@
                                 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>
+            </li> -->
 
 
         </ul>

login/index.html

@@ -44,13 +44,13 @@
     </div>
     <div class="form-group">
       <label>Username</label>
-      <input type="text" class="form-control" id="inputUsername">
+      <input type="text" class="form-control" id="inputUsername" required>
     </div>
     <div class="form-group">
       <label>Password</label>
-      <input type="Password" class="form-control" id="inputPassword">
+      <input type="Password" class="form-control" id="inputPassword" required>
     </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="loginButton" 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 class="btn btn-outline-success my-2 my-sm-0" id="registerButton" type="submit">Register</button>
   </div>
 </body>
 

src/auth_required.js

@@ -1,3 +1,7 @@
 /***
  * @todo Redirect the user to login page if token is not present.
  */
+ if(!localStorage.getItem("token"))
+ {
+     window.location.href = "/login/";
+ }

src/init.js

@@ -1,10 +1,32 @@
 import axios from 'axios';
+import { createTask } from "./main";
 const API_BASE_URL = 'https://todo-app-csoc.herokuapp.com/';
 
-function getTasks() {
+function getTasks() 
+{
     /***
      * @todo Fetch the tasks created by the user and display them in the dom.
      */
+    axios({
+        url:API_BASE_URL + "todo/",
+        method:"get",
+        headers:{
+            Authorization:"Token "+localStorage.getItem("token")
+        }        
+
+    })
+    .then(function({data})
+    {
+        const list_group = document.querySelector('.list-group');
+        list_group.textContent = '';
+        data.forEach((element) => createTask(element));
+    })
+    .catch(function (err) {
+        iziToast.error({
+            title: 'Error',
+            message: "Cannot get it!"
+        });
+    });
 }
 
 axios({
@@ -18,3 +40,5 @@ axios({
   document.getElementById('profile-name').innerHTML = data.name;
   getTasks();
 })
+
+export { getTasks };