Use fluid layout in host adder dialog fqdn widget

3 files changed, 49 insertions, 58 deletions

diff --git a/install/ui/less/forms-override.less b/install/ui/less/forms-override.less
index 4c3d2162d..ac442bb0b 100644
--- a/install/ui/less/forms-override.less
+++ b/install/ui/less/forms-override.less
@@ -149,6 +149,11 @@ input[type="radio"]:disabled + label {
     color: #1d85d9;
 }
 
+.row-fluid .control-group.required .control-label label:after {
+    position: relative;
+    right: -2px;
+}
+
 @media (max-width: 480px) {
     .control-group.required .control-label label:after {
         position: relative;
diff --git a/install/ui/src/freeipa/host.js b/install/ui/src/freeipa/host.js
index a96fc9823..18167f24b 100644
--- a/install/ui/src/freeipa/host.js
+++ b/install/ui/src/freeipa/host.js
@@ -316,53 +316,15 @@ IPA.host_fqdn_widget = function(spec) {
         var hostname = that.widgets.get_widget('hostname');
         var dnszone = that.widgets.get_widget('dnszone');
 
-        var table = $('<table/>', {
-            'class': 'fqdn'
-        }).appendTo(that.container);
-
-        var tr = $('<tr/>').appendTo(table);
-
-        var th = $('<th/>', {
-            'class': 'hostname',
-            title: hostname.label,
-            text: hostname.label
-        }).appendTo(tr);
-
-        $('<span/>', {
-            'class': 'required-indicator',
-            text: IPA.required_indicator
-        }).appendTo(th);
-
-        th = $('<th/>', {
-            'class': 'dnszone',
-            title: dnszone.label,
-            text: dnszone.label
-        }).appendTo(tr);
-
-        $('<span/>', {
-            'class': 'required-indicator',
-            text: IPA.required_indicator
-        }).appendTo(th);
-
-        tr = $('<tr/>').appendTo(table);
-
-        var td = $('<td/>', {
-            'class': 'hostname'
-        }).appendTo(tr);
-
-        var widget_cont = $('<div/>', {
-            name: hostname.name
-        }).appendTo(td);
-        hostname.create(widget_cont);
-
-        td = $('<td/>', {
-            'class': 'dnszone'
-        }).appendTo(tr);
-
-        widget_cont = $('<div/>', {
-            name: dnszone.name
-        }).appendTo(td);
-        dnszone.create(widget_cont);
+        var layout = IPA.fluid_layout({
+            cont_cls: 'row-fluid',
+            group_cls: 'control-group span6',
+            widget_cls: 'control',
+            label_cls: 'control-label'
+        });
+
+        var html = layout.create([hostname, dnszone]);
+        that.container.append(html);
 
         var hostname_input = $('input', hostname.container);
         var dnszone_input = $('input', dnszone.container);
@@ -392,19 +354,24 @@ IPA.host_fqdn_field = function(spec) {
 
     var that = IPA.field(spec);
 
-    that.validate_required = function() {
 
-        var hostname = that.hostname_widget.save();
-        var dnszone = that.dns_zone_widget.save();
+    that.has_value = function(widget) {
+
+        var value = widget.save();
+        var has_value = !!value.length && value[0] !== '';
+        return has_value;
+    };
+
+    that.validate_required = function() {
 
         var valid = true;
 
-        if(!hostname.length || hostname[0] === '') {
+        if (!that.has_value(that.hostname_widget)) {
             that.hostname_widget.show_error(text.get('@i18n:widget.validation.required'));
             that.valid = valid = false;
         }
 
-        if(!dnszone.length || dnszone[0] === '') {
+        if (!that.has_value(that.dns_zone_widget)) {
             that.dns_zone_widget.show_error(text.get('@i18n:widget.validation.required'));
             that.valid = valid = false;
         }
@@ -413,8 +380,12 @@ IPA.host_fqdn_field = function(spec) {
     };
 
     that.hide_error = function() {
-        that.hostname_widget.hide_error();
-        that.dns_zone_widget.hide_error();
+        if (that.has_value(that.hostname_widget)) {
+            that.hostname_widget.hide_error();
+        }
+        if (that.has_value(that.dns_zone_widget)) {
+            that.dns_zone_widget.hide_error();
+        }
     };
 
     that.save = function(record) {
@@ -440,6 +411,12 @@ IPA.host_fqdn_field = function(spec) {
         that.widget = that.container.widgets.get_widget(that.widget_name);
         that.hostname_widget = that.widget.widgets.get_widget('hostname');
         that.dns_zone_widget = that.widget.widgets.get_widget('dnszone');
+        that.hostname_widget.value_changed.attach(that.child_value_changed);
+        that.dns_zone_widget.value_changed.attach(that.child_value_changed);
+    };
+
+    that.child_value_changed = function() {
+        that.validate();
     };
 
     return that;
diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js
index 28a068bfb..9ea5ea0e0 100644
--- a/install/ui/src/freeipa/widget.js
+++ b/install/ui/src/freeipa/widget.js
@@ -220,6 +220,12 @@ IPA.input_widget = function(spec) {
     that.height = spec.height;
 
     /**
+     * Widget is required
+     * @property {boolean}
+     */
+    that.required = spec.required;
+
+    /**
      * Enable undo button showing. Undo button is displayed when user
      * modifies data.
      * @property {boolean} undo=true
@@ -4006,11 +4012,14 @@ IPA.table_layout = function(spec) {
     return that;
 };
 
-IPA.fluid_layout = function(spec) {
+exp.fluid_layout = IPA.fluid_layout = function(spec) {
 
     var that = IPA.layout(spec);
 
     that.cont_cls = spec.cont_cls || 'form-horizontal';
+    that.widget_cls = spec.widget_cls || 'controls';
+    that.label_cls = spec.label_cls || 'control-label';
+    that.group_cls = spec.group_cls || 'control-group';
 
     that.create = function(widgets) {
 
@@ -4035,7 +4044,7 @@ IPA.fluid_layout = function(spec) {
     };
 
     that.create_control_group = function(container, widget) {
-        var group = $('<div/>', { 'class': 'control-group' });
+        var group = $('<div/>', { 'class': that.group_cls });
         that.rows.put(widget.name, group);
 
         if (widget.hidden) {
@@ -4049,7 +4058,7 @@ IPA.fluid_layout = function(spec) {
     that.create_label = function(widget) {
         var label_text = widget.label + that.get_measurement_unit_text(widget);
 
-        var label_cont = $('<div/>', { 'class': 'control-label' });
+        var label_cont = $('<div/>', { 'class': that.label_cls });
 
         var label_el = $('<label/>', {
             name: widget.name,
@@ -4073,7 +4082,7 @@ IPA.fluid_layout = function(spec) {
 
     that.create_control = function(widget) {
         var controls = $('<div/>', {
-            'class': 'controls'
+            'class': that.widget_cls
         });
 
         var widget_container = $('<div/>', {