refactor login template
This commit is contained in:
parent
77c38cd17d
commit
afd4981ba7
@ -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);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user