add close button

src/pages/profile_page.html

@@ -12,9 +12,11 @@
 
 <div id="popup_background" class="blocked hidden"></div>
 
-<div id="change_password_dialouge" class="hidden card static_center">
+<div id="change_password_dialogue" class="hidden card static_center">
     Change Password
 
+    <button id="close_password_dialogue">X</button>
+
     <div id="password_error" class="error hidden">
         <div id="password_text"></div>
         <button id="password_error_close_button" class="close_error_button">
@@ -140,7 +142,7 @@
     popup_botton.addEventListener("click", () => {
         document.getElementById("popup_background").classList.remove("hidden");
         document
-            .getElementById("change_password_dialouge")
+            .getElementById("change_password_dialogue")
             .classList.remove("hidden");
     });
 </script>
@@ -189,10 +191,10 @@
             "csrf_token",
             document.getElementById("csrf_token_storage").value,
         );
-        formData.append("old", file);
+        formData.append("old_password", file);
 
         document
-            .getElementById("change_password_dialouge")
+            .getElementById("change_password_dialogue")
             .classList.add("hidden");
         document.getElementById("popup_background").classList.add("hidden");
     });
@@ -237,4 +239,15 @@
     });
 </script>
 
+<script type="text/javascript">
+    document
+        .getElementById("close_password_dialogue")
+        .addEventListener("click", () => {
+            document
+                .getElementById("change_password_dialogue")
+                .classList.add("hidden");
+            document.getElementById("popup_background").classList.add("hidden");
+        });
+</script>
+
 <script src="/static/error/error.js" type="text/javascript"></script>

static/profile_page.css

@@ -118,11 +118,17 @@
     font-size: 20px;
 }
 
-#change_password_dialouge {
+#change_password_dialogue {
     z-index: 10000;
     position: fixed;
 }
 
-#change_password_dialouge input {
+#change_password_dialogue input {
     width: 350px;
 }
+
+#close_password_dialogue {
+    width: fit-content;
+    position: absolute;
+    right: 2.5rem;
+}