From c2c0a9389f8640f4e5ef102a0504cd12f016ecd3 Mon Sep 17 00:00:00 2001 From: ones-and-zeroes Date: Tue, 28 Apr 2020 11:36:25 +0530 Subject: [PATCH 1/2] All tasks done --- auth_required.js | 6 +- index.html | 230 ++++++++++++++++++++++---------------------- init.js | 78 ++++++++++++++- login/index.html | 135 +++++++++++++++----------- main.js | 139 +++++++++++++++++++++----- no_auth_required.js | 6 +- 6 files changed, 394 insertions(+), 200 deletions(-) diff --git a/auth_required.js b/auth_required.js index 7b693a3..ada25e0 100644 --- a/auth_required.js +++ b/auth_required.js @@ -1,3 +1,3 @@ -/*** - * @todo Redirect the user to login page if token is not present. - */ \ No newline at end of file +if (localStorage.getItem('token') == null) { + window.location.href = '/login'; +} \ No newline at end of file diff --git a/index.html b/index.html index a3bde5b..4d5f46b 100644 --- a/index.html +++ b/index.html @@ -1,120 +1,124 @@ + + Tasks - Todo + + + + + + + + + + + + + + + - - Tasks - Todo - - - - - - - - - - - - - - - + + +
+
+ +
+ +
+
+ +
+ + + diff --git a/init.js b/init.js index 10e2b05..9e8b3a4 100644 --- a/init.js +++ b/init.js @@ -1,7 +1,77 @@ +function taskToListItem(task_id, task_input) { + return ` +
  • + +
    + +
    +
    + ${task_input} +
    + + + + + +
    • + ` +}; + function getTasks() { - /*** - * @todo Fetch the tasks created by the user and display them in the dom. - */ + $.ajax({ + headers: { + Authorization: 'Token ' + localStorage.getItem('token'), + }, + url: API_BASE_URL + 'todo/', + method: 'GET', + success: function (data, status, xhr) { + $('#task-list').empty(); + for (let i = 0; i < data.length; i++) { + $('#task-list').append(taskToListItem(data[i].id, data[i].title)).hide().show('fast'); + } + }, + error: (xhr, status, err) => { + if (xhr.status == 0) { + displayErrorToast("Connection failure. Please check your internet connection..."); + } else { + displayErrorToast("Unknown error occured"); + } + } + }) } $.ajax({ @@ -10,7 +80,7 @@ $.ajax({ }, url: API_BASE_URL + 'auth/profile/', method: 'GET', - success: function(data, status, xhr) { + success: function (data, status, xhr) { document.getElementById('avatar-image').src = 'https://ui-avatars.com/api/?name=' + data.name + '&background=fff&size=33&color=007bff'; document.getElementById('profile-name').innerHTML = data.name; getTasks(); diff --git a/login/index.html b/login/index.html index fe0129d..47cab2b 100644 --- a/login/index.html +++ b/login/index.html @@ -1,58 +1,83 @@ + + Login - Todo + + + + + + + + + + + + + - - Login - Todo - - - - - - - - - - - - - + + +
    +
    + + Login + +
    +
    + + +
    +
    + + +
    + +
    + + diff --git a/main.js b/main.js index 3929d68..611fbd9 100644 --- a/main.js +++ b/main.js @@ -59,11 +59,11 @@ function register() { url: API_BASE_URL + 'auth/register/', method: 'POST', data: dataForApiRequest, - success: function(data, status, xhr) { + success: function (data, status, xhr) { localStorage.setItem('token', data.token); window.location.href = '/'; }, - error: function(xhr, status, err) { + error: function (xhr, status, err) { displayErrorToast('An account using same email or username is already created'); } }) @@ -71,19 +71,75 @@ function register() { } 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. - */ + const username = $('#inputUsername').val(); + const password = $('#inputPassword').val(); + + //checking if both username and password entered i.e length>0 + if (username.length == 0) { + displayInfoToast("Enter username"); + } else if (password.length == 0) { + displayInfoToast("Enter password"); + } + else { + //verifying credentials and fetching auth token + displayInfoToast("Verifying credentials..."); + $.ajax({ + url: API_BASE_URL + 'auth/login/', + method: 'POST', + data: { + username: $('#inputUsername').val(), + password: $('#inputPassword').val() + }, + success: (data, status, xhr) => { + displaySuccessToast('Logging in...'); + localStorage.setItem('token', data.token); + setTimeout(() => { + window.location.href = '/'; + }, 500); + }, + error: (xhr, status, err) => { + if (400 <= xhr.status && xhr.status < 500) + displayErrorToast('Invalid credentials'); + else if (xhr.status == 0) + displayErrorToast("Connection failure. Please check your internet connection..."); + else + displayErrorToast("Unknown error occured"); + } + }); + } } 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 taskInput = $('#task-input').val(); + if (taskInput.length == 0) { + displayInfoToast("Enter a task first") + } else if (taskInput.length > 255) { + displayInfoToast("Task length is too large") + } + else { + displayInfoToast("Adding task...") + $.ajax({ + headers: { + Authorization: 'Token ' + localStorage.getItem('token'), + }, + url: API_BASE_URL + 'todo/create/', + method: 'POST', + data: { + title: taskInput + }, + success: (data, status, xhr) => { + getTasks(); + displaySuccessToast('Task added!'); + }, + error: (xhr, status, err) => { + if (xhr.status == 0) { + displayErrorToast("Connection failure. Please check your internet connection..."); + } else { + displayErrorToast("Unknown error occured") + } + } + }); + } } function editTask(id) { @@ -94,17 +150,56 @@ 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. - */ + displayInfoToast("Deleting task...") + $.ajax({ + headers: { + Authorization: 'Token ' + localStorage.getItem('token'), + }, + url: API_BASE_URL + 'todo/' + id + '/', + method: 'DELETE', + success: (data, status, xhr) => { + getTasks(); + displaySuccessToast('Task deleted!'); + }, + error: (xhr, status, err) => { + if (xhr.status == 0) { + displayErrorToast("Connection failure. Please check your internet connection..."); + } else { + displayErrorToast("Unknown error occured") + } + } + }) } 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 taskInput = $('#input-button-' + id).val(); + if (taskInput.length == 0) { + displayInfoToast("Enter a task first") + } else if (taskInput.length > 255) { + displayInfoToast("Task length is too large") + } + else { + displayInfoToast("Updating task...") + $.ajax({ + headers: { + Authorization: 'Token ' + localStorage.getItem('token'), + }, + url: API_BASE_URL + 'todo/' + id + '/', + method: 'PUT', + data: { + title: taskInput + }, + success: (data, status, xhr) => { + getTasks(); + displaySuccessToast('Task updated!'); + }, + error: (xhr, status, err) => { + if (xhr.status == 0) { + displayErrorToast("Connection failure. Please check your internet connection..."); + } else { + displayErrorToast("Unknown error occured") + } + } + }); + } } diff --git a/no_auth_required.js b/no_auth_required.js index 82558d4..02d653f 100644 --- a/no_auth_required.js +++ b/no_auth_required.js @@ -1,3 +1,3 @@ -/*** - * @todo Redirect the user to main page if token is present. - */ \ No newline at end of file +if (localStorage.getItem('token') != null) { + window.location.href = '/'; +} \ No newline at end of file From a5a52dd7e90a6727ed47bcae770ea4036334167a Mon Sep 17 00:00:00 2001 From: ones-and-zeroes Date: Tue, 28 Apr 2020 11:56:08 +0530 Subject: [PATCH 2/2] All tasks done --- index.html | 183 +++++++++++++++++++---------------------------------- 1 file changed, 66 insertions(+), 117 deletions(-) diff --git a/index.html b/index.html index 4d5f46b..948107e 100644 --- a/index.html +++ b/index.html @@ -1,124 +1,73 @@ - - Tasks - Todo - - - - - - - - - - - - - - - - - +
    +
    + +
    +
    -
      - - Available Tasks - -
    -
    - - - + + + + + + + \ No newline at end of file