Fixed: Some widgets do not have space for validation error message

https://fedorahosted.org/freeipa/ticket/1454

The following widgets should call create_error_link() to create a space to show validation error messages:

  IPA.checkbox_widget
  IPA.checkboxes_widget
  IPA.radio_widget
  IPA.select_widget
  IPA.table_widget
  IPA.attributes_widget
  IPA.rights_widget
  IPA.target_section (it's a widget)

Solution:
 * added call to checkbox, checkboxes, radio, select, table, attributes widget
 * rights_widget inherits it from checkboxes_widget.
 * target_section IS NOT a widget as it doesn't inherit from widget. It's still a section, which shows different widgets based on its state.
 * table_widget displays error_link between pagination and summary.

Additional:
 * added padding and unified font-weight for error message

install/ui/aci.js

@@ -314,6 +314,8 @@ IPA.attributes_widget = function(spec) {
         if (that.object_type) {
             that.populate(that.object_type);
         }
+
+        that.create_error_link(container);
     };
 
     that.load = function(record) {
@@ -409,6 +411,10 @@ IPA.attributes_widget = function(spec) {
         }
     };
 
+    that.show_undo = function() {
+        $(that.undo_span).css('display', 'inline-block');
+    };
+
     return that;
 };
 

install/ui/ipa.css

@@ -193,6 +193,13 @@ body {
     padding-right: 0.3em;
 }
 
+.ui-state-error,
+.ui-widget-content .ui-state-error,
+.ui-widget-header .ui-state-error {
+    font-weight: bold;
+    padding: 0.2em;
+}
+
 /*  ----  Header  ----  */
 #header {
     position: absolute;
@@ -698,12 +705,13 @@ span.main-nav-off > a:visited {
     padding: 0.5em 0 0 1em;
     border-top: 1px solid #dfdfdf;
     height: 25px;
+    line-height: 25px;
     margin-top: 1em;
 }
 
 .search-table span[name=summary] {
     float: left;
-    line-height: 25px;
+    margin-right: 4em;
 }
 
 .search-table span[name=pagination] {
@@ -846,6 +854,7 @@ hr {
 
 .undo {
     cursor:pointer;
+    padding: 0.2em;
 }
 
 span.attrhint {

install/ui/jquery-ui.css

@@ -348,7 +348,7 @@
  *
  * http://docs.jquery.com/UI/Autocomplete#theming
  */
-.ui-autocomplete { position: absolute; cursor: default; }	
+.ui-autocomplete { position: absolute; cursor: default; }
 
 /* workarounds */
 * html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
@@ -404,8 +404,8 @@
 .ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
 .ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
 button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
-.ui-button-icons-only { width: 3.4em; } 
-button.ui-button-icons-only { width: 3.7em; } 
+.ui-button-icons-only { width: 3.4em; }
+button.ui-button-icons-only { width: 3.7em; }
 
 /*button text element */
 .ui-button .ui-button-text { display: block; line-height: 1.4;  }
@@ -441,7 +441,7 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
  */
 .ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
 .ui-dialog .ui-dialog-titlebar { padding: .5em 1em .3em; position: relative;  }
-.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .2em 0; } 
+.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .2em 0; }
 .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
 .ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
 .ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
@@ -513,7 +513,7 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
 .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
 .ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
 .ui-datepicker select.ui-datepicker-month-year {width: 100%;}
-.ui-datepicker select.ui-datepicker-month, 
+.ui-datepicker select.ui-datepicker-month,
 .ui-datepicker select.ui-datepicker-year { width: 49%;}
 .ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
 .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }

install/ui/widget.js

@@ -149,7 +149,7 @@ IPA.widget = function(spec) {
       the validation pattern.  If the field value does not pass validation,
       displays the error message and returns false. */
     that.validate = function() {
-        hide_error();
+        that.hide_error();
         that.valid = true;
 
         var values = that.save();
@@ -357,10 +357,10 @@ IPA.widget = function(spec) {
         error_link.css('display', 'block');
     };
 
-    function hide_error() {
+    that.hide_error = function() {
         var error_link = that.get_error_link();
         error_link.css('display', 'none');
-    }
+    };
 
     that.set_enabled = function() {
     };
@@ -374,10 +374,12 @@ IPA.widget = function(spec) {
 
     // methods that should be invoked by subclasses
     that.widget_create = that.create;
+    that.widget_hide_error = that.hide_error;
     that.widget_load = that.load;
     that.widget_reset = that.reset;
     that.widget_save = that.save;
     that.widget_set_dirty = that.set_dirty;
+    that.widget_show_error = that.show_error;
     that.widget_test_dirty = that.test_dirty;
 
     return that;
@@ -789,6 +791,8 @@ IPA.checkbox_widget = function (spec) {
         if (that.undo) {
             that.create_undo(container);
         }
+
+        that.create_error_link(container);
     };
 
     that.load = function(record) {
@@ -877,6 +881,8 @@ IPA.checkboxes_widget = function (spec) {
         input.change(function() {
             that.set_dirty(that.test_dirty());
         });
+
+        that.create_error_link(container);
     };
 
 
@@ -947,6 +953,8 @@ IPA.radio_widget = function(spec) {
         input.change(function() {
             that.set_dirty(that.test_dirty());
         });
+
+        that.create_error_link(container);
     };
 
     that.load = function(record) {
@@ -1019,6 +1027,8 @@ IPA.select_widget = function(spec) {
         that.select.change(function() {
             that.set_dirty(that.test_dirty());
         });
+
+        that.create_error_link(container);
     };
 
     that.load = function(record) {
@@ -1359,6 +1369,8 @@ IPA.table_widget = function (spec) {
             colspan: columns.length + (that.selectable ? 1 : 0)
         }).appendTo(tr);
 
+        that.create_error_link(td);
+
         that.summary = $('<span/>', {
             'name': 'summary'
         }).appendTo(td);
@@ -1566,6 +1578,12 @@ IPA.table_widget = function (spec) {
         return rows;
     };
 
+    that.show_error = function(message) {
+        var error_link = that.get_error_link();
+        error_link.html(message);
+        error_link.css('display', 'inline');
+    };
+
     that.set_enabled = function(enabled) {
         if (enabled) {
             $('input[name="select"]', that.table).attr('disabled', false);
@@ -1582,10 +1600,11 @@ IPA.table_widget = function (spec) {
 
     // methods that should be invoked by subclasses
     that.table_create = that.create;
-    that.table_set_enabled = that.set_enabled;
-    that.table_prev_page = that.prev_page;
     that.table_next_page = that.next_page;
+    that.table_prev_page = that.prev_page;
+    that.table_set_enabled = that.set_enabled;
     that.table_set_page = that.set_page;
+    that.table_show_error = that.show_error;
 
     return that;
 };