Display required, enabled and error widget states in fluid layout

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

install/ui/ipa.css

@@ -1138,9 +1138,9 @@ body.info-page  {
 }
 
 .required-indicator {
-     color: red;
+     color: #1d85d9;
      font-weight: bold;
-     font-size: 120%;
+     font-size: 125%;
 }
 
 .section-cell-label .required-indicator {

install/ui/less/forms-override.less

@@ -115,6 +115,11 @@ input[type="radio"]:checked:disabled + label {
     }
 }
 
+// this style directly negates the same in forms.less
+.help-inline {
+    margin-top: 0;
+}
+
 .control-group .control-label {
     position: relative;
 
@@ -122,3 +127,22 @@ input[type="radio"]:checked:disabled + label {
         margin-bottom: 0;
     }
 }
+
+// implicit required indicator
+.control-group.required .control-label label:after {
+    display: inline-block;
+    position: absolute;
+    right: -11px;
+    top: 0px;
+    font-size: 125%;
+    font-weight: bold;
+    content: '*';
+    color: #1d85d9;
+}
+
+@media (max-width: 480px) {
+    .control-group.required .control-label label:after {
+        position: relative;
+        right: -2px;
+    }
+}

install/ui/src/freeipa/widget.js

@@ -25,6 +25,7 @@
 define(['dojo/_base/array',
        'dojo/_base/lang',
        'dojo/Evented',
+       'dojo/on',
        './builder',
        './ipa',
        './jquery',
@@ -32,7 +33,7 @@ define(['dojo/_base/array',
        './reg',
        './text'
        ],
-       function(array, lang, Evented, builder, IPA, $, phases, reg, text) {
+       function(array, lang, Evented, on, builder, IPA, $, phases, reg, text) {
 
 /**
  * Widget module
@@ -279,7 +280,7 @@ IPA.input_widget = function(spec) {
 
         $('<span/>', {
             name: 'error_link',
-            'class': 'ui-state-error ui-corner-all',
+            'class': 'help-inline',
             style: 'display:none'
         }).appendTo(container);
     };
@@ -382,7 +383,7 @@ IPA.input_widget = function(spec) {
     that.show_error = function(message) {
         var error_link = that.get_error_link();
         error_link.html(message);
-        error_link.css('display', 'block');
+        error_link.css('display', '');
         that.emit('error-show', { source: that, error: message });
     };
 
@@ -788,6 +789,9 @@ IPA.multivalued_widget = function(spec) {
         row.widget.undo_clicked.attach(function() {
             that.on_child_undo_clicked(row);
         });
+        on(row.widget, 'error-show', function() {
+            that.emit('error-show', { source: that });
+        });
 
         row.remove_link = $('<a/>', {
             name: 'remove',
@@ -3962,6 +3966,9 @@ IPA.fluid_layout = function(spec) {
 
             label.appendTo(group);
             control.appendTo(group);
+
+            that.register_state_handlers(widget);
+            that.update_state(group, widget);
         }
 
         return container;
@@ -3991,7 +3998,6 @@ IPA.fluid_layout = function(spec) {
         }).appendTo(label_cont);
 
         // TODO: set `for` in label
-        // TODO: maintain errors and required
         return label_cont;
     };
 
@@ -4009,6 +4015,52 @@ IPA.fluid_layout = function(spec) {
         return controls;
     };
 
+    that.register_state_handlers = function(widget) {
+        on(widget, 'require-change', that.on_require_change);
+        on(widget, 'enabled-change', that.on_enabled_change);
+        on(widget, 'error-show', that.on_error_show);
+        on(widget, 'error-hide', that.on_error_hide);
+    };
+
+    that.on_enabled_change = function(event) {
+
+        var row = that._get_row(event);
+        if (!row) return;
+        row.toggleClass('disabled', !event.enabled);
+    };
+
+    that.on_require_change = function(event) {
+
+        var row = that._get_row(event);
+        if (!row) return;
+        row.toggleClass('required', !!event.required);
+    };
+
+    that.on_error_show = function(event) {
+
+        var row = that._get_row(event);
+        if (!row) return;
+        row.toggleClass('error', true);
+    };
+
+    that.on_error_hide= function(event) {
+
+        var row = that._get_row(event);
+        if (!row) return;
+        row.toggleClass('error', false);
+    };
+
+    that.update_state = function(row, widget) {
+        row.toggleClass('disabled', !widget.enabled);
+        row.toggleClass('required', !!widget.required);
+    };
+
+    that._get_row = function(event) {
+        var widget = event.source;
+        if (!widget) return null;
+        return that.rows.get(widget.name);
+    };
+
     return that;
 };