386 lines
12 KiB
JavaScript
386 lines
12 KiB
JavaScript
const url = "https://task-api.fstropii.com";
|
|
const localhostUrl = "http://localhost:8000";
|
|
const logoutBtn = document.querySelector('.nav-logout');
|
|
const changeEmailBtn = document.querySelector('#change-email-btn');
|
|
const changePasswordBtn = document.querySelector('#change-password-btn');
|
|
const changeUsernameBtn = document.querySelector('#change-username-btn');
|
|
const addTaskBtn = document.querySelector('.add-task-button');
|
|
|
|
logoutBtn.addEventListener("click", function() {
|
|
logout();
|
|
});
|
|
|
|
// modals
|
|
|
|
changeEmailBtn.addEventListener("click", function() {
|
|
const emailModal = document.querySelector('.email-modal');
|
|
const closeEmailModalBtn = document.querySelector('.close-email-modal');
|
|
const emailSubmitBtn = document.querySelector('.submit-email-btn');
|
|
emailModal.classList.add('visible');
|
|
|
|
closeEmailModalBtn.addEventListener("click", function() {
|
|
emailModal.classList.remove("visible");
|
|
});
|
|
|
|
emailSubmitBtn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const newEmail = document.querySelector('.modal-email-input').value;
|
|
|
|
if (newEmail == "") {
|
|
setModalTooltip("email", "error", "Email cannot be blank");
|
|
return;
|
|
}
|
|
|
|
const updateUserEmailPromise = updateUserEmail(token, newEmail);
|
|
updateUserEmailPromise.then((res) => res.json()).then((json => {
|
|
const newUserEmail = json.email;
|
|
if (newEmail == newUserEmail) {
|
|
setModalTooltip("email", "success", "Updated email");
|
|
logout();
|
|
} else {
|
|
setModalTooltip("email", "error", "Something went wrong");
|
|
}
|
|
}));
|
|
});
|
|
});
|
|
|
|
changePasswordBtn.addEventListener('click', function() {
|
|
const passwordModal = document.querySelector('.password-modal');
|
|
const closePasswordModal = document.querySelector('.close-password-modal');
|
|
const passwordSubmitBtn = document.querySelector('.submit-password-btn');
|
|
passwordModal.classList.add("visible");
|
|
|
|
closePasswordModal.addEventListener('click', function() {
|
|
passwordModal.classList.remove('visible');
|
|
});
|
|
|
|
passwordSubmitBtn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const newPassword = document.querySelector('.modal-password-input').value;
|
|
const verifyNewPassword = document.querySelector('.modal-verify-password-input').value;
|
|
|
|
if (newPassword == "") {
|
|
setModalTooltip('password', 'error', 'Password cannot be blank');
|
|
return;
|
|
}
|
|
|
|
if (newPassword != verifyNewPassword) {
|
|
setModalTooltip('password', 'error', 'Passwords must be the same');
|
|
return;
|
|
}
|
|
|
|
const updateUserPasswordPromise = updateUserPassword(token, newPassword);
|
|
updateUserPasswordPromise.then((res) => res.json()).then((json => {
|
|
setModalTooltip('password', 'success', 'Password updated!');
|
|
logout();
|
|
}));
|
|
});
|
|
});
|
|
|
|
changeUsernameBtn.addEventListener('click', function() {
|
|
const usernameModal = document.querySelector('.username-modal');
|
|
const closeUsernameModal = document.querySelector('.close-username-modal');
|
|
const usernameSubmitBtn = document.querySelector('.submit-username-btn');
|
|
usernameModal.classList.add('visible');
|
|
|
|
closeUsernameModal.addEventListener('click', function() {
|
|
usernameModal.classList.remove('visible');
|
|
});
|
|
|
|
usernameSubmitBtn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const newUsername = document.querySelector('.modal-username-input').value;
|
|
|
|
if (newUsername == "") {
|
|
setModalTooltip('username', 'error', 'Username cannot be blank');
|
|
return;
|
|
}
|
|
|
|
const updateUserUsernamePromise = updateUserUsername(token, newUsername);
|
|
updateUserUsernamePromise.then((res) => res.json()).then((json => {
|
|
const newUserUsername = json.username;
|
|
|
|
if (newUsername == newUserUsername) {
|
|
setModalTooltip('username', 'success', 'Username updated');
|
|
logout();
|
|
} else {
|
|
setModalTooltip('username', 'error', 'Something went wrong');
|
|
}
|
|
}));
|
|
});
|
|
});
|
|
|
|
addTaskBtn.addEventListener("click", function() {
|
|
const taskModal = document.querySelector('.add-task-modal');
|
|
const closeTaskModalBtn = document.querySelector('.close-task-modal');
|
|
const submitTaskBtn = document.querySelector('.submit-add-task-btn');
|
|
taskModal.classList.add('visible');
|
|
|
|
closeTaskModalBtn.addEventListener('click', function() {
|
|
taskModal.classList.remove("visible");
|
|
});
|
|
|
|
submitTaskBtn.addEventListener("click", function(e) {
|
|
e.preventDefault();
|
|
const taskName = document.querySelector('.add-task-modal-name-input').value;
|
|
const taskDescription = document.querySelector('.add-task-modal-description-input').value;
|
|
if (taskName == "" || taskName == undefined) {
|
|
setModalTooltip("add", "error", "Please enter a name");
|
|
return;
|
|
}
|
|
const getUserTasksPromise = getUserTasks(token);
|
|
getUserTasksPromise.then((res) => res.json()).then((json => {
|
|
let taskId = 0;
|
|
const tasks = json.tasks;
|
|
if (tasks != null) {
|
|
let tasksLength = tasks.length;
|
|
taskId = tasksLength + 1;
|
|
}
|
|
|
|
const newTaskPromise = newTask(taskName, taskDescription, taskId, token);
|
|
newTaskPromise.then((res) => res.json()).then((json => {
|
|
window.location.reload();
|
|
}));
|
|
}));
|
|
});
|
|
});
|
|
|
|
|
|
// Check if the user is logged in
|
|
const getCookie = (returnType) => {
|
|
let decodedCookie = decodeURIComponent(document.cookie);
|
|
if (decodedCookie == "") {
|
|
return;
|
|
}
|
|
|
|
let ca = decodedCookie.split(',');
|
|
|
|
const token = ca[0].split("token=")[1];
|
|
const type = ca[1].split("type=")[1];
|
|
const expiresDay = ca[2].split("expires=")[1];
|
|
const expiresDate = ca[3]
|
|
const expires = `${expiresDay}${expiresDate}`
|
|
|
|
if (returnType == "token") {
|
|
return token;
|
|
} else if (returnType == "type") {
|
|
return type
|
|
} else if (returnType == "expires") {
|
|
return expires;
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
const token = getCookie("token");
|
|
|
|
if (token == undefined) {
|
|
// no user
|
|
window.location.href = '/';
|
|
}
|
|
|
|
const setTooltip = (type, message) => {
|
|
tooltip.classList.add(type);
|
|
tooltip.classList.add('visible');
|
|
tooltip.innerText = message
|
|
tooltip.style.display = "block";
|
|
}
|
|
|
|
const setModalTooltip = (modalType, type, message) => {
|
|
const modalTooltip = document.querySelector(`.${modalType}-task-tooltip`);
|
|
modalTooltip.classList.add(type);
|
|
modalTooltip.classList.add('visible');
|
|
modalTooltip.innerText = message
|
|
modalTooltip.style.display = "block";
|
|
}
|
|
|
|
|
|
// loading user tasks
|
|
const loadUserTasks = () => {
|
|
const tasksPromise = getUserTasks(token);
|
|
tasksPromise.then((res) => res.json()).then((json => {
|
|
const tasks = json.tasks
|
|
if (json.tasks == null) {
|
|
return;
|
|
}
|
|
|
|
for (let i = 0; i < tasks.length; i++) {
|
|
createTaskItem(tasks[i]['title'], tasks[i]['is_completed'], tasks[i]['task_id']);
|
|
}
|
|
|
|
const checkboxes = document.querySelectorAll('.checkbox');
|
|
|
|
for (let j = 0; j < checkboxes.length; j++) {
|
|
checkboxes[j].addEventListener("click", function() {
|
|
setTooltip("info", `Updating task '${tasks[j]['title']}'`);
|
|
const updateTaskPromise = updateTask(token, tasks[j]['title'], tasks[j]['description'], checkboxes[j].checked, tasks[j]['task_id']);
|
|
updateTaskPromise.then((res => {
|
|
setTooltip("success", `Task '${tasks[j]['title']}' updated!`);
|
|
window.location.reload();
|
|
}));
|
|
});
|
|
}
|
|
|
|
const userTasks = document.querySelectorAll('.user-task');
|
|
for (let j = 0; j < userTasks.length; j++) {
|
|
userTasks[j].addEventListener("click", function() {
|
|
// I know this looks like hell. It is
|
|
const taskSubmitBtn = document.querySelector('.submit-task-btn');
|
|
const taskDeleteBtn = document.querySelector('.delete-task-btn');
|
|
const taskTitle = tasks[j]['title'];
|
|
const taskDescription = tasks[j]['description'];
|
|
const taskCompletedStatus = tasks[j]['is_completed'];
|
|
const taskModal = document.querySelector('.task-modal');
|
|
const taskModalTitle = document.querySelector('.task-modal-title');
|
|
const taskModalDescription = document.querySelector('.task-modal-description');
|
|
const taskModalCompletedStatus = document.querySelector('.task-modal-completed-status');
|
|
const closeTaskModal = document.querySelector('.close-edit-task-modal');
|
|
const taskId = tasks[j]['task_id'];
|
|
|
|
taskModalTitle.placeholder = taskTitle;
|
|
taskModalDescription.placeholder = taskDescription;
|
|
taskModalCompletedStatus.innerHTML = taskCompletedStatus ? "yes" : "no";
|
|
taskModal.classList.add('visible');
|
|
|
|
closeTaskModal.addEventListener("click", function() {
|
|
taskModal.classList.remove('visible');
|
|
});
|
|
|
|
taskSubmitBtn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const newTaskTitle = document.querySelector('.task-modal-title').value != "" ? document.querySelector('.task-modal-title').value : taskTitle;
|
|
const newTaskDescription = document.querySelector('.task-modal-description').value != "" ? document.querySelector('.task-modal-description').value : taskDescription;
|
|
const updateTaskPromise = updateTask(token, newTaskTitle, newTaskDescription, taskCompletedStatus, taskId);
|
|
updateTaskPromise.then((res) => res.json()).then((json => {
|
|
window.location.reload();
|
|
}));
|
|
});
|
|
|
|
taskDeleteBtn.addEventListener("click", function(e) {
|
|
e.preventDefault();
|
|
const deleteTaskPromise = deleteTask(token, taskId);
|
|
deleteTaskPromise.then((res => {
|
|
window.location.reload();
|
|
}));
|
|
})
|
|
});
|
|
}
|
|
}));
|
|
}
|
|
|
|
const getUserTasks = (userToken) => {
|
|
const res = fetch(`${url}/users/me`, {
|
|
headers: {Authorization: `Bearer ${userToken}`}
|
|
});
|
|
|
|
return res;
|
|
}
|
|
|
|
const createTaskItem = (title, isCompleted, index) => {
|
|
const userTasksDiv = document.querySelector('.user-tasks');
|
|
const taskItemDiv = document.createElement('div');
|
|
taskItemDiv.className = 'task-item';
|
|
|
|
const taskCheckbox = document.createElement('input');
|
|
taskCheckbox.className = `checkbox-${index} checkbox`;
|
|
taskCheckbox.type = 'checkbox';
|
|
|
|
if (isCompleted == true) {
|
|
taskCheckbox.checked = true;
|
|
}
|
|
|
|
const taskLabel = document.createElement('li');
|
|
taskLabel.innerHTML = title;
|
|
taskLabel.className = `task-${index} user-task`;
|
|
|
|
|
|
taskItemDiv.appendChild(taskCheckbox);
|
|
taskItemDiv.appendChild(taskLabel);
|
|
userTasksDiv.appendChild(taskItemDiv);
|
|
}
|
|
|
|
const logout = () => {
|
|
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
|
|
window.location.href = '/';
|
|
}
|
|
|
|
const updateTask = (userToken, taskTitle, taskDescription, completedStatus, taskId) => {
|
|
|
|
const res = fetch(`${url}/user/update-tasks`, {
|
|
method: "PATCH",
|
|
headers: {Authorization: `Bearer ${userToken}`, "Content-type": "application/json"},
|
|
body: JSON.stringify({
|
|
"title": taskTitle,
|
|
"description": taskDescription,
|
|
"is_completed": completedStatus,
|
|
"task_id": taskId
|
|
})
|
|
});
|
|
|
|
return res;
|
|
}
|
|
|
|
const newTask = (title, description, taskId, userToken) => {
|
|
const res = fetch(`${url}/user/update-tasks`, {
|
|
method: "PATCH",
|
|
headers: {Authorization: `Bearer ${userToken}`, "Content-Type": "application/json"},
|
|
body: JSON.stringify({
|
|
"title": title,
|
|
"description": description,
|
|
"is_completed": false,
|
|
"task_id": taskId
|
|
})
|
|
});
|
|
|
|
return res;
|
|
}
|
|
|
|
const deleteTask = (userToken, taskId) => {
|
|
const res = fetch(`${url}/user/delete-task`, {
|
|
method: "DELETE",
|
|
headers: {Authorization: `Bearer ${userToken}`, "Content-Type": "application/json"},
|
|
body: JSON.stringify({
|
|
task_id: taskId
|
|
})
|
|
});
|
|
|
|
return res;
|
|
}
|
|
|
|
const updateUserEmail = (userToken, email) => {
|
|
const res = fetch(`${url}/user/update`, {
|
|
method: "PATCH",
|
|
headers: {Authorization: `Bearer ${userToken}`, "Content-Type": "application/json"},
|
|
body: JSON.stringify({
|
|
email: email
|
|
})
|
|
});
|
|
|
|
return res;
|
|
}
|
|
|
|
const updateUserPassword = (userToken, password) => {
|
|
const res = fetch(`${url}/user/update`, {
|
|
method: "PATCH",
|
|
headers: {Authorization: `Bearer ${userToken}`, "Content-Type": "application/json"},
|
|
body: JSON.stringify({
|
|
password: password
|
|
})
|
|
});
|
|
|
|
return res;
|
|
}
|
|
|
|
const updateUserUsername = (userToken, username) => {
|
|
const res = fetch(`${url}/user/update`, {
|
|
method: "PATCH",
|
|
headers: {Authorization: `Bearer ${userToken}`, "Content-Type": "application/json"},
|
|
body: JSON.stringify({
|
|
username: username
|
|
})
|
|
});
|
|
|
|
return res;
|
|
}
|
|
|
|
loadUserTasks(); |