add password visibility toggle

Author: lumpy72006

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 %}