From 91435453895b7c09d9e15f7bfd10b19226b1e591 Mon Sep 17 00:00:00 2001
From: John Shaver <john@jshaver.net>
Date: Tue, 21 Aug 2018 14:15:09 -0700
Subject: [PATCH] Added download links for certs and changed some formatting.

---
 app/index.html      | 21 ++++++++++++++++++---
 app/js/app.js       |  4 ++++
 app/styles/main.css |  9 +++++++--
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/app/index.html b/app/index.html
index bcb2f33..bed0ed6 100644
--- a/app/index.html
+++ b/app/index.html
@@ -184,7 +184,7 @@
                   <pre id="js-acme-ver-content">...loading</pre>
                 </div>
               </div>
-              <div class="download-ver-file">
+              <div class="download-file">
                 <svg class="mdicon icon-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                   <use xlink:href="#svg-download"></use>
                 </svg>
@@ -259,20 +259,35 @@
 
         <!-- Step 5 Get Certs -->
         <form class="js-acme-form js-acme-form-download">
-          <div>
+          <div class="cert-download-container">
             <h2><label>privkey.pem</label></h2>
             <div class="acme-result-privkey file-preview">
               <div class="paper-fold"></div>
               <pre id="js-privkey">
               </pre>
             </div>
+            <div class="download-file">
+              <svg class="mdicon icon-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <use xlink:href="#svg-download"></use>
+              </svg>
+              <a id="js-download-privkey-link" href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4=" download="privkey.pem" target="_blank">
+                Download
+              </a>
+            </div>
             <h2><label>fullchain.pem</label></h2>
             <div class="acme-result-fullchain file-preview">
               <div class="paper-fold"></div>
               <pre id="js-fullchain">
               </pre>
             </div>
-
+            <div class="download-file">
+              <svg class="mdicon icon-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <use xlink:href="#svg-download"></use>
+              </svg>
+              <a id="js-download-fullchain-link" href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4=" download="fullchain.pem" target="_blank">
+                Download
+              </a>
+            </div>
             <div>
             <h3>node.js https server example</h3>
             <pre><code>'use strict';
diff --git a/app/js/app.js b/app/js/app.js
index de8c908..5cf45a5 100644
--- a/app/js/app.js
+++ b/app/js/app.js
@@ -471,6 +471,8 @@
         console.log('WINNING!');
         console.log(certs);
         $qs('#js-fullchain').innerHTML = certs;
+        $qs("#js-download-fullchain-link").href =
+          "data:text/octet-stream;base64," + window.btoa(certs);
 
         // https://stackoverflow.com/questions/40314257/export-webcrypto-key-to-pem-format
 				function spkiToPEM(keydata){
@@ -530,6 +532,8 @@
 				}).then (function (keydata) {
 					var pem = spkiToPEM(keydata);
 					$qs('#js-privkey').innerHTML = pem;
+          $qs("#js-download-privkey-link").href =
+            "data:text/octet-stream;base64," + window.btoa(pem);
           steps[i]();
 				}).catch(function(err){
 					console.error(err);
diff --git a/app/styles/main.css b/app/styles/main.css
index 934cbd3..6fd048d 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -191,12 +191,12 @@ pre {
     display: none;
 }
 
-.download-ver-file svg {
+.download-file svg {
     fill: #5bc17f;
     width: 1.333333333em;
 }
 
-.download-ver-file a {
+.download-file a {
     color: #5bc17f;
 }
 
@@ -250,3 +250,8 @@ pre {
     white-space: pre-line;
     word-break: break-all;
 }
+
+
+.cert-download-container {
+    margin: 0 -31%;
+}
\ No newline at end of file