blur background when changing password

src/pages/profile_page.html

@@ -11,13 +11,22 @@
 <link rel="stylesheet" href="static/profile_page.css" />
 <link rel="stylesheet" href="static/progress_bar.css" />
 
-<div id="popup_background" class="blocked"></div>
-
-<div id="change_password_dialogue" class="card static_center">
-    Change Password
+<div id="popup_background" class="blocked hidden"></div>
 
+<div id="change_password_dialogue" class="card hidden static_center">
+    <div class="dialouge_title">Change Password</div>
     <button id="close_password_dialogue">X</button>
 
+    <hr
+        style="
+            border: 0;
+            border-top: 1px solid var(--border-subtle);
+            margin: 20px 0;
+            margin-bottom: 0px;
+            margin-top: 0px;
+        "
+    />
+
     <div id="password_error" class="error hidden">
         <div id="password_text"></div>
         <button id="password_error_close_button" class="close_error_button">

static/javascript/handle_password_change.js

@@ -7,11 +7,24 @@ document
 
 const popup_botton = document.getElementById("change_password_button");
 
+const currentPasswordButton = document.getElementById("current_password"),
+  newPasswordButton = document.getElementById("new_password"),
+  newPasswordRepeatButton = document.getElementById("new_password_repeat");
+
+const strengh_label = document.getElementById("strengh-label");
+const password_progress = document.getElementById("password-progress");
+
 popup_botton.addEventListener("click", () => {
   document.getElementById("popup_background").classList.remove("hidden");
   document
     .getElementById("change_password_dialogue")
     .classList.remove("hidden");
+
+  currentPasswordButton.value = "";
+  newPasswordButton.value = "";
+  newPasswordRepeatButton.value = "";
+  strengh_label.innerText = "Strength: Weak";
+  password_progress.style.width = "0%";
 });
 
 const changePasswordButton = document.getElementById(
@@ -25,26 +38,23 @@ function displayError(errorText) {
 }
 
 changePasswordButton.addEventListener("click", () => {
-  if (document.getElementById("current_password").value === "") {
+  if (currentPasswordButton.value === "") {
     displayError("Please enter current password");
     return;
   }
 
-  if (document.getElementById("new_password").value === "") {
+  if (newPasswordButton.value === "") {
     displayError("No value for new password");
     return;
   }
 
-  if (document.getElementById("new_password_repeat").value === "") {
+  if (newPasswordRepeatButton.value === "") {
     displayError("Please repeat new password");
     return;
   }
 
-  if (
-    document.getElementById("new_password").value !==
-    document.getElementById("new_password_repeat").value
-  ) {
-    displayError("New password and new password repeat do not match");
+  if (newPasswordButton.value !== newPasswordRepeatButton.value) {
+    displayError("New passwords do not match");
     return;
   }
 
@@ -53,18 +63,9 @@ changePasswordButton.addEventListener("click", () => {
     "csrf_token",
     document.getElementById("csrf_token_storage").value,
   );
-  formData.append(
-    "old_password",
-    document.getElementById("current_password").value,
-  );
-  formData.append(
-    "new_password",
-    document.getElementById("new_password").value,
-  );
-  formData.append(
-    "new_password_repeat",
-    document.getElementById("new_password_repeat").value,
-  );
+  formData.append("old_password", currentPasswordButton.value);
+  formData.append("new_password", newPasswordButton.value);
+  formData.append("new_password_repeat", newPasswordRepeatButton.value);
 
   fetch("/change-password", {
     method: "POST",
@@ -90,9 +91,6 @@ changePasswordButton.addEventListener("click", () => {
 
 document.getElementById("new_password").addEventListener("input", () => {
   score = EvaluatePassword(document.getElementById("new_password").value).score;
-  strengh_label = document.getElementById("strengh-label");
-  password_progress = document.getElementById("password-progress");
-
   password_progress.style.width = score + "%";
 
   if (score <= 40) {

static/profile_page.css

@@ -128,7 +128,11 @@
 }
 
 #close_password_dialogue {
-    width: fit-content;
+    display: inline-block;
+    aspect-ratio: 1 / 1;
     position: absolute;
     right: 2.5rem;
+    padding: 0px;
+    margin: 0px;
+    width: 30px;
 }

static/style.css

@@ -43,6 +43,10 @@ button:hover {
     background-color: var(--primary-hover);
 }
 
+button:focus {
+    outline: 2px solid var(--primary-accent);
+}
+
 input {
     padding: 12px;
     background-color: var(--bg-input);
@@ -51,6 +55,10 @@ input {
     border-radius: 6px;
 }
 
+input:focus {
+    outline: 2px solid var(--primary-accent);
+}
+
 input::placeholder {
     color: var(--text-muted);
 }
@@ -74,6 +82,12 @@ input::placeholder {
     height: 100%;
     z-index: 9999; /* higher = on top */
 
-    background-color: black;
-    opacity: 10%;
+    backdrop-filter: blur(4px);
+    background-color: rgba(0, 0, 0, 0.3);
+    pointer-events: all;
+}
+
+.dialouge_title {
+    font-size: 20px;
+    margin-bottom: 0px;
 }