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
Regular → Executable
View File
+12 -5
View File
@@ -1036,14 +1036,14 @@
<span class="dn-icon">📷</span> Add / Find Asset <span class="dn-icon">📷</span> Add / Find Asset
</button> </button>
<button class="dn-item" data-tab="tabAssets" onclick="navFromDrawer('tabAssets')"> <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>
<button class="dn-item" data-tab="tabMap" onclick="navFromDrawer('tabMap')"> <button class="dn-item" data-tab="tabMap" onclick="navFromDrawer('tabMap')">
<span class="dn-icon">🗺️</span> Map <span class="dn-icon">🗺️</span> Map
</button> </button>
<div style="border-top:1px solid var(--border);margin:6px 16px;"></div> <div style="border-top:1px solid var(--border);margin:6px 16px;"></div>
<button class="dn-item" data-tab="tabNavigate" onclick="navFromDrawer('tabNavigate')"> <button class="dn-item" data-tab="tabNavigate" onclick="navFromDrawer('tabNavigate')">
<span class="dn-icon">🧭</span> Navigate <span class="dn-icon">🧭</span> Nav
</button> </button>
<button class="dn-item" data-tab="tabRoute" onclick="navFromDrawer('tabRoute')"> <button class="dn-item" data-tab="tabRoute" onclick="navFromDrawer('tabRoute')">
<span class="dn-icon">🗺️</span> Route <span class="dn-icon">🗺️</span> Route
@@ -1356,7 +1356,7 @@
</div> </div>
<div style="flex:1"> <div style="flex:1">
<div class="fp-label">Location</div> <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> <option value="">All locations</option>
</select> </select>
</div> </div>
@@ -1724,7 +1724,7 @@
<label class="checkbox-row"> <label class="checkbox-row">
<input type="checkbox" id="loginRemember"> Remember me <input type="checkbox" id="loginRemember"> Remember me
</label> </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 class="login-footer">Canteen Asset Tracker v2.0</div>
</div> </div>
</div> </div>
@@ -1875,6 +1875,7 @@
const username = document.getElementById('loginUsername').value.trim(); const username = document.getElementById('loginUsername').value.trim();
const password = document.getElementById('loginPassword').value; const password = document.getElementById('loginPassword').value;
const errEl = document.getElementById('loginError'); const errEl = document.getElementById('loginError');
const loginBtn = document.getElementById('loginBtn');
if (!username || !password) { if (!username || !password) {
errEl.textContent = 'Please enter username and password'; errEl.textContent = 'Please enter username and password';
@@ -1882,6 +1883,9 @@
return; return;
} }
loginBtn.disabled = true;
loginBtn.textContent = 'Signing in...';
try { try {
const remember = document.getElementById('loginRemember').checked; const remember = document.getElementById('loginRemember').checked;
const result = await api('/api/auth/login', { const result = await api('/api/auth/login', {
@@ -1915,6 +1919,9 @@
} catch (e) { } catch (e) {
errEl.textContent = e.message || 'Login failed'; errEl.textContent = e.message || 'Login failed';
errEl.classList.add('show'); errEl.classList.add('show');
} finally {
loginBtn.disabled = false;
loginBtn.textContent = 'Sign In';
} }
} }
@@ -2036,7 +2043,7 @@
t.className = 'toast' + (isError ? ' error' : ''); t.className = 'toast' + (isError ? ' error' : '');
t.classList.add('show'); t.classList.add('show');
clearTimeout(toastTimer); clearTimeout(toastTimer);
toastTimer = setTimeout(() => t.classList.remove('show'), 2000); toastTimer = setTimeout(() => t.classList.remove('show'), 4000);
} }
// ========================================================================= // =========================================================================