New certificate and Kerberos key status behavior.

The status panel for certificates and Kerberos keys has been
modified to display only the current status with the relevant buttons.
New icons have been added to replace the red/yellow/green bullets.

7 files changed, 169 insertions, 122 deletions

diff --git a/install/static/Makefile.am b/install/static/Makefile.am
index c1a5a755..998c4ffe 100644
--- a/install/static/Makefile.am
+++ b/install/static/Makefile.am
@@ -11,6 +11,8 @@ app_DATA =                              \
 	aci.js				\
 	add.js				\
 	associate.js			\
+	caution.png			\
+	check.png			\
 	ipa_logo_180x50.png		\
 	ipa.js				\
 	ipa.css				\
diff --git a/install/static/caution.png b/install/static/caution.png
new file mode 100755
index 00000000..ce7a68ad
--- /dev/null
+++ b/install/static/caution.png
diff --git a/install/static/certificate.js b/install/static/certificate.js
index e81d3a78..b7e5a51d 100755
--- a/install/static/certificate.js
+++ b/install/static/certificate.js
@@ -413,96 +413,132 @@ function certificate_status_widget(spec) {
 
         that.widget_create(container);
 
-        var table = $('<table/>', {
-            'class': 'certificate-status'
+        var dd = $('<dd/>', {
+            'class': 'first'
         }).appendTo(container);
 
-        var tr = $('<tr/>').appendTo(table);
+        var div = $('<div/>', {
+            name: 'certificate-valid'
+        }).appendTo(dd);
 
-        var td = $('<td/>').appendTo(tr);
+        $('<img/>', {
+            src: 'check.png',
+            style: 'float: left;',
+            'class': 'status-icon'
+        }).appendTo(div);
 
-        $('<div/>', {
-            'class': 'status-icon status-valid'
-        }).appendTo(td);
+        var content_div = $('<div/>', {
+            style: 'float: left;'
+        }).appendTo(div);
 
-        td = $('<td/>').appendTo(tr);
-        td.append('Valid Certificate Present:');
+        content_div.append('<b>Valid Certificate Present:</b>');
 
-        td = $('<td/>').appendTo(tr);
+        content_div.append(' ');
 
         $('<input/>', {
             'type': 'button',
             'name': 'get',
             'value': 'Get'
-        }).appendTo(td);
+        }).appendTo(content_div);
 
-        td.append(' ');
+        content_div.append(' ');
 
         if (!that.is_selfsign()) {
             $('<input/>', {
                 'type': 'button',
                 'name': 'revoke',
                 'value': 'Revoke'
-            }).appendTo(td);
+            }).appendTo(content_div);
 
-            td.append(' ');
+            content_div.append(' ');
         }
 
         $('<input/>', {
             'type': 'button',
             'name': 'view',
             'value': 'View'
-        }).appendTo(td);
+        }).appendTo(content_div);
+
+        content_div.append(' ');
+
+        $('<input/>', {
+            'type': 'button',
+            'name': 'create',
+            'value': 'New Certificate'
+        }).appendTo(content_div);
 
         if (!that.is_selfsign()) {
-            tr = $('<tr/>').appendTo(table);
+            div = $('<div/>', {
+                name: 'certificate-revoked'
+            }).appendTo(dd);
+
+            $('<img/>', {
+                src: 'caution.png',
+                style: 'float: left;',
+                'class': 'status-icon'
+            }).appendTo(div);
+
+            content_div = $('<div/>', {
+                style: 'float: left;'
+            }).appendTo(div);
 
-            td = $('<td/>').appendTo(tr);
-            $('<div/>', {
-                'class': 'status-icon status-revoked'
-            }).appendTo(td);
+            content_div.append('<b>Certificate Revoked:</b>');
 
-            td = $('<td/>').appendTo(tr);
-            td.append('Certificate Revoked:');
+            content_div.append(' ');
 
-            td = $('<td/>').appendTo(tr);
-            td.append($('<span/>', {
+            content_div.append($('<span/>', {
                 'name': 'revocation_reason'
             }));
-            td.append(' ');
+
+            content_div.append(' ');
 
             $('<input/>', {
                 'type': 'button',
                 'name': 'restore',
                 'value': 'Restore'
-            }).appendTo(td);
+            }).appendTo(content_div);
+
+            content_div.append(' ');
+
+            $('<input/>', {
+                'type': 'button',
+                'name': 'create',
+                'value': 'New Certificate'
+            }).appendTo(content_div);
         }
 
-        tr = $('<tr/>').appendTo(table);
+        div = $('<div/>', {
+            name: 'certificate-missing'
+        }).appendTo(dd);
+
+        $('<img/>', {
+            src: 'caution.png',
+            style: 'float: left;',
+            'class': 'status-icon'
+        }).appendTo(div);
+
+        content_div = $('<div/>', {
+            style: 'float: left;'
+        }).appendTo(div);
 
-        td = $('<td/>').appendTo(tr);
-        $('<div/>', {
-            'class': 'status-icon status-missing'
-        }).appendTo(td);
+        content_div.append('<b>No Valid Certificate:</b>');
 
-        td = $('<td/>').appendTo(tr);
-        td.append('No Valid Certificate:');
+        content_div.append(' ');
 
-        td = $('<td/>').appendTo(tr);
         $('<input/>', {
             'type': 'button',
             'name': 'create',
             'value': 'New Certificate'
-        }).appendTo(td);
+        }).appendTo(content_div);
     };
 
     that.setup = function(container) {
 
         that.widget_setup(container);
 
-        that.valid = $('.status-valid', that.container);
-        that.revoked = $('.status-revoked', that.container);
-        that.missing = $('.status-missing', that.container);
+        that.valid = $('div[name=certificate-valid]', that.container);
+        that.revoked = $('div[name=certificate-revoked]', that.container);
+        that.missing = $('div[name=certificate-missing]', that.container);
 
         var button = $('input[name=get]', that.container);
         that.get_button = IPA.button({
@@ -558,14 +594,16 @@ function certificate_status_widget(spec) {
         });
         button.replaceWith(that.restore_button);
 
-        button = $('input[name=create]', that.container);
-        that.create_button = IPA.button({
-            'label': 'New Certificate',
-            'click': function() {
-                request_certificate(that.result);
-            }
+        $('input[name=create]', that.container).each(function(index) {
+            button = $(this);
+            that.create_button = IPA.button({
+                'label': 'New Certificate',
+                'click': function() {
+                    request_certificate(that.result);
+                }
+            });
+            button.replaceWith(that.create_button);
         });
-        button.replaceWith(that.create_button);
     };
 
     that.load = function(result) {
@@ -582,14 +620,11 @@ function certificate_status_widget(spec) {
     };
 
     function set_status(status, revocation_reason) {
-        that.valid.toggleClass('status-valid-active', status == CERTIFICATE_STATUS_VALID);
-        that.missing.toggleClass('status-missing-active', status == CERTIFICATE_STATUS_MISSING);
-
-        that.get_button.css('visibility', status == CERTIFICATE_STATUS_VALID ? 'visible' : 'hidden');
-        that.view_button.css('visibility', status == CERTIFICATE_STATUS_VALID ? 'visible' : 'hidden');
+        that.valid.css('display', status == CERTIFICATE_STATUS_VALID ? 'inline' : 'none');
+        that.missing.css('display', status == CERTIFICATE_STATUS_MISSING ? 'inline' : 'none');
 
         if (!that.is_selfsign()) {
-            that.revoked.toggleClass('status-revoked-active', status == CERTIFICATE_STATUS_REVOKED);
+            that.revoked.css('display', status == CERTIFICATE_STATUS_REVOKED ? 'inline' : 'none');
             that.revoke_button.css('visibility', status == CERTIFICATE_STATUS_VALID ? 'visible' : 'hidden');
             that.revocation_reason.html(revocation_reason == undefined ? '' : CRL_REASON[revocation_reason]);
             that.restore_button.css('visibility', revocation_reason == 6 ? 'visible' : 'hidden');
diff --git a/install/static/check.png b/install/static/check.png
new file mode 100755
index 00000000..c3646db1
--- /dev/null
+++ b/install/static/check.png
diff --git a/install/static/host.js b/install/static/host.js
index 76c5943c..9751abbe 100644
--- a/install/static/host.js
+++ b/install/static/host.js
@@ -221,76 +221,78 @@ function host_provisioning_status_widget(spec) {
 
         that.widget_create(container);
 
-        var table = $('<table/>', {
-            'class': 'kerberos-key-status'
+        var dd = $('<dd/>', {
+            'class': 'first'
         }).appendTo(container);
 
-        var tr = $('<tr/>').appendTo(table);
+        var div = $('<div/>', {
+            name: 'kerberos-key-valid'
+        }).appendTo(dd);
 
-        var td = $('<td/>').appendTo(tr);
-        $('<div/>', {
-            'class': 'status-icon status-valid'
-        }).appendTo(td);
+        $('<img/>', {
+            src: 'check.png',
+            style: 'float: left;',
+            'class': 'status-icon'
+        }).appendTo(div);
 
-        td = $('<td/>').appendTo(tr);
-        td.append('Kerberos Key Present, Host Provisioned:');
+        var content_div = $('<div/>', {
+            style: 'float: left;'
+        }).appendTo(div);
 
-        td = $('<td/>').appendTo(tr);
+        content_div.append('<b>Kerberos Key Present, Host Provisioned:</b>');
+
+        content_div.append(' ');
 
         $('<input/>', {
             'type': 'button',
             'name': 'unprovision',
             'value': 'Delete Key, Unprovision'
-        }).appendTo(td);
-
-        tr = $('<tr/>').appendTo(table);
-
-        td = $('<td/>').appendTo(tr);
-        $('<div/>', {
-            'class': 'status-icon status-missing'
-        }).appendTo(td);
+        }).appendTo(content_div);
 
-        td = $('<td/>').appendTo(tr);
-        td.append('Kerberos Key Not Present');
+        div = $('<div/>', {
+            name: 'kerberos-key-missing'
+        }).appendTo(dd);
 
-        td = $('<td/>').appendTo(tr);
+        $('<img/>', {
+            src: 'caution.png',
+            style: 'float: left;',
+            'class': 'status-icon'
+        }).appendTo(div);
 
-        tr = $('<tr/>').appendTo(table);
+        content_div = $('<div/>', {
+            style: 'float: left;'
+        }).appendTo(div);
 
-        td = $('<td/>').appendTo(tr);
+        content_div.append('<b>Kerberos Key Not Present</b>');
 
-        td = $('<td/>').appendTo(tr);
-        td.append('Enroll via One-Time-Password:');
+        content_div.append('<br/>');
 
-        td = $('<td/>').appendTo(tr);
+        content_div.append('Enroll via One-Time-Password:');
 
-        tr = $('<tr/>').appendTo(table);
-
-        td = $('<td/>').appendTo(tr);
-
-        td = $('<td/>').appendTo(tr);
+        content_div.append('<br/>');
+        content_div.append('<br/>');
 
         $('<input/>', {
             'type': 'text',
             'name': 'otp',
             'class': 'otp'
-        }).appendTo(td);
+        }).appendTo(content_div);
 
-        td = $('<td/>').appendTo(tr);
+        content_div.append(' ');
 
         $('<input/>', {
             'type': 'button',
             'name': 'enroll',
             'value': 'Set OTP'
-        }).appendTo(td);
+        }).appendTo(content_div);
     };
 
     that.setup = function(container) {
 
         that.widget_setup(container);
 
-        that.valid = $('.status-valid', that.container);
-        that.missing = $('.status-missing', that.container);
+        that.valid = $('div[name=kerberos-key-valid]', that.container);
+        that.missing = $('div[name=kerberos-key-missing]', that.container);
 
         var button = $('input[name=unprovision]', that.container);
         that.unprovision_button = IPA.button({
@@ -392,12 +394,8 @@ function host_provisioning_status_widget(spec) {
     };
 
     function set_status(status) {
-        that.valid.toggleClass('status-valid-active', status == 'valid');
-        that.missing.toggleClass('status-missing-active', status == 'missing');
-
-        that.unprovision_button.css('visibility', status == 'valid' ? 'visible' : 'hidden');
-        that.otp_input.css('visibility', status == 'missing' ? 'visible' : 'hidden');
-        that.enroll_button.css('visibility', status == 'missing' ? 'visible' : 'hidden');
+        that.valid.css('display', status == 'valid' ? 'inline' : 'none');
+        that.missing.css('display', status == 'missing' ? 'inline' : 'none');
     }
 
     return that;
diff --git a/install/static/ipa.css b/install/static/ipa.css
index d94dbc75..518e8aa2 100644
--- a/install/static/ipa.css
+++ b/install/static/ipa.css
@@ -235,7 +235,7 @@ dl.entryattrs input {
 
 dl.entryattrs input.otp {
     min-width: 15em;
-    width: 98%;
+    width: 15em;
 }
 
 span.attrhint {
@@ -619,13 +619,15 @@ table.kerberos-key-status {
 }
 
 .status-icon {
-    width: 0.5em;
-    height: 0.5em;
-    -webkit-border-radius: 0.5em;
-    -moz-border-radius: 0.5em;
+    vertical-align: bottom;
+#    width: auto;
+#    height: 1em;
+#    -webkit-border-radius: 0.5em;
+#    -moz-border-radius: 0.5em;
 }
 
 .status-valid {
+    background-image:url('check.png');
     border: 0.2em solid #008000;
 }
 
diff --git a/install/static/service.js b/install/static/service.js
index 62243c22..fb99b74d 100644
--- a/install/static/service.js
+++ b/install/static/service.js
@@ -274,45 +274,57 @@ function service_provisioning_status_widget(spec) {
 
         that.widget_create(container);
 
-        var table = $('<table/>', {
-            'class': 'kerberos-key-status'
+        var dd = $('<dd/>', {
+            'class': 'first'
         }).appendTo(container);
 
-        var tr = $('<tr/>').appendTo(table);
+        var div = $('<div/>', {
+            'class': 'kerberos-key-valid'
+        }).appendTo(dd);
+
+        $('<img/>', {
+            src: 'check.png',
+            style: 'float: left;',
+            'class': 'status-icon'
+        }).appendTo(div);
 
-        var td = $('<td/>').appendTo(tr);
-        $('<div/>', {
-            'class': 'status-icon status-valid'
-        }).appendTo(td);
+        var content_div = $('<div/>', {
+            style: 'float: left;'
+        }).appendTo(div);
 
-        td = $('<td/>').appendTo(tr);
-        td.append('Kerberos Key Present, Service Provisioned:');
+        content_div.append('<b>Kerberos Key Present, Service Provisioned:</b>');
 
-        td = $('<td/>').appendTo(tr);
+        content_div.append(' ');
 
         $('<input/>', {
             'type': 'button',
             'name': 'unprovision',
             'value': 'Delete Key, Unprovision'
-        }).appendTo(td);
+        }).appendTo(content_div);
 
-        tr = $('<tr/>').appendTo(table);
+        div = $('<div/>', {
+            name: 'kerberos-key-missing'
+        }).appendTo(dd);
 
-        td = $('<td/>').appendTo(tr);
-        $('<div/>', {
-            'class': 'status-icon status-missing'
-        }).appendTo(td);
+        $('<img/>', {
+            src: 'caution.png',
+            style: 'float: left;',
+            'class': 'status-icon'
+        }).appendTo(div);
 
-        td = $('<td/>').appendTo(tr);
-        td.append('Kerberos Key Not Present');
+        content_div = $('<div/>', {
+            style: 'float: left;'
+        }).appendTo(div);
+
+        content_div.append('<b>Kerberos Key Not Present</b>');
     };
 
     that.setup = function(container) {
 
         that.widget_setup(container);
 
-        that.valid = $('.status-valid', that.container);
-        that.missing = $('.status-missing', that.container);
+        that.valid = $('div[name=kerberos-key-valid]', that.container);
+        that.missing = $('div[name=kerberos-key-missing]', that.container);
 
         var button = $('input[name=unprovision]', that.container);
         that.unprovision_button = IPA.button({
@@ -366,10 +378,8 @@ function service_provisioning_status_widget(spec) {
     };
 
     function set_status(status) {
-        that.valid.toggleClass('status-valid-active', status == 'valid');
-        that.missing.toggleClass('status-missing-active', status == 'missing');
-
-        that.unprovision_button.css('visibility', status == 'valid' ? 'visible' : 'hidden');
+        that.valid.css('display', status == 'valid' ? 'inline' : 'none');
+        that.missing.css('display', status == 'missing' ? 'inline' : 'none');
     }
 
     return that;