From 78696f2f1000dd8715b76a865ee95da564185d0c Mon Sep 17 00:00:00 2001
From: lumpy <lumpy72006@gmail.com>
Date: Fri, 16 Jan 2026 16:14:04 +0100
Subject: [PATCH 1/4] add password visibility toggle

---
 src/adminui/templates/auth/login.html | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/adminui/templates/auth/login.html b/src/adminui/templates/auth/login.html
index 6a61642..b16e7a5 100644
--- a/src/adminui/templates/auth/login.html
+++ b/src/adminui/templates/auth/login.html
@@ -4,6 +4,7 @@
 {% block title %}Sign into Kiwix Admin{% endblock %}
 
 {% block head %}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 <style type="text/css">
 		main header {
 			margin-bottom: .5em;
@@ -73,7 +74,12 @@
 					</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">
+						<input type="password" id="password-input" class="form-control{% if is_incorrect %} is-invalid{% endif %}" name="password" aria-describedby="credentialsFeedback">
+	
+						<button class="btn btn-outline-secondary" type="button" id="toggle-password">
+							<i class="fa-solid fa-eye"></i>
+						</button>
+
 						{% if is_incorrect and message_content %}<div id="credentialsFeedback" class="invalid-feedback">{{ message_content }}</div>{% endif %}
 					</div>
 					<div class="d-flex flex-row-reverse">
@@ -82,4 +88,20 @@
 			</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>
+
+<script>
+    const togglePassword = document.querySelector('#toggle-password');
+    const password = document.querySelector('#password-input');
+
+    togglePassword.addEventListener('click', function (e) {
+        // toggle the type attribute
+        const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
+        password.setAttribute('type', type);
+        
+        // toggle the eye icon
+        const icon = this.querySelector('i');
+        icon.classList.toggle('fa-eye');
+        icon.classList.toggle('fa-eye-slash');
+    });
+</script>
 {% endblock %}

From 416c51d7f29a47ef335a8c23b42db5408a9f8107 Mon Sep 17 00:00:00 2001
From: lumpy <lumpy72006@gmail.com>
Date: Fri, 16 Jan 2026 17:27:55 +0100
Subject: [PATCH 2/4] Replace CDN with inline SVGs for offline support

---
 src/adminui/templates/auth/login.html | 44 ++++++++++++++++++++-------
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/adminui/templates/auth/login.html b/src/adminui/templates/auth/login.html
index b16e7a5..e5be4cb 100644
--- a/src/adminui/templates/auth/login.html
+++ b/src/adminui/templates/auth/login.html
@@ -4,7 +4,6 @@
 {% block title %}Sign into Kiwix Admin{% endblock %}
 
 {% block head %}
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 <style type="text/css">
 		main header {
 			margin-bottom: .5em;
@@ -57,6 +56,16 @@
 			--bs-link-hover-color-rgb: 227,130,14;
 			text-decoration: none;
 		}
+
+		#toggle-password {
+			border: none;
+			background: transparent;
+		}
+
+		.items-center {
+			display: flex;
+			align-items: center;
+		}
 	</style>
 	{% endblock %}
 
@@ -72,14 +81,21 @@
 						<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">
+					<div class="mb-3 items-center">
 						<label class="form-label" for="password">Password</label>
 						<input type="password" id="password-input" class="form-control{% if is_incorrect %} is-invalid{% endif %}" name="password" aria-describedby="credentialsFeedback">
 	
 						<button class="btn btn-outline-secondary" type="button" id="toggle-password">
-							<i class="fa-solid fa-eye"></i>
+						    <svg id="eye-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+							<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
+							<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z"/>
+						    </svg>
+						    <svg id="eye-slash-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+							<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
+							<path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
+							<path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
+						    </svg>
 						</button>
-
 						{% if is_incorrect and message_content %}<div id="credentialsFeedback" class="invalid-feedback">{{ message_content }}</div>{% endif %}
 					</div>
 					<div class="d-flex flex-row-reverse">
@@ -90,18 +106,24 @@
 		<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>
 
 <script>
-    const togglePassword = document.querySelector('#toggle-password');
+    const toggleButton = document.querySelector('#toggle-password');
     const password = document.querySelector('#password-input');
+    const eyeIcon = document.querySelector('#eye-icon');
+    const eyeSlashIcon = document.querySelector('#eye-slash-icon');
 
-    togglePassword.addEventListener('click', function (e) {
-        // toggle the type attribute
+    toggleButton.addEventListener('click', function (e) {
+        // Toggle the password visibility
         const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
         password.setAttribute('type', type);
         
-        // toggle the eye icon
-        const icon = this.querySelector('i');
-        icon.classList.toggle('fa-eye');
-        icon.classList.toggle('fa-eye-slash');
+        // Toggle the SVG icons
+        if (type === 'text') {
+            eyeIcon.style.display = 'none';
+            eyeSlashIcon.style.display = 'block';
+        } else {
+            eyeIcon.style.display = 'block';
+            eyeSlashIcon.style.display = 'none';
+        }
     });
 </script>
 {% endblock %}

From 136c6309e66e74c90a55a16e5d8207276100c313 Mon Sep 17 00:00:00 2001
From: lumpy <lumpy72006@gmail.com>
Date: Wed, 21 Jan 2026 14:34:22 +0100
Subject: [PATCH 3/4] fix layout and hover visibility

---
 src/adminui/templates/auth/login.html | 42 +++++++++++----------------
 1 file changed, 17 insertions(+), 25 deletions(-)

diff --git a/src/adminui/templates/auth/login.html b/src/adminui/templates/auth/login.html
index e5be4cb..fa62c13 100644
--- a/src/adminui/templates/auth/login.html
+++ b/src/adminui/templates/auth/login.html
@@ -56,16 +56,6 @@
 			--bs-link-hover-color-rgb: 227,130,14;
 			text-decoration: none;
 		}
-
-		#toggle-password {
-			border: none;
-			background: transparent;
-		}
-
-		.items-center {
-			display: flex;
-			align-items: center;
-		}
 	</style>
 	{% endblock %}
 
@@ -81,22 +71,24 @@
 						<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 items-center">
+					<div class="mb-3">
 						<label class="form-label" for="password">Password</label>
-						<input type="password" id="password-input" class="form-control{% if is_incorrect %} is-invalid{% endif %}" name="password" aria-describedby="credentialsFeedback">
-	
-						<button class="btn btn-outline-secondary" type="button" id="toggle-password">
-						    <svg id="eye-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-							<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
-							<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z"/>
-						    </svg>
-						    <svg id="eye-slash-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-							<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
-							<path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
-							<path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
-						    </svg>
-						</button>
-						{% if is_incorrect and message_content %}<div id="credentialsFeedback" class="invalid-feedback">{{ message_content }}</div>{% endif %}
+						<div class="input-group">
+							<input type="password" id="password-input" class="form-control{% if is_incorrect %} is-invalid{% endif %}" name="password" aria-describedby="credentialsFeedback">
+		
+							<button class="btn btn-outline-secondary" type="button" id="toggle-password">
+							    <svg id="eye-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+								<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
+								<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z"/>
+							    </svg>
+							    <svg id="eye-slash-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+								<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
+								<path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
+								<path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
+							    </svg>
+							</button>
+							{% if is_incorrect and message_content %}<div id="credentialsFeedback" class="invalid-feedback">{{ message_content }}</div>{% endif %}
+						</div>
 					</div>
 					<div class="d-flex flex-row-reverse">
 						<input type="submit" class="btn btn-primary" value="Sign-in" />

From 1fa98d362345c106d5fe4e95a1073ecc02f4a029 Mon Sep 17 00:00:00 2001
From: lumpy <lumpy72006@gmail.com>
Date: Wed, 21 Jan 2026 15:20:50 +0100
Subject: [PATCH 4/4] Refactor: extract password toggle to macro and put SVGs
 in files

---
 src/adminui/templates/auth/login.html     | 58 +++++++++--------------
 src/adminui/templates/icons/eye-slash.svg |  5 ++
 src/adminui/templates/icons/eye.svg       |  4 ++
 src/adminui/templates/macros.html         | 20 ++++++++
 4 files changed, 51 insertions(+), 36 deletions(-)
 create mode 100644 src/adminui/templates/icons/eye-slash.svg
 create mode 100644 src/adminui/templates/icons/eye.svg
 create mode 100644 src/adminui/templates/macros.html

diff --git a/src/adminui/templates/auth/login.html b/src/adminui/templates/auth/login.html
index fa62c13..7fcecbd 100644
--- a/src/adminui/templates/auth/login.html
+++ b/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,51 +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>
-						<div class="input-group">
-							<input type="password" id="password-input" class="form-control{% if is_incorrect %} is-invalid{% endif %}" name="password" aria-describedby="credentialsFeedback">
-		
-							<button class="btn btn-outline-secondary" type="button" id="toggle-password">
-							    <svg id="eye-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-								<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
-								<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z"/>
-							    </svg>
-							    <svg id="eye-slash-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-								<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
-								<path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
-								<path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
-							    </svg>
-							</button>
-							{% if is_incorrect and message_content %}<div id="credentialsFeedback" class="invalid-feedback">{{ message_content }}</div>{% endif %}
-						</div>
-					</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>
-    const toggleButton = document.querySelector('#toggle-password');
-    const password = document.querySelector('#password-input');
-    const eyeIcon = document.querySelector('#eye-icon');
-    const eyeSlashIcon = document.querySelector('#eye-slash-icon');
+    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');
 
-    toggleButton.addEventListener('click', function (e) {
-        // Toggle the password visibility
-        const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
-        password.setAttribute('type', type);
-        
-        // Toggle the SVG icons
-        if (type === 'text') {
-            eyeIcon.style.display = 'none';
-            eyeSlashIcon.style.display = 'block';
-        } else {
-            eyeIcon.style.display = 'block';
-            eyeSlashIcon.style.display = 'none';
-        }
+            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 %}
diff --git a/src/adminui/templates/icons/eye-slash.svg b/src/adminui/templates/icons/eye-slash.svg
new file mode 100644
index 0000000..cf2e54d
--- /dev/null
+++ b/src/adminui/templates/icons/eye-slash.svg
@@ -0,0 +1,5 @@
+<svg class="icon-hide" style="display: none;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+    <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
+    <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
+    <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
+</svg>
diff --git a/src/adminui/templates/icons/eye.svg b/src/adminui/templates/icons/eye.svg
new file mode 100644
index 0000000..3be9488
--- /dev/null
+++ b/src/adminui/templates/icons/eye.svg
@@ -0,0 +1,4 @@
+<svg class="icon-show" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+    <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
+    <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z"/>
+</svg>
diff --git a/src/adminui/templates/macros.html b/src/adminui/templates/macros.html
new file mode 100644
index 0000000..73f06ea
--- /dev/null
+++ b/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 %}