All Tasks completed

auth_required.js

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

index.html

@@ -55,7 +55,7 @@
     </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="addtaskname">
             <div class="input-group-append">
                 <button type="button" class="btn btn-outline-success" onclick="addTask()">Add Task</button>
             </div>

init.js

@@ -2,6 +2,20 @@ function getTasks() {
     /***
      * @todo Fetch the tasks created by the user and display them in the dom.
      */
+    $( ".d-flex" ).remove();
+    $.ajax({
+        headers: {Authorization: 'token '+ localStorage.getItem('token')},
+        url: API_BASE_URL + 'todo/',
+        method: 'GET',
+        success: function(data,status,xhr){
+                for(var i=0;i<data.length;i++){
+                    let id = data[i].id;
+                    let title = data[i].title;
+                    $(".todo-available-tasks").append('<li class="list-group-item d-flex justify-content-between align-items-center"> <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" onclick="updateTask('+id+')">Done</button></div><div id="task-'+id+'" class="todo-task">'title'</div><span id="task-actions-'+id+'"></span><button style="margin-right:5px;" type="button" onclick="editTask('+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(1)"><img src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg"width="18px" height="22px"></button></span> </li>');
+                }
+
+        }
+    })
 }
 
 $.ajax({

main.js

@@ -69,13 +69,46 @@ function register() {
         })
     }
 }
-
+function credentialFieldsAreValid(Username,Password){
+    if(Username === ''||Password === ''){
+        displayErrorToast("Please fill all the fields correctly.");
+        return false;
+    }
+}
 function login() {
     /***
      * @todo Complete this function.
      * @todo 1. Write code for form validation.
      * @todo 2. Fetch the auth token from backend and login the user.
      */
+    user_name=document.getElementById('inputUsername').value;
+    pass_word=document.getElementById('inputPassword').value;
+
+    if(credentialFieldsAreValid(user_name,pass_word)){
+        displayInfoToast("Please wait...");
+        const logindata={
+            username: user_name,
+            password: pass_word
+        }
+
+
+    $.ajax({
+
+        url: API_BASE_URL +'auth/login/',
+        method: 'POST',
+        data: logindata,
+        success: function(data,status,xhr){
+            localStorage.setItem("token" , data.token);
+            window.location.href='/';
+            },
+        error: function(xhr,status,err){
+            displayErrorToast("Recheck the credentials. If not registered,Plz register your account ")           
+        }
+        })
+    }
+    else{
+        displayInfoToast("Enter valid credentials ")
+    }
 }
 
 function addTask() {
@@ -84,6 +117,28 @@ function addTask() {
      * @todo 1. Send the request to add the task to the backend server.
      * @todo 2. Add the task in the dom.
      */
+    const tasktitle=document.getElementById('addtaskname').value;
+if(tasktitle!==''&& tasktitle.length<256){
+    $.ajax({
+        headers: {Authorization: 'Token '+ localStorage.getItem('token') },
+        url: API_BASE_URL + '/todo/create/',
+        method: 'POST',
+        data: {
+            title: tasktitle,
+        },
+        success: function( data ,status,xhr){
+            displaySuccessToast("Todo added succesfully");
+            document.getElementById('addtaskname').value = '';
+            getTasks();
+        },
+        error: function(xhr,status,err){
+            displayErrorToast('Plz Try Again!!');
+        }
+    })    
+}
+else{
+    displayInfoToast("Enter a title of length between 1 to 255")
+}
 }
 
 function editTask(id) {
@@ -99,6 +154,19 @@ function deleteTask(id) {
      * @todo 1. Send the request to delete the task to the backend server.
      * @todo 2. Remove the task from the dom.
      */
+    $.ajax({
+        headers: {Authorization: 'Token '+ localStorage.getItem('token')},
+        url: API_BASE_URL + '/todo/'+id+'/',
+        method: 'DELETE',
+        success: function(status,xhr){
+            displaySuccessToast("Task deleted succesfully");
+            document.getElementById(id).remove();
+        },
+        error: function(xhr,status,err){
+            displayErrorToast('Not Deleted, Plz Try Again!!');
+        }
+
+    })
 }
 
 function updateTask(id) {
@@ -107,4 +175,33 @@ function updateTask(id) {
      * @todo 1. Send the request to update the task to the backend server.
      * @todo 2. Update the task in the dom.
      */
+    const newtitle = document.getElementById("input-button"+id).value;
+    if(newtitle!==""&&newtitle.length<256){
+    $.ajax({
+        headers: {Authorization: 'Token '+ localStorage.getItem('token')},
+        url: API_BASE_URL + '/todo/'+id+'/',
+        method: 'PUT',
+        data: {
+            title: newtitle,
+        },
+        success: function(data ,status,xhr){
+            displaySuccessToast("Todo Updated succesfully");
+
+            document.getElementById("input-button-"+id).classList.add('hideme');
+            document.getElementById("done-button-"+id).classList.add('hideme');
+            document.getElementById("task-"+id).innerHTML= data.title;
+            document.getElementById("task-"+id).classList.remove('hideme');
+            document.getElementById("task-actions-"+id).classList.remove('hideme');
+
+            displaySuccessToast("Todo Updated succesfully");
+        },
+        error: function(xhr,status,err){
+            displayErrorToast('Not Updated, Plz Try Again!!');
+        }
+
+    })
+    }
+    else{
+        displayInfoToast("Enter a string of length between 1-255")
+    }
 }

no_auth_required.js

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