nngo/WebChecker--Web-app-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

06/04 Optimize app

Browse Source
This commit is contained in:
nngo
2026-06-04 15:00:09 -04:00
parent 3f2e83ce2d
commit e03eb26417
8 changed files with 125 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/style.css
+12
View File
@@ -591,6 +591,18 @@ textarea{resize:vertical;min-height:88px}
filter:blur(4px);user-select:none;cursor:pointer;
transition:filter .2s;
}
.pw-strength-wrap { margin-top:.4rem; }
.pw-strength-bar { height:4px;border-radius:2px;background:var(--border);overflow:hidden;margin-bottom:.3rem; }
.pw-strength-fill { height:100%;border-radius:2px;width:0%;transition:width .3s,background .3s; }
.pw-strength-fill.pw-weak { width:25%;background:var(--danger); }
.pw-strength-fill.pw-fair { width:50%;background:var(--warning); }
.pw-strength-fill.pw-strong { width:75%;background:var(--accent); }
.pw-strength-fill.pw-great { width:100%;background:var(--success); }
.pw-strength-label { font-size:.75rem; }
.pw-strength-label.pw-weak { color:var(--danger); }
.pw-strength-label.pw-fair { color:var(--warning); }
.pw-strength-label.pw-strong { color:var(--accent); }
.pw-strength-label.pw-great { color:var(--success); }
/* ══════════════════════════════════════════════════════════
DYNAMIC CREDENTIAL ROWS (website admin form)
static/js/app.js
+61 -1
View File
@@ -32,13 +32,30 @@ document.addEventListener('click', (e) => {
}
});
// Close modal on Escape key
// Close modal on Escape; trap Tab focus inside open modals
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
document.querySelectorAll('.modal-overlay.open').forEach(m => {
m.classList.remove('open');
document.body.style.overflow = '';
});
return;
}
if (e.key === 'Tab') {
const openModal = document.querySelector('.modal-overlay.open');
if (!openModal) return;
const focusable = Array.from(openModal.querySelectorAll(
'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
)).filter(el => el.offsetParent !== null);
if (focusable.length === 0) return;
const first = focusable[0];
const last = focusable[focusable.length - 1];
if (e.shiftKey) {
if (document.activeElement === first) { e.preventDefault(); last.focus(); }
} else {
if (document.activeElement === last) { e.preventDefault(); first.focus(); }
}
}
});
@@ -255,11 +272,15 @@ function getCsrfToken() {
sidebar.classList.add('open');
backdrop.classList.add('open');
document.body.style.overflow = 'hidden';
toggle.setAttribute('aria-expanded', 'true');
toggle.setAttribute('aria-label', 'Close navigation');
}
function closeSidebar() {
sidebar.classList.remove('open');
backdrop.classList.remove('open');
document.body.style.overflow = '';
toggle.setAttribute('aria-expanded', 'false');
toggle.setAttribute('aria-label', 'Open navigation');
}
toggle.addEventListener('click', openSidebar);
@@ -290,6 +311,45 @@ document.addEventListener('DOMContentLoaded', function() {
});
});
/* ── Password strength meter ───────────────────────────────── */
function _pwStrengthLevel(pw) {
var score = 0;
if (pw.length >= 8) score++;
if (pw.length >= 12) score++;
if (/[A-Z]/.test(pw)) score++;
if (/[0-9]/.test(pw)) score++;
if (/[^A-Za-z0-9]/.test(pw)) score++;
var map = ['pw-weak','pw-weak','pw-fair','pw-strong','pw-great','pw-great'];
var lbl = ['Weak','Weak','Fair','Strong','Very strong','Very strong'];
return { cls: map[score], label: lbl[score] };
}
function attachPasswordStrength(inputId, fillId, labelId) {
var input = document.getElementById(inputId);
var fill = document.getElementById(fillId);
var lbl = document.getElementById(labelId);
if (!input || !fill || !lbl) return;
input.addEventListener('input', function() {
if (!this.value) {
fill.className = 'pw-strength-fill';
lbl.className = 'pw-strength-label';
lbl.textContent = '';
return;
}
var r = _pwStrengthLevel(this.value);
fill.className = 'pw-strength-fill ' + r.cls;
lbl.className = 'pw-strength-label ' + r.cls;
lbl.textContent = r.label;
});
}
/* ── HTML escape (safe for attributes and text nodes) ──────── */
function esc(str) {
return String(str || '').replace(/[&<>"']/g, function(c) {
return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
});
}
/* ── Generic fetch-based form submit (JSON response) ───────── */
async function submitJson(url, data, method = 'POST') {
const res = await fetch(url, {
templates/admin/websites.html
+5 -2
View File
@@ -184,11 +184,11 @@ function addCredRow(btn) {
btn.closest('.modal-body').querySelector('.cred-rows').insertAdjacentHTML('beforeend', emptyCredRow());
}
function removeRow(btn) { btn.closest('.cred-row').remove(); }
function esc(s) { return (s||'').replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;'); }
(function() {
var searchEl = document.getElementById('site-search');
var typeEl = document.getElementById('site-type-filter');
var _timer = null;
function filterSites() {
var q = searchEl.value.trim().toLowerCase();
var type = typeEl.value;
@@ -198,7 +198,10 @@ function esc(s) { return (s||'').replace(/&/g,'&amp;').replace(/"/g,'&quot;').re
row.style.display = (nameMatch && typeMatch) ? '' : 'none';
});
}
searchEl.addEventListener('input', filterSites);
searchEl.addEventListener('input', function() {
clearTimeout(_timer);
_timer = setTimeout(filterSites, 250);
});
typeEl.addEventListener('change', filterSites);
})();
</script>
templates/base.html
+3 -2
View File
@@ -10,11 +10,12 @@
<body class="layout">
<!-- Mobile sidebar toggle (hidden on desktop via CSS) -->
<button class="sidebar-toggle" id="sidebar-toggle" aria-label="Open navigation">☰</button>
<button class="sidebar-toggle" id="sidebar-toggle"
aria-label="Open navigation" aria-expanded="false" aria-controls="sidebar">☰</button>
<div class="sidebar-backdrop" id="sidebar-backdrop"></div>
<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
<aside class="sidebar" id="sidebar" aria-label="Main navigation">
<div class="sidebar-brand">
<span class="brand-icon">🌐</span>
<span class="brand-name">Website<br>Checker</span>
templates/bid_tracker.html
-7
View File
@@ -472,13 +472,6 @@ document.getElementById('bid-search').addEventListener('input', function() {
}
});
/* ── Escape ─────────────────────────────────────────────── */
function esc(str) {
return String(str || '').replace(/[&<>"']/g, function(c) {
return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
});
}
/* ── Init ───────────────────────────────────────────────── */
loadBids();
templates/change_password.html
+6 -1
View File
@@ -13,7 +13,11 @@
</div>
<div class="form-group">
<label class="form-label">New Password</label>
<input class="form-control" type="password" name="new_password" required>
<input class="form-control" type="password" name="new_password" id="new-password" required>
<div class="pw-strength-wrap">
<div class="pw-strength-bar"><div class="pw-strength-fill" id="pw-fill"></div></div>
<small class="pw-strength-label" id="pw-label"></small>
</div>
<small class="text-muted">Min 8 chars, uppercase, number, special character.</small>
</div>
<div class="form-group">
@@ -24,4 +28,5 @@
</form>
</div>
</div>
<script>attachPasswordStrength('new-password', 'pw-fill', 'pw-label');</script>
{% endblock %}
templates/reset_password.html
+22
View File
@@ -28,6 +28,10 @@
<input type="password" id="password" name="password"
autofocus required minlength="8"
placeholder="Minimum 8 characters">
<div class="pw-strength-wrap">
<div class="pw-strength-bar"><div class="pw-strength-fill" id="pw-fill"></div></div>
<small class="pw-strength-label" id="pw-label"></small>
</div>
</div>
<div class="form-group">
<label for="confirm_password">Confirm Password</label>
@@ -42,5 +46,23 @@
</p>
</div>
<script>
(function() {
var input = document.getElementById('password');
var fill = document.getElementById('pw-fill');
var lbl = document.getElementById('pw-label');
var map = ['pw-weak','pw-weak','pw-fair','pw-strong','pw-great','pw-great'];
var lbls = ['Weak','Weak','Fair','Strong','Very strong','Very strong'];
input.addEventListener('input', function() {
if (!this.value) { fill.className='pw-strength-fill'; lbl.className='pw-strength-label'; lbl.textContent=''; return; }
var pw=this.value, s=0;
if (pw.length>=8) s++; if (pw.length>=12) s++;
if (/[A-Z]/.test(pw)) s++; if (/[0-9]/.test(pw)) s++; if (/[^A-Za-z0-9]/.test(pw)) s++;
fill.className='pw-strength-fill '+map[s];
lbl.className='pw-strength-label '+map[s];
lbl.textContent=lbls[s];
});
}());
</script>
</body>
</html>
templates/user/dashboard.html
+16 -10
View File
@@ -345,9 +345,22 @@ document.getElementById('site-list').addEventListener('click', function(e) {
/* Undo */
if (btn.classList.contains('js-undo')) {
if (confirm('Remove check for ' + btn.dataset.name + '?')) {
btn.closest('form').submit();
}
if (!confirm('Remove check for ' + btn.dataset.name + '?')) return;
var siteName = btn.dataset.name;
var formAction = btn.closest('form').action;
btn.disabled = true;
fetch(formAction, {
method: 'POST', credentials: 'same-origin',
headers: {'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRFToken': getCsrfToken()},
body: ''
}).then(function() {
var toast = document.createElement('div');
toast.className = 'alert alert-info';
toast.style.cssText = 'position:fixed;top:1rem;right:1rem;z-index:9999;min-width:220px;box-shadow:var(--shadow)';
toast.textContent = '↩ Check removed for ' + siteName;
document.body.appendChild(toast);
setTimeout(function() { location.reload(); }, 700);
});
return;
}
});
@@ -371,13 +384,6 @@ document.getElementById('modal-creds').addEventListener('click', function(e) {
}
});
/* ── HTML escape ───────────────────────────────────────────── */
function esc(str) {
return String(str || '').replace(/[&<>"']/g, function(c) {
return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
});
}
/* ── Health dots — batched with max 4 concurrent requests ─── */
(function() {
var cards = Array.from(document.querySelectorAll('.site-card'));