move all files to images folder

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 />
+        <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

@@ -13,7 +13,7 @@
 
 <div id="popup_background" class="blocked hidden"></div>
 
-<div id="change_password_dialogue" class="card hidden static_center">
+<div id="change_password_dialogue" class="card static_center hidden">
     <div class="dialouge_title">Change Password</div>
     <button id="close_password_dialogue">X</button>
 
@@ -36,6 +36,7 @@
 
     <div>
         <label class="input_label">Current password</label><br />
+        <div class="password_box">
             <input
                 type="password"
                 id="current_password"
@@ -43,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"
@@ -54,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"
@@ -65,6 +72,8 @@
                 placeholder=""
                 required
             />
+            <button type="button" class="show_password_toggle closed"></button>
+        </div>
     </div>
 
     <div>
@@ -79,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>
 
@@ -102,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>
@@ -206,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/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

@@ -136,3 +136,23 @@
     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;
@@ -90,4 +93,39 @@ input::placeholder {
 .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;
 }