SUDO adjustments

The SUDO rule details facet has been updated to support the latest UI
spec. The facet consists of 5 sections: general, users, hosts, commands,
and run-as.

The general section contains the SUDO rule description and status. If
the status is changed, the sudorule-enable/disable will be invoked.

The other sections contain radio buttons for the association category
and tables for the members. When a member is added or removed, the
category will be adjusted appropriately. If the category is changed to
'all', 'allow', or 'deny', all members will be removed.

The last section is currently not working because backend support is
not yet available.

The adder dialog boxes for users, groups, and hosts has been modified
to accept external identities. The layout for the base adder dialog
was updated. The base dialog class was updated to support templates.
The SUDO dialog boxes were implemented using templates. New CSS
classes were added to ipa.css.

The HBAC rule details facet has been updated as well.

14 files changed, 1575 insertions, 255 deletions

diff --git a/install/static/associate.js b/install/static/associate.js
index e159c4dd6..540b1a80f 100644
--- a/install/static/associate.js
+++ b/install/static/associate.js
@@ -169,6 +169,9 @@ function ipa_association_adder_dialog(spec) {
         ipa_cmd('find', [that.get_filter()], {'all': true}, on_success, null, that.other_entity);
     };
 
+    that.association_adder_dialog_init = that.init;
+    that.association_adder_dialog_setup = that.setup;
+
     return that;
 }
 
@@ -386,24 +389,28 @@ function ipa_association_table_widget(spec) {
         }
     };
 
-    that.show_add_dialog = function() {
-
+    that.create_add_dialog = function() {
         var pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
         var label = IPA.metadata[that.other_entity].label;
         var title = 'Add '+label+' to '+that.entity_name+' '+pkey;
 
-        var dialog = ipa_association_adder_dialog({
+        return ipa_association_adder_dialog({
             'title': title,
             'entity_name': that.entity_name,
             'pkey': pkey,
             'other_entity': that.other_entity
         });
+    };
+
+    that.show_add_dialog = function() {
+
+        var dialog = that.create_add_dialog();
 
         if (that.adder_columns.length) {
             dialog.set_columns(that.adder_columns);
         }
 
-        dialog.add = function() {
+        dialog.execute = function() {
             that.add(
                 dialog.get_selected_values(),
                 function() {
@@ -493,10 +500,6 @@ function ipa_association_table_widget(spec) {
         command.execute();
     };
 
-    that.save = function() {
-        return null;
-    };
-
     // methods that should be invoked by subclasses
     that.association_table_widget_init = that.init;
 
@@ -707,7 +710,7 @@ function ipa_association_facet(spec) {
             dialog.set_columns(that.adder_columns);
         }
 
-        dialog.add = function() {
+        dialog.execute = function() {
 
             var pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
 
diff --git a/install/static/details.js b/install/static/details.js
index d9dc96bce..e3cee071f 100644
--- a/install/static/details.js
+++ b/install/static/details.js
@@ -229,7 +229,7 @@ function ipa_details_section(spec){
         }
     };
 
-    that.load = function(result) {
+    that.load = function(record) {
 
         var fields = that.fields;
 
@@ -242,7 +242,7 @@ function ipa_details_section(spec){
                         var field = fields[i];
                         var span = $('span[name='+field.name+']', this.container).first();
                         field.setup(span);
-                        field.load(result);
+                        field.load(record);
                     }
                 }
             );
@@ -252,7 +252,7 @@ function ipa_details_section(spec){
         for (var j=0; j<fields.length; j++) {
             var field = fields[j];
             var span = $('span[name='+field.name+']', this.container).first();
-            field.load(result);
+            field.load(record);
         }
     };
 
@@ -354,12 +354,12 @@ function ipa_details_facet(spec) {
 
     var that = ipa_facet(spec);
 
-    that.is_dirty = spec.is_dirty || ipa_details_is_dirty;
+    that.is_dirty = spec.is_dirty || is_dirty;
     that.create = spec.create || ipa_details_create;
     that.setup = spec.setup || ipa_details_setup;
-    that.load = spec.load || ipa_details_load;
+    that.load = spec.load || load;
     that.update = spec.update || ipa_details_update;
-    that.reset = spec.reset || ipa_details_reset;
+    that.reset = spec.reset || reset;
     that.refresh = spec.refresh || ipa_details_refresh;
 
     that.sections = [];
@@ -405,8 +405,30 @@ function ipa_details_facet(spec) {
         return that.record[pkey_name][0];
     };
 
+    function is_dirty() {
+        var pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
+        return pkey != that.pkey;
+    }
+
+    function load(record) {
+        that.record = record;
+
+        for (var i=0; i<that.sections.length; i++) {
+            var section = that.sections[i];
+            section.load(record);
+        }
+    }
+
+    function reset() {
+        for (var i=0; i<that.sections.length; i++) {
+            var section = that.sections[i];
+            section.reset();
+        }
+    }
+
     that.details_facet_init = that.init;
     that.details_facet_create = that.create;
+    that.details_facet_load = that.load;
 
     return that;
 }
@@ -428,11 +450,6 @@ function ipa_button(spec) {
     return button;
 }
 
-function ipa_details_is_dirty() {
-    var pkey = $.bbq.getState(this.entity_name + '-pkey', true) || '';
-    return pkey != this.pkey;
-}
-
 function ipa_details_create(container)
 {
     var that = this;
@@ -629,19 +646,6 @@ var _ipa_span_hint_template = '<span class="attrhint">Hint: D</span>';
 
 
 
-function ipa_details_load(record)
-{
-    var that = this;
-    that.record = record;
-
-    for (var i=0; i<that.sections.length; i++) {
-        var section = that.sections[i];
-        section.load(record);
-    }
-}
-
-
-
 function ipa_create_first_dd(field_name, content){
     var dd = $('<dd/>', {
         'class': 'first',
@@ -808,16 +812,6 @@ function _ipa_create_text_input(value, param_info, rights, index)
     return span;
 }
 
-function ipa_details_reset()
-{
-    var that = this;
-
-    for (var i=0; i<that.sections.length; i++) {
-        var section = that.sections[i];
-        section.reset();
-    }
-}
-
 function ipa_details_field_create_add_link(title, rights, index) {
 
     var that = this;
diff --git a/install/static/hbac.js b/install/static/hbac.js
index 0b642aec5..213dd3e48 100755
--- a/install/static/hbac.js
+++ b/install/static/hbac.js
@@ -191,12 +191,12 @@ function ipa_hbac_details_facet(spec) {
         }
 
         var category = section.create_radio({ name: 'usercategory', label: 'User category' });
-        section.add_field(ipa_hbac_association_widget({
+        section.add_field(ipa_rule_association_table_widget({
             'id': that.entity_name+'-memberuser_user',
             'name': 'memberuser_user', 'label': 'Users', 'category': category,
             'other_entity': 'user', 'add_method': 'add_user', 'remove_method': 'remove_user'
         }));
-        section.add_field(ipa_hbac_association_widget({
+        section.add_field(ipa_rule_association_table_widget({
             'id': that.entity_name+'-memberuser_group',
             'name': 'memberuser_group', 'label': 'Groups', 'category': category,
             'other_entity': 'group', 'add_method': 'add_user', 'remove_method': 'remove_user'
@@ -228,12 +228,12 @@ function ipa_hbac_details_facet(spec) {
         }
 
         category = section.create_radio({ 'name': 'hostcategory', 'label': 'Host category' });
-        section.add_field(ipa_hbac_association_widget({
+        section.add_field(ipa_rule_association_table_widget({
             'id': that.entity_name+'-memberhost_host',
             'name': 'memberhost_host', 'label': 'Hosts', 'category': category,
             'other_entity': 'host', 'add_method': 'add_host', 'remove_method': 'remove_host'
         }));
-        section.add_field(ipa_hbac_association_widget({
+        section.add_field(ipa_rule_association_table_widget({
             'id': that.entity_name+'-memberhost_hostgroup',
             'name': 'memberhost_hostgroup', 'label': 'Host Groups', 'category': category,
             'other_entity': 'hostgroup', 'add_method': 'add_host', 'remove_method': 'remove_host'
@@ -265,12 +265,12 @@ function ipa_hbac_details_facet(spec) {
         }
 
         category = section.create_radio({ 'name': 'servicecategory', 'label': 'Service category' });
-        section.add_field(ipa_hbac_association_widget({
+        section.add_field(ipa_rule_association_table_widget({
             'id': that.entity_name+'-memberservice_hbacsvc',
             'name': 'memberservice_hbacsvc', 'label': 'Services', 'category': category,
             'other_entity': 'hbacsvc', 'add_method': 'add_service', 'remove_method': 'remove_service'
         }));
-        section.add_field(ipa_hbac_association_widget({
+        section.add_field(ipa_rule_association_table_widget({
             'id': that.entity_name+'-memberservice_hbacsvcgroup',
             'name': 'memberservice_hbacsvcgroup', 'label': 'Service Groups', 'category': category,
             'other_entity': 'hbacsvcgroup', 'add_method': 'add_service', 'remove_method': 'remove_service'
@@ -302,12 +302,12 @@ function ipa_hbac_details_facet(spec) {
         }
 
         category = section.create_radio({ 'name': 'sourcehostcategory', 'label': 'Source host category' });
-        section.add_field(ipa_hbac_association_widget({
+        section.add_field(ipa_rule_association_table_widget({
             'id': that.entity_name+'-sourcehost_host',
             'name': 'sourcehost_host', 'label': 'Host', 'category': category,
             'other_entity': 'host', 'add_method': 'add_sourcehost', 'remove_method': 'remove_sourcehost'
         }));
-        section.add_field(ipa_hbac_association_widget({
+        section.add_field(ipa_rule_association_table_widget({
             'id': that.entity_name+'-sourcehost_hostgroup',
             'name': 'sourcehost_hostgroup', 'label': 'Host Groups', 'category': category,
             'other_entity': 'hostgroup', 'add_method': 'add_sourcehost', 'remove_method': 'remove_sourcehost'
@@ -362,16 +362,24 @@ function ipa_hbac_details_facet(spec) {
             'commands': []
         };
 
-        var member_category = {
-            'usercategory': 'memberuser',
-            'hostcategory': 'memberhost',
-            'servicecategory': 'memberservice',
-            'sourcehostcategory': 'sourcehost'
+        var categories = {
+            'usercategory': {
+                'remove_values': false
+            },
+            'hostcategory': {
+                'remove_values': false
+            },
+            'servicecategory': {
+                'remove_values': false
+            },
+            'sourcehostcategory': {
+                'remove_values': false
+            }
         };
 
-        var remove_members = {
+        var member_operations = {
             'memberuser': {
-                'category_changed': false,
+                'category': 'usercategory',
                 'has_values': false,
                 'command': ipa_command({
                     'method': that.entity_name+'_remove_user',
@@ -380,7 +388,7 @@ function ipa_hbac_details_facet(spec) {
                 })
             },
             'memberhost': {
-                'category_changed': false,
+                'category': 'hostcategory',
                 'has_values': false,
                 'command': ipa_command({
                     'method': that.entity_name+'_remove_host',
@@ -389,7 +397,7 @@ function ipa_hbac_details_facet(spec) {
                 })
             },
             'memberservice': {
-                'category_changed': false,
+                'category': 'servicecategory',
                 'has_values': false,
                 'command': ipa_command({
                     'method': that.entity_name+'_remove_service',
@@ -398,7 +406,7 @@ function ipa_hbac_details_facet(spec) {
                 })
             },
             'sourcehost': {
-                'category_changed': false,
+                'category': 'sourcehostcategory',
                 'has_values': false,
                 'command': ipa_command({
                     'method': that.entity_name+'_remove_sourcehost',
@@ -427,6 +435,7 @@ function ipa_hbac_details_facet(spec) {
 
                 var span = $('span[name='+field.name+']', div).first();
                 var values = field.save();
+                if (!values) continue;
 
                 var param_info = ipa_get_param_info(that.entity_name, field.name);
 
@@ -440,8 +449,8 @@ function ipa_hbac_details_facet(spec) {
                     var other_entity = field.name.substring(p+1);
 
                     if (values.length) {
-                        remove_members[attribute].command.set_option(other_entity, values.join(','));
-                        remove_members[attribute].has_values = true;
+                        member_operations[attribute].command.set_option(other_entity, values.join(','));
+                        member_operations[attribute].has_values = true;
                     }
                     continue;
                 }
@@ -467,10 +476,16 @@ function ipa_hbac_details_facet(spec) {
                     continue;
                 }
 
+                if (categories[field.name]) {
+                    if (values[0] == 'all') {
+                        categories[field.name].remove_values = true;
+                    }
+                }
+
                 // use setattr/addattr if param_info not available
                 if (!param_info) {
                     for (var k=0; k<values.length; k++) {
-                        modify_operation.set_option(
+                        modify_operation.command.set_option(
                             k == 0 ? 'setattr' : 'addattr',
                             field.name+'='+values[k]
                         );
@@ -479,15 +494,6 @@ function ipa_hbac_details_facet(spec) {
                     continue;
                 }
 
-                var attribute = member_category[field.name];
-                if (attribute) {
-                    // if category is dirty, it means 'Any *' is selected,
-                    // so existing values have to be removed
-                    remove_members[attribute].category_changed = true;
-
-                    // fall through to trigger modify operation
-                }
-
                 // set modify options
                 if (values.length == 1) {
                     modify_operation.command.set_option(field.name, values[0]);
@@ -499,7 +505,8 @@ function ipa_hbac_details_facet(spec) {
         }
 
         var batch = ipa_batch_command({
-            'on_success': function success_handler(data, text_status, xhr) {
+            'name': 'hbac_details_update',
+            'on_success': function(data, text_status, xhr) {
                 that.refresh();
             },
             'on_error': function(xhr, text_status, error_thrown) {
@@ -507,10 +514,11 @@ function ipa_hbac_details_facet(spec) {
             }
         });
 
-        for (var attribute in remove_members) {
-            if (remove_members[attribute].has_values &&
-                remove_members[attribute].category_changed) {
-                batch.add_command(remove_members[attribute].command);
+        for (var member_attribute in member_operations) {
+            var member_operation = member_operations[member_attribute];
+            if (member_operation.has_values &&
+                categories[member_operation.category].remove_values) {
+                batch.add_command(member_operations[member_attribute].command);
             }
         }
 
@@ -519,7 +527,7 @@ function ipa_hbac_details_facet(spec) {
         if (modify_operation.execute) batch.add_command(modify_operation.command);
         if (enable_operation.execute) batch.add_command(enable_operation.command);
 
-        if (!batch.args.length) {
+        if (!batch.commands.length) {
             that.refresh();
             return;
         }
@@ -680,63 +688,6 @@ function ipa_hbac_details_general_section(spec){
     return that;
 }
 
-function ipa_hbac_association_widget(spec) {
-
-    spec = spec || {};
-
-    var that = ipa_association_table_widget(spec);
-
-    that.category = spec.category;
-
-    that.add = function(values, on_success, on_error) {
-
-        var pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
-
-        var batch = ipa_batch_command({
-            'on_success': on_success,
-            'on_error': on_error
-        });
-
-        var command = ipa_command({
-            'method': that.entity_name+'_mod',
-            'args': [pkey],
-            'options': {'all': true, 'rights': true},
-            'on_success': function() {
-                that.category.load(['']);
-            }
-        });
-        command.set_option(that.category.name, '');
-        batch.add_command(command);
-
-        command = ipa_command({
-            'method': that.entity_name+'_'+that.add_method,
-            'args': [pkey]
-        });
-        command.set_option(that.other_entity, values.join(','));
-        batch.add_command(command);
-
-        batch.execute();
-    };
-
-    that.remove = function(values, on_success, on_error) {
-
-        var pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
-
-        var command = ipa_command({
-            'method': that.entity_name+'_'+that.remove_method,
-            'args': [pkey],
-            'on_success': on_success,
-            'on_error': on_error
-        });
-
-        command.set_option(that.other_entity, values.join(','));
-
-        command.execute();
-    };
-
-    return that;
-}
-
 function ipa_hbac_accesstime_widget(spec) {
 
     spec = spec || {};
diff --git a/install/static/hbacsvcgroup.js b/install/static/hbacsvcgroup.js
index 6e7460e0b..85c77c277 100755
--- a/install/static/hbacsvcgroup.js
+++ b/install/static/hbacsvcgroup.js
@@ -152,7 +152,8 @@ function ipa_hbacsvcgroup_details_facet(spec) {
         var field = ipa_hbacsvcgroup_member_hbacsvc_table_widget({
             'name': 'member_hbacsvc',
             'label': 'Services',
-            'other_entity': 'hbacsvc'
+            'other_entity': 'hbacsvc',
+            'save_values': false
         });
         section.add_field(field);
 
diff --git a/install/static/ipa.css b/install/static/ipa.css
index 7a3f3e89a..be695a0f2 100644
--- a/install/static/ipa.css
+++ b/install/static/ipa.css
@@ -1,6 +1,7 @@
 /* Authors:
  *   Pavel Zuna <pzuna@redhat.com>
  *   Adam Young <ayoung@redhat.com>
+ *   Endi Sukma Dewata <edewata@redhat.com>
  *
  * Copyright (C) 2010 Red Hat
 */
@@ -479,3 +480,70 @@ dl.modal dd {
 .ui-widget-content {
 border:0;
 }
+
+table.scrollable thead {
+    display: block;
+}
+
+table.scrollable tbody {
+    display: block;
+    overflow: auto;
+}
+
+.adder-dialog-filter {
+    height: 25px;
+}
+
+.adder-dialog-filter {
+    height: 25px;
+}
+
+.adder-dialog-results {
+    position: relative;
+    height: 200px;
+}
+
+.adder-dialog-available {
+    border: 1px solid black;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    bottom: 0px;
+    width: 250px;
+}
+
+.adder-dialog-buttons {
+    position: absolute;
+    top: 15px;
+    left: 250px;
+    right: 250px;
+    bottom: 0px;
+    text-align: center;
+}
+
+.adder-dialog-selected {
+    border: 1px solid black;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    width: 250px;
+}
+
+.adder-dialog-internal {
+    border: 1px solid black;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    bottom: 45px;
+    width: 250px;
+}
+
+.adder-dialog-external {
+    border: 1px solid black;
+    position: absolute;
+    left: 0px;
+    bottom: 0px;
+    width: 250px;
+    height: 40px;
+}
\ No newline at end of file
diff --git a/install/static/layouts/default/sudorule-details-general.html b/install/static/layouts/default/sudorule-details-general.html
new file mode 100755
index 000000000..728ecf11e
--- /dev/null
+++ b/install/static/layouts/default/sudorule-details-general.html
@@ -0,0 +1,49 @@
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>General</title>
+
+    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
+    <link rel="stylesheet" type="text/css" href="ipa.css" />
+</head>
+<body>
+<div id="contents">
+    <table style="width: 100%; border: 0 solid black;">
+    <tr>
+        <td style="width: 100px; text-align: right;">
+            Name:
+        </td>
+        <td>
+            <span name="cn">
+                <input type="text" name="cn" size="30"/>
+                <span name="undo" class="ui-state-highlight ui-corner-all" style="display: none;">undo</span>
+            </span>
+        </td>
+    </tr>
+    <tr>
+        <td style="text-align: right; vertical-align: top;">
+            Description:
+        </td>
+        <td>
+            <span name="description">
+                <textarea name="description" rows="5" style="width: 100%;" cols="40"></textarea>
+                <span name="undo" class="ui-state-highlight ui-corner-all" style="display: none;">undo</span>
+            </span>
+        </td>
+    </tr>
+    <tr>
+        <td style="text-align: right; vertical-align: top;">
+            Rule status:
+        </td>
+        <td>
+            <span name="ipaenabledflag">
+                <input type="radio" name="ipaenabledflag" value="TRUE"/>Active
+                <input type="radio" name="ipaenabledflag" value="FALSE"/>Inactive
+                <span name="undo" class="ui-state-highlight ui-corner-all" style="display: none;">undo</span>
+            </span>
+        </td>
+    </tr>
+    </table>
+</div>
+</body>
+</html>
diff --git a/install/static/layouts/default/sudorule-group-dialog.html b/install/static/layouts/default/sudorule-group-dialog.html
new file mode 100755
index 000000000..d576f1a1f
--- /dev/null
+++ b/install/static/layouts/default/sudorule-group-dialog.html
@@ -0,0 +1,110 @@
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>Adder Dialog</title>
+
+    <link rel="stylesheet" type="text/css" href="../../jquery-ui.css" />
+    <link rel="stylesheet" type="text/css" href="../../ipa.css" />
+</head>
+<body>
+<div id="contents">
+
+    <div class="adder-dialog-filter">
+        <input type="text" name="filter" style="width: 244px">
+        <input type="button" name="find" value="Find">
+    </div>
+
+    <div class="adder-dialog-results">
+
+        <div name="available" class="adder-dialog-internal">
+
+            <div class="ui-widget-header">
+                Available
+            </div>
+
+            <table class="search-table scrollable">
+                <thead>
+                    <tr>
+                        <th style="width: 22px;">
+                            <input type="checkbox" name="select">
+                        </th>
+                        <th style="width: 216px;">
+                            Groups
+                        </th>
+                    </tr>
+                </thead>
+                <tbody style="height: 106px;">
+                    <tr>
+                        <td style="width: 22px;">
+                            <input type="checkbox" name="select">
+                        </td>
+                        <td style="width: 200px;">
+                            <span name="cn"></span>
+                        </td>
+                    </tr>
+                </tbody>
+                <tfoot>
+                    <tr>
+                        <td colspan="2">
+                            <span name="summary"></span>
+                        </td>
+                    </tr>
+                </tfoot>
+            </table>
+        </div>
+
+        <div name="buttons" class="adder-dialog-buttons">
+            <p><input type="button" name="remove" value="<<"></p>
+            <p><input type="button" name="add" value=">>"></p>
+        </div>
+
+        <div name="selected" class="adder-dialog-selected">
+
+            <div class="ui-widget-header">
+                Prospective
+            </div>
+
+            <table class="search-table scrollable">
+                <thead>
+                    <tr>
+                        <th style="width: 22px;">
+                            <input type="checkbox" name="select">
+                        </th>
+                        <th style="width: 216px;">
+                            Groups
+                        </th>
+                    </tr>
+                </thead>
+                <tbody style="height: 151px;">
+                    <tr>
+                        <td style="width: 22px;">
+                            <input type="checkbox" name="select">
+                        </td>
+                        <td style="width: 200px;">
+                            <span name="cn"></span>
+                        </td>
+                    </tr>
+                </tbody>
+                <tfoot>
+                    <tr>
+                        <td colspan="2">
+                            <span name="summary"></span>
+                        </td>
+                    </tr>
+                </tfoot>
+            </table>
+        </div>
+
+        <div name="external" class="adder-dialog-external">
+
+            <div class="ui-widget-header">
+                External
+            </div>
+
+            <input type="text" name="external" style="width: 244px">
+        </div>
+
+    </div>
+</div>
+</body>
+</html>
diff --git a/install/static/layouts/default/sudorule-host-dialog.html b/install/static/layouts/default/sudorule-host-dialog.html
new file mode 100755
index 000000000..5eec41868
--- /dev/null
+++ b/install/static/layouts/default/sudorule-host-dialog.html
@@ -0,0 +1,110 @@
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>Adder Dialog</title>
+
+    <link rel="stylesheet" type="text/css" href="../../jquery-ui.css" />
+    <link rel="stylesheet" type="text/css" href="../../ipa.css" />
+</head>
+<body>
+<div id="contents">
+
+    <div class="adder-dialog-filter">
+        <input type="text" name="filter" style="width: 244px">
+        <input type="button" name="find" value="Find">
+    </div>
+
+    <div class="adder-dialog-results">
+
+        <div name="available" class="adder-dialog-internal">
+
+            <div class="ui-widget-header">
+                Available
+            </div>
+
+            <table class="search-table scrollable">
+                <thead>
+                    <tr>
+                        <th style="width: 22px;">
+                            <input type="checkbox" name="select">
+                        </th>
+                        <th style="width: 216px;">
+                            Hosts
+                        </th>
+                    </tr>
+                </thead>
+                <tbody style="height: 106px;">
+                    <tr>
+                        <td style="width: 22px;">
+                            <input type="checkbox" name="select">
+                        </td>
+                        <td style="width: 200px;">
+                            <span name="fqdn"></span>
+                        </td>
+                    </tr>
+                </tbody>
+                <tfoot>
+                    <tr>
+                        <td colspan="2">
+                            <span name="summary"></span>
+                        </td>
+                    </tr>
+                </tfoot>
+            </table>
+        </div>
+
+        <div name="buttons" class="adder-dialog-buttons">
+            <p><input type="button" name="remove" value="<<"></p>
+            <p><input type="button" name="add" value=">>"></p>
+        </div>
+
+        <div name="selected" class="adder-dialog-selected">
+
+            <div class="ui-widget-header">
+                Prospective
+            </div>
+
+            <table class="search-table scrollable">
+                <thead>
+                    <tr>
+                        <th style="width: 22px;">
+                            <input type="checkbox" name="select">
+                        </th>
+                        <th style="width: 216px;">
+                            Hosts
+                        </th>
+                    </tr>
+                </thead>
+                <tbody style="height: 151px;">
+                    <tr>
+                        <td style="width: 22px;">
+                            <input type="checkbox" name="select">
+                        </td>
+                        <td style="width: 200px;">
+                            <span name="fqdn"></span>
+                        </td>
+                    </tr>
+                </tbody>
+                <tfoot>
+                    <tr>
+                        <td colspan="2">
+                            <span name="summary"></span>
+                        </td>
+                    </tr>
+                </tfoot>
+            </table>
+        </div>
+
+        <div name="external" class="adder-dialog-external">
+
+            <div class="ui-widget-header">
+                External
+            </div>
+
+            <input type="text" name="external" style="width: 244px">
+        </div>
+
+    </div>
+</div>
+</body>
+</html>
diff --git a/install/static/layouts/default/sudorule-hostgroup-dialog.html b/install/static/layouts/default/sudorule-hostgroup-dialog.html
new file mode 100755
index 000000000..57d72f387
--- /dev/null
+++ b/install/static/layouts/default/sudorule-hostgroup-dialog.html
@@ -0,0 +1,110 @@
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>Adder Dialog</title>
+
+    <link rel="stylesheet" type="text/css" href="../../jquery-ui.css" />
+    <link rel="stylesheet" type="text/css" href="../../ipa.css" />
+</head>
+<body>
+<div id="contents">
+
+    <div class="adder-dialog-filter">
+        <input type="text" name="filter" style="width: 244px">
+        <input type="button" name="find" value="Find">
+    </div>
+
+    <div class="adder-dialog-results">
+
+        <div name="available" class="adder-dialog-internal">
+
+            <div class="ui-widget-header">
+                Available
+            </div>
+
+            <table class="search-table scrollable">
+                <thead>
+                    <tr>
+                        <th style="width: 22px;">
+                            <input type="checkbox" name="select">
+                        </th>
+                        <th style="width: 216px;">
+                            Host Groups
+                        </th>
+                    </tr>
+                </thead>
+                <tbody style="height: 106px;">
+                    <tr>
+                        <td style="width: 22px;">
+                            <input type="checkbox" name="select">
+                        </td>
+                        <td style="width: 200px;">
+                            <span name="cn"></span>
+                        </td>
+                    </tr>
+                </tbody>
+                <tfoot>
+                    <tr>
+                        <td colspan="2">
+                            <span name="summary"></span>
+                        </td>
+                    </tr>
+                </tfoot>
+            </table>
+        </div>
+
+        <div name="buttons" class="adder-dialog-buttons">
+            <p><input type="button" name="remove" value="<<"></p>
+            <p><input type="button" name="add" value=">>"></p>
+        </div>
+
+        <div name="selected" class="adder-dialog-selected">
+
+            <div class="ui-widget-header">
+                Prospective
+            </div>
+
+            <table class="search-table scrollable">
+                <thead>
+                    <tr>
+                        <th style="width: 22px;">
+                            <input type="checkbox" name="select">
+                        </th>
+                        <th style="width: 216px;">
+                            Host Groups
+                        </th>
+                    </tr>
+                </thead>
+                <tbody style="height: 151px;">
+                    <tr>
+                        <td style="width: 22px;">
+                            <input type="checkbox" name="select">
+                        </td>
+                        <td style="width: 200px;">
+                            <span name="cn"></span>
+                        </td>
+                    </tr>
+                </tbody>
+                <tfoot>
+                    <tr>
+                        <td colspan="2">
+                            <span name="summary"></span>
+                        </td>
+                    </tr>
+                </tfoot>
+            </table>
+        </div>
+
+        <div name="external" class="adder-dialog-external">
+
+            <div class="ui-widget-header">
+                External
+            </div>
+
+            <input type="text" name="external" style="width: 244px">
+        </div>
+
+    </div>
+</div>
+</body>
+</html>
diff --git a/install/static/layouts/default/sudorule-user-dialog.html b/install/static/layouts/default/sudorule-user-dialog.html
new file mode 100755
index 000000000..c40b97594
--- /dev/null
+++ b/install/static/layouts/default/sudorule-user-dialog.html
@@ -0,0 +1,110 @@
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>SAdder Dialog</title>
+
+    <link rel="stylesheet" type="text/css" href="../../jquery-ui.css" />
+    <link rel="stylesheet" type="text/css" href="../../ipa.css" />
+</head>
+<body>
+<div id="contents">
+
+    <div class="adder-dialog-filter">
+        <input type="text" name="filter" style="width: 244px">
+        <input type="button" name="find" value="Find">
+    </div>
+
+    <div class="adder-dialog-results">
+
+        <div name="available" class="adder-dialog-internal">
+
+            <div class="ui-widget-header">
+                Available
+            </div>
+
+            <table class="search-table scrollable">
+                <thead style="display: block;">
+                    <tr>
+                        <th style="width: 22px;">
+                            <input type="checkbox" name="select">
+                        </th>
+                        <th style="width: 216px;">
+                            Users
+                        </th>
+                    </tr>
+                </thead>
+                <tbody style="height: 106px;">
+                    <tr>
+                        <td style="width: 22px;">
+                            <input type="checkbox" name="select">
+                        </td>
+                        <td style="width: 200px;">
+                            <span name="uid"></span>
+                        </td>
+                    </tr>
+                </tbody>
+                <tfoot>
+                    <tr>
+                        <td colspan="2">
+                            <span name="summary"></span>
+                        </td>
+                    </tr>
+                </tfoot>
+            </table>
+        </div>
+
+        <div name="buttons" class="adder-dialog-buttons">
+            <p><input type="button" name="remove" value="<<"></p>
+            <p><input type="button" name="add" value=">>"></p>
+        </div>
+
+        <div name="selected" class="adder-dialog-selected">
+
+            <div class="ui-widget-header">
+                Prospective
+            </div>
+
+            <table class="search-table scrollable">
+                <thead>
+                    <tr>
+                        <th style="width: 22px;">
+                            <input type="checkbox" name="select">
+                        </th>
+                        <th style="width: 216px;">
+                            Users
+                        </th>
+                    </tr>
+                </thead>
+                <tbody style="height: 151px;">
+                    <tr>
+                        <td style="width: 22px;">
+                            <input type="checkbox" name="select">
+                        </td>
+                        <td style="width: 200px;">
+                            <span name="uid"></span>
+                        </td>
+                    </tr>
+                </tbody>
+                <tfoot>
+                    <tr>
+                        <td colspan="2">
+                            <span name="summary"></span>
+                        </td>
+                    </tr>
+                </tfoot>
+            </table>
+        </div>
+
+        <div name="external" class="adder-dialog-external">
+
+            <div class="ui-widget-header">
+                External
+            </div>
+
+            <input type="text" name="external" style="width: 244px">
+        </div>
+
+    </div>
+</div>
+</body>
+</html>
diff --git a/install/static/rule.js b/install/static/rule.js
index ec1eb72ce..73c33b30e 100755
--- a/install/static/rule.js
+++ b/install/static/rule.js
@@ -77,3 +77,50 @@ function ipa_rule_details_section(spec){
 
     return that;
 }
+
+function ipa_rule_association_table_widget(spec) {
+
+    spec = spec || {};
+
+    var that = ipa_association_table_widget(spec);
+
+    that.category = spec.category;
+
+    that.add = function(values, on_success, on_error) {
+
+        var pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
+
+        var batch = ipa_batch_command({
+            'on_success': on_success,
+            'on_error': on_error
+        });
+
+        var command;
+
+        if (that.category.save() != '') {
+            command = ipa_command({
+                'method': that.entity_name+'_mod',
+                'args': [pkey],
+                'options': {'all': true, 'rights': true},
+                'on_success': function() {
+                    var record = {};
+                    record[that.category.name] = [''];
+                    that.category.load(['']);
+                }
+            });
+            command.set_option(that.category.name, '');
+            batch.add_command(command);
+        }
+
+        command = ipa_command({
+            'method': that.entity_name+'_'+that.add_method,
+            'args': [pkey]
+        });
+        command.set_option(that.other_entity, values.join(','));
+        batch.add_command(command);
+
+        batch.execute();
+    };
+
+    return that;
+}
diff --git a/install/static/sudocmdgroup.js b/install/static/sudocmdgroup.js
index 4188bc478..ecb5e0a9a 100755
--- a/install/static/sudocmdgroup.js
+++ b/install/static/sudocmdgroup.js
@@ -155,7 +155,8 @@ function ipa_sudocmdgroup_details_facet(spec) {
         var field = ipa_sudocmdgroup_member_sudocmd_table_widget({
             'name': 'member_sudocmd',
             'label': 'Commands',
-            'other_entity': 'sudocmd'
+            'other_entity': 'sudocmd',
+            'save_values': false
         });
         section.add_field(field);
 
diff --git a/install/static/sudorule.js b/install/static/sudorule.js
index 101f8c41f..61eef6bf0 100755
--- a/install/static/sudorule.js
+++ b/install/static/sudorule.js
@@ -110,20 +110,35 @@ function ipa_sudorule_details_facet(spec) {
 
     that.init = function() {
 
-        var section = ipa_details_list_section({
-            'name': 'general',
-            'label': 'General'
-        });
-        that.add_section(section);
-
-        section.create_field({'name': 'cn', 'read_only': true});
-        section.create_field({'name': 'description'});
-        section.create_field({'name': 'cmdcategory'});
+        var section;
+
+        if (IPA.layout) {
+            section = that.create_section({
+                'name': 'general',
+                'label': 'General',
+                'template': 'sudorule-details-general.html #contents'
+            });
+
+        } else {
+            section = ipa_sudorule_details_general_section({
+                'name': 'general',
+                'label': 'General'
+            });
+            that.add_section(section);
+        }
+
+        section.create_text({ 'name': 'cn', 'read_only': true });
+        section.create_textarea({ 'name': 'description' });
+        section.create_radio({ 'name': 'ipaenabledflag' });
 
         section = ipa_rule_details_section({
             'name': 'user',
             'label': 'Who',
-            'field_name': 'memberuser',
+            'field_name': 'usercategory',
+            'options': [
+                { 'value': 'all', 'label': 'Anyone' },
+                { 'value': '', 'label': 'Specified Users and Groups' }
+            ],
             'tables': [
                 { 'field_name': 'memberuser_user' },
                 { 'field_name': 'memberuser_group' }
@@ -131,21 +146,26 @@ function ipa_sudorule_details_facet(spec) {
         });
         that.add_section(section);
 
-        section.add_field(ipa_association_table_widget({
+        var category = section.create_radio({ name: 'usercategory', label: 'User category' });
+        section.add_field(ipa_sudorule_association_table_widget({
             'id': that.entity_name+'-memberuser_user',
-            'name': 'memberuser_user', 'label': 'Users',
+            'name': 'memberuser_user', 'label': 'Users', 'category': category,
             'other_entity': 'user', 'add_method': 'add_user', 'remove_method': 'remove_user'
         }));
-        section.add_field(ipa_association_table_widget({
+        section.add_field(ipa_sudorule_association_table_widget({
             'id': that.entity_name+'-memberuser_group',
-            'name': 'memberuser_group', 'label': 'Groups',
+            'name': 'memberuser_group', 'label': 'Groups', 'category': category,
             'other_entity': 'group', 'add_method': 'add_user', 'remove_method': 'remove_user'
         }));
 
         section = ipa_rule_details_section({
             'name': 'host',
-            'label': 'Where',
-            'field_name': 'memberhost',
+            'label': 'Access this host',
+            'field_name': 'hostcategory',
+            'options': [
+                { 'value': 'all', 'label': 'Any Host' },
+                { 'value': '', 'label': 'Specified Hosts and Groups' }
+            ],
             'tables': [
                 { 'field_name': 'memberhost_host' },
                 { 'field_name': 'memberhost_hostgroup' }
@@ -153,62 +173,760 @@ function ipa_sudorule_details_facet(spec) {
         });
         that.add_section(section);
 
-        section.add_field(ipa_association_table_widget({
+        category = section.create_radio({ 'name': 'hostcategory', 'label': 'Host category' });
+        section.add_field(ipa_sudorule_association_table_widget({
             'id': that.entity_name+'-memberhost_host',
-            'name': 'memberhost_host', 'label': 'Host',
+            'name': 'memberhost_host', 'label': 'Host', 'category': category,
             'other_entity': 'host', 'add_method': 'add_host', 'remove_method': 'remove_host'
         }));
-        section.add_field(ipa_association_table_widget({
+        section.add_field(ipa_sudorule_association_table_widget({
             'id': that.entity_name+'-memberhost_hostgroup',
-            'name': 'memberhost_hostgroup', 'label': 'Groups',
+            'name': 'memberhost_hostgroup', 'label': 'Groups', 'category': category,
             'other_entity': 'hostgroup', 'add_method': 'add_host', 'remove_method': 'remove_host'
         }));
 
-        section = ipa_rule_details_section({
-            'name': 'allow',
-            'label': 'Allow',
-            'field_name': 'memberallowcmd',
-            'tables': [
-                { 'field_name': 'memberallowcmd_sudocmd' },
-                { 'field_name': 'memberallowcmd_sudocmdgroup' }
-            ]
+        section = ipa_sudorule_details_command_section({
+            'name': 'command',
+            'label': 'Run Commands'
         });
         that.add_section(section);
 
-        section.add_field(ipa_association_table_widget({
+        section = ipa_sudorule_details_runas_section({
+            'name': 'runas',
+            'label': 'As Whom'
+        });
+        that.add_section(section);
+
+        that.details_facet_init();
+    };
+
+    that.load = function(record) {
+        var category = record['cmdcategory'];
+        if (category && category[0] == 'all') {
+            record['cmdcategory'] = ['allow'];
+
+        } else {
+            var memberallowcmd_sudocmd = record['memberallowcmd_sudocmd'];
+            var memberallowcmd_sudocmdgroup = record['memberallowcmd_sudocmdgroup'];
+            var memberdenycmd_sudocmd = record['memberdenycmd_sudocmd'];
+            var memberdenycmd_sudocmdgroup = record['memberdenycmd_sudocmdgroup'];
+
+            if (!memberallowcmd_sudocmd && !memberallowcmd_sudocmdgroup
+                && !memberdenycmd_sudocmd && !memberdenycmd_sudocmdgroup) {
+                record['cmdcategory'] = ['deny'];
+
+            } else {
+                record['cmdcategory'] = [''];
+            }
+        }
+
+        that.details_facet_load(record);
+    };
+
+    that.update = function() {
+
+        var pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
+
+        var modify_operation = {
+            'execute': false,
+            'command': ipa_command({
+                'method': that.entity_name+'_mod',
+                'args': [pkey],
+                'options': {'all': true, 'rights': true}
+            })
+        };
+
+        var categories = {
+            'usercategory': {
+                'remove_values': false
+            },
+            'hostcategory': {
+                'remove_values': false
+            },
+            'cmdcategory': {
+                'remove_values': false
+            },
+            'runasusercategory': {
+                'remove_values': false
+            },
+            'runasgroupcategory': {
+                'remove_values': false
+            }
+        };
+
+        var member_operations = {
+            'memberuser': {
+                'category': 'usercategory',
+                'has_values': false,
+                'command': ipa_command({
+                    'method': that.entity_name+'_remove_user',
+                    'args': [pkey],
+                    'options': {'all': true, 'rights': true}
+                })
+            },
+            'memberhost': {
+                'category': 'hostcategory',
+                'has_values': false,
+                'command': ipa_command({
+                    'method': that.entity_name+'_remove_host',
+                    'args': [pkey],
+                    'options': {'all': true, 'rights': true}
+                })
+            },
+            'memberallowcmd': {
+                'category': 'cmdcategory',
+                'has_values': false,
+                'command': ipa_command({
+                    'method': that.entity_name+'_remove_allow_command',
+                    'args': [pkey],
+                    'options': {'all': true, 'rights': true}
+                })
+            },
+            'memberdenycmd': {
+                'category': 'cmdcategory',
+                'has_values': false,
+                'command': ipa_command({
+                    'method': that.entity_name+'_remove_deny_command',
+                    'args': [pkey],
+                    'options': {'all': true, 'rights': true}
+                })
+            },
+            'runasuser': {
+                'category': 'runasusercategory',
+                'has_values': false,
+                'command': ipa_command({
+                    'method': that.entity_name+'_remove_runas_user',
+                    'args': [pkey],
+                    'options': {'all': true, 'rights': true}
+                })
+            },
+            'runasgroup': {
+                'category': 'runasgroupcategory',
+                'has_values': false,
+                'command': ipa_command({
+                    'method': that.entity_name+'_remove_runas_group',
+                    'args': [pkey],
+                    'options': {'all': true, 'rights': true}
+                })
+            }
+        };
+
+        var enable_operation = {
+            'execute': false,
+            'command': ipa_command({
+                'method': that.entity_name+'_enable',
+                'args': [pkey],
+                'options': {'all': true, 'rights': true}
+            })
+        };
+
+        for (var i=0; i<that.sections.length; i++) {
+            var section = that.sections[i];
+
+            var div = $('#'+that.entity_name+'-'+that.name+'-'+section.name, that.container);
+
+            for (var j=0; j<section.fields.length; j++) {
+                var field = section.fields[j];
+
+                var span = $('span[name='+field.name+']', div).first();
+                var values = field.save();
+                if (!values) continue;
+
+                var param_info = ipa_get_param_info(that.entity_name, field.name);
+
+                // skip primary key
+                if (param_info && param_info['primary_key']) continue;
+
+                var p = field.name.indexOf('_');
+                if (p >= 0) {
+                    // prepare command to remove members if needed
+                    var attribute = field.name.substring(0, p);
+                    var other_entity = field.name.substring(p+1);
+
+                    if (values.length) {
+                        member_operations[attribute].command.set_option(other_entity, values.join(','));
+                        member_operations[attribute].has_values = true;
+                    }
+                    continue;
+                }
+
+                // skip unchanged field
+                if (!field.is_dirty(span)) continue;
+
+                // check enable/disable
+                if (field.name == 'ipaenabledflag') {
+                    if (values[0] == 'FALSE') enable_operation.command.method = that.entity_name+'_disable';
+                    enable_operation.execute = true;
+                    continue;
+                }
+
+                if (field.name == 'cmdcategory') {
+                    var value = values[0];
+                    if (value == 'allow') {
+                        values = ['all'];
+                        categories[field.name].remove_values = true;
+                    } else if (value == 'deny') {
+                        values = [];
+                        categories[field.name].remove_values = true;
+                    } else {
+                        values = [];
+                    }
+
+                } else if (categories[field.name]) {
+                    if (values[0] == 'all') {
+                        categories[field.name].remove_values = true;
+                    }
+                }
+
+                // use setattr/addattr if param_info not available
+                if (!param_info) {
+                    for (var k=0; k<values.length; k++) {
+                        modify_operation.command.set_option(
+                            k == 0 ? 'setattr' : 'addattr',
+                            field.name+'='+values[k]
+                        );
+                        modify_operation.execute = true;
+                    }
+                    continue;
+                }
+
+                // set modify options
+                if (values.length == 1) {
+                    modify_operation.command.set_option(field.name, values[0]);
+                } else {
+                    modify_operation.command.set_option(field.name, values);
+                }
+                modify_operation.execute = true;
+            }
+        }
+
+        var batch = ipa_batch_command({
+            'name': 'sudorule_details_update',
+            'on_success': function(data, text_status, xhr) {
+                that.refresh();
+            },
+            'on_error': function(xhr, text_status, error_thrown) {
+                that.refresh();
+            }
+        });
+
+        for (var member_attribute in member_operations) {
+            var member_operation = member_operations[member_attribute];
+            if (member_operation.has_values &&
+                categories[member_operation.category].remove_values) {
+                batch.add_command(member_operation.command);
+            }
+        }
+
+        if (modify_operation.execute) batch.add_command(modify_operation.command);
+        if (enable_operation.execute) batch.add_command(enable_operation.command);
+
+        if (!batch.commands.length) {
+            that.refresh();
+            return;
+        }
+
+        //alert(JSON.stringify(batch.to_json()));
+
+        batch.execute();
+    };
+
+    return that;
+}
+
+function ipa_sudorule_details_general_section(spec){
+
+    spec = spec || {};
+
+    var that = ipa_details_section(spec);
+
+    that.create = function(container) {
+
+        var table = $('<table/>', {
+            'style': 'width: 100%;'
+        }).appendTo(container);
+
+        var tr = $('<tr/>').appendTo(table);
+
+        var td = $('<td/>', {
+            'style': 'width: 100px; text-align: right;',
+            'html': 'Name:'
+        }).appendTo(tr);
+
+        td = $('<td/>').appendTo(tr);
+
+        var span = $('<span/>', { 'name': 'cn' }).appendTo(td);
+
+        $('<input/>', {
+            'type': 'text',
+            'name': 'cn',
+            'size': 30
+        }).appendTo(span);
+
+        span.append(' ');
+
+        $('<span/>', {
+            'name': 'undo',
+            'class': 'ui-state-highlight ui-corner-all',
+            'style': 'display: none;',
+            'html': 'undo'
+        }).appendTo(span);
+
+        tr = $('<tr/>').appendTo(table);
+
+        td = $('<td/>', {
+            'style': 'text-align: right; vertical-align: top;',
+            'html': 'Description:'
+        }).appendTo(tr);
+
+        td = $('<td/>').appendTo(tr);
+
+        span = $('<span/>', { 'name': 'description' }).appendTo(td);
+
+        $('<textarea/>', {
+            'name': 'description',
+            'rows': 5,
+            'style': 'width: 100%'
+        }).appendTo(span);
+
+        span.append(' ');
+
+        $('<span/>', {
+            'name': 'undo',
+            'class': 'ui-state-highlight ui-corner-all',
+            'style': 'display: none;',
+            'html': 'undo'
+        }).appendTo(span);
+
+        tr = $('<tr/>').appendTo(table);
+
+        td = $('<td/>', {
+            'style': 'text-align: right; vertical-align: top;',
+            'html': 'Rule status:'
+        }).appendTo(tr);
+
+        td = $('<td/>').appendTo(tr);
+
+        span = $('<span/>', { 'name': 'ipaenabledflag' }).appendTo(td);
+
+        $('<input/>', {
+            'type': 'radio',
+            'name': 'ipaenabledflag',
+            'value': 'TRUE'
+        }).appendTo(span);
+
+        span.append('Active');
+
+        $('<input/>', {
+            'type': 'radio',
+            'name': 'ipaenabledflag',
+            'value': 'FALSE'
+        }).appendTo(span);
+
+        span.append('Inactive');
+
+        span.append(' ');
+
+        $('<span/>', {
+            'name': 'undo',
+            'class': 'ui-state-highlight ui-corner-all',
+            'style': 'display: none;',
+            'html': 'undo'
+        }).appendTo(span);
+    };
+
+    return that;
+}
+
+function ipa_sudorule_details_command_section(spec){
+
+    spec = spec || {};
+
+    var that = ipa_details_section(spec);
+
+    that.init = function() {
+
+        var category = that.create_radio({'name': 'cmdcategory'});
+
+        that.add_field(ipa_sudorule_command_table_widget({
             'id': that.entity_name+'-memberallowcmd_sudocmd',
             'name': 'memberallowcmd_sudocmd', 'label': 'Command',
+            'category': category, 'section': that,
             'other_entity': 'sudocmd', 'add_method': 'add_allow_command', 'remove_method': 'remove_allow_command'
         }));
-        section.add_field(ipa_association_table_widget({
+        that.add_field(ipa_sudorule_command_table_widget({
             'id': that.entity_name+'-memberallowcmd_sudocmdgroup',
             'name': 'memberallowcmd_sudocmdgroup', 'label': 'Groups',
+            'category': category, 'section': that,
             'other_entity': 'sudocmdgroup', 'add_method': 'add_allow_command', 'remove_method': 'remove_allow_command'
         }));
 
-        section = ipa_rule_details_section({
-            'name': 'deny',
-            'label': 'Deny',
-            'field_name': 'memberdenycmd',
-            'tables': [
-                { 'field_name': 'memberdenycmd_sudocmd' },
-                { 'field_name': 'memberdenycmd_sudocmdgroup' }
-            ]
-        });
-        that.add_section(section);
-
-        section.add_field(ipa_association_table_widget({
+        that.add_field(ipa_sudorule_command_table_widget({
             'id': that.entity_name+'-memberdenycmd_sudocmd',
             'name': 'memberdenycmd_sudocmd', 'label': 'Command',
+            'category': category, 'section': that,
             'other_entity': 'sudocmd', 'add_method': 'add_deny_command', 'remove_method': 'remove_deny_command'
         }));
-        section.add_field(ipa_association_table_widget({
+        that.add_field(ipa_sudorule_command_table_widget({
             'id': that.entity_name+'-memberdenycmd_sudocmdgroup',
             'name': 'memberdenycmd_sudocmdgroup', 'label': 'Groups',
+            'category': category, 'section': that,
             'other_entity': 'sudocmdgroup', 'add_method': 'add_deny_command', 'remove_method': 'remove_deny_command'
         }));
 
-        that.details_facet_init();
+        that.section_init();
+    };
+
+    that.create = function(container) {
+
+        if (that.template) return;
+
+        var span = $('<span/>', { 'name': 'cmdcategory' }).appendTo(container);
+
+        $('<input/>', {
+            'type': 'radio',
+            'name': 'cmdcategory',
+            'value': 'allow'
+        }).appendTo(span);
+
+        span.append('Allow Any Command / Group');
+
+        span.append(' ');
+
+        $('<span/>', {
+            'name': 'undo',
+            'class': 'ui-state-highlight ui-corner-all',
+            'style': 'display: none;',
+            'html': 'undo'
+        }).appendTo(span);
+
+        span.append('<br/>');
+
+        $('<input/>', {
+            'type': 'radio',
+            'name': 'cmdcategory',
+            'value': 'deny'
+        }).appendTo(span);
+
+        span.append('Deny Any Command / Group');
+
+        span.append('<br/>');
+
+        $('<input/>', {
+            'type': 'radio',
+            'name': 'cmdcategory',
+            'value': ''
+        }).appendTo(span);
+
+        span.append('Specific Command / Group');
+
+        $('<h3/>', { text: 'Allow' }).appendTo(span);
+
+        var table_span = $('<span/>', { 'name': 'memberallowcmd_sudocmd' }).appendTo(span);
+        var field = that.get_field('memberallowcmd_sudocmd');
+        field.create(table_span);
+
+        table_span = $('<span/>', { 'name': 'memberallowcmd_sudocmdgroup' }).appendTo(span);
+        field = that.get_field('memberallowcmd_sudocmdgroup');
+        field.create(table_span);
+
+        $('<h3/>', { text: 'Deny' }).appendTo(span);
+
+        table_span = $('<span/>', { 'name': 'memberdenycmd_sudocmd' }).appendTo(span);
+        field = that.get_field('memberdenycmd_sudocmd');
+        field.create(table_span);
+
+        table_span = $('<span/>', { 'name': 'memberdenycmd_sudocmdgroup' }).appendTo(span);
+        field = that.get_field('memberdenycmd_sudocmdgroup');
+        field.create(table_span);
+    };
+
+    return that;
+}
+
+function ipa_sudorule_details_runas_section(spec){
+
+    spec = spec || {};
+
+    var that = ipa_details_section(spec);
+
+    that.init = function() {
+
+        var category = that.create_radio({ name: 'runasusercategory', label: 'Run as User category' });
+        that.add_field(ipa_sudorule_association_table_widget({
+            'id': that.entity_name+'-runasruser_user',
+            'name': 'runasuser_user', 'label': 'Users', 'category': category,
+            'other_entity': 'user', 'add_method': 'add_runasuser', 'remove_method': 'remove_runasuser'
+        }));
+        that.add_field(ipa_sudorule_association_table_widget({
+            'id': that.entity_name+'-runasuser_group',
+            'name': 'runasuser_group', 'label': 'Groups', 'category': category,
+            'other_entity': 'group', 'add_method': 'add_runasuser', 'remove_method': 'remove_runasuser'
+        }));
+
+        category = that.create_radio({ name: 'runasgroupcategory', label: 'Run as Group category' });
+        that.add_field(ipa_sudorule_association_table_widget({
+            'id': that.entity_name+'-runasgroup_group',
+            'name': 'runasgroup_group', 'label': 'Groups', 'category': category,
+            'other_entity': 'group', 'add_method': 'add_runasgroup', 'remove_method': 'remove_runasgroup'
+        }));
+
+        that.section_init();
+    };
+
+    that.create = function(container) {
+
+        if (that.template) return;
+
+        var span = $('<span/>', { 'name': 'runasusercategory' }).appendTo(container);
+
+        $('<input/>', {
+            'type': 'radio',
+            'name': 'runasusercategory',
+            'value': 'all'
+        }).appendTo(span);
+
+        span.append('Anyone');
+
+        $('<input/>', {
+            'type': 'radio',
+            'name': 'runasusercategory',
+            'value': ''
+        }).appendTo(span);
+
+        span.append('Specified Users and Groups');
+
+        span.append(' ');
+
+        $('<span/>', {
+            'name': 'undo',
+            'class': 'ui-state-highlight ui-corner-all',
+            'style': 'display: none;',
+            'html': 'undo'
+        }).appendTo(span);
+
+        span.append('<br/>');
+
+        var table_span = $('<span/>', { 'name': 'runasuser_user' }).appendTo(span);
+        var field = that.get_field('runasuser_user');
+        field.create(table_span);
+
+        table_span = $('<span/>', { 'name': 'runasuser_group' }).appendTo(span);
+        field = that.get_field('runasuser_group');
+        field.create(table_span);
+
+        span = $('<span/>', { 'name': 'runasgroupcategory' }).appendTo(container);
+
+        $('<input/>', {
+            'type': 'radio',
+            'name': 'runasgroupcategory',
+            'value': 'all'
+        }).appendTo(span);
+
+        span.append('Any Group');
+
+        $('<input/>', {
+            'type': 'radio',
+            'name': 'runasgroupcategory',
+            'value': ''
+        }).appendTo(span);
+
+        span.append('Specified Groups');
+
+        span.append(' ');
+
+        $('<span/>', {
+            'name': 'undo',
+            'class': 'ui-state-highlight ui-corner-all',
+            'style': 'display: none;',
+            'html': 'undo'
+        }).appendTo(span);
+
+        span.append('<br/>');
+
+        table_span = $('<span/>', { 'name': 'runasgroup_group' }).appendTo(span);
+        field = that.get_field('runasgroup_group');
+        field.create(table_span);
+    };
+
+    return that;
+}
+
+function ipa_sudorule_association_table_widget(spec) {
+
+    spec = spec || {};
+
+    var that = ipa_rule_association_table_widget(spec);
+
+    that.create_add_dialog = function() {
+        var pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
+        var label = IPA.metadata[that.other_entity].label;
+        var title = 'Add '+label+' to '+that.entity_name+' '+pkey;
+
+        return ipa_sudorule_association_adder_dialog({
+            'title': title,
+            'entity_name': that.entity_name,
+            'pkey': pkey,
+            'other_entity': that.other_entity,
+            'template': 'sudorule-'+that.other_entity+'-dialog.html #contents'
+        });
+    };
+
+    return that;
+}
+
+function ipa_sudorule_association_adder_dialog(spec) {
+
+    spec = spec || {};
+
+    var that = ipa_association_adder_dialog(spec);
+
+    that.init = function() {
+
+        if (!that.columns.length) {
+            var pkey_name = IPA.metadata[that.other_entity].primary_key;
+            that.create_column({
+                name: pkey_name,
+                label: IPA.metadata[that.other_entity].label,
+                primary_key: true
+            });
+        }
+
+        that.available_table = ipa_table_widget({
+            name: 'available'
+        });
+
+        that.available_table.set_columns(that.columns);
+
+        that.available_table.init();
+
+        that.selected_table = ipa_table_widget({
+            name: 'selected'
+        });
+
+        that.selected_table.set_columns(that.columns);
+
+        that.selected_table.init();
+
+        that.association_adder_dialog_init();
+    };
+
+    that.setup = function() {
+        that.association_adder_dialog_setup();
+        that.external_field = $('input[name=external]', that.container);
+    };
+
+    that.add = function() {
+        var rows = that.available_table.remove_selected_rows();
+        that.selected_table.add_rows(rows);
+
+        var pkey_name = IPA.metadata[that.other_entity].primary_key;
+        var value = that.external_field.val();
+        if (!value) return;
+
+        var record = {};
+        record[pkey_name] = value;
+        that.selected_table.add_record(record);
+        that.external_field.val('');
+    };
+
+    return that;
+}
+
+function ipa_sudorule_command_table_widget(spec) {
+
+    spec = spec || {};
+
+    var that = ipa_association_table_widget(spec);
+
+    that.category = spec.category;
+    that.section = spec.section;
+
+    that.add = function(values, on_success, on_error) {
+
+        var pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
+
+        var batch = ipa_batch_command({
+            'on_success': on_success,
+            'on_error': on_error
+        });
+
+        var command;
+
+        if (that.category.save() == 'all') {
+            command = ipa_command({
+                'method': that.entity_name+'_mod',
+                'args': [pkey],
+                'options': {'all': true, 'rights': true}
+            });
+            command.set_option(that.category.name, '');
+            batch.add_command(command);
+        }
+
+        command = ipa_command({
+            'method': that.entity_name+'_'+that.add_method,
+            'args': [pkey],
+            'on_success': function() {
+                var record = {};
+                record[that.category.name] = [''];
+                that.category.load(['']);
+            }
+        });
+        command.set_option(that.other_entity, values.join(','));
+        batch.add_command(command);
+
+        batch.execute();
+    };
+
+    that.remove = function(values, on_success, on_error) {
+
+        var pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
+
+        var command = ipa_command({
+            'method': that.entity_name+'_'+that.remove_method,
+            'args': [pkey],
+            'on_success': function(data, text_status, xhr) {
+
+                // if all values in this field are removed
+                // and other fields are already empty,
+                // change category to 'deny'
+
+                var update_category = values.length == that.values.length;
+
+                if (update_category && that.name != 'memberallowcmd_sudocmd') {
+                    var memberallowcmd_sudocmd = that.section.get_field('memberallowcmd_sudocmd').save();
+                    if (memberallowcmd_sudocmd.length) update_category = false;
+                }
+
+                if (update_category && that.name != 'memberallowcmd_sudocmdgroup') {
+                    var memberallowcmd_sudocmdgroup = that.section.get_field('memberallowcmd_sudocmdgroup').save();
+                    if (memberallowcmd_sudocmdgroup.length) update_category = false;
+                }
+
+                if (update_category && that.name != 'memberdenycmd_sudocmd') {
+                    var memberdenycmd_sudocmd = that.section.get_field('memberdenycmd_sudocmd').save();
+                    if (memberdenycmd_sudocmd.length) update_category = false;
+                }
+
+                if (update_category && that.name != 'memberdenycmd_sudocmdgroup') {
+                    var memberdenycmd_sudocmdgroup = that.section.get_field('memberdenycmd_sudocmdgroup').save();
+                    if (memberdenycmd_sudocmdgroup.length) update_category = false;
+                }
+
+                if (update_category) {
+                    var record = {};
+                    record[that.category.name] = ['deny'];
+                    that.category.load(record);
+                }
+
+                if (on_success) on_success(data, text_status, xhr);
+            },
+            'on_error': on_error
+        });
+
+        command.set_option(that.other_entity, values.join(','));
+
+        command.execute();
     };
 
     return that;
diff --git a/install/static/widget.js b/install/static/widget.js
index f4869c99a..1bdb0d4ff 100755
--- a/install/static/widget.js
+++ b/install/static/widget.js
@@ -66,7 +66,7 @@ function ipa_widget(spec) {
         that.container = container;
     }
 
-    function load(result) {
+    function load(record) {
     }
 
     function save() {
@@ -77,12 +77,16 @@ function ipa_widget(spec) {
     }
 
     that.is_dirty = function() {
-        if (!that.values) return true;
+
         var values = that.save();
+        if (!values && !that.values) return false;
+        if (!values || !that.values) return true;
+
         if (values.length != that.values.length) return true;
         for (var i=0; i<values.length; i++) {
             if (values[i] != that.values[i]) return true;
         }
+
         return false;
     };
 
@@ -159,9 +163,9 @@ function ipa_text_widget(spec) {
         });
     };
 
-    that.load = function(result) {
+    that.load = function(record) {
 
-        that.values = result[that.name] || [''];
+        that.values = record[that.name] || [''];
 
         if (that.read_only) {
             var input = $('input[name="'+that.name+'"]', that.container);
@@ -237,8 +241,8 @@ function ipa_checkbox_widget(spec) {
         });
     };
 
-    that.load = function(result) {
-        that.values = result[that.name] || [false];
+    that.load = function(record) {
+        that.values = record[that.name] || [false];
         that.reset();
     };
 
@@ -305,20 +309,28 @@ function ipa_radio_widget(spec) {
         });
     };
 
-    that.load = function(result) {
-        that.values = result[that.name] || [''];
+    that.load = function(record) {
+        that.values = record[that.name] || [''];
         that.reset();
     };
 
     that.save = function() {
-        var value = $('input[name="'+that.name+'"]:checked', that.container).val();
-        return [value];
+        var input = $('input[name="'+that.name+'"]:checked', that.container);
+        if (!input.length) return [];
+        return [input.val()];
     };
 
     that.set_values = function(values) {
-        var input = $('input[name="'+that.name+'"][value="'+values[0]+'"]', that.container);
-        if (!input.length) return;
-        input.get(0).checked = true;
+        if (values.length) {
+            var input = $('input[name="'+that.name+'"][value="'+values[0]+'"]', that.container);
+            if (input.length) {
+                input.get(0).checked = true;
+            } else {
+                that.clear();
+            }
+        } else {
+            that.clear();
+        }
     };
 
     that.clear = function() {
@@ -328,6 +340,9 @@ function ipa_radio_widget(spec) {
         });
     };
 
+    // methods that should be invoked by subclasses
+    that.radio_save = that.save;
+
     return that;
 }
 
@@ -372,8 +387,8 @@ function ipa_textarea_widget(spec) {
         });
     };
 
-    that.load = function(result) {
-        that.values = result[that.name] || [''];
+    that.load = function(record) {
+        that.values = record[that.name] || [''];
         that.reset();
     };
 
@@ -413,7 +428,7 @@ function ipa_button_widget(spec) {
         input.replaceWith(ipa_button({ 'label': that.label, 'click': that.click }));
     }
 
-    function load(result) {
+    function load(record) {
     }
 
     function save() {
@@ -465,6 +480,7 @@ function ipa_table_widget(spec) {
     var that = ipa_widget(spec);
 
     that.scrollable = spec.scrollable;
+    that.save_values = typeof spec.save_values == 'undefined' ? true : spec.save_values;
 
     that.columns = [];
     that.columns_by_name = {};
@@ -515,12 +531,12 @@ function ipa_table_widget(spec) {
             'class': 'search-table'
         }).appendTo(container);
 
-        var thead = $('<thead/>').appendTo(table);
-
         if (that.scrollable) {
-            thead.css('display', 'block');
+            table.addClass('scrollable');
         }
 
+        var thead = $('<thead/>').appendTo(table);
+
         var tr = $('<tr/>').appendTo(thead);
 
         var th = $('<th/>', {
@@ -566,11 +582,6 @@ function ipa_table_widget(spec) {
 
         var tbody = $('<tbody/>').appendTo(table);
 
-        if (that.scrollable) {
-            tbody.css('display', 'block');
-            tbody.css('overflow', 'auto');
-        }
-
         if (that.height) {
             tbody.css('height', that.height);
         }
@@ -651,23 +662,28 @@ function ipa_table_widget(spec) {
 
         that.empty();
 
-        var values = result[that.name];
-        if (!values) return;
+        that.values = result[that.name];
+        if (!that.values) return;
 
-        for (var i=0; i<values.length; i++) {
+        for (var i=0; i<that.values.length; i++) {
             var record = that.get_record(result, i);
             that.add_record(record);
         }
     };
 
     that.save = function() {
-        var values = [];
+        if (that.save_values) {
+            var values = [];
 
-        $('input[name="select"]', that.tbody).each(function() {
-            values.push($(this).val());
-        });
+            $('input[name="select"]', that.tbody).each(function() {
+                values.push($(this).val());
+            });
 
-        return values;
+            return values;
+
+        } else {
+            return null;
+        }
     };
 
     that.get_selected_values = function() {
@@ -777,6 +793,7 @@ function ipa_dialog(spec) {
 
     that.name = spec.name;
     that.title = spec.title;
+    that.template = spec.template;
     that._entity_name = spec.entity_name;
 
     that.width = spec.width || 400;
@@ -864,15 +881,34 @@ function ipa_dialog(spec) {
 
         that.container = $('<div/>').appendTo(container);
 
-        that.create();
-        that.setup();
+        if (that.template) {
+            var template = IPA.get_template(that.template);
+            that.container.load(
+                template,
+                function(data, text_status, xhr) {
+                    that.setup();
+                    that.container.dialog({
+                        'title': that.title,
+                        'modal': true,
+                        'width': that.width,
+                        'height': that.height,
+                        'buttons': that.buttons
+                    });
+                }
+            );
 
-        that.container.dialog({
-            'title': that.title,
-            'modal': true,
-            'width': that.width,
-            'buttons': that.buttons
-        });
+        } else {
+            that.create();
+            that.setup();
+
+            that.container.dialog({
+                'title': that.title,
+                'modal': true,
+                'width': that.width,
+                'height': that.height,
+                'buttons': that.buttons
+            });
+        }
     };
 
     that.option = function(name, value) {
@@ -955,7 +991,7 @@ function ipa_adder_dialog(spec) {
         that.available_table = ipa_table_widget({
             name: 'available',
             scrollable: true,
-            height: 150
+            height: '151px'
         });
 
         that.available_table.set_columns(that.columns);
@@ -965,62 +1001,57 @@ function ipa_adder_dialog(spec) {
         that.selected_table = ipa_table_widget({
             name: 'selected',
             scrollable: true,
-            height: 150
+            height: '151px'
         });
 
         that.selected_table.set_columns(that.columns);
 
         that.selected_table.init();
+
+        that.dialog_init();
     };
 
     that.create = function() {
 
         // do not call that.dialog_create();
 
-        var search_panel = $('<div/>').appendTo(that.container);
+        var search_panel = $('<div/>', {
+            'class': 'adder-dialog-filter'
+        }).appendTo(that.container);
 
         $('<input/>', {
             type: 'text',
-            name: 'filter'
+            name: 'filter',
+            style: 'width: 244px'
         }).appendTo(search_panel);
 
+        search_panel.append(' ');
+
         $('<input/>', {
             type: 'button',
             name: 'find',
             value: 'Find'
         }).appendTo(search_panel);
 
-        var results_panel = $('<div/>').appendTo(that.container);
-        results_panel.css('border', '2px solid rgb(0, 0, 0)');
-        results_panel.css('position', 'relative');
-        results_panel.css('width', '100%');
-        results_panel.css('height', '200px');
-
-        var available_title = $('<div/>', {
-            html: 'Available',
-            style: 'float: left; width: 250px;'
-        }).appendTo(results_panel);
-
-        var buttons_title = $('<div/>', {
-            html: '&nbsp;',
-            style: 'float: left; width: 50px;'
-        }).appendTo(results_panel);
-
-        var selected_title = $('<div/>', {
-            html: 'Prospective',
-            style: 'float: left; width: 250px;'
-        }).appendTo(results_panel);
+        var results_panel = $('<div/>', {
+            'class': 'adder-dialog-results'
+        }).appendTo(that.container);
 
         var available_panel = $('<div/>', {
             name: 'available',
-            style: 'clear:both; float: left; width: 250px; height: 150px;'
+            'class': 'adder-dialog-available'
         }).appendTo(results_panel);
 
+        $('<div/>', {
+            html: 'Available',
+            'class': 'ui-widget-header'
+        }).appendTo(available_panel);
+
         that.available_table.create(available_panel);
 
         var buttons_panel = $('<div/>', {
             name: 'buttons',
-            style: 'float: left; width: 50px; height: 150px; text-align: center;'
+            'class': 'adder-dialog-buttons'
         }).appendTo(results_panel);
 
         var p = $('<p/>').appendTo(buttons_panel);
@@ -1039,9 +1070,14 @@ function ipa_adder_dialog(spec) {
 
         var selected_panel = $('<div/>', {
             name: 'selected',
-            style: 'float: left; width: 250px; height: 150px;'
+            'class': 'adder-dialog-selected'
         }).appendTo(results_panel);
 
+        $('<div/>', {
+            html: 'Prospective',
+            'class': 'ui-widget-header'
+        }).appendTo(selected_panel);
+
         that.selected_table.create(selected_panel);
     };
 
@@ -1070,8 +1106,7 @@ function ipa_adder_dialog(spec) {
             'label': button.val(),
             'icon': 'ui-icon-trash',
             'click': function() {
-                var rows = that.selected_table.remove_selected_rows();
-                that.available_table.add_rows(rows);
+                that.remove();
             }
         });
         button.replaceWith(that.remove_button);
@@ -1081,8 +1116,7 @@ function ipa_adder_dialog(spec) {
             'label': button.val(),
             'icon': 'ui-icon-plus',
             'click': function() {
-                var rows = that.available_table.remove_selected_rows();
-                that.selected_table.add_rows(rows);
+                that.add();
             }
         });
         button.replaceWith(that.add_button);
@@ -1092,13 +1126,27 @@ function ipa_adder_dialog(spec) {
 
     that.open = function(container) {
         that.buttons = {
-            'Enroll': that.add,
-            'Cancel': that.close
+            'Enroll': function() {
+                that.execute();
+            },
+            'Cancel': function() {
+                that.close();
+            }
         };
 
         that.dialog_open(container);
     };
 
+    that.add = function() {
+        var rows = that.available_table.remove_selected_rows();
+        that.selected_table.add_rows(rows);
+    };
+
+    that.remove = function() {
+        var rows = that.selected_table.remove_selected_rows();
+        that.available_table.add_rows(rows);
+    };
+
     that.get_filter = function() {
         return that.filter_field.val();
     };