move all files to images folder

logged in

README.md

@@ -6,20 +6,20 @@ A simple, lightweight web application for managing user profile photos in a Free
 *   **LDAP Authentication**: Secure login with existing FreeIPA credentials.
 *   **Profile Management**: View user details (Display Name, Email).
 *   **Photo Upload**: Users can upload and update their profile picture (`jpegPhoto` attribute).
+*   **Change Password**: Users can change there password once logged in
 *   **Session Management**: Secure, cookie-based sessions with CSRF protection.
 *   **Customizable**: Configurable styling (logo, favicon) and LDAP settings.
 
 ## Prerequisites
-
+*   **Go 1.26+** installed on your machine.
-*   **Go 1.20+** installed on your machine.
+*   Access to a **FreeIPA Server**.
-*   Access to an **FreeIPA Server**.
+*   A Service Account with permission to search and modify the `jpegPhoto` attribute.
-*   A Service Account (Bind DN) with permission to search users and modify the `jpegPhoto` attribute.
 
 ## Setup & Installation
 
 1.  **Clone the Repository**
     ```bash
-    git clone https://git.astraltech.xyz/gawells/Self-Service-Dashboard
+    git clone https://git.astraltech.xyz/gawells/Self-Service-Dashboard.git
     cd Self-Service-Dashboard
     ```
 
@@ -30,7 +30,10 @@ A simple, lightweight web application for managing user profile photos in a Free
     ```
 
 5. **Edit config**
-    put in your config values for ldap, and whatevery styling guidelines you would want to use
+    Edit the config file
+    ```bash
+    nvim data/config.json
+    ``` 
 
 4.  **Install Dependencies**
     ```bash
@@ -41,15 +44,7 @@ A simple, lightweight web application for managing user profile photos in a Free
     ```bash
     go run ./src/main/
     ```
-    The application will be available at `http://<host>:<port>`.
+    The application will be available at `http://localhost:<port>`.
-
-## Directory Structure
-
-*   `src/`: Go source code (`main.go`, `ldap.go`, `session.go`, etc.).
-*   `src/pages/`: HTML templates for login and profile pages.
-*   `static/`: CSS files, images, and other static assets.
-*   `data/`: Configuration files and local assets (logos).
-*   `avatars/`: Stores cached user profile photos.
 
 ## License
 

src/components/profile_photo.go

@@ -33,7 +33,7 @@ var (
 )
 
 func ReadBlankPhoto() {
-	blank, err := helpers.ReadFile("static/blank_profile.jpg")
+	blank, err := helpers.ReadFile("static/images/blank_profile.jpg")
 	if err != nil {
 		logging.Fatal("Could not load blank profile image")
 	}
@@ -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)
+	fileExist, err := helpers.DoesFileExist(cleaned)
-
+	if err != nil {
-	if err == nil {
+		w.Write(blankPhotoData)
+		logging.Error(err.Error())
+		return
+	}
 	photoCreatedMutex.Lock()
-		if time.Since(photoCreatedTimestamp[username]) <= 5*time.Minute {
+	if fileExist && time.Since(photoCreatedTimestamp[username]) <= 5*time.Minute {
 		photoCreatedMutex.Unlock()
-			w.Write(value)
+		val, err := helpers.ReadFile(cleaned)
+		if err != nil {
+			logging.Error(err.Error())
+			w.Write(blankPhotoData)
+			return
+		}
+		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/login_page.html

@@ -28,9 +28,16 @@
 
     <div>
         <label class="input_label">Password</label><br />
+        <div class="password_box">
             <input type="password" name="password" placeholder="" required />
+            <button type="button" class="show_password_toggle closed"></button>
+        </div>
     </div>
     <button type="submit">Login</button>
 </form>
 
 <script src="/static/error/error.js" type="text/javascript"></script>
+<script
+    src="/static/javascript/show_password.js"
+    type="text/javascript"
+></script>

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">
+<div id="change_password_dialogue" class="card static_center hidden">
-    Change Password
+    <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">
@@ -26,6 +36,7 @@
 
     <div>
         <label class="input_label">Current password</label><br />
+        <div class="password_box">
             <input
                 type="password"
                 id="current_password"
@@ -33,10 +44,13 @@
                 placeholder=""
                 required
             />
+            <button type="button" class="show_password_toggle closed"></button>
+        </div>
     </div>
 
     <div>
         <label class="input_label">New password</label><br />
+        <div class="password_box">
             <input
                 type="password"
                 id="new_password"
@@ -44,10 +58,13 @@
                 placeholder=""
                 required
             />
+            <button type="button" class="show_password_toggle closed"></button>
+        </div>
     </div>
 
     <div>
         <label class="input_label">New password (repeat)</label><br />
+        <div class="password_box">
             <input
                 type="password"
                 id="new_password_repeat"
@@ -55,7 +72,31 @@
                 placeholder=""
                 required
             />
+            <button type="button" class="show_password_toggle closed"></button>
         </div>
+    </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>
+
+    <!--<div id="password_errors">
+        <div class="password_error">Error 1</div>
+        <div class="password_error">Error 2</div>
+    </div>
+
+    <div id="password_warnings">
+        <div class="password_error">Error 1</div>
+        <div class="password_error">Error 2</div>
+    </div>-->
 
     <button id="final_change_password_button">Change Password</button>
 </div>
@@ -80,7 +121,7 @@
 
                 <button id="edit_picture_button">
                     <img
-                        src="/static/crayon_icon.png"
+                        src="/static/images/crayon_icon.png"
                         id="edit_picture_image"
                     />
                 </button>
@@ -136,96 +177,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 +216,17 @@
     });
 </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>
+
+<script
+    src="/static/javascript/show_password.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/javascript/show_password.js

@@ -0,0 +1,22 @@
+const showPasswordButtons = document.getElementsByClassName(
+  "show_password_toggle",
+);
+
+for (const button of showPasswordButtons) {
+  button.addEventListener("click", function () {
+    const input = this.parentElement.querySelector(
+      "input[type='password'], input[type='text']",
+    );
+    if (!input) return;
+    const isHidden = input.type === "password";
+    input.type = isHidden ? "text" : "password";
+
+    if (isHidden) {
+      this.classList.add("open");
+      this.classList.remove("closed");
+    } else {
+      this.classList.remove("open");
+      this.classList.add("closed");
+    }
+  });
+}

static/profile_page.css

@@ -128,7 +128,31 @@
 }
 
 #close_password_dialogue {
-    width: fit-content;
+    display: inline-block;
+    aspect-ratio: 1 / 1;
     position: absolute;
     right: 2.5rem;
+    padding: 0px;
+    margin: 0px;
+    width: 30px;
+}
+
+#password_errors {
+    background-color: var(--error-red);
+    border-radius: 8px;
+    padding: 20px;
+    border-color: var(--error-border-red);
+    border-width: 2px;
+    border-style: solid;
+    color: var(--text-main);
+}
+
+#password_warnings {
+    background-color: var(--warning-yellow);
+    border-radius: 8px;
+    padding: 20px;
+    border-color: var(--warning-border-yellow);
+    border-width: 2px;
+    border-style: solid;
+    color: var(--text-main);
 }

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,13 @@
     --error-red: #ef4444; /* Professional Red */
     --error-border-red: #e22d2d;
 
+    --warning-yellow: #fef08a;
+    --warning-border-yellow: #fde047;
+
+    --password-strength-weak: var(--error-red);
+    --password-strength-medium: var(--warning-border-yellow);
+    --password-strength-strong: #43ef6b;
+
     font-family: "Inter", sans-serif;
     -webkit-font-smoothing: antialiased;
 }
@@ -39,6 +46,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 +58,10 @@ input {
     border-radius: 6px;
 }
 
+input:focus {
+    outline: 2px solid var(--primary-accent);
+}
+
 input::placeholder {
     color: var(--text-muted);
 }
@@ -70,6 +85,47 @@ input::placeholder {
     height: 100%;
     z-index: 9999; /* higher = on top */
 
-    background-color: black;
+    backdrop-filter: blur(4px);
-    opacity: 10%;
+    background-color: rgba(0, 0, 0, 0.3);
+    pointer-events: all;
+}
+
+.dialouge_title {
+    font-size: 20px;
+    margin-bottom: 0px;
+    color: var(--text-main) !important;
+}
+
+.password_box {
+    position: relative;
+    display: inline-block;
+}
+
+.show_password_toggle {
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    right: 5px;
+    bottom: 50%;
+    transform: translateY(50%);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: rgba(0, 0, 0, 0);
+}
+
+.show_password_toggle.closed {
+    background-image: url("/static/images/closed_eye.png");
+}
+
+.show_password_toggle.open {
+    background-image: url("/static/images/filled_eye.png");
+}
+
+.show_password_toggle:hover {
+    background-color: rgba(0, 0, 0, 0);
+}
+
+.show_password_toggle:focus {
+    outline: none !important;
 }