add in confirm change button

src/pages/profile_page.html

@@ -104,6 +104,7 @@
 <div id="resize_photo_dialouge" class="card static_center hidden">
     <div id="resize_photo_box"></div>
     <img id="new_profile_image" alt="new-profile-image" />
+    <button id="confirm_change">Confirm Change</button>
 </div>
 
 <img id="logo_image" alt="logo" src="/logo" />
@@ -176,6 +177,7 @@
 <script type="text/javascript">
     const button = document.getElementById("edit_picture_button");
     const fileInput = document.getElementById("file_input");
+    const confirm_change = document.getElementById("confirm_change");
 
     button.addEventListener("click", () => {
         fileInput.click(); // opens file picker
@@ -183,12 +185,14 @@
 </script>
 
 <script type="text/javascript">
-    var currentPreviewURL = null;
+    var currentPreviewURL = null,
+        image = null,
+        file = null;
 
     fileInput.addEventListener("change", async () => {
         document.getElementById("popup_background").classList.remove("hidden");
 
-        const file = fileInput.files[0];
+        file = fileInput.files[0];
         if (!file) return;
         if (file.type !== "image/jpeg") {
             alert("Only JPEG images are allowed.");
@@ -200,7 +204,7 @@
             .getElementById("resize_photo_dialouge")
             .classList.remove("hidden");
 
-        var image = URL.createObjectURL(file);
+        image = URL.createObjectURL(file);
         const bitmap = await createImageBitmap(file);
 
         var new_profile_image = document.getElementById("new_profile_image");
@@ -213,6 +217,12 @@
             bitmap.height + "px",
         );
         return;
+    });
+
+    confirm_change.addEventListener("click", async () => {
+        document
+            .getElementById("resize_photo_dialouge")
+            .classList.add("hidden");
 
         const formData = new FormData();
         formData.append("photo", file);

static/profile_page.css

@@ -156,27 +156,11 @@
 
 #resize_photo_box {
     background-color: black;
+    width: 100px;
+    height: 100px;
+
     position: absolute;
-    opacity: 40%;
-    width: var(--img-width);
-    height: var(--img-height);
-
-    --percent: 0.5;
-    --smalled-dim: min(var(--img-width), var(--img-height));
-
-    --smaller-pixel: calc((0.5 - (var(--percent)) / 2) * var(--smalled-dim));
-    --larger-pixel: calc((0.5 + (var(--percent)) / 2) * var(--smalled-dim));
-
-    clip-path: polygon(
-        0% 0%,
-        0% 100%,
-        var(--smaller-pixel) 100%,
-        var(--smaller-pixel) var(--smaller-pixel),
-        var(--larger-pixel) var(--smaller-pixel),
-        var(--larger-pixel) var(--larger-pixel),
-        var(--smaller-pixel) var(--larger-pixel),
-        var(--smaller-pixel) 100%,
-        100% 100%,
-        100% 0%
-    );
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
 }