move all files to images folder

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.20+** installed on your machine.
-*   Access to an **FreeIPA Server**.
-*   A Service Account (Bind DN) with permission to search users and modify the `jpegPhoto` attribute.
+*   **Go 1.26+** installed on your machine.
+*   Access to a **FreeIPA Server**.
+*   A Service Account with permission to search 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>`.
-
-## 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.
+    The application will be available at `http://localhost:<port>`.
 
 ## 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")
 	}

src/pages/login_page.html

@@ -28,9 +28,16 @@
 
     <div>
         <label class="input_label">Password</label><br />
-        <input type="password" name="password" placeholder="" required />
+        <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

@@ -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 static_center hidden">
+    <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">
@@ -27,35 +36,44 @@
 
     <div>
         <label class="input_label">Current password</label><br />
-        <input
-            type="password"
-            id="current_password"
-            name="current_password"
-            placeholder=""
-            required
-        />
+        <div class="password_box">
+            <input
+                type="password"
+                id="current_password"
+                name="current_password"
+                placeholder=""
+                required
+            />
+            <button type="button" class="show_password_toggle closed"></button>
+        </div>
     </div>
 
     <div>
         <label class="input_label">New password</label><br />
-        <input
-            type="password"
-            id="new_password"
-            name="new_password"
-            placeholder=""
-            required
-        />
+        <div class="password_box">
+            <input
+                type="password"
+                id="new_password"
+                name="new_password"
+                placeholder=""
+                required
+            />
+            <button type="button" class="show_password_toggle closed"></button>
+        </div>
     </div>
 
     <div>
         <label class="input_label">New password (repeat)</label><br />
-        <input
-            type="password"
-            id="new_password_repeat"
-            name="new_password_repeat"
-            placeholder=""
-            required
-        />
+        <div class="password_box">
+            <input
+                type="password"
+                id="new_password_repeat"
+                name="new_password_repeat"
+                placeholder=""
+                required
+            />
+            <button type="button" class="show_password_toggle closed"></button>
+        </div>
     </div>
 
     <div>
@@ -70,6 +88,16 @@
         </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>
 
@@ -93,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>
@@ -197,3 +225,8 @@
     src="/static/javascript/handle_password_change.js"
     type="text/javascript"
 ></script>
+
+<script
+    src="/static/javascript/show_password.js"
+    type="text/javascript"
+></script>

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

@@ -16,8 +16,11 @@
     --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: #efe943;
+    --password-strength-medium: var(--warning-border-yellow);
     --password-strength-strong: #43ef6b;
 
     font-family: "Inter", sans-serif;
@@ -43,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);
@@ -51,6 +58,10 @@ input {
     border-radius: 6px;
 }
 
+input:focus {
+    outline: 2px solid var(--primary-accent);
+}
+
 input::placeholder {
     color: var(--text-muted);
 }
@@ -74,6 +85,47 @@ 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;
+    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;
 }