webui: use BS alerts in validation_summary_widget

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>

4 files changed, 149 insertions, 54 deletions

diff --git a/install/ui/doc/categories.json b/install/ui/doc/categories.json
index c0c0d83e8..01778dae6 100644
--- a/install/ui/doc/categories.json
+++ b/install/ui/doc/categories.json
@@ -178,6 +178,7 @@
             {
                 "name": "Widget mixins, utils and related",
                 "classes": [
+                    "widget.alert_helper",
                     "IPA.option_widget_base",
                     "IPA.column",
                     "IPA.html_util"
diff --git a/install/ui/less/widgets.less b/install/ui/less/widgets.less
index 3fc8cb5b7..c21a163a1 100644
--- a/install/ui/less/widgets.less
+++ b/install/ui/less/widgets.less
@@ -70,8 +70,3 @@
 	max-height: 0;
 	padding: 0;
 }
-
-.validation-summary {
-	font-weight: bold;
-	font-size: 110%;
-}
diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js
index 863399f61..1c6bf7cf8 100644
--- a/install/ui/src/freeipa/widget.js
+++ b/install/ui/src/freeipa/widget.js
@@ -5429,86 +5429,185 @@ IPA.value_map_widget = function(spec) {
     return that;
 };
 
-exp.validation_summary_widget = IPA.validation_summary_widget = function(spec) {
+/**
+ * Helper class for rendering bootstrap alerts
+ * @class widget.alert_helper
+ * @alternateClassName IPA.alert_helper
+ * @singleton
+ */
+exp.alert_helper = {
 
-    var that = IPA.widget(spec);
+    /**
+     * Create alert object
+     * @param  {string} name
+     * @param  {string|HTMLElement} text
+     * @param  {string} type error|warning|success|info
+     * @return {Object} alert
+     */
+    create_alert: function(name, text, type) {
+
+        var alert = null;
+        switch (type) {
+            case 'error':
+                alert = this.create_error(name, text);
+                break;
+            case 'warning':
+                alert = this.create_warning(name, text);
+                break;
+            case 'success':
+                alert = this.create_success(name, text);
+                break;
+            default:
+                alert = this.create_info(name, text);
+                break;
+        }
+        return alert;
+    },
 
     /**
-     * Map of errors to display
-     *
-     * - key: source ie. widget name
-     * - value: error text
-     * @protected
-     * @property {ordered_map}
+     * Create error alert
+     * @param  {string} name
+     * @param  {string|HTMLElement} text
+     * @return {Object} alert
+     */
+    create_error: function(name, text) {
+        return {
+            name: name,
+            text: text,
+            cls: 'alert alert-danger',
+            icon: 'fa fa-exclamation-circle'
+        };
+    },
+
+    /**
+     * Create warning alert
+     * @param  {string} name
+     * @param  {string|HTMLElement} text
+     * @return {Object} alert
+     */
+    create_warning: function(name, text) {
+        return {
+            name: name,
+            text: text,
+            cls: 'alert alert-warning',
+            icon: 'fa fa-warning'
+        };
+    },
+
+    /**
+     * Create info alert
+     * @param  {string} name
+     * @param  {string|HTMLElement} text
+     * @return {Object} alert
      */
-    that.errors = $.ordered_map();
+    create_info: function(name, text) {
+        return {
+            name: name,
+            text: text,
+            cls: 'alert alert-info',
+            icon: 'fa fa-info-circle'
+        };
+    },
+
+    /**
+     * Create success alert
+     * @param  {string} name
+     * @param  {string|HTMLElement} text
+     * @return {Object} alert
+     */
+    create_success: function(name, text) {
+        return {
+            name: name,
+            text: text,
+            cls: 'alert alert-success',
+            icon: 'fa fa-check-circle-o'
+        };
+    },
+
+    /**
+     * Render alert
+     * @param  {Object} alert
+     * @return {jQuery} alert as html element
+     */
+    render_alert: function(alert) {
+
+        var el = $('<div/>', {
+            'data-name': alert.name,
+            'class': alert.cls
+        });
+        $('<span/>', { 'class': alert.icon }).appendTo(el);
+        el.append(' ');
+        el.append(alert.text);
+        return el;
+    }
+};
+
+exp.validation_summary_widget = IPA.validation_summary_widget = function(spec) {
+
+    var that = IPA.widget(spec);
 
     /**
-     * Map of warning s to display
+     * Map of items to display
      *
      * - key: source ie. widget name
-     * - value: warning text
+     * - value: error text
      * @protected
      * @property {ordered_map}
      */
-    that.warnings = $.ordered_map();
+    that.items = $.ordered_map();
 
-    that.errors_node = null;
-    that.warnings_node = null;
+    that.items_node = null;
 
     that.create = function(container) {
         that.widget_create(container);
         that.add_class('validation-summary');
 
-        that.errors_node = $('<div/>', {
-            'class': 'text-error'
-        }).appendTo(container);
-        that.warnings_node = $('<div/>', {
-            'class': 'text-warning'
-        }).appendTo(container);
-        that.render_items(that.errors, that.errors_node);
-        that.render_items(that.warnings, that.warnings_node);
+        that.items_node = $('<div/>', {}).appendTo(container);
+        that.render_items();
     };
 
-    that.render_items = function(items, node) {
+    that.render_items = function() {
 
         if (that.enabled) {
-            that.set_visible(that.errors.length > 0 || that.warnings.length > 0);
+            that.set_visible(that.items.length > 0);
         }
 
-        if (!node) return;
+        if (!that.items_node) return;
 
-        node.empty();
+        that.items_node.empty();
 
-        var values = items.values;
-        var keys = items.keys;
+        var items = that.items.values;
+        for (var i=0, l=items.length; i<l; i++) {
 
-        for (var i=0; i<values.length; i++) {
-            $('<div/>', {
-                'data-name': keys[i],
-                html: values[i]
-            }).appendTo(node);
+            var alert = items[i];
+            exp.alert_helper.render_alert(alert).appendTo(that.items_node);
         }
     };
 
-    that.add_error = function(name, text) {
-        that.errors.put(name, text);
-        that.render_items(that.errors, that.errors_node);
+    that.add = function(alert) {
+        that.items.put(alert.name, alert);
+        that.render_items();
     };
 
-    that.remove_error = function(name) {
-        that.errors.remove(name);
-        that.render_items(that.errors, that.errors_node);
+    that.add_error = function(name, text) {
+        that.add(exp.alert_helper.create_error(name, text));
     };
 
     that.add_warning = function(name, text) {
-        that.warnings.put(name, text);
-        that.render_items(that.warnings, that.warnings_node);
+        that.add(exp.alert_helper.create_warning(name, text));
+    };
+
+    that.add_info = function(name, text) {
+        that.add(exp.alert_helper.create_info(name, text));
+    };
+
+    that.add_success = function(name, text) {
+        that.add(exp.alert_helper.create_success(name, text));
     };
 
-    that.remove_warning = function(name) {
-        that.warnings.remove(name);
-        that.render_items(that.warnings, that.warnings_node);
+    that.remove = function(name) {
+        that.items.remove(name);
+        that.render_items();
     };
 
     return that;
diff --git a/install/ui/src/freeipa/widgets/LoginScreen.js b/install/ui/src/freeipa/widgets/LoginScreen.js
index 9582e57f9..349a3da1d 100644
--- a/install/ui/src/freeipa/widgets/LoginScreen.js
+++ b/install/ui/src/freeipa/widgets/LoginScreen.js
@@ -334,7 +334,7 @@ define(['dojo/_base/declare',
             if (display) {
                 val_summary.add_warning('caps', this.caps_warning_msg);
             } else {
-                val_summary.remove_warning('caps');
+                val_summary.remove('caps');
             }
         },
 
@@ -342,7 +342,7 @@ define(['dojo/_base/declare',
 
             on(field, 'valid-change', function(e) {
                 if (e.valid) {
-                    summary.remove_error(field.name);
+                    summary.remove(field.name);
                 } else {
                     summary.add_error(field.name, field.label + ': ' + e.result.message);
                 }
@@ -360,7 +360,7 @@ define(['dojo/_base/declare',
         login: function() {
 
             var val_summary = this.get_widget('validation');
-            val_summary.remove_error('login');
+            val_summary.remove('login');
 
             if (!this.validate()) return;
 
@@ -401,7 +401,7 @@ define(['dojo/_base/declare',
                     password_f.set_value('');
                 } else if (result === 'password-expired') {
                     this.set('view', 'reset');
-                    val_summary.add_error('login', this.password_expired);
+                    val_summary.add_info('login', this.password_expired);
                 } else {
                     val_summary.add_error('login', this.form_auth_failed);
                     password_f.set_value('');
@@ -412,7 +412,7 @@ define(['dojo/_base/declare',
         login_and_reset: function() {
 
             var val_summary = this.get_widget('validation');
-            val_summary.remove_error('login');
+            val_summary.remove('login');
 
             if (!this.validate()) return;