| 1 |
/** |
| 2 |
* MetaSync access control UI — toggle options and type selection. |
| 3 |
* |
| 4 |
* Extracted from includes/class-metasync-access-control-ui.php (Phase 5, #887). |
| 5 |
*/ |
| 6 |
document.addEventListener('DOMContentLoaded', function() { |
| 7 |
|
| 8 |
// Toggle access control options (enabled/disabled) |
| 9 |
document.querySelectorAll('.metasync-access-toggle-input').forEach(function(checkbox) { |
| 10 |
checkbox.addEventListener('change', function() { |
| 11 |
var featureKey = this.getAttribute('data-feature-key'); |
| 12 |
var enabled = this.checked; |
| 13 |
var optionsDiv = document.getElementById('access-options-' + featureKey); |
| 14 |
var toggleLabel = this.closest('.access-control-toggle').querySelector('.toggle-label'); |
| 15 |
|
| 16 |
if (enabled) { |
| 17 |
optionsDiv.style.display = 'block'; |
| 18 |
toggleLabel.textContent = 'Restricted'; |
| 19 |
} else { |
| 20 |
optionsDiv.style.display = 'none'; |
| 21 |
toggleLabel.textContent = 'Available to All'; |
| 22 |
} |
| 23 |
}); |
| 24 |
}); |
| 25 |
|
| 26 |
// Show/hide access type options (none / role / user) |
| 27 |
document.querySelectorAll('.metasync-access-type-input').forEach(function(radio) { |
| 28 |
radio.addEventListener('change', function() { |
| 29 |
var featureKey = this.getAttribute('data-feature-key'); |
| 30 |
var type = this.value; |
| 31 |
var roleSelection = document.getElementById('role-selection-' + featureKey); |
| 32 |
var userSelection = document.getElementById('user-selection-' + featureKey); |
| 33 |
|
| 34 |
roleSelection.style.display = type === 'role' ? 'block' : 'none'; |
| 35 |
userSelection.style.display = type === 'user' ? 'block' : 'none'; |
| 36 |
}); |
| 37 |
}); |
| 38 |
|
| 39 |
// Add form validation |
| 40 |
var form = document.querySelector('form[action="options.php"]'); |
| 41 |
if (form) { |
| 42 |
form.addEventListener('submit', function(e) { |
| 43 |
// Validate that at least one role or user is selected when type is role/user |
| 44 |
var accessControls = document.querySelectorAll('.metasync-access-control-row'); |
| 45 |
var hasError = false; |
| 46 |
|
| 47 |
accessControls.forEach(function(row) { |
| 48 |
var enabledEl = row.querySelector('[name*="[enabled]"]'); |
| 49 |
if (!enabledEl) return; |
| 50 |
var featureKey = enabledEl.name.match(/\[(.*?)\]/)[1]; |
| 51 |
var enabled = enabledEl.checked; |
| 52 |
|
| 53 |
if (enabled) { |
| 54 |
var typeEl = row.querySelector('[name*="[type]"]:checked'); |
| 55 |
if (!typeEl) return; |
| 56 |
var type = typeEl.value; |
| 57 |
|
| 58 |
if (type === 'role') { |
| 59 |
var rolesChecked = row.querySelectorAll('[name*="[allowed_roles]"]:checked'); |
| 60 |
if (rolesChecked.length === 0) { |
| 61 |
alert('Please select at least one role for: ' + row.querySelector('th label').textContent); |
| 62 |
hasError = true; |
| 63 |
} |
| 64 |
} else if (type === 'user') { |
| 65 |
var usersSelected = row.querySelector('[name*="[allowed_users]"]').selectedOptions; |
| 66 |
if (usersSelected.length === 0) { |
| 67 |
alert('Please select at least one user for: ' + row.querySelector('th label').textContent); |
| 68 |
hasError = true; |
| 69 |
} |
| 70 |
} |
| 71 |
} |
| 72 |
}); |
| 73 |
|
| 74 |
if (hasError) { |
| 75 |
e.preventDefault(); |
| 76 |
return false; |
| 77 |
} |
| 78 |
}); |
| 79 |
} |
| 80 |
}); |
| 81 |
|
