webui: field and widget binding refactoring

This is a Web UI wide change. Fields and Widgets binding was refactored
to enable proper two-way binding between them. This should allow to have
one source of truth (field) for multiple consumers - widgets or something
else. One of the goal is to have fields and widget implementations
independent on each other. So that one could use a widget without field
or use one field for multiple widgets, etc..

Basically a fields logic was split into separate components:
- adapters
- parsers & formatters
- binder

Adapters
- extract data from data source (FreeIPA RPC command result)
- prepares them for commands.

Parsers
- parse extracted data to format expected by field
- parse widget value to format expected by field

Formatters
- format field value to format suitable for widgets
- format field value to format suitable for adapter

Binder
- is a communication bridge between field and widget
- listens to field's and widget's events and call appropriate methods

Some side benefits:
- better validation reporting in multivalued widget

Reviewed-By: Adam Misnyovszki <amisnyov@redhat.com>

1 files changed, 22 insertions, 0 deletions

diff --git a/install/ui/less/forms-override.less b/install/ui/less/forms-override.less
index b8c2e5d35..b987ed59f 100644
--- a/install/ui/less/forms-override.less
+++ b/install/ui/less/forms-override.less
@@ -184,3 +184,25 @@ input[type="radio"]:checked + label:before {
         right: -2px;
     }
 }
+
+// do not show error hint for valid value in multivalued widget if some
+// other value is invalid
+.control-group.error .valid .help-inline {
+    display: none;
+}
+
+// only type text for now - it should be replaced when we adopt Bootstrap 3
+// based RCUE (patternfly)
+.control-group.error .valid input[type=text] {
+
+    border-color: #62afdb !important;
+
+    &:focus {
+        border-color: rgba(82, 168, 236, 0.8);
+        outline: 0;
+        outline: thin dotted \9;
+        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
+        -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
+        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
+    }
+}