Edit Certificate (rancher/rancher#1928, rancher/rancher#3376) (#592)

app/admin-tab/ha/template.hbs

@@ -27,9 +27,9 @@
     </div>
     <div class="col-md-9">
       <div class="well">
-        <h4 class="r-mb10">Management Server Certificate: {{#if cert.cert}}{{copy-to-clipboard size="small" clipboardText=cert.cert}}{{/if}}</h4>
+        <h4 class="r-mb10">Management Server Certificate: {{#if cert.certChain}}{{copy-to-clipboard size="small" clipboardText=cert.certChain}}{{/if}}</h4>
-        {{#if cert.cert}}
+        {{#if cert.certChain}}
-          <pre><code>{{cert.cert}}</code></pre>
+          <pre><code>{{cert.certChain}}</code></pre>
         {{else}}
           <i class="icon icon-spinner icon-spin"></i> Waiting for a host...
         {{/if}}

app/application/controller.js

@@ -34,22 +34,23 @@ export default Ember.Controller.extend({
   confirmDeleteResources  : null,
   originalModel           : null,
 
-  showAbout               : null,
   editAccount             : null,
-  editApikey              : null,
-  editProject             : null,
-  editContainer           : null,
-  editHost                : null,
-  editService             : null,
-  editExternalService     : null,
   editAliasService        : null,
+  editApikey              : null,
+  editCertificate         : null,
+  editContainer           : null,
+  editExternalService     : null,
+  editHost                : null,
   editLoadBalancerService : null,
+  editProject             : null,
   editRegistry            : null,
-  showShell               : null,
+  editService             : null,
-  showConsole             : null,
-  showContainerLogs       : null,
   openProcessesError      : null,
+  showAbout               : null,
   showAuditLogResponses   : null,
   showConfirmDeactivate   : null,
+  showConsole             : null,
+  showContainerLogs       : null,
   showNewDriver           : null,
+  showShell               : null,
 });

app/certificates/new/template.hbs

@@ -14,33 +14,30 @@
     descriptionPlaceholder="e.g. EV cert for mydomain.com"
   }}
 
-<div class="row form-group">
+  <div class="row form-group">
-
+    <div class="col-sm-12 col-md-4">
-      <div class="col-sm-12 col-md-4">
+      <div class="clearfix r-mb10 r-mt15">
-        <div class="clearfix r-mb10 r-mt15">
+        <label class="r-pt5">Private Key*</label>
-          <label class="r-pt5">Private Key*</label>
+        <span class="pull-right">{{read-text-file accept="text/*, .pem, .pkey, .key" action=(action "readFile" "key")}}</span>
-          <span class="pull-right">{{read-text-file accept="text/*, .pem, .pkey, .key" action=(action "readFile" "key")}}</span>
-        </div>
-        {{textarea value=model.key classNames="form-control no-resize" rows="5" placeholder="Paste in the private key, starting with -----BEGIN RSA PRIVATE KEY-----"}}
       </div>
+      {{textarea value=model.key classNames="form-control no-resize" rows="5" placeholder="Paste in the private key, starting with -----BEGIN RSA PRIVATE KEY-----"}}
+    </div>
 
-
+    <div class="col-sm-12 col-md-4">
-      <div class="col-sm-12 col-md-4">
+      <div class="clearfix r-mb10 r-mt15">
-        <div class="clearfix r-mb10 r-mt15">
+        <label class="r-pt5">Certificate*</label>
-          <label class="r-pt5">Certificate*</label>
+        <span class="pull-right">{{read-text-file accept="text/*, .pem, .crt" action=(action "readFile" "cert")}}</span>
-          <span class="pull-right">{{read-text-file accept="text/*, .pem, .crt" action=(action "readFile" "cert")}}</span>
-        </div>
-        {{textarea value=model.cert classNames="form-control no-resize" rows="5" placeholder="Paste in the primary certificate, starting with -----BEGIN CERTIFICATE-----"}}
       </div>
+      {{textarea value=model.cert classNames="form-control no-resize" rows="5" placeholder="Paste in the primary certificate, starting with -----BEGIN CERTIFICATE-----"}}
+    </div>
 
-      <div class="col-sm-12 col-md-4">
+    <div class="col-sm-12 col-md-4">
-        <div class="clearfix r-mb10 r-mt15">
+      <div class="clearfix r-mb10 r-mt15">
-          <label class="r-pt5">Chain Certs</label>
+        <label class="r-pt5">Chain Certs</label>
-          <span class="pull-right">{{read-text-file accept="text/*, .pem, .crt" action=(action "readFile" "certChain")}}</span>
+        <span class="pull-right">{{read-text-file accept="text/*, .pem, .crt" action=(action "readFile" "certChain")}}</span>
-        </div>
-        {{textarea value=model.certChain classNames="form-control no-resize" rows="5" placeholder="Optional; Paste in the additional chained certificates, starting with -----BEGIN CERTIFICATE-----"}}
       </div>
-
+      {{textarea value=model.certChain classNames="form-control no-resize" rows="5" placeholder="Optional; Paste in the additional chained certificates, starting with -----BEGIN CERTIFICATE-----"}}
+    </div>
   </div>
 </section>
 

app/components/edit-certificate/component.js

@@ -0,0 +1,29 @@
+import Ember from 'ember';
+import NewOrEdit from 'ui/mixins/new-or-edit';
+
+export default Ember.Component.extend(NewOrEdit, {
+  editing: true,
+  originalModel: null,
+  model: null,
+
+  willInsertElement() {
+    this.set('model', this.get('originalModel').clone());
+  },
+
+  actions: {
+    outsideClick() {
+    },
+
+    cancel() {
+      this.sendAction('dismiss');
+    },
+
+    readFile(field, text) {
+      this.set('model.'+field, text.trim());
+    },
+  },
+
+  doneSaving() {
+    this.sendAction('dismiss');
+  },
+});

app/components/edit-certificate/template.hbs

@@ -0,0 +1,43 @@
+<section class="horizontal-form container-fluid">
+  <h2>Edit Certificate</h2>
+
+  {{form-name-description
+    model=primaryResource
+    nameRequired=true
+    namePlaceholder="e.g. mydomain.com"
+    descriptionPlaceholder="e.g. EV cert for mydomain.com"
+  }}
+
+  <div class="row">
+    <div class="alert alert-info">Note: The Private Key is intentionally blank because the field is write-only.  You will need to provide the Private Key again to update the certificate, even if it hasn't changed.</div>
+  </div>
+
+  <div class="row">
+    <div class="col-md-4 form-group">
+      <div class="clearfix r-mb10 r-mt15">
+        <label class="r-pt5">Private Key*</label>
+        <span class="pull-right">{{read-text-file accept="text/*, .pem, .pkey, .key" action=(action "readFile" "key")}}</span>
+      </div>
+      {{textarea value=model.key classNames="form-control no-resize" rows="5" placeholder="Paste in the private key, starting with -----BEGIN RSA PRIVATE KEY-----"}}
+    </div>
+
+    <div class="col-md-4 form-group">
+      <div class="clearfix r-mb10 r-mt15">
+        <label class="r-pt5">Certificate*</label>
+        <span class="pull-right">{{read-text-file accept="text/*, .pem, .crt" action=(action "readFile" "cert")}}</span>
+      </div>
+      {{textarea value=model.cert classNames="form-control no-resize" rows="5" placeholder="Paste in the primary certificate, starting with -----BEGIN CERTIFICATE-----"}}
+    </div>
+
+    <div class="col-md-4 form-group">
+      <div class="clearfix r-mb10 r-mt15">
+        <label class="r-pt5">Chain Certs</label>
+        <span class="pull-right">{{read-text-file accept="text/*, .pem, .crt" action=(action "readFile" "certChain")}}</span>
+      </div>
+      {{textarea value=model.certChain classNames="form-control no-resize" rows="5" placeholder="Optional; Paste in the additional chained certificates, starting with -----BEGIN CERTIFICATE-----"}}
+    </div>
+  </div>
+</section>
+
+{{top-errors errors=errors}}
+{{save-cancel editing=true save="save" cancel="cancel"}}

app/models/certificate.js

@@ -1,6 +1,14 @@
 import Resource from 'ember-api-store/models/resource';
 
 export default Resource.extend({
+  actions: {
+    edit: function() {
+      this.get('application').setProperties({
+        editCertificate: true,
+        originalModel: this,
+      });
+    },
+  },
   availableActions: function() {
     var a = this.get('actionLinks');
     if ( !a )
@@ -14,6 +22,8 @@ export default Resource.extend({
       { label: 'Purge',         icon: '',                         action: 'purge',        enabled: !!a.purge },
       { divider: true },
       { label: 'View in API',   icon: 'icon icon-external-link',  action: 'goToApi',      enabled: true },
+      { divider: true },
+      { label: 'Edit',          icon: 'icon icon-edit',           action: 'edit',         enabled: !!a.update },
     ];
 
     return choices;

app/router.js

@@ -305,6 +305,12 @@ Router.map(function() {
     otherParams             : 'originalModel',
   });
 
+  this.modal('edit-certificate', {
+    dismissWithOutsideClick : false,
+    withParams              : 'editCertificate',
+    otherParams             : 'originalModel',
+  });
+
   this.modal('modal-catalog-launch', {
     dismissWithOutsideClick : true,
     withParams              : 'launchCatalog',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": true,
   "directories": {
     "doc": "doc",