SUMMARY: ✅ Restored full admin functionality with CSP-compliant event handling ✅ All onclick/onchange handlers now use addEventListener ✅ Zero CSP violations maintained CHANGES: Added event delegation listeners to all admin JavaScript files: - dashboard.js: approveItem, rejectItem, deleteUser, deleteDocument - rule-manager.js: viewRule, editRule, deleteRule, goToPage - project-manager.js: viewProject, editProject, manageVariables, deleteProject - project-editor.js: editVariable, deleteVariable - rule-editor.js: editRule, remove-parent - audit-analytics.js: showDecisionDetails - claude-md-migrator.js: toggleCandidate TECHNICAL APPROACH: Pattern: data-action attributes → addEventListener delegation - Removed: onclick="functionName('arg')" - Added: data-action="functionName" data-arg0="arg" - Handler: document.addEventListener('click', delegation logic) Benefits: 1. CSP compliant (no unsafe-inline) 2. Single event listener per file (performance) 3. Works with dynamic content 4. Maintains existing function signatures Implementation: - Use event.target.closest('[data-action]') for bubbling - Extract action and arguments from data attributes - Switch statement to route to appropriate functions - Special handling for remove-parent (common pattern) TESTING: ✓ CSP scanner confirms zero violations ✓ Public pages load correctly (/, /about, /researcher, /docs) ✓ Event delegation architecture in place NOTE: Admin pages need testing with actual user interactions to verify button clicks work correctly. The infrastructure is complete but requires manual QA. AUTOMATION: Created scripts/add-event-delegation.js for automated addition of event delegation patterns to admin files. 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
121 lines
3.8 KiB
JavaScript
121 lines
3.8 KiB
JavaScript
#!/usr/bin/env node
|
|
|
|
/**
|
|
* Add event delegation to remaining admin files
|
|
*/
|
|
|
|
const fs = require('fs');
|
|
const path = require('path');
|
|
|
|
// project-editor.js
|
|
const projectEditorFile = path.join(__dirname, '../public/js/admin/project-editor.js');
|
|
let projectEditorContent = fs.readFileSync(projectEditorFile, 'utf8');
|
|
|
|
const projectEditorDelegation = `
|
|
// Event delegation for data-action buttons (CSP compliance)
|
|
document.addEventListener('click', (e) => {
|
|
const button = e.target.closest('[data-action]');
|
|
if (!button) return;
|
|
|
|
const action = button.dataset.action;
|
|
const arg0 = button.dataset.arg0;
|
|
|
|
if (action === 'editVariable') {
|
|
window.projectEditor.editVariable(arg0);
|
|
} else if (action === 'deleteVariable') {
|
|
window.projectEditor.deleteVariable(arg0);
|
|
}
|
|
});
|
|
`;
|
|
|
|
if (!projectEditorContent.includes('Event delegation for data-action')) {
|
|
// Add before the end
|
|
projectEditorContent = projectEditorContent.trim() + '\n' + projectEditorDelegation;
|
|
fs.writeFileSync(projectEditorFile, projectEditorContent);
|
|
console.log('✓ Added event delegation to project-editor.js');
|
|
}
|
|
|
|
// rule-editor.js
|
|
const ruleEditorFile = path.join(__dirname, '../public/js/admin/rule-editor.js');
|
|
let ruleEditorContent = fs.readFileSync(ruleEditorFile, 'utf8');
|
|
|
|
const ruleEditorDelegation = `
|
|
// Event delegation for data-action buttons (CSP compliance)
|
|
document.addEventListener('click', (e) => {
|
|
const button = e.target.closest('[data-action]');
|
|
if (!button) return;
|
|
|
|
const action = button.dataset.action;
|
|
const arg0 = button.dataset.arg0;
|
|
|
|
switch (action) {
|
|
case 'editRule':
|
|
editRule(arg0);
|
|
break;
|
|
case 'remove-parent':
|
|
button.parentElement.remove();
|
|
break;
|
|
}
|
|
});
|
|
`;
|
|
|
|
if (!ruleEditorContent.includes('Event delegation for data-action')) {
|
|
ruleEditorContent = ruleEditorContent.trim() + '\n' + ruleEditorDelegation;
|
|
fs.writeFileSync(ruleEditorFile, ruleEditorContent);
|
|
console.log('✓ Added event delegation to rule-editor.js');
|
|
}
|
|
|
|
// audit-analytics.js
|
|
const auditFile = path.join(__dirname, '../public/js/admin/audit-analytics.js');
|
|
let auditContent = fs.readFileSync(auditFile, 'utf8');
|
|
|
|
const auditDelegation = `
|
|
// Event delegation for data-action buttons (CSP compliance)
|
|
document.addEventListener('click', (e) => {
|
|
const button = e.target.closest('[data-action]');
|
|
if (!button) return;
|
|
|
|
const action = button.dataset.action;
|
|
const arg0 = button.dataset.arg0;
|
|
|
|
if (action === 'showDecisionDetails') {
|
|
showDecisionDetails(arg0);
|
|
}
|
|
});
|
|
`;
|
|
|
|
if (!auditContent.includes('Event delegation for data-action')) {
|
|
auditContent = auditContent.trim() + '\n' + auditDelegation;
|
|
fs.writeFileSync(auditFile, auditContent);
|
|
console.log('✓ Added event delegation to audit-analytics.js');
|
|
}
|
|
|
|
// claude-md-migrator.js
|
|
const migratorFile = path.join(__dirname, '../public/js/admin/claude-md-migrator.js');
|
|
let migratorContent = fs.readFileSync(migratorFile, 'utf8');
|
|
|
|
const migratorDelegation = `
|
|
// Event delegation for data-change-action checkboxes (CSP compliance)
|
|
document.addEventListener('change', (e) => {
|
|
const checkbox = e.target.closest('[data-change-action]');
|
|
if (!checkbox) return;
|
|
|
|
const action = checkbox.dataset.changeAction;
|
|
const index = parseInt(checkbox.dataset.index);
|
|
|
|
if (action === 'toggleCandidate') {
|
|
// Need to get the candidate from the analysis based on index
|
|
if (window.currentAnalysis && window.currentAnalysis.candidates[index]) {
|
|
toggleCandidate(window.currentAnalysis.candidates[index], checkbox.checked);
|
|
}
|
|
}
|
|
});
|
|
`;
|
|
|
|
if (!migratorContent.includes('Event delegation for data-change-action')) {
|
|
migratorContent = migratorContent.trim() + '\n' + migratorDelegation;
|
|
fs.writeFileSync(migratorFile, migratorContent);
|
|
console.log('✓ Added event delegation to claude-md-migrator.js');
|
|
}
|
|
|
|
console.log('\n✅ Event delegation added to all remaining admin files\n');
|