blur background when changing password

logged in

src/components/profile_photo.go

@@ -98,7 +98,11 @@ func UploadPhotoHandler(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	userDN := fmt.Sprintf("uid=%s,cn=users,cn=accounts,%s", sessionData.UserID, BaseDN)
-	LDAPServer.ModifyAttribute(ServiceUserBindDN, ServiceUserPassword, userDN, "jpegphoto", []string{string(data)})
+	err = LDAPServer.ModifyAttribute(ServiceUserBindDN, ServiceUserPassword, userDN, "jpegphoto", []string{string(data)})
+	if err != nil {
+		logging.Error(err.Error())
+		return
+	}
 	CreateUserPhoto(sessionData.UserID, data)
 }
 
@@ -112,17 +116,25 @@ func AvatarHandler(w http.ResponseWriter, r *http.Request) {
 
 	filePath := fmt.Sprintf("./avatars/%s.jpeg", username)
 	cleaned := filepath.Clean(filePath)
-	value, err := helpers.ReadFile(cleaned)
-
-	if err == nil {
-		photoCreatedMutex.Lock()
-		if time.Since(photoCreatedTimestamp[username]) <= 5*time.Minute {
-			photoCreatedMutex.Unlock()
-			w.Write(value)
+	fileExist, err := helpers.DoesFileExist(cleaned)
+	if err != nil {
+		w.Write(blankPhotoData)
+		logging.Error(err.Error())
+		return
+	}
+	photoCreatedMutex.Lock()
+	if fileExist && time.Since(photoCreatedTimestamp[username]) <= 5*time.Minute {
+		photoCreatedMutex.Unlock()
+		val, err := helpers.ReadFile(cleaned)
+		if err != nil {
+			logging.Error(err.Error())
+			w.Write(blankPhotoData)
 			return
 		}
-		photoCreatedMutex.Unlock()
+		w.Write(val)
+		return
 	}
+	photoCreatedMutex.Unlock()
 
 	userSearch, err := LDAPServer.SerchServer(
 		ServiceUserBindDN, ServiceUserPassword,
@@ -130,10 +142,16 @@ func AvatarHandler(w http.ResponseWriter, r *http.Request) {
 		fmt.Sprintf("(&(objectClass=inetOrgPerson)(uid=%s))", ldap.LDAPEscapeFilter(username)),
 		[]string{"jpegphoto"},
 	)
-	if err == nil || userSearch.EntryCount() == 0 {
+	if err != nil {
+		logging.Error(err.Error())
 		w.Write(blankPhotoData)
 		return
 	}
+	if userSearch.EntryCount() == 0 {
+		w.Write(blankPhotoData)
+		return
+	}
+
 	entry := userSearch.GetEntry(0)
 	bytes := entry.GetRawAttributeValue("jpegphoto")
 	if len(bytes) == 0 {
@@ -142,5 +160,6 @@ func AvatarHandler(w http.ResponseWriter, r *http.Request) {
 	} else {
 		w.Write(bytes)
 		CreateUserPhoto(username, bytes)
+		return
 	}
 }

src/helpers/helpers.go

@@ -52,6 +52,17 @@ func CreateFile(path string) (*os.File, error) {
 	return file, nil
 }
 
+func DoesFileExist(path string) (bool, error) {
+	_, err := os.Stat(path)
+	if err == nil {
+		return true, nil
+	}
+	if os.IsNotExist(err) {
+		return false, nil
+	}
+	return false, err
+}
+
 func HandleFunc(path string, handler func(http.ResponseWriter, *http.Request)) {
 	logging.Infof("Handling %s", path)
 	http.HandleFunc(path, handler)

src/pages/profile_page.html

@@ -9,14 +9,24 @@
 <link rel="stylesheet" href="static/card.css" />
 <link rel="stylesheet" href="static/error/error.css" />
 <link rel="stylesheet" href="static/profile_page.css" />
+<link rel="stylesheet" href="static/progress_bar.css" />
 
 <div id="popup_background" class="blocked hidden"></div>
 
-<div id="change_password_dialogue" class="hidden card static_center">
-    Change Password
-
+<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">
@@ -57,6 +67,18 @@
         />
     </div>
 
+    <div>
+        <label class="input_label" id="strengh-label">Strength: Weak</label
+        ><br />
+        <div class="progress-bar">
+            <div
+                class="progress-bar-progress"
+                id="password-progress"
+                style="width: 0%"
+            ></div>
+        </div>
+    </div>
+
     <button id="final_change_password_button">Change Password</button>
 </div>
 
@@ -136,96 +158,6 @@
     });
 </script>
 
-<script type="text/javascript">
-    const popup_botton = document.getElementById("change_password_button");
-
-    popup_botton.addEventListener("click", () => {
-        document.getElementById("popup_background").classList.remove("hidden");
-        document
-            .getElementById("change_password_dialogue")
-            .classList.remove("hidden");
-    });
-</script>
-
-<script type="text/javascript">
-    const changePasswordButton = document.getElementById(
-        "final_change_password_button",
-    );
-
-    function displayError(errorText) {
-        document.getElementById("password_error").classList.remove("hidden");
-        document.getElementById("password_text").innerText =
-            "⚠️ " + errorText + ".";
-        return;
-    }
-
-    changePasswordButton.addEventListener("click", () => {
-        if (document.getElementById("current_password").value === "") {
-            displayError("Please enter current password");
-            return;
-        }
-
-        if (document.getElementById("new_password").value === "") {
-            displayError("No value for new password");
-            return;
-        }
-
-        if (document.getElementById("new_password_repeat").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");
-            return;
-        }
-
-        const formData = new FormData();
-        formData.append(
-            "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,
-        );
-
-        fetch("/change-password", {
-            method: "POST",
-            body: formData,
-        })
-            .then(async (res) => {
-                const data = await res.json();
-                if (!res.ok) {
-                    throw new Error(data.error || "Request failed");
-                }
-                return data;
-            })
-            .then((data) => {
-                document
-                    .getElementById("change_password_dialogue")
-                    .classList.add("hidden");
-                document
-                    .getElementById("popup_background")
-                    .classList.add("hidden");
-            })
-            .catch((err) => {
-                displayError(err.message);
-            });
-    });
-</script>
-
 <script type="text/javascript">
     var currentPreviewURL = null;
 
@@ -265,15 +197,12 @@
     });
 </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>
+<script
+    src="/static/javascript/password_strength.js"
+    type="text/javascript"
+></script>
+<script
+    src="/static/javascript/handle_password_change.js"
+    type="text/javascript"
+></script>

src/session/session_errors.go

@@ -0,0 +1,7 @@
+package session
+
+import "errors"
+
+var ErrSessionNotFound = errors.New("session not found")
+var ErrSessionAlreadyExists = errors.New("session already exists")
+var ErrSessionExpired = errors.New("session expired")

src/session/session_in_memory.go

@@ -1,7 +1,6 @@
 package session
 
 import (
-	"errors"
 	"sync"
 	"time"
 
@@ -9,10 +8,6 @@ import (
 	"astraltech.xyz/accountmanager/src/worker"
 )
 
-var ErrSessionNotFound = errors.New("session not found")
-var ErrSessionAlreadyExists = errors.New("session already exists")
-var ErrSessionExpired = errors.New("session expired")
-
 type MemoryStore struct {
 	sessions map[string]*SessionData
 	lock     sync.RWMutex

static/javascript/handle_password_change.js

@@ -0,0 +1,106 @@
+document
+  .getElementById("close_password_dialogue")
+  .addEventListener("click", () => {
+    document.getElementById("change_password_dialogue").classList.add("hidden");
+    document.getElementById("popup_background").classList.add("hidden");
+  });
+
+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(
+  "final_change_password_button",
+);
+
+function displayError(errorText) {
+  document.getElementById("password_error").classList.remove("hidden");
+  document.getElementById("password_text").innerText = "⚠️ " + errorText + ".";
+  return;
+}
+
+changePasswordButton.addEventListener("click", () => {
+  if (currentPasswordButton.value === "") {
+    displayError("Please enter current password");
+    return;
+  }
+
+  if (newPasswordButton.value === "") {
+    displayError("No value for new password");
+    return;
+  }
+
+  if (newPasswordRepeatButton.value === "") {
+    displayError("Please repeat new password");
+    return;
+  }
+
+  if (newPasswordButton.value !== newPasswordRepeatButton.value) {
+    displayError("New passwords do not match");
+    return;
+  }
+
+  const formData = new FormData();
+  formData.append(
+    "csrf_token",
+    document.getElementById("csrf_token_storage").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",
+    body: formData,
+  })
+    .then(async (res) => {
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data.error || "Request failed");
+      }
+      return data;
+    })
+    .then((data) => {
+      document
+        .getElementById("change_password_dialogue")
+        .classList.add("hidden");
+      document.getElementById("popup_background").classList.add("hidden");
+    })
+    .catch((err) => {
+      displayError(err.message);
+    });
+});
+
+document.getElementById("new_password").addEventListener("input", () => {
+  score = EvaluatePassword(document.getElementById("new_password").value).score;
+  password_progress.style.width = score + "%";
+
+  if (score <= 40) {
+    strengh_label.innerText = "Strength: Weak";
+    password_progress.style.backgroundColor = "var(--password-strength-weak)";
+  } else if (score > 40 && score <= 70) {
+    strengh_label.innerText = "Strength: Medium";
+    password_progress.style.backgroundColor = "var(--password-strength-medium)";
+  } else if (score > 40 && score >= 70) {
+    strengh_label.innerText = "Strength: Strong";
+    password_progress.style.backgroundColor = "var(--password-strength-strong)";
+  }
+});

static/javascript/password_strength.js

@@ -0,0 +1,51 @@
+// build in evaluate password function
+// Errors: reasons why the FreeIPA server would reject the password
+// Suggestions: reasons the password should be made stronger
+// You can change this code to change how complexity is rated
+// Return values
+// Score: 0-100
+// Errors: A list of errors that would cause the server to reject the password
+// Suggestions: A list of suggestions to make the password stronger
+function EvaluatePassword(password) {
+  let score = 0;
+  let errors = [];
+  let suggestions = [];
+
+  const hasUpper = /[A-Z]/.test(password);
+  const hasLower = /[a-z]/.test(password);
+  const hasNumber = /[0-9]/.test(password);
+  const hasSpecial = /[^A-Za-z0-9]/.test(password);
+  const isLongEnough = password.length >= 8;
+
+  if (!isLongEnough) {
+    errors.push("Password must be at least 8 characters long.");
+  }
+  score += Math.min(password.length * 3, 60);
+  if (hasUpper) score += 10;
+  if (hasLower) score += 10;
+  if (hasNumber) score += 10;
+  if (hasSpecial) score += 10;
+  if (score < 100) {
+    if (password.length < 20) {
+      suggestions.push(
+        `Add ${20 - password.length} more characters to reach maximum length points.`,
+      );
+    }
+    if (!hasUpper) suggestions.push("Add an uppercase letter.");
+    if (!hasLower) suggestions.push("Add a lowercase letter.");
+    if (!hasNumber) suggestions.push("Add a number.");
+    if (!hasSpecial)
+      suggestions.push("Add a special character (e.g., !, @, #).");
+    if (score > 70 && score < 100) {
+      suggestions.push(
+        "Pro-tip: Use a full sentence (passphrase) to make it easier to remember and harder to crack.",
+      );
+    }
+  }
+
+  return {
+    score: Math.min(score, 100),
+    errors: errors,
+    suggestions: suggestions,
+  };
+}

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/progress_bar.css

@@ -0,0 +1,16 @@
+:root {
+    --progress-top: #becbd8;
+}
+
+.progress-bar {
+    width: 100%;
+    background-color: var(--bg-input);
+    height: 20px;
+    border-radius: 10px;
+}
+
+.progress-bar-progress {
+    background-color: var(--progress-top);
+    height: 20px;
+    border-radius: 10px;
+}

static/style.css

@@ -16,6 +16,10 @@
     --error-red: #ef4444; /* Professional Red */
     --error-border-red: #e22d2d;
 
+    --password-strength-weak: var(--error-red);
+    --password-strength-medium: #efe943;
+    --password-strength-strong: #43ef6b;
+
     font-family: "Inter", sans-serif;
     -webkit-font-smoothing: antialiased;
 }
@@ -39,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);
@@ -47,6 +55,10 @@ input {
     border-radius: 6px;
 }
 
+input:focus {
+    outline: 2px solid var(--primary-accent);
+}
+
 input::placeholder {
     color: var(--text-muted);
 }
@@ -70,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;
 }