refactor login template

This commit is contained in:
Koha9 2025-07-08 19:54:32 +09:00
parent 77c38cd17d
commit afd4981ba7

View File

@ -39,29 +39,25 @@
<div class="alert alert-{{ 'success' if success else 'danger' }} mt-4">{{ message }}</div> <div class="alert alert-{{ 'success' if success else 'danger' }} mt-4">{{ message }}</div>
{% endif %} {% endif %}
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', () => {
const tokenInput = document.getElementById('token'); const tokenInput = document.getElementById('token');
const userInput = document.getElementById('user'); const inputs = [document.getElementById('user'), document.getElementById('pw')];
const pwInput = document.getElementById('pw'); const labels = [document.getElementById('user-label'), document.getElementById('pw-label')];
const userLabel = document.getElementById('user-label'); const fieldClasses = ['bg-body-secondary', 'text-body-secondary', 'text-decoration-line-through'];
const pwLabel = document.getElementById('pw-label');
function toggleCredFields() { function toggleCredFields() {
const hasToken = tokenInput.value.trim() !== ''; const inactive = tokenInput.value.trim() !== '';
[userInput, pwInput].forEach(el => { inputs.forEach(el => {
el.readOnly = hasToken; el.readOnly = inactive;
el.tabIndex = hasToken ? -1 : 0; el.tabIndex = inactive ? -1 : 0;
el.style.pointerEvents = hasToken ? 'none' : ''; el.style.pointerEvents = inactive ? 'none' : '';
if (hasToken && document.activeElement === el) { if (inactive && document.activeElement === el) {
el.blur(); el.blur();
} }
el.classList.toggle('bg-body-secondary', hasToken); fieldClasses.forEach(cls => el.classList.toggle(cls, inactive));
el.classList.toggle('text-decoration-line-through', hasToken);
el.classList.toggle('text-body-secondary', hasToken);
}); });
[userLabel, pwLabel].forEach(el => { labels.forEach(el => {
el.classList.toggle('text-decoration-line-through', hasToken); ['text-decoration-line-through', 'text-body-secondary'].forEach(cls => el.classList.toggle(cls, inactive));
el.classList.toggle('text-body-secondary', hasToken);
}); });
} }