Skip to content

password visibility toggle #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lumpy72006 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

password visibility toggle #6

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
78696f2
add password visibility toggle
lumpy72006 Jan 16, 2026
416c51d
Replace CDN with inline SVGs for offline support
lumpy72006 Jan 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 46 additions & 2 deletions src/adminui/templates/auth/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,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 %}

Expand All @@ -71,9 +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" 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">
<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">
Expand All @@ -82,4 +104,26 @@
</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 toggleButton = document.querySelector('#toggle-password');
const password = document.querySelector('#password-input');
const eyeIcon = document.querySelector('#eye-icon');
const eyeSlashIcon = document.querySelector('#eye-slash-icon');

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';
}
});
</script>
{% endblock %}