# metasync/2.6.17/includes/js/metasync-access-control.js

Search Atlas SEO – OTTO AI SEO Automation for WordPress, version 2.6.17. 81 lines.

- Page: https://pluginprobe.com/plugins/metasync/2.6.17/code/includes/js/metasync-access-control.js
- Raw: https://pluginprobe.com/plugins/metasync/2.6.17/raw/includes/js/metasync-access-control.js
- Modified: 2026-03-23T17:37:48+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/metasync/2.6.17/code/includes/js/metasync-access-control.js#L10-L20`.

```javascript
/**
 * MetaSync access control UI — toggle options and type selection.
 *
 * Extracted from includes/class-metasync-access-control-ui.php (Phase 5, #887).
 */
document.addEventListener('DOMContentLoaded', function() {

    // Toggle access control options (enabled/disabled)
    document.querySelectorAll('.metasync-access-toggle-input').forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            var featureKey = this.getAttribute('data-feature-key');
            var enabled = this.checked;
            var optionsDiv = document.getElementById('access-options-' + featureKey);
            var toggleLabel = this.closest('.access-control-toggle').querySelector('.toggle-label');

            if (enabled) {
                optionsDiv.style.display = 'block';
                toggleLabel.textContent = 'Restricted';
            } else {
                optionsDiv.style.display = 'none';
                toggleLabel.textContent = 'Available to All';
            }
        });
    });

    // Show/hide access type options (none / role / user)
    document.querySelectorAll('.metasync-access-type-input').forEach(function(radio) {
        radio.addEventListener('change', function() {
            var featureKey = this.getAttribute('data-feature-key');
            var type = this.value;
            var roleSelection = document.getElementById('role-selection-' + featureKey);
            var userSelection = document.getElementById('user-selection-' + featureKey);

            roleSelection.style.display = type === 'role' ? 'block' : 'none';
            userSelection.style.display = type === 'user' ? 'block' : 'none';
        });
    });

    // Add form validation
    var form = document.querySelector('form[action="options.php"]');
    if (form) {
        form.addEventListener('submit', function(e) {
            // Validate that at least one role or user is selected when type is role/user
            var accessControls = document.querySelectorAll('.metasync-access-control-row');
            var hasError = false;

            accessControls.forEach(function(row) {
                var enabledEl = row.querySelector('[name*="[enabled]"]');
                if (!enabledEl) return;
                var featureKey = enabledEl.name.match(/\[(.*?)\]/)[1];
                var enabled = enabledEl.checked;

                if (enabled) {
                    var typeEl = row.querySelector('[name*="[type]"]:checked');
                    if (!typeEl) return;
                    var type = typeEl.value;

                    if (type === 'role') {
                        var rolesChecked = row.querySelectorAll('[name*="[allowed_roles]"]:checked');
                        if (rolesChecked.length === 0) {
                            alert('Please select at least one role for: ' + row.querySelector('th label').textContent);
                            hasError = true;
                        }
                    } else if (type === 'user') {
                        var usersSelected = row.querySelector('[name*="[allowed_users]"]').selectedOptions;
                        if (usersSelected.length === 0) {
                            alert('Please select at least one user for: ' + row.querySelector('th label').textContent);
                            hasError = true;
                        }
                    }
                }
            });

            if (hasError) {
                e.preventDefault();
                return false;
            }
        });
    }
});

```