Restructuring details page.

Previously the IPA.details_list_section can only be used with widgets
that generates <dd> tag because it uses the following structure:

<dl>
  <dt>Telephone Number:</dt>
  <span name="teleponenumber">
    <dd>111-1111</dd>
    <dd>222-2222</dd>
  </span>
</dl>

The <dd> tag was previously used to handle multi-valued attributes.
Since multi-valued attributes are now handled by the recently added
IPA.multivalued_text_widget, the structure can be changed as follows:

<dl>
  <dt>Telephone Number:</dt>
  <dd>
    <span name="telephonenumber">
      <div>111-1111</div>
      <div>222-2222</div>
    </span>
  </dd>
</dl>

This allows IPA.details_list_section to be used with any widgets
without requiring the <dd> tag.

15 files changed, 322 insertions, 336 deletions

diff --git a/install/ui/aci.js b/install/ui/aci.js
index 036731237..fbfb6ba3a 100644
--- a/install/ui/aci.js
+++ b/install/ui/aci.js
@@ -33,21 +33,16 @@ IPA.attributes_widget = function(spec) {
     that.object_type = spec.object_type;
 
     var id = spec.name;
-    var dd_class = "other";
 
     that.create = function(container) {
 
-        var dd = $('<dd/>', {
-            'class': dd_class
-        }).appendTo(container);
-
         that.table = $('<table/>', {
             id:id,
             'class':'search-table aci-attribute-table'
         }).
             append('<thead/>').
             append('<tbody/>').
-            appendTo(dd);
+            appendTo(container);
 
         var tr = $('<tr></tr>').appendTo($('thead', that.table));
         tr.append($('<th/>', {
@@ -66,7 +61,7 @@ IPA.attributes_widget = function(spec) {
             append('<th class="aci-attribute-column">Attribute</th>');
 
         if (that.undo) {
-            that.create_undo(dd);
+            that.create_undo(container);
         }
 
         if (that.object_type){
@@ -175,32 +170,16 @@ IPA.rights_widget = function(spec) {
 
     that.rights = ['write', 'add', 'delete'];
 
-    that.create = function(container){
-
-        for (var i = 0; i<that.rights.length; i++) {
-            $('<dd/>').
-            append($('<input/>', {
-                type: 'checkbox',
-                name: that.name,
-                value: that.rights[i],
-                'class': that.entity_name +'_'+ that.name
-            })).
-            append($('<label/>', {
-                text: that.rights[i]
-            })).
-            appendTo(container);
-        }
-
-        if (that.undo) {
-            var dd = $('<dd/>').appendTo(container);
-            that.create_undo(dd);
+    that.init = function() {
+        for (var i=0; i<that.rights.length; i++) {
+            var right = that.rights[i];
+            that.add_option({label: right, value: right});
         }
     };
 
     return that;
 };
 
-
 IPA.hidden_widget = function(spec) {
     spec.label = '';
     var that = IPA.widget(spec);
@@ -277,17 +256,15 @@ IPA.target_section = function(spec) {
         })).
         appendTo(dl);
 
-        var span = $('<span/>', {
-            name: 'filter'
-        }).
-        appendTo(dl);
-
         var dd = $('<dd/>', {
             'class': 'aci_by_filter first'
-        }).
-        appendTo(span);
+        }).appendTo(dl);
 
-        that.filter_text.create(dd);
+        var span = $('<span/>', {
+            name: 'filter'
+        }).appendTo(dd);
+
+        that.filter_text.create(span);
     }
 
 
@@ -333,15 +310,15 @@ IPA.target_section = function(spec) {
         })).
         appendTo(dl);
 
-        var span = $('<span/>', {
-            name: 'subtree'
-        }).appendTo(dl);
-
         var dd = $('<dd/>', {
             'class': 'aci_by_query first'
-        }).appendTo(span);
+        }).appendTo(dl);
 
-        that.subtree_textarea.create(dd);
+        var span = $('<span/>', {
+            name: 'subtree'
+        }).appendTo(dd);
+
+        that.subtree_textarea.create(span);
     }
 
     function display_group_target(dl) {
@@ -356,16 +333,15 @@ IPA.target_section = function(spec) {
             })).
             appendTo(dl);
 
-        var span = $('<span/>', {
-            name: 'targetgroup'
-        }).appendTo(dl);
-
         var dd = $('<dd/>', {
             'class': 'aci_by_group first'
-        }).
-        appendTo(span);
+        }).appendTo(dl);
+
+        var span = $('<span/>', {
+            name: 'targetgroup'
+        }).appendTo(dd);
 
-        that.group_select.create(dd);
+        that.group_select.create(span);
     }
 
     that.create = function(container) {
@@ -680,7 +656,7 @@ IPA.entity_factories.delegation = function() {
                              entity:'group', join: true})).
                         custom_input(
                             IPA.rights_widget({name: 'permissions', label: 'Permissions',
-                                join: true})).
+                                direction: 'horizontal', join: true})).
                         custom_input(
                             IPA.attributes_widget({
                                 name:'attrs', object_type:'user', join: true})))).
diff --git a/install/ui/certificate.js b/install/ui/certificate.js
index 4f12fc0cc..6b100ed1c 100755
--- a/install/ui/certificate.js
+++ b/install/ui/certificate.js
@@ -413,13 +413,9 @@ function certificate_status_widget(spec) {
 
         that.widget_create(container);
 
-        var dd = $('<dd/>', {
-            'class': 'first'
-        }).appendTo(container);
-
         var div = $('<div/>', {
             name: 'certificate-valid'
-        }).appendTo(dd);
+        }).appendTo(container);
 
         $('<img/>', {
             src: 'check.png',
@@ -470,7 +466,7 @@ function certificate_status_widget(spec) {
         if (!that.is_selfsign()) {
             div = $('<div/>', {
                 name: 'certificate-revoked'
-            }).appendTo(dd);
+            }).appendTo(container);
 
             $('<img/>', {
                 src: 'caution.png',
@@ -509,7 +505,7 @@ function certificate_status_widget(spec) {
 
         div = $('<div/>', {
             name: 'certificate-missing'
-        }).appendTo(dd);
+        }).appendTo(container);
 
         $('<img/>', {
             src: 'caution.png',
diff --git a/install/ui/details.js b/install/ui/details.js
index 5872e81cf..7eb7c038e 100644
--- a/install/ui/details.js
+++ b/install/ui/details.js
@@ -333,19 +333,28 @@ IPA.details_section = function (spec){
         return that;
     };
 
+    that.text = function(spec) {
+        var field = IPA.text_widget(spec);
+        that.add_field(field);
+        return that;
+    };
+
     that.multivalued_text = function(spec) {
         var field = IPA.multivalued_text_widget(spec);
         that.add_field(field);
         return that;
     };
 
-    that.create_field = function(spec) {
+    that.textarea = function(spec) {
+        var field = IPA.textarea_widget(spec);
+        that.add_field(field);
+        return that;
+    };
 
-        //TODO: replace IPA.details_field with class-specific implementation
-        //Valid field classes: Str, IA5Str, Int, Bool and List
-        var field = IPA.details_field(spec);
+    that.radio = function(spec) {
+        var field = IPA.radio_widget(spec);
         that.add_field(field);
-        return field;
+        return that;
     };
 
     that.create_text = function(spec) {
@@ -526,7 +535,11 @@ IPA.details_list_section = function (spec){
                 title: label
             }).appendTo(dl);
 
-            var span = $('<span/>', { 'name': field.name }).appendTo(dl);
+            var dd = $('<dd/>', {
+                'class': 'first'
+            }).appendTo(dl);
+
+            var span = $('<span/>', { 'name': field.name }).appendTo(dd);
             field.create(span);
         }
     };
@@ -544,7 +557,7 @@ IPA.stanza =  function (spec) {
 
     // This is to allow declarative style programming for details
     that.input = function(spec) {
-        that.create_field(spec);
+        that.text(spec);
         return that;
     };
 
diff --git a/install/ui/hbacrule.js b/install/ui/hbacrule.js
index 6b6e12381..6859e6fdc 100644
--- a/install/ui/hbacrule.js
+++ b/install/ui/hbacrule.js
@@ -155,10 +155,10 @@ IPA.hbacrule_details_facet = function (spec) {
             that.add_section(section);
         }
 
-        section.create_text({ 'name': 'cn', 'label': 'Name', 'read_only': true });
-        section.create_radio({ 'name': 'accessruletype', 'label': 'Rule Type' });
-        section.create_textarea({ 'name': 'description', 'label': 'Description' });
-        section.create_radio({ 'name': 'ipaenabledflag', 'label': 'Enabled' });
+        section.text({name: 'cn', label: 'Name', read_only: true});
+        section.radio({name: 'accessruletype', label: 'Rule Type'});
+        section.textarea({name: 'description', label: 'Description'});
+        section.radio({name: 'ipaenabledflag', label: 'Enabled'});
 
         if (IPA.layout) {
             section = that.create_section({
@@ -185,7 +185,7 @@ IPA.hbacrule_details_facet = function (spec) {
             that.add_section(section);
         }
 
-        var category = section.create_radio({ name: 'usercategory', label: 'User category' });
+        var category = section.radio({ name: 'usercategory', label: 'User category' });
         section.add_field(IPA.rule_association_table_widget({
             'id': that.entity_name+'-memberuser_user',
             'name': 'memberuser_user', 'label': 'Users', 'category': category,
@@ -222,7 +222,7 @@ IPA.hbacrule_details_facet = function (spec) {
             that.add_section(section);
         }
 
-        category = section.create_radio({ 'name': 'hostcategory', 'label': 'Host category' });
+        category = section.radio({ 'name': 'hostcategory', 'label': 'Host category' });
         section.add_field(IPA.rule_association_table_widget({
             'id': that.entity_name+'-memberhost_host',
             'name': 'memberhost_host', 'label': 'Hosts', 'category': category,
@@ -259,7 +259,7 @@ IPA.hbacrule_details_facet = function (spec) {
             that.add_section(section);
         }
 
-        category = section.create_radio({ 'name': 'servicecategory', 'label': 'Service category' });
+        category = section.radio({ 'name': 'servicecategory', 'label': 'Service category' });
         section.add_field(IPA.rule_association_table_widget({
             'id': that.entity_name+'-memberservice_hbacsvc',
             'name': 'memberservice_hbacsvc', 'label': 'Services', 'category': category,
@@ -296,7 +296,7 @@ IPA.hbacrule_details_facet = function (spec) {
             that.add_section(section);
         }
 
-        category = section.create_radio({ 'name': 'sourcehostcategory', 'label': 'Source host category' });
+        category = section.radio({ 'name': 'sourcehostcategory', 'label': 'Source host category' });
         section.add_field(IPA.rule_association_table_widget({
             'id': that.entity_name+'-sourcehost_host',
             'name': 'sourcehost_host', 'label': 'Host', 'category': category,
@@ -565,6 +565,11 @@ IPA.hbacrule_details_general_section = function (spec){
 
         var span = $('<span/>', { 'name': 'cn' }).appendTo(td);
 
+        $('<label/>', {
+            name: 'cn',
+            style: 'display: none;'
+        }).appendTo(span);
+
         $('<input/>', {
             'type': 'text',
             'name': 'cn',
diff --git a/install/ui/hbacsvc.js b/install/ui/hbacsvc.js
index f5104ce27..1c2049675 100644
--- a/install/ui/hbacsvc.js
+++ b/install/ui/hbacsvc.js
@@ -105,8 +105,8 @@ IPA.hbacsvc_details_facet = function (spec) {
         });
         that.add_section(section);
 
-        section.create_field({'name': 'cn'});
-        section.create_field({'name': 'description'});
+        section.text({name: 'cn'});
+        section.text({name: 'description'});
 
         that.details_facet_init();
     };
diff --git a/install/ui/hbacsvcgroup.js b/install/ui/hbacsvcgroup.js
index 057c2364a..28fd82c16 100644
--- a/install/ui/hbacsvcgroup.js
+++ b/install/ui/hbacsvcgroup.js
@@ -111,8 +111,8 @@ IPA.hbacsvcgroup_details_facet = function (spec) {
         });
         that.add_section(section);
 
-        section.create_field({'name': 'cn'});
-        section.create_field({'name': 'description'});
+        section.text({name: 'cn'});
+        section.text({name: 'description'});
 
         section = IPA.details_section({
             'name': 'services',
diff --git a/install/ui/host.js b/install/ui/host.js
index 453b61788..cc60fb511 100644
--- a/install/ui/host.js
+++ b/install/ui/host.js
@@ -140,21 +140,21 @@ IPA.host_details_facet = function (spec) {
         that.add_section(section);
 
         //TODO: use i18n labels
-        section.create_field({
+        section.text({
             name: 'fqdn',
             label: 'Fully Qualified Host Name'
         });
 
-        section.create_field({'name': 'krbprincipalname'});
+        section.text({'name': 'krbprincipalname'});
 
         //TODO: add this to the host plugin
         //TODO: use i18n labels
-        section.create_field({
+        section.text({
             'name': 'serverhostname',
             'label': 'Host Name'
         });
 
-        section.create_field({'name': 'description'});
+        section.text({'name': 'description'});
 
         //TODO: use i18n labels
         section = IPA.details_list_section({
@@ -225,13 +225,9 @@ function host_provisioning_status_widget(spec) {
 
         that.widget_create(container);
 
-        var dd = $('<dd/>', {
-            'class': 'first'
-        }).appendTo(container);
-
         var div = $('<div/>', {
             name: 'kerberos-key-valid'
-        }).appendTo(dd);
+        }).appendTo(container);
 
         $('<img/>', {
             src: 'check.png',
@@ -255,7 +251,7 @@ function host_provisioning_status_widget(spec) {
 
         div = $('<div/>', {
             name: 'kerberos-key-missing'
-        }).appendTo(dd);
+        }).appendTo(container);
 
         $('<img/>', {
             src: 'caution.png',
diff --git a/install/ui/service.js b/install/ui/service.js
index daa38b2bb..53a444401 100644
--- a/install/ui/service.js
+++ b/install/ui/service.js
@@ -135,19 +135,19 @@ IPA.service_details_facet = function (spec) {
             name: 'details',
             label: 'Service Settings'
         }).
-        input({
-            name: 'krbprincipalname'
-        }).
-        input({
-            name: 'service',
-            label: 'Service',
-            load: service_service_load
-        }).
-        input({
-            name: 'host',
-            label: 'Host Name',
-            load: service_host_load
-        })).
+            input({
+                name: 'krbprincipalname'
+            }).
+            custom_input(IPA.service_name_widget({
+                name: 'service',
+                label: 'Service',
+                read_only: true
+            })).
+            custom_input(IPA.service_host_widget({
+                name: 'host',
+                label: 'Host Name',
+                read_only: true
+            }))).
         section(
             IPA.stanza({
                 name: 'provisioning',
@@ -171,34 +171,45 @@ IPA.service_details_facet = function (spec) {
     return that;
 };
 
+IPA.service_name_widget = function(spec) {
 
-function service_service_load(result) {
+    spec = spec || {};
 
-    var that = this;
+    var that = IPA.text_widget(spec);
 
-    $('dd', that.container).remove();
+    that.load = function(record) {
 
-    var dd = IPA.create_first_dd(this.name);
-    dd.appendTo(that.container);
+        that.text_load(record);
 
-    var krbprincipalname = result['krbprincipalname'][0];
-    var service = krbprincipalname.replace(/\/.*$/, '');
-    dd.append(service);
-}
+        var krbprincipalname = record['krbprincipalname'][0];
+        var value = krbprincipalname.replace(/\/.*$/, '');
+        that.values = [value];
 
-function service_host_load(result) {
+        that.reset();
+    };
 
-    var that = this;
+    return that;
+};
 
-    $('dd', that.container).remove();
+IPA.service_host_widget = function(spec) {
 
-    var dd = IPA.create_first_dd(this.name);
-    dd.appendTo(that.container);
+    spec = spec || {};
 
-    var krbprincipalname = result['krbprincipalname'][0];
-    var host = krbprincipalname.replace(/^.*\//, '').replace(/@.*$/, '');
-    dd.append(host);
-}
+    var that = IPA.text_widget(spec);
+
+    that.load = function(record) {
+
+        that.text_load(record);
+
+        var krbprincipalname = record['krbprincipalname'][0];
+        var value = krbprincipalname.replace(/^.*\//, '').replace(/@.*$/, '');
+        that.values = [value];
+
+        that.reset();
+    };
+
+    return that;
+};
 
 
 function service_provisioning_status_widget(spec) {
@@ -211,13 +222,9 @@ function service_provisioning_status_widget(spec) {
 
         that.widget_create(container);
 
-        var dd = $('<dd/>', {
-            'class': 'first'
-        }).appendTo(container);
-
         var div = $('<div/>', {
             'class': 'kerberos-key-valid'
-        }).appendTo(dd);
+        }).appendTo(container);
 
         $('<img/>', {
             src: 'check.png',
@@ -241,7 +248,7 @@ function service_provisioning_status_widget(spec) {
 
         div = $('<div/>', {
             name: 'kerberos-key-missing'
-        }).appendTo(dd);
+        }).appendTo(container);
 
         $('<img/>', {
             src: 'caution.png',
diff --git a/install/ui/sudocmd.js b/install/ui/sudocmd.js
index 335bb3e44..c254452ff 100644
--- a/install/ui/sudocmd.js
+++ b/install/ui/sudocmd.js
@@ -104,8 +104,8 @@ IPA.sudocmd_details_facet = function (spec) {
         });
         that.add_section(section);
 
-        section.create_field({'name': 'sudocmd'});
-        section.create_field({'name': 'description'});
+        section.text({'name': 'sudocmd'});
+        section.text({'name': 'description'});
 
         section = IPA.details_section({
             'name': 'groups',
diff --git a/install/ui/sudocmdgroup.js b/install/ui/sudocmdgroup.js
index c0ce2aa08..1ffbc0966 100644
--- a/install/ui/sudocmdgroup.js
+++ b/install/ui/sudocmdgroup.js
@@ -110,8 +110,8 @@ IPA.sudocmdgroup_details_facet = function (spec) {
         });
         that.add_section(section);
 
-        section.create_field({'name': 'cn'});
-        section.create_field({'name': 'description'});
+        section.text({'name': 'cn'});
+        section.text({'name': 'description'});
 
         section = IPA.details_section({
             'name': 'commands',
diff --git a/install/ui/sudorule.js b/install/ui/sudorule.js
index ab4d9ab4f..bab457e88 100644
--- a/install/ui/sudorule.js
+++ b/install/ui/sudorule.js
@@ -115,9 +115,9 @@ IPA.sudorule_details_facet = function (spec) {
             that.add_section(section);
         }
 
-        section.create_text({ 'name': 'cn', 'read_only': true });
-        section.create_textarea({ 'name': 'description' });
-        section.create_radio({ 'name': 'ipaenabledflag' });
+        section.text({name: 'cn', read_only: true});
+        section.textarea({name: 'description'});
+        section.radio({name: 'ipaenabledflag'});
 
         section = IPA.rule_details_section({
             'name': 'user',
@@ -134,7 +134,7 @@ IPA.sudorule_details_facet = function (spec) {
         });
         that.add_section(section);
 
-        var category = section.create_radio({ name: 'usercategory', label: 'User category' });
+        var category = section.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', 'category': category,
@@ -162,7 +162,7 @@ IPA.sudorule_details_facet = function (spec) {
         });
         that.add_section(section);
 
-        category = section.create_radio({ 'name': 'hostcategory', 'label': 'Host category' });
+        category = section.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', 'category': category,
@@ -407,6 +407,11 @@ IPA.sudorule_details_general_section = function (spec){
             title: param_info ? param_info.doc : 'cn'
         }).appendTo(td);
 
+        $('<label/>', {
+            name: 'cn',
+            style: 'display: none;'
+        }).appendTo(span);
+
         $('<input/>', {
             'type': 'text',
             'name': 'cn',
@@ -518,7 +523,7 @@ IPA.sudorule_details_command_section = function (spec){
 
     that.init = function() {
 
-        var category = that.create_radio({'name': 'cmdcategory'});
+        var category = that.radio({'name': 'cmdcategory'});
 
         that.add_field(IPA.sudorule_command_table_widget({
             'id': that.entity_name+'-memberallowcmd_sudocmd',
@@ -690,7 +695,7 @@ IPA.sudorule_details_runas_section = function (spec){
 
     that.init = function() {
 
-        var category = that.create_radio({ name: 'ipasudorunasusercategory', label: 'Run as User category' });
+        var category = that.radio({ name: 'ipasudorunasusercategory', label: 'Run as User category' });
         that.add_field(IPA.sudorule_association_table_widget({
             'id': that.entity_name+'-runasruser_user',
             'name': 'ipasudorunas_user', 'label': 'Users', 'category': category,
@@ -702,7 +707,7 @@ IPA.sudorule_details_runas_section = function (spec){
             'other_entity': 'group', 'add_method': 'add_runasuser', 'remove_method': 'remove_runasuser'
         }));
 
-        category = that.create_radio({ name: 'ipasudorunasgroupcategory', label: 'Run as Group category' });
+        category = that.radio({ name: 'ipasudorunasgroupcategory', label: 'Run as Group category' });
         that.add_field(IPA.sudorule_association_table_widget({
             'id': that.entity_name+'-runasgroup_group',
             'name': 'ipasudorunasgroup_group', 'label': 'Groups', 'category': category,
diff --git a/install/ui/test/data/sudorule_show.json b/install/ui/test/data/sudorule_show.json
index 51f83af70..44d3cfd83 100644
--- a/install/ui/test/data/sudorule_show.json
+++ b/install/ui/test/data/sudorule_show.json
@@ -38,6 +38,9 @@
             "externaluser": [
                 "external"
             ],
+            "ipaenabledflag": [
+                "TRUE"
+            ],
             "ipasudorunas_user": [
                 "admin"
             ],
diff --git a/install/ui/test/details_tests.js b/install/ui/test/details_tests.js
index cf4de0825..804958134 100644
--- a/install/ui/test/details_tests.js
+++ b/install/ui/test/details_tests.js
@@ -121,63 +121,52 @@ test("Testing details lifecycle: create, setup, load.", function(){
         }
     );
 
-    var setup_status_called = false;
-    var save_password_called= false;
-    var load_manager_called = false;
+    var setup_called = false;
+    var save_called= false;
+    var load_called = false;
+
     var load_success_called = false;
     var load_failure_called = false;
     var update_success_called = false;
     var update_failure_called = false;
 
     function setup_status(){
-        setup_status_called = true;
+        setup_called = true;
     }
 
     function save_password(){
-        save_password_called = true;
+        save_called = true;
         return [];
     }
 
     function load_manager(){
-        load_manager_called = true;
-    }
-
-    function setup_st(){
+        load_called = true;
     }
 
     var container = $("<div/>");
 
     var obj_name = 'user';
 
+    var widget = IPA.widget({name: 'cn'});
+
+    widget.setup = function(container) {
+        setup_called = true;
+        widget.widget_setup(container);
+    };
+
+    widget.load = function(record) {
+        load_called = true;
+        widget.widget_load(record);
+    };
+
+    widget.save = function() {
+        save_called = true;
+        widget.widget_save();
+    };
 
     IPA.entity_set_details_definition(obj_name, [
         IPA.stanza({name:'identity', label:'Identity Details'}).
-            input({name:'title'}).
-            input({name:'givenname'}).
-            input({name:'sn'}).
-            input({name:'cn'}).
-            input({name:'displayname'}).
-            input({name:'initials'}),
-        IPA.stanza({name:'account', label:'Account Details'}).
-            input({name:'status', setup: setup_status}).
-            input({name:'uid'}).
-            input({name:'userpassword', save: save_password}).
-            input({name:'uidnumber'}).
-            input({name:'gidnumber'}).
-            input({name:'homedirectory'}),
-        IPA.stanza({name:'contact', label:'Contact Details'}).
-            input({name:'mail'}).
-            input({name:'telephonenumber'}),
-        IPA.stanza({name:'address'}).
-            input({name:'street'}).
-            input({name:'location'}).
-            input({name:'state', setup: setup_st}).
-            input({name:'postalcode'}),
-        IPA.stanza({name:'employee', label:'Employee Information'}).
-            input({name:'ou'}).
-            input({name:'manager', load: load_manager}),
-        IPA.stanza({name:'misc', label:'Misc. Information'}).
-            input({name:'carlicense'})
+            custom_input(widget)
     ]);
 
     var entity = IPA.fetch_entity(obj_name);
@@ -203,18 +192,18 @@ test("Testing details lifecycle: create, setup, load.", function(){
     var dts = identity.find('dt');
 
     same(
-        dts.length, 6,
+        dts.length, 1,
         'Checking dt tags for identity'
     );
 
     container.attr('id','user');
 
     ok (
-        setup_status_called,
+        setup_called,
         'Setup status called'
     );
 
-    ok (load_manager_called, 'load manager called');
+    ok (load_called, 'load manager called');
 
     facet.update(
         function(){update_success_called = true},
@@ -223,7 +212,7 @@ test("Testing details lifecycle: create, setup, load.", function(){
 
     ok (update_success_called,'update success called');
     ok (!update_failure_called,'update failure not called');
-    ok (save_password_called, 'save password called');
+    ok (save_called, 'save called');
 
 });
 
@@ -300,31 +289,31 @@ test("Testing IPA.details_section_setup again()",function(){
         'dl is created'
     );
 
-    var dt = $('dt', dl);
     same(
-        dt.length, 3,
-        '3 dt'
+        dl[0].id, section.name,
+        'checking section name'
     );
 
-    var span = dt.next();
+    var dt = $('dt', dl);
     same(
-        span.length, 3,
-        '3 span'
+        dt.length, 3,
+        '3 dt'
     );
 
     same(
-        dl[0].id, section.name,
-        'checking section name'
+        dt[0].innerHTML, fields[0].label+":",
+        'inner HTML matches label'
     );
 
+    var dd = $('dd', dl);
     same(
-        dt[0].innerHTML, fields[0].label+":",
-        'inner HTML matches label'
+        dd.length, 3,
+        '3 dd'
     );
 
-    var dd = $('dd', span[0]);
+    var span = $('span[name="cn"]', dd[0]);
     same(
-        dd.length, 1,
-        '1 dd'
+        span.length, 1,
+        '1 span'
     );
 });
diff --git a/install/ui/user.js b/install/ui/user.js
index 663aab920..c30836c59 100644
--- a/install/ui/user.js
+++ b/install/ui/user.js
@@ -55,9 +55,9 @@ IPA.entity_factories.user = function (){
                     input({name:'initials'})).
             section(
                 IPA.stanza({name: 'account', label: IPA.messages.details.account}).
-                    custom_input(user_status_widget({name:'nsaccountlock'})).
+                    custom_input(IPA.user_status_widget({name:'nsaccountlock'})).
                     input({name:'uid'}).
-                    input({name:'userpassword', load: user_password_load}).
+                    custom_input(IPA.user_password_widget({name:'userpassword'})).
                     input({name:'uidnumber'}).
                     input({name:'gidnumber'}).
                     input({name:'loginshell'}).
@@ -96,7 +96,7 @@ IPA.entity_factories.user = function (){
 /* ATTRIBUTE CALLBACKS */
 
 
-function user_status_widget(spec) {
+IPA.user_status_widget = function(spec) {
 
     spec = spec || {};
 
@@ -106,10 +106,7 @@ function user_status_widget(spec) {
 
         if (!that.record) return;
 
-        $('dd', that.container).remove();
-
-        var dd = IPA.create_first_dd(this.name);
-        dd.appendTo(that.container);
+        that.container.empty();
 
         var lock_field = 'nsaccountlock';
 
@@ -154,81 +151,77 @@ function user_status_widget(spec) {
                       return (false);
                   }
               });
-        status_field.appendTo(dd);
+        status_field.appendTo(that.container);
     };
 
     return that;
-}
-
-function resetpwd_on_click(){
-
-    function reset_password(new_password){
-        var dialog =  resetpwd_dialog;
-
-        var user_pkey = $.bbq.getState('user-pkey');
-        var pw_pkey;
-        if (user_pkey === IPA.whoami.uid[0]){
-            pw_pkey = [];
-        }else{
-            pw_pkey = [user_pkey];
-        }
-
-        IPA.cmd('passwd',
-                pw_pkey, {"password":new_password},
-                function(){
-                    alert("Password change complete");
-                    dialog.dialog("close");
-                },
-                function(){});
-    }
-
-
-    var resetpwd_dialog =
-        $('<div ><dl class="modal">'+
-          '<dt>New Password</dt>'+
-          '<dd class="first" ><input id="password_1" type="password"/></dd>'+
-          '<dt>Repeat Password</dt>'+
-          '<dd class="first"><input id="password_2" type="password"/></dd>'+
-          '</dl></div>');
-    resetpwd_dialog.dialog(
-        { modal: true,
-          minWidth:400,
-          buttons: {
-              'Reset Password': function(){
-                  var p1 = $("#password_1").val();
-                  var p2 = $("#password_2").val();
-                  if (p1 != p2){
-                      alert("passwords must match");
-                      return;
-                  }
-                  reset_password(p1);
-              },
-              'Cancel':function(){
-                  resetpwd_dialog.dialog('close');
-              }
-          }});
-    return false;
-}
+};
 
-function user_password_load(result) {
+IPA.user_password_widget = function(spec) {
 
-    var that = this;
+    spec = spec || {};
 
-    $('dd', that.container).remove();
+    var that = IPA.widget(spec);
 
-    var dd = IPA.create_first_dd(this.name);
-    dd.appendTo(that.container);
+    that.create = function(container) {
+        $('<a/>', {
+            href: 'jslink',
+            title: 'userpassword',
+            text: 'reset password',
+            click: resetpwd_on_click
+        }).appendTo(container);
+    };
 
-    var link = $('<a/>',{
-        href:"jslink",
-        click:resetpwd_on_click,
-        title:'userpassword',
-        text: 'reset password'
-    });
-    link.appendTo(dd);
+    function resetpwd_on_click() {
+
+        function reset_password(new_password) {
+
+            var user_pkey = $.bbq.getState('user-pkey');
+            var pw_pkey;
+            if (user_pkey === IPA.whoami.uid[0]){
+                pw_pkey = [];
+            }else{
+                pw_pkey = [user_pkey];
+            }
+
+            IPA.cmd('passwd',
+                    pw_pkey, {"password":new_password},
+                    function(){
+                        alert("Password change complete");
+                        dialog.dialog("close");
+                    },
+                    function(){});
+        }
 
-}
+        var dialog =
+            $('<div ><dl class="modal">'+
+              '<dt>New Password</dt>'+
+              '<dd class="first" ><input id="password_1" type="password"/></dd>'+
+              '<dt>Repeat Password</dt>'+
+              '<dd class="first"><input id="password_2" type="password"/></dd>'+
+              '</dl></div>');
+
+        dialog.dialog({
+            modal: true,
+            minWidth:400,
+            buttons: {
+                'Reset Password': function(){
+                     var p1 = $("#password_1").val();
+                     var p2 = $("#password_2").val();
+                     if (p1 != p2){
+                          alert("passwords must match");
+                          return;
+                     }
+                     reset_password(p1);
+                },
+                'Cancel':function(){
+                     dialog.dialog('close');
+                }
+            }
+        });
 
-var select_temp = '<select title="st"></select>';
-var option_temp = '<option value="V">V</option>';
+        return false;
+    }
 
+    return that;
+};
diff --git a/install/ui/widget.js b/install/ui/widget.js
index db9d1744e..beb09a9d4 100644
--- a/install/ui/widget.js
+++ b/install/ui/widget.js
@@ -135,12 +135,14 @@ IPA.widget = function(spec) {
 
         that.writable = true;
 
-        if (that.param_info.primary_key) {
-            that.writable = false;
-        }
+        if (that.param_info) {
+            if (that.param_info.primary_key) {
+                that.writable = false;
+            }
 
-        if ('no_update' in that.param_info.flags) {
-            that.writable = false;
+            if (that.param_info.flags && 'no_update' in that.param_info.flags) {
+                that.writable = false;
+            }
         }
 
         if (that.record.attributelevelrights) {
@@ -264,7 +266,9 @@ IPA.widget = function(spec) {
     that.widget_init = that.init;
     that.widget_create = that.create;
     that.widget_setup = that.setup;
+    that.widget_load = that.load;
     that.widget_reset = that.reset;
+    that.widget_save = that.save;
 
     return that;
 };
@@ -280,6 +284,11 @@ IPA.text_widget = function(spec) {
 
     that.create = function(container) {
 
+        $('<label/>', {
+            name: that.name,
+            style: 'display: none;'
+        }).appendTo(container);
+
         $('<input/>', {
             type: 'text',
             name: that.name,
@@ -323,45 +332,36 @@ IPA.text_widget = function(spec) {
         that.input = input;
     };
 
-    that.load = function(record) {
+    that.update = function() {
+        var value = that.values && that.values.length ? that.values[0] : '';
 
-        var value = record[that.name];
-        if (value instanceof Array) {
-            that.values = value;
-        } else {
-            that.values = value ? [value] : [''];
-        }
+        var label = $('label[name="'+that.name+'"]', that.container);
+        var input = $('input[name="'+that.name+'"]', that.container);
 
-        if (that.read_only) {
-            var input = $('input[name="'+that.name+'"]', that.container);
-            var label = $('<label/>', {
-                'name': that.name,
-                'html': that.values[0]
-            });
-            input.replaceWith(label);
+        if (that.read_only || !that.writable) {
+            label.html(value);
+            label.css('display', 'inline');
+            input.css('display', 'none');
 
         } else {
-            that.reset();
+            $('input[name="'+that.name+'"]', that.container).val(value);
+            label.css('display', 'none');
+            input.css('display', 'inline');
         }
     };
 
     that.save = function() {
-        if (that.read_only) {
+        if (that.read_only || !that.writable) {
             return that.values;
         } else {
-            var value = $('input[name="'+that.name+'"]', that.container).val();
-            return [value];
+            var input = $('input[name="'+that.name+'"]', that.container);
+            var value = $.trim(input.val());
+            return value === '' ? [] : [value];
         }
     };
 
-    that.update = function() {
-        var value = that.values && that.values.length ? that.values[0] : '';
-        if (that.read_only) {
-            $('label[name="'+that.name+'"]', that.container).val(value);
-        } else {
-            $('input[name="'+that.name+'"]', that.container).val(value);
-        }
-    };
+    // methods that should be invoked by subclasses
+    that.text_load = that.load;
 
     return that;
 };
@@ -396,13 +396,9 @@ IPA.multivalued_text_widget = function(spec) {
 
     that.create = function(container) {
 
-        var dd = $('<dd/>', {
-            'class': 'first'
-        }).appendTo(container);
-
         var div = $('<div/>', {
             name: 'value'
-        }).appendTo(dd);
+        }).appendTo(container);
 
         $('<input/>', {
             type: 'text',
@@ -440,16 +436,16 @@ IPA.multivalued_text_widget = function(spec) {
             href: 'jslink',
             title: 'Add',
             html: 'Add'
-        }).appendTo(dd);
+        }).appendTo(container);
 
-        dd.append(' ');
+        container.append(' ');
 
         $('<span/>', {
             name: 'undo_all',
             style: 'display: none;',
             'class': 'ui-state-highlight ui-corner-all undo',
             html: 'undo all'
-        }).appendTo(dd);
+        }).appendTo(container);
     };
 
     that.setup = function(container) {
@@ -686,21 +682,37 @@ IPA.checkbox_widget = function (spec) {
 IPA.checkboxes_widget = function (spec) {
 
     spec = spec || {};
+
     var that = IPA.widget(spec);
 
+    that.direction = spec.direction || 'vertical';
     that.options = spec.options || [];
 
+    that.add_option = function(option) {
+        that.options.push(option);
+    };
+
     that.create = function(container) {
 
+        var vertical = that.direction === 'vertical';
+
         for (var i=0; i<that.options.length; i++) {
             var option = that.options[i];
             $('<input/>', {
                 type: 'checkbox',
                 name: that.name,
-                text: option.label,
                 value: option.value,
                 title: that.tooltip
             }).appendTo(container);
+
+            $('<label/>', {
+                text: option.label,
+                title: that.tooltip
+            }).appendTo(container);
+
+            if (vertical) {
+                $('<br/>').appendTo(container);
+            }
         }
 
         if (that.undo) {
@@ -802,7 +814,10 @@ IPA.radio_widget = function(spec) {
     };
 
     that.load = function(record) {
-        that.values = record[that.name] || [''];
+        that.widget_load(record);
+        if (!that.values.length) {
+            that.values = [''];
+        }
         that.reset();
     };
 
@@ -814,26 +829,16 @@ IPA.radio_widget = function(spec) {
 
     that.update = function() {
 
-        if (that.values) {
-            var value;
-            if ((that.values instanceof Array) && that.values.length) {
-                value = that.values[0];
-            } else {
-                value = that.values;
-            }
-
-            var input = $('input[name="'+that.name+'"][value="'+value+'"]',
-                          that.container);
-            if (input.length) {
-                input.attr('checked', true);
-                return;
-            }
-        }
-
         $('input[name="'+that.name+'"]', that.container).each(function() {
             var input = this;
             input.checked = false;
         });
+
+        var value = that.values && that.values.length ? that.values[0] : '';
+        var input = $('input[name="'+that.name+'"][value="'+value+'"]', that.container);
+        if (input.length) {
+            input.attr('checked', true);
+        }
     };
 
     // methods that should be invoked by subclasses
@@ -1351,14 +1356,14 @@ IPA.table_widget = function (spec) {
     return that;
 };
 
-IPA.entity_select_widget = function(spec){
+IPA.entity_select_widget = function(spec) {
 
     var that = IPA.widget(spec);
     var entity = spec.entity || 'group';
     var field_name = spec.field_name || 'cn';
 
-    function populate_select(value){
-        function find_success(result){
+    function populate_select(value) {
+        function find_success(result) {
             $('option', that.entity_select).remove();
 
             // add default empty value
@@ -1395,18 +1400,16 @@ IPA.entity_select_widget = function(spec){
         }).execute();
     }
 
-    that.create = function(container){
-        var dd = $('<dd/>').appendTo(container);
+    that.create = function(container) {
 
         that.entity_select = $('<select/>', {
             id: that.name + '-entity-select',
             change: function(){
                 that.show_undo();
             }
-        }).appendTo(dd);
-
+        }).appendTo(container);
 
-        that.entity_filter = $('<input/>',{
+        that.entity_filter = $('<input/>', {
             size:10,
             type: 'text',
             id: 'entity_filter',
@@ -1415,20 +1418,20 @@ IPA.entity_select_widget = function(spec){
                 populate_select();
                 that.show_undo();
             }
-        }).appendTo(dd);
+        }).appendTo(container);
 
-        $('<a />',{
-            href:"",
+        $('<a/>', {
+            href: '',
             text: 'add ' +entity + ' filter: ',
-            click:function(){
+            click: function() {
                 that.entity_filter.css('display','inline');
                 $(this).css('display','none');
                 return false;
             }
-        }).appendTo(dd);
+        }).appendTo(container);
 
         if (that.undo) {
-            that.create_undo(dd);
+            that.create_undo(container);
         }
         var undo = that.get_undo();
         undo.click(function() {
@@ -1437,18 +1440,18 @@ IPA.entity_select_widget = function(spec){
 
         populate_select();
     };
-    that.reset = function(){
+
+    that.reset = function() {
         that.entity_filter.val(that.values[0]);
         that.hide_undo();
         populate_select(that.values[0]);
-
     };
 
-    that.is_dirty = function(){
+    that.is_dirty = function() {
         return (that.save()[0] !== that.values[0]);
     };
 
-    that.load = function(record){
+    that.load = function(record) {
         var value = record[that.name];
         if (value instanceof Array) {
             that.values = value;
@@ -1458,7 +1461,7 @@ IPA.entity_select_widget = function(spec){
         that.reset();
     };
 
-    that.save = function(){
+    that.save = function() {
         var value = $('option:selected', that.entity_select).val();
         return [value];
     };