fix: Improve access control settings UI and functionality - Add AJAX saving for toggle switches and role checkboxes - Fix notification styling and layout issues - Shorten error message to 'Error Saving' - Add proper spacing for notifications to prevent layout shifts - Ensure labels have minimum width to prevent wrapping - Add success/error notifications for all setting changes

admin/css/wp-allstars-admin.css

@@ -733,6 +733,9 @@ input:checked + .wp-toggle-slider:before {
     box-sizing: border-box;
     position: relative;
     transform: translateY(-3px);
+    white-space: nowrap;
+    min-width: 60px;
+    justify-content: center;
 }
 
 .wp-setting-notification.error {
@@ -744,18 +747,80 @@ input:checked + .wp-toggle-slider:before {
 .wp-allstars-toggle-left label,
 .wp-allstars-setting-row label {
     position: relative;
-    padding-right: 20px;
+    padding-right: 80px; /* Increased padding to accommodate notification */
     display: inline-block;
+    min-width: 200px; /* Ensure minimum width for labels */
 }
 
-.wp-setting-left label .wp-setting-notification,
+/* Ensure toggle switches don't wrap with notifications */
-.wp-allstars-toggle-left label .wp-setting-notification,
+.wp-allstars-toggle-left {
-.wp-allstars-setting-row label .wp-setting-notification {
+    display: flex;
-    position: absolute;
+    align-items: center;
-    right: -60px;
+    flex-wrap: nowrap;
-    top: -5px;
+    gap: 10px;
-    transform: translateY(0);
+}
-    line-height: 1.4;
+
+.wp-allstars-toggle-left label {
+    flex: 1;
+    margin: 0;
+    padding-right: 80px;
+}
+
+/* Role Checkboxes */
+.wp-allstars-role-checkboxes {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 10px;
+    margin-top: 10px;
+}
+
+.wp-allstars-role-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+    background: #f8f9fa;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.wp-allstars-role-checkbox:hover {
+    background: #f0f0f1;
+    border-color: #2271b1;
+}
+
+.wp-allstars-role-checkbox input[type="checkbox"] {
+    margin: 0;
+}
+
+.wp-allstars-role-checkbox span {
+    font-size: 13px;
+    color: #50575e;
+}
+
+/* Responsive adjustments for role checkboxes */
+@media screen and (max-width: 782px) {
+    .wp-allstars-role-checkboxes {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 8px;
+    }
+    
+    .wp-allstars-role-checkbox {
+        padding: 6px;
+    }
+    
+    .wp-allstars-role-checkbox span {
+        font-size: 12px;
+    }
+    
+    /* Adjust label padding on mobile */
+    .wp-setting-left label,
+    .wp-allstars-toggle-left label,
+    .wp-allstars-setting-row label {
+        padding-right: 70px;
+    }
 }
 
 @keyframes fadeIn {
@@ -1574,53 +1639,3 @@ body.wp-admin .button.pricing-button:hover,
     position: relative !important;
     box-sizing: border-box !important;
 }
-
-/* Role Checkboxes */
-.wp-allstars-role-checkboxes {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 10px;
-    margin-top: 10px;
-}
-
-.wp-allstars-role-checkbox {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px;
-    background: #f8f9fa;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.wp-allstars-role-checkbox:hover {
-    background: #f0f0f1;
-    border-color: #2271b1;
-}
-
-.wp-allstars-role-checkbox input[type="checkbox"] {
-    margin: 0;
-}
-
-.wp-allstars-role-checkbox span {
-    font-size: 13px;
-    color: #50575e;
-}
-
-/* Responsive adjustments for role checkboxes */
-@media screen and (max-width: 782px) {
-    .wp-allstars-role-checkboxes {
-        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-        gap: 8px;
-    }
-    
-    .wp-allstars-role-checkbox {
-        padding: 6px;
-    }
-    
-    .wp-allstars-role-checkbox span {
-        font-size: 12px;
-    }
-}

admin/includes/class-access-manager.php

@@ -23,6 +23,9 @@ class WP_Allstars_Access_Manager {
         
         // Add hooks for admin bar and dashboard access control
         add_action('init', array(__CLASS__, 'setup_access_control'));
+        
+        // Add AJAX handlers
+        add_action('wp_ajax_wp_allstars_update_access_setting', array(__CLASS__, 'handle_access_setting_update'));
     }
     
     /**
@@ -49,6 +52,157 @@ class WP_Allstars_Access_Manager {
             array(),
             WP_ALLSTARS_VERSION
         );
+        
+        // Add inline JS for handling settings updates
+        $access_js = '
+        jQuery(document).ready(function($) {
+            // Handle main toggle switches
+            $("#wp_allstars_hide_admin_bar, #wp_allstars_restrict_dashboard").on("change", function() {
+                var $this = $(this);
+                var setting = $this.attr("id");
+                var value = $this.is(":checked");
+                
+                $.ajax({
+                    url: ajaxurl,
+                    type: "POST",
+                    data: {
+                        action: "wp_allstars_update_access_setting",
+                        setting: setting,
+                        value: value,
+                        nonce: "' . wp_create_nonce('wp-allstars-nonce') . '"
+                    },
+                    success: function(response) {
+                        if (response.success) {
+                            showSavedNotification($this);
+                        } else {
+                            showErrorNotification($this);
+                        }
+                    },
+                    error: function() {
+                        showErrorNotification($this);
+                    }
+                });
+            });
+            
+            // Handle role checkbox changes
+            $(".wp-allstars-role-checkbox input").on("change", function() {
+                var $this = $(this);
+                var $container = $this.closest(".wp-allstars-role-checkboxes");
+                var setting = $container.find("input").first().attr("name");
+                var selectedRoles = [];
+                
+                $container.find("input:checked").each(function() {
+                    selectedRoles.push($(this).val());
+                });
+                
+                $.ajax({
+                    url: ajaxurl,
+                    type: "POST",
+                    data: {
+                        action: "wp_allstars_update_access_setting",
+                        setting: setting,
+                        value: selectedRoles,
+                        nonce: "' . wp_create_nonce('wp-allstars-nonce') . '"
+                    },
+                    success: function(response) {
+                        if (response.success) {
+                            showSavedNotification($this);
+                        } else {
+                            showErrorNotification($this);
+                        }
+                    },
+                    error: function() {
+                        showErrorNotification($this);
+                    }
+                });
+            });
+            
+            function showSavedNotification($element) {
+                var $label = $element.closest(".wp-allstars-toggle-left").find("label");
+                var $notification = $label.find(".wp-setting-notification");
+                
+                if ($notification.length === 0) {
+                    $notification = $("<span>").addClass("wp-setting-notification");
+                    $label.append($notification);
+                }
+                
+                $notification.text("Saved").removeClass("error").addClass("success");
+                
+                setTimeout(function() {
+                    $notification.fadeOut(300, function() {
+                        $(this).remove();
+                    });
+                }, 2000);
+            }
+            
+            function showErrorNotification($element) {
+                var $label = $element.closest(".wp-allstars-toggle-left").find("label");
+                var $notification = $label.find(".wp-setting-notification");
+                
+                if ($notification.length === 0) {
+                    $notification = $("<span>").addClass("wp-setting-notification");
+                    $label.append($notification);
+                }
+                
+                $notification.text("Error Saving").removeClass("success").addClass("error");
+                
+                setTimeout(function() {
+                    $notification.fadeOut(300, function() {
+                        $(this).remove();
+                    });
+                }, 2000);
+            }
+        });
+        ';
+        
+        wp_add_inline_script('wp-allstars-admin', $access_js);
+    }
+    
+    /**
+     * Handle AJAX updates for access settings
+     */
+    public static function handle_access_setting_update() {
+        // Verify nonce
+        if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'wp-allstars-nonce')) {
+            wp_send_json_error('Invalid nonce');
+        }
+        
+        // Check user capabilities
+        if (!current_user_can('manage_options')) {
+            wp_send_json_error('Insufficient permissions');
+        }
+        
+        // Get and validate setting
+        $setting = isset($_POST['setting']) ? sanitize_text_field($_POST['setting']) : '';
+        $value = isset($_POST['value']) ? $_POST['value'] : '';
+        
+        if (empty($setting)) {
+            wp_send_json_error('Invalid setting');
+        }
+        
+        // Handle different setting types
+        switch ($setting) {
+            case 'wp_allstars_hide_admin_bar':
+                update_option('wp_allstars_hide_admin_bar_roles', $value ? array('guest', 'subscriber', 'customer') : array());
+                break;
+                
+            case 'wp_allstars_restrict_dashboard':
+                update_option('wp_allstars_restrict_dashboard_roles', $value ? array('guest', 'subscriber', 'customer') : array());
+                break;
+                
+            case 'wp_allstars_hide_admin_bar_roles':
+            case 'wp_allstars_restrict_dashboard_roles':
+                if (is_array($value)) {
+                    $value = array_map('sanitize_text_field', $value);
+                    update_option($setting, $value);
+                }
+                break;
+                
+            default:
+                wp_send_json_error('Invalid setting name');
+        }
+        
+        wp_send_json_success();
     }
     
     /**