ux: improve login loading state, toast timing, tab label consistency, enable location filter

This commit is contained in:
2026-05-27 18:35:49 -04:00
parent da2a23f6da
commit b2ceac1594
2 changed files with 12 additions and 5 deletions
+12 -5
View File
@@ -1036,14 +1036,14 @@
<span class="dn-icon">📷</span> Add / Find Asset
</button>
<button class="dn-item" data-tab="tabAssets" onclick="navFromDrawer('tabAssets')">
<span class="dn-icon">📦</span> Asset List
<span class="dn-icon">📦</span> Assets
</button>
<button class="dn-item" data-tab="tabMap" onclick="navFromDrawer('tabMap')">
<span class="dn-icon">🗺️</span> Map
</button>
<div style="border-top:1px solid var(--border);margin:6px 16px;"></div>
<button class="dn-item" data-tab="tabNavigate" onclick="navFromDrawer('tabNavigate')">
<span class="dn-icon">🧭</span> Navigate
<span class="dn-icon">🧭</span> Nav
</button>
<button class="dn-item" data-tab="tabRoute" onclick="navFromDrawer('tabRoute')">
<span class="dn-icon">🗺️</span> Route
@@ -1356,7 +1356,7 @@
</div>
<div style="flex:1">
<div class="fp-label">Location</div>
<select id="filterLocation" class="input-field" onchange="onFilterChange()" disabled>
<select id="filterLocation" class="input-field" onchange="onFilterChange()">
<option value="">All locations</option>
</select>
</div>
@@ -1724,7 +1724,7 @@
<label class="checkbox-row">
<input type="checkbox" id="loginRemember"> Remember me
</label>
<button class="btn btn-primary" onclick="doLogin()">Sign In</button>
<button class="btn btn-primary" id="loginBtn" onclick="doLogin()">Sign In</button>
<div class="login-footer">Canteen Asset Tracker v2.0</div>
</div>
</div>
@@ -1875,6 +1875,7 @@
const username = document.getElementById('loginUsername').value.trim();
const password = document.getElementById('loginPassword').value;
const errEl = document.getElementById('loginError');
const loginBtn = document.getElementById('loginBtn');
if (!username || !password) {
errEl.textContent = 'Please enter username and password';
@@ -1882,6 +1883,9 @@
return;
}
loginBtn.disabled = true;
loginBtn.textContent = 'Signing in...';
try {
const remember = document.getElementById('loginRemember').checked;
const result = await api('/api/auth/login', {
@@ -1915,6 +1919,9 @@
} catch (e) {
errEl.textContent = e.message || 'Login failed';
errEl.classList.add('show');
} finally {
loginBtn.disabled = false;
loginBtn.textContent = 'Sign In';
}
}
@@ -2036,7 +2043,7 @@
t.className = 'toast' + (isError ? ' error' : '');
t.classList.add('show');
clearTimeout(toastTimer);
toastTimer = setTimeout(() => t.classList.remove('show'), 2000);
toastTimer = setTimeout(() => t.classList.remove('show'), 4000);
}
// =========================================================================