Refactored certificate view and remove hold dialog

Removed old layout created using html tables. Now table layout is made by div
and modern css styling.

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

Reviewed-By: Petr Vobornik <pvoborni@redhat.com>

5 files changed, 192 insertions, 112 deletions

diff --git a/install/ui/less/layout.less b/install/ui/less/layout.less
index bf425d4e7..1b7e0479c 100644
--- a/install/ui/less/layout.less
+++ b/install/ui/less/layout.less
@@ -4,4 +4,23 @@
 
 #container {
     background-color: white;
-}
\ No newline at end of file
+}
+
+/* --- Table layout created by CSS --- */
+.table-layout {
+    display: table;
+}
+.table-row {
+    display: table-row;
+    .table-cell {
+        display: table-cell;
+        vertical-align: middle;
+    }
+    .table-head {
+        padding: 0 5px 0 0;
+    }
+}
+
+.break-words {
+    word-break: break-all;
+}
diff --git a/install/ui/src/freeipa/certificate.js b/install/ui/src/freeipa/certificate.js
index 7e7a3baba..65c3da723 100755
--- a/install/ui/src/freeipa/certificate.js
+++ b/install/ui/src/freeipa/certificate.js
@@ -229,6 +229,7 @@ IPA.cert.revoke_dialog = function(spec) {
     spec.ok_label = spec.ok_label || '@i18n:buttons.revoke';
 
     var that = IPA.confirm_dialog(spec);
+    IPA.table_mixin().apply(that);
 
     that.get_reason = function() {
         return that.select.val();
@@ -236,22 +237,17 @@ IPA.cert.revoke_dialog = function(spec) {
 
     that.create_content = function() {
 
-        var table = $('<table/>').appendTo(that.container);
+        var table = that.create_layout().appendTo(that.container);
 
-        var tr = $('<tr/>').appendTo(table);
+        var tr = that.create_row().appendTo(table);
+        var td = that.create_cell('@i18n:objects.cert.note', ':').appendTo(tr);
+        td = that.create_cell('@i18n:objects.cert.revoke_confirmation')
+            .appendTo(tr);
 
-        var td = $('<td/>').appendTo(tr);
-        td.append(text.get('@i18n:objects.cert.note')+':');
-
-        td = $('<td/>').appendTo(tr);
-        td.append(text.get('@i18n:objects.cert.revoke_confirmation'));
-
-        tr = $('<tr/>').appendTo(table);
-
-        td = $('<td/>').appendTo(tr);
-        td.append(text.get('@i18n:objects.cert.reason')+':');
-
-        td = $('<td/>').appendTo(tr);
+        tr = that.create_row().appendTo(table);
+        td = that.create_header_cell('@i18n:objects.cert.reason', ':')
+            .appendTo(tr);
+        td = that.create_cell().appendTo(tr);
 
         that.select = $('<select/>').appendTo(td);
         for (var i=0; i<IPA.cert.CRL_REASON.length; i++) {
@@ -272,6 +268,7 @@ IPA.cert.view_dialog = function(spec) {
     spec = spec || {};
 
     var that = IPA.dialog(spec);
+    IPA.table_mixin().apply(that);
 
     that.width = spec.width || 600;
     that.height = spec.height || 500;
@@ -284,6 +281,7 @@ IPA.cert.view_dialog = function(spec) {
     that.expires_on = spec.certificate.valid_not_after || '';
     that.md5_fingerprint = spec.certificate.md5_fingerprint || '';
     that.sha1_fingerprint = spec.certificate.sha1_fingerprint || '';
+    that.sha256_fingerprint = spec.certificate.sha256_fingerprint || '';
 
     that.create_button({
         name: 'close',
@@ -295,103 +293,64 @@ IPA.cert.view_dialog = function(spec) {
 
     that.create_content = function() {
 
-        var table = $('<table/>').appendTo(that.container);
-
-        var tr = $('<tr/>').appendTo(table);
-        $('<td/>', {
-            'colspan': 2,
-            'html': '<h3>'+text.get('@i18n:objects.cert.issued_to')+'</h3>'
-        }).appendTo(tr);
-
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.common_name')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.subject.cn
-        }).appendTo(tr);
-
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.organization')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.subject.o
-        }).appendTo(tr);
-
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.organizational_unit')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.subject.ou
-        }).appendTo(tr);
-
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.serial_number')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.serial_number
-        }).appendTo(tr);
-
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.serial_number_hex')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.serial_number_hex
-        }).appendTo(tr);
-
-        tr = $('<tr/>').appendTo(table);
-        $('<td/>', {
-            'colspan': 2,
-            'html': '<h3>'+text.get('@i18n:objects.cert.issued_by')+'</h3>'
-        }).appendTo(tr);
-
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.common_name')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.issuer.cn
-        }).appendTo(tr);
-
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.organization')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.issuer.o
-        }).appendTo(tr);
-
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.organizational_unit')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.issuer.ou
-        }).appendTo(tr);
-
-        tr = $('<tr/>').appendTo(table);
-        $('<td/>', {
-            'colspan': 2,
-            'html': '<h3>'+text.get('@i18n:objects.cert.validity')+'</h3>'
-        }).appendTo(tr);
-
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.issued_on')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.issued_on
-        }).appendTo(tr);
-
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.expires_on')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.expires_on
-        }).appendTo(tr);
-
-        tr = $('<tr/>').appendTo(table);
-        $('<td/>', {
-            'colspan': 2,
-            'html': '<h3>'+text.get('@i18n:objects.cert.fingerprints')+'</h3>'
-        }).appendTo(tr);
-
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.sha1_fingerprint')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.sha1_fingerprint
-        }).appendTo(tr);
-
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.md5_fingerprint')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.md5_fingerprint
-        }).appendTo(tr);
+        var new_row = function(title, value) {
+            var row = that.create_row();
+            row.append(that
+                .create_header_cell(title, ':'));
+            row.append(that.create_cell(value, '', 'break-words'));
+
+            return row;
+        };
+
+        that.create_title('@i18n:objects.cert.issued_to')
+            .appendTo(that.container);
+
+        var table_layout = that.create_layout().appendTo(that.container);
+
+        new_row('@i18n:objects.cert.common_name', that.subject.cn)
+            .appendTo(table_layout);
+        new_row('@i18n:objects.cert.organization', that.subject.o)
+            .appendTo(table_layout);
+        new_row('@i18n:objects.cert.organizational_unit', that.subject.ou)
+            .appendTo(table_layout);
+        new_row('@i18n:objects.cert.serial_number',
+            that.serial_number.toString()).appendTo(table_layout);
+        new_row('@i18n:objects.cert.serial_number_hex', that.serial_number_hex)
+            .appendTo(table_layout);
+
+        that.create_title('@i18n:objects.cert.issued_by')
+            .appendTo(that.container);
+
+        table_layout = that.create_layout().appendTo(that.container);
+
+        new_row('@i18n:objects.cert.common_name', that.issuer.cn)
+            .appendTo(table_layout);
+        new_row('@i18n:objects.cert.organization', that.issuer.o)
+            .appendTo(table_layout);
+        new_row('@i18n:objects.cert.organizational_unit', that.issuer.ou)
+            .appendTo(table_layout);
+
+        that.create_title('@i18n:objects.cert.validity')
+            .appendTo(that.container);
+
+        table_layout = that.create_layout().appendTo(that.container);
+
+        new_row('@i18n:objects.cert.issued_on', that.issued_on)
+            .appendTo(table_layout);
+        new_row('@i18n:objects.cert.expires_on', that.expires_on)
+            .appendTo(table_layout);
+
+        that.create_title('@i18n:objects.cert.fingerprints')
+            .appendTo(that.container);
+
+        table_layout = that.create_layout().appendTo(that.container);
+
+        new_row('@i18n:objects.cert.md5_fingerprint', that.md5_fingerprint)
+            .appendTo(table_layout);
+        new_row('@i18n:objects.cert.sha1_fingerprint', that.sha1_fingerprint)
+            .appendTo(table_layout);
+        new_row('@i18n:objects.cert.sha256_fingerprint', that.sha256_fingerprint)
+            .appendTo(table_layout);
     };
 
     return that;
diff --git a/install/ui/src/freeipa/dialog.js b/install/ui/src/freeipa/dialog.js
index 3d156ce10..1a0c9d22c 100644
--- a/install/ui/src/freeipa/dialog.js
+++ b/install/ui/src/freeipa/dialog.js
@@ -1440,6 +1440,106 @@ IPA.confirm_dialog = function(spec) {
     return that;
 };
 
+
+/**
+ *
+ *
+ *
+ *
+ *
+ *
+ */
+IPA.table_mixin = function() {
+
+    return {
+        mixin: {
+            /**
+             * Create title above a table.
+             *
+             * @param {string} cls css class which will be added to current title
+             */
+            create_title: function(str, cls) {
+                cls = cls || '';
+
+                return $('<h3 />', {
+                    'class': cls,
+                    text: text.get(str)
+                });
+            },
+
+            /**
+             * Create table layout..
+             *
+             * @param {string} cls css class which will be added to current table layout
+             */
+            create_layout: function(cls) {
+                cls = cls || '';
+
+                return $('<div />', {
+                    'class': 'table-layout ' + cls
+                });
+            },
+
+            /**
+             * Create one row to the table layout.
+             *
+             * @param {string} cls css class which will be added to current row
+             */
+            create_row: function(cls) {
+                cls = cls || '';
+
+                return $('<div />', {
+                    'class': 'table-row ' + cls
+                });
+            },
+
+            /**
+             * Create one cell to the table layout.
+             *
+             * @param {string} string, will be parsed using our provider
+             * @param {string} suffix, string which will be concatenated to the end of
+             *                  'str' string. Not parsed using text.get()
+             * @param {string} cls css class which will be added to current cell
+             */
+            create_cell: function(str, suffix, cls) {
+                str = str || '';
+                suffix = suffix || '';
+                cls = cls || '';
+
+                return $('<div />', {
+                    'class': 'table-cell ' + cls,
+                    text: text.get(str) + suffix
+                });
+            },
+
+            /**
+             * Create header cell to the table layout.
+             *
+             * @param {string} string, will be parsed using our provider
+             * @param {string} suffix, string which will be concatenated to the end of
+             *                  'str' string. Not parsed using text.get()
+             * @param {string} cls css class which will be added to current cell
+             */
+            create_header_cell: function(str, suffix, cls) {
+                str = str || '';
+                suffix = suffix || '';
+                cls = cls || '';
+
+                return $('<div />', {
+                    'class': 'table-cell table-head' + cls,
+                    text: text.get(str) + suffix
+                });
+            }
+        },
+
+        apply: function(obj) {
+            $.extend(obj, this.mixin);
+        }
+    };
+};
+
+
+
 /**
  * General form dialog with confirmation feature
  * @class  dialog.form_dialog
diff --git a/install/ui/test/data/ipa_init.json b/install/ui/test/data/ipa_init.json
index 1d7f5d883..19fb1008e 100644
--- a/install/ui/test/data/ipa_init.json
+++ b/install/ui/test/data/ipa_init.json
@@ -289,6 +289,7 @@
                             "serial_number": "Serial Number",
                             "serial_number_hex": "Serial Number (hex)",
                             "sha1_fingerprint": "SHA1 Fingerprint",
+                            "sha256_fingerprint": "SHA256 Fingerprint",
                             "status": "Status",
                             "superseded": "Superseded",
                             "unspecified": "Unspecified",
diff --git a/ipaserver/plugins/internal.py b/ipaserver/plugins/internal.py
index 768433b94..fc437264e 100644
--- a/ipaserver/plugins/internal.py
+++ b/ipaserver/plugins/internal.py
@@ -432,6 +432,7 @@ class i18n_messages(Command):
                 "serial_number": _("Serial Number"),
                 "serial_number_hex": _("Serial Number (hex)"),
                 "sha1_fingerprint": _("SHA1 Fingerprint"),
+                "sha256_fingerprint": _("SHA256 Fingerprint"),
                 "status": _("Status"),
                 "superseded": _("Superseded"),
                 "unspecified": _("Unspecified"),