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>

install/ui/less/layout.less

@@ -4,4 +4,23 @@
 
 #container {
     background-color: white;
-}
+}
+
+/* --- 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;
+}

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 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'));
 
-        var tr = $('<tr/>').appendTo(table);
-        $('<td/>', {
-            'colspan': 2,
-            'html': '<h3>'+text.get('@i18n:objects.cert.issued_to')+'</h3>'
-        }).appendTo(tr);
+            return row;
+        };
 
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.common_name')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.subject.cn
-        }).appendTo(tr);
+        that.create_title('@i18n:objects.cert.issued_to')
+            .appendTo(that.container);
 
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.organization')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.subject.o
-        }).appendTo(tr);
+        var table_layout = that.create_layout().appendTo(that.container);
 
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.organizational_unit')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.subject.ou
-        }).appendTo(tr);
+        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);
 
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.serial_number')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.serial_number
-        }).appendTo(tr);
+        that.create_title('@i18n:objects.cert.issued_by')
+            .appendTo(that.container);
 
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.serial_number_hex')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.serial_number_hex
-        }).appendTo(tr);
+        table_layout = that.create_layout().appendTo(that.container);
 
-        tr = $('<tr/>').appendTo(table);
-        $('<td/>', {
-            'colspan': 2,
-            'html': '<h3>'+text.get('@i18n:objects.cert.issued_by')+'</h3>'
-        }).appendTo(tr);
+        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);
 
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.common_name')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.issuer.cn
-        }).appendTo(tr);
+        that.create_title('@i18n:objects.cert.validity')
+            .appendTo(that.container);
 
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.organization')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.issuer.o
-        }).appendTo(tr);
+        table_layout = that.create_layout().appendTo(that.container);
 
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.organizational_unit')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.issuer.ou
-        }).appendTo(tr);
+        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);
 
-        tr = $('<tr/>').appendTo(table);
-        $('<td/>', {
-            'colspan': 2,
-            'html': '<h3>'+text.get('@i18n:objects.cert.validity')+'</h3>'
-        }).appendTo(tr);
+        that.create_title('@i18n:objects.cert.fingerprints')
+            .appendTo(that.container);
 
-        tr = $('<tr/>').appendTo(table);
-        $('<td>'+text.get('@i18n:objects.cert.issued_on')+':</td>').appendTo(tr);
-        $('<td/>', {
-            text: that.issued_on
-        }).appendTo(tr);
+        table_layout = that.create_layout().appendTo(that.container);
 
-        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);
+        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;

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

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",

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"),