password visibility toggle

src/adminui/templates/auth/login.html

@@ -1,5 +1,8 @@
 {% extends "raw_base.html" %}
 
+{# import the macro file to use the password function #}
+{% from "macros.html" import password_input %}
+
 {% block theme %}light{% endblock %}
 {% block title %}Sign into Kiwix Admin{% endblock %}
 
@@ -71,15 +74,34 @@
 						<label class="form-label" for="username">Username</label>
 						<input type="text"  class="form-control{% if is_incorrect %} is-invalid{% endif %}" name="username" placeholder="Usually “admin”" />
 					</div>
-					<div class="mb-3">
-						<label class="form-label" for="password">Password</label>
-						<input type="password" class="form-control{% if is_incorrect %} is-invalid{% endif %}" name="password" aria-describedby="credentialsFeedback">
-						{% if is_incorrect and message_content %}<div id="credentialsFeedback" class="invalid-feedback">{{ message_content }}</div>{% endif %}
-					</div>
+					{{ password_input(name="password", error=message_content if is_incorrect else None) }}
 					<div class="d-flex flex-row-reverse">
 						<input type="submit" class="btn btn-primary" value="Sign-in" />
 					</div>
 			</form>
 		</div>
 		<div class="mt-1 mb-1 p-3"><a class="returnlink" href="http://{{ ctx.fqdn }}"><i class="fa-solid fa-arrow-left"></i> Return to the Hotspot</a></div>
 {% endblock %}
+
+{% block javascript %}
+<script>
+    document.querySelectorAll('.password-toggle').forEach(button => {
+        button.addEventListener('click', function () {
+            // Find the input that lives in the same group as this button
+            const input = this.parentElement.querySelector('.password-input');
+            const iconShow = this.querySelector('.icon-show');
+            const iconHide = this.querySelector('.icon-hide');
+
+            if (input.getAttribute('type') === 'password') {
+                input.setAttribute('type', 'text');
+                iconShow.style.display = 'none';
+                iconHide.style.display = 'block';
+            } else {
+                input.setAttribute('type', 'password');
+                iconShow.style.display = 'block';
+                iconHide.style.display = 'none';
+            }
+        });
+    });
+</script>
+{% endblock %}

src/adminui/templates/macros.html

@@ -0,0 +1,20 @@
+{% macro password_input(name, label="Password", placeholder="", error=None) %}
+<div class="mb-3">
+    <label class="form-label" for="{{ name }}">{{ label }}</label>
+    <div class="input-group">
+        <input type="password" 
+               class="form-control password-input {% if error %}is-invalid{% endif %}" 
+               name="{{ name }}" 
+               id="{{ name }}"
+               placeholder="{{ placeholder }}"
+               {% if error %}aria-describedby="{{ name }}Feedback"{% endif %}>
+
+        <button class="btn btn-outline-secondary password-toggle" type="button">
+            {% include "icons/eye.svg" %}
+            {% include "icons/eye-slash.svg" %}
+        </button>
+
+        {% if error %}<div id="{{ name }}Feedback" class="invalid-feedback">{{ error }}</div>{% endif %}
+    </div>
+</div>
+{% endmacro %}