Koha9/PlexPlaylistSync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5 from Koha9/codex/add-grayout-and-strikethrough-for-user-and-password

Browse Source 
UI tweak for token login
This commit is contained in:
Koha9 2025-07-08 19:56:41 +09:00 committed by GitHub
commit 4003fd5bc1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/templates/login.html
View File

@ -6,11 +6,11 @@
<h2>🔐 登录信息</h2> <h2>🔐 登录信息</h2>
<form method="post" action="/login"> <form method="post" action="/login">
<div class="mb-3"> <div class="mb-3">
<label for="user" class="form-label">用户名</label> <label for="user" class="form-label" id="user-label">用户名</label>
<input type="text" class="form-control" id="user" name="user"> <input type="text" class="form-control" id="user" name="user">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="pw" class="form-label">密码</label> <label for="pw" class="form-label" id="pw-label">密码</label>
<input type="password" class="form-control" id="pw" name="pw"> <input type="password" class="form-control" id="pw" name="pw">
</div> </div>
<div class="mb-3"> <div class="mb-3">
@ -38,4 +38,31 @@
{% if message %} {% if message %}
<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 %}
{% endblock %} <script>
document.addEventListener('DOMContentLoaded', () => {
const tokenInput = document.getElementById('token');
const inputs = [document.getElementById('user'), document.getElementById('pw')];
const labels = [document.getElementById('user-label'), document.getElementById('pw-label')];
const fieldClasses = ['bg-body-secondary', 'text-body-secondary', 'text-decoration-line-through'];
function toggleCredFields() {
const inactive = tokenInput.value.trim() !== '';
inputs.forEach(el => {
el.readOnly = inactive;
el.tabIndex = inactive ? -1 : 0;
el.style.pointerEvents = inactive ? 'none' : '';
if (inactive && document.activeElement === el) {
el.blur();
}
fieldClasses.forEach(cls => el.classList.toggle(cls, inactive));
});
labels.forEach(el => {
['text-decoration-line-through', 'text-body-secondary'].forEach(cls => el.classList.toggle(cls, inactive));
});
}
tokenInput.addEventListener('input', toggleCredFields);
toggleCredFields();
});
</script>
{% endblock %}