implemented image upload and cropping system, mostly work. it's too zoomed in and appears to be using the xy coords from the top left of the crop selector.

js/user_actions_modal.js

@@ -0,0 +1,54 @@
+document.addEventListener('DOMContentLoaded', function() {
+  var user_actions_modal = document.getElementById("user_actions_modal");
+  var modal_content = document.getElementById("modal_content");
+  var buttons = document.getElementsByClassName("modal_button");
+
+  for (let i = 0; i < buttons.length; i++) {
+    buttons[i].onclick = function() {
+      switch (buttons[i].id) {
+        case 'reset_pw_form_button':
+          openModal('reset_pw_form');
+          break;
+        case 'update_email_form_button':
+          openModal('update_email_form');
+          break;
+        case 'update_username_form_button':
+          openModal('update_username_form');
+          break;
+        case 'delete_account_form_button':
+          openModal('delete_account_form');
+          break;
+        // case 3:
+        //   openModal("request_role_form");
+        //   break;
+        default:
+          break;
+      }
+    }
+  }
+
+  // Open modal function
+  function openModal(formId) {
+    modal_content.innerHTML = document.getElementById(formId).innerHTML;
+    user_actions_modal.style.display = "block";
+  }
+
+  modal_content.addEventListener('click', function(event) {
+    if (event.target.classList.contains('modal_close')) {
+      closeModal();
+    }
+  });
+
+  window.onclick = function(event) {
+    if (event.target.classList.contains('modal')) {
+      closeModal();
+    }
+  };
+
+  // Close modal function
+  function closeModal() {
+    modal_content.innerHTML = ""; // Clear content when closing
+    user_actions_modal.style.display = "none";
+  }
+
+});