6 tasks completed

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="logout-btn">Logout</a>
                         </div>
                     </li>
                 </ul>
@@ -54,9 +54,10 @@
     </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="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="add-task-btn">Add
+                    Task</button>
             </div>
         </div>
         <ul class="list-group todo-available-tasks">

login/index.html

@@ -50,7 +50,8 @@
       <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>
 

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="register-btn" 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.
  */
+ var tokencheck=localStorage.getItem('token');
+ if (!tokencheck) {
+    window.location.href = '/login/';
+}  

src/init.js

@@ -1,10 +1,23 @@
 import axios from 'axios';
+import { addNewField } from './main.js';
 const API_BASE_URL = 'https://todo-app-csoc.herokuapp.com/';
 
 function getTasks() {
-    /***
-     * @todo Fetch the tasks created by the user and display them in the dom.
-     */
+    axios({
+        headers: {
+            Authorization: 'Token ' + localStorage.getItem('token'),
+        },
+        url: API_BASE_URL + 'todo/',
+        method: 'get',
+    }).then(function (res) {
+        const { data, status } = res;
+        for (let i of data) {
+            const taskIndex = i.id;
+            const taskData = i.title;
+            addNewField(taskData, taskIndex);
+        }
+    });
+}
 }
 
 axios({

src/main.js

@@ -32,6 +32,11 @@ function registerFieldsAreValid(firstName, lastName, email, username, password)
         displayErrorToast("Please fill all the fields correctly.");
         return false;
     }
+function loginFieldsAreValid(Username, Password) {
+    if (Username === '' || Password === '') {
+        displayErrorToast("Please fill all the fields correctly.");
+        return false;  
+    }
     if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))) {
         displayErrorToast("Please enter a valid email address.")
         return false;
@@ -70,19 +75,76 @@ function register() {
 }
 
 function login() {
-    /***
-     * @todo Complete this function.
-     * @todo 1. Write code for form validation.
-     * @todo 2. Fetch the auth token from backend, login and direct user to home page.
-     */
+    var username = document.getElementById('inputUsername').value.trim();
+    var password = document.getElementById('inputPassword').value.trim();
+
+    if (username == "" || password == "") {
+        displayErrorToast("Please fill all the required fields!");
+        return;
+    }
+
+    displayInfoToast("Processing..");
+    const userData = {
+        username: username,
+        password: password
+    }
+
+    axios({
+        url: API_BASE_URL + 'auth/login/',
+        method: 'post',
+        data: userData
+    })
+        .then(function ({ data, status }) {
+            localStorage.setItem('token', data.token);
+            window.location.href = '/';
+        })
+        .catch(function (err) {
+            displayErrorToast("Account with given details not found! Try Again");
+        })
+}
+
+
+
+
+
 }
 
 function addTask() {
-    /**
-     * @todo Complete this function.
-     * @todo 1. Send the request to add the task to the backend server.
-     * @todo 2. Add the task in the dom.
-     */
+      const newTask = document.getElementById('enter-task').value.trim();
+    if (newTask == "") {
+        return;
+    }
+    const task = {
+        title: newTask,
+    }
+
+    axios({
+        headers: {
+            Authorization: "Token " + localStorage.getItem("token")
+        },
+        url: API_BASE_URL + 'todo/create/',
+        method: 'post',
+        data: task,
+    })
+        .then(function ({ data, status }) {
+            document.getElementById("enter-task").innerHTML = "";
+            axios({
+                headers: {
+                    Authorization: "Token " + localStorage.getItem("token")
+                },
+                url: API_BASE_URL + 'todo/',
+                method: 'get',
+            }).then(function ({ data, status }) {
+                var len = data.length;
+                var id = data[len - 1].id;
+                var list = $('#list');
+                list.append(addNewField(title, id));
+            })
+        })
+        .catch(function (error) {
+            displayErrorToast("Could not add the task.");
+        })
+}
 }
 
 function editTask(id) {
@@ -93,17 +155,94 @@ function editTask(id) {
 }
 
 function deleteTask(id) {
-    /**
-     * @todo Complete this function.
-     * @todo 1. Send the request to delete the task to the backend server.
-     * @todo 2. Remove the task from the dom.
-     */
+    console.log("Deleting task");
+    axios({
+        headers: { Authorization: "Token " + localStorage.getItem('token') },
+        url: API_BASE_URL + 'todo/' + id + '/',
+        method: 'delete',
+    })
+        .then(function ({ data, status }) {
+            document.querySelector(`#todo-${id}`).remove();
+            displaySuccessToast("Task deleted successfully");
+        })
+        .catch(function (err) {
+            displayErrorToast(err);
+        })
+}
 }
 
 function updateTask(id) {
-    /**
-     * @todo Complete this function.
-     * @todo 1. Send the request to update the task to the backend server.
-     * @todo 2. Update the task in the dom.
-     */
+     const task = document.getElementById("input-button-" + id).value.trim();
+    if (task != "") {
+        axios({
+            headers: { Authorization: "Token " + localStorage.getItem("token") },
+            method: "patch",
+            url: API_BASE_URL + "todo/" + id + "/",
+            data: { title: task }
+        }).then(function ({ data, status }) {
+            document.getElementById("todo-" + id).classList.remove("hideme");
+            document.getElementById("task-actions-" + id).classList.remove("hideme");
+            document.getElementById("input-button-" + id).classList.add("hideme");
+            document.getElementById("done-button-" + id).classList.add("hideme");
+            document.getElementById("todo-" + id).innerText = task;
+        }).catch(function (err) {
+            displayErrorToast("Task not updated");
+        })
+    }
+}
+}
+function addNewField(title, id) {
+    const availableTasks = document.querySelector(".todo-available-tasks");
+    const newTask = document.createElement("newElement");
+
+    newTask.innerHTML = `
+        <input id="input-button-${id}" type="text" class="form-control todo-edit-task-input hideme"  placeholder="Edit The Task">
+        <div id="done-button-${id}" class="input-group-append hideme">
+            <button class="btn btn-outline-secondary todo-update-task" type="button" id="updateTaskBtn-${id}">Done</button>
+        </div>
+        <div id="task-${id}" class="todo-task">
+            ${title}
+        </div>
+        <span id="task-actions-${id}">
+            <button style="margin-right:5px;" type="button" id="editTaskBtn-${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" id="deleteTaskBtn-${id}">
+                <img src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg"
+                    width="18px" height="22px">
+            </button>
+        </span>`;
+    newTask.id = `todo-${id}`;
+    newTask.classList.add(
+        "justify-content-between",
+        "align-items-center",
+        "list-group-item",
+        "d-flex",
+    );
+    availableTasks.appendChild(newTask);
+
+    document.getElementById("input-button-" + id).value = title;
+    document.querySelector(`#editTaskBtn-${id}`).addEventListener("click", () => editTask(id));
+    document.querySelector(`#updateTaskBtn-${id}`).addEventListener("click", () => updateTask(id));
+    document.querySelector(`#deleteTaskBtn-${id}`).addEventListener("click", () => deleteTask(id));
 }
+
+if (document.getElementById('logout-btn')) {
+    document.getElementById('logout-btn').onclick = logout;
+}
+
+if (document.getElementById('register-btn')) {
+    document.getElementById('register-btn').onclick = register;
+}
+
+if (document.getElementById('login-btn')) {
+    document.getElementById('login-btn').onclick = login;
+}
+
+if (document.getElementById('add-task-btn')) {
+    document.getElementById('add-task-btn').onclick = addTask;
+}
+
+export { addNewField }; 

src/no_auth_required.js

@@ -1,3 +1,7 @@
 /***
  * @todo Redirect the user to main page if token is present.
- */
+ */
+ var tokencheck=localStorage.getItem('token');
+ if (tokencheck) {
+    window.location.href = '/';
+}