Finish user modals and finish base website v1.0.0

assets/js/user.js

@@ -2,11 +2,12 @@ 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() {
-  document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+  logout();
-  window.location.href = '/';
 });
 
 // modals
@@ -14,11 +15,99 @@ logoutBtn.addEventListener("click", function() {
 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() {
@@ -36,7 +125,7 @@ addTaskBtn.addEventListener("click", function() {
     const taskName = document.querySelector('.add-task-modal-name-input').value;
     const taskDescription = document.querySelector('.add-task-modal-description-input').value;
     if (taskName == "" || taskName == undefined) {
-      setTaskTooltip("add", "error", "Please enter a name");
+      setModalTooltip("add", "error", "Please enter a name");
       return;
     }
     const getUserTasksPromise = getUserTasks(token);
@@ -56,6 +145,7 @@ addTaskBtn.addEventListener("click", function() {
   });
 });
 
+
 // Check if the user is logged in
 const getCookie = (returnType) => {
   let decodedCookie = decodeURIComponent(document.cookie);
@@ -96,12 +186,12 @@ const setTooltip = (type, message) => {
   tooltip.style.display = "block";
 }
 
-const setTaskTooltip = (taskType, type, message) => {
+const setModalTooltip = (modalType, type, message) => {
-  const taskTooltip = document.querySelector(`.${taskType}-task-tooltip`);
+  const modalTooltip = document.querySelector(`.${modalType}-task-tooltip`);
-  taskTooltip.classList.add(type);
+  modalTooltip.classList.add(type);
-  taskTooltip.classList.add('visible');
+  modalTooltip.classList.add('visible');
-  taskTooltip.innerText = message
+  modalTooltip.innerText = message
-  taskTooltip.style.display = "block";
+  modalTooltip.style.display = "block";
 }
 
 
@@ -209,6 +299,11 @@ const createTaskItem = (title, isCompleted, index) => {
   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`, {
@@ -252,4 +347,40 @@ const deleteTask = (userToken, 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();