From b1fc2bcc14dae6c4e1d653d0b6b09010cadd8669 Mon Sep 17 00:00:00 2001
From: John Shaver <john@jshaver.net>
Date: Sat, 16 Mar 2019 21:51:41 -0700
Subject: [PATCH] fix wildcard certificate verification

---
 app/index.html | 45 +++++++++++++++++++--------------------------
 app/js/app.js  | 24 ++++++++++++++----------
 2 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/app/index.html b/app/index.html
index e345eee..421d727 100644
--- a/app/index.html
+++ b/app/index.html
@@ -168,6 +168,7 @@
         <form class="js-acme-form js-acme-form-challenges">
 
           <h1>Let's verify your domain</h1>
+          <div class="js-acme-challenges">
           <div class="tabbed-selector">
             <label>
               <input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="http-01" checked required>
@@ -180,61 +181,53 @@
               <div></div>
             </label>
           </div>
-          <div class="js-acme-challenges">
             <div class="js-acme-verification-http-01">
               <h3>Upload this file</h3>
               <div class="http-verification-info file-preview">
                 <div class="paper-fold"></div>
                 <div>
                   <div class="file-ver-info-header">FILENAME</div>
-                  <pre id="js-acme-ver-file-location">...loading</pre>
+                  <pre class="js-acme-ver-file-location">...loading</pre>
                 </div>
                 <hr>
                 <div>
                   <div class="file-ver-info-header">CONTENTS</div>
-                  <pre id="js-acme-ver-content">...loading</pre>
+                  <pre class="js-acme-ver-content">...loading</pre>
                 </div>
               </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-verify-link" href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4=" download="hello.txt" target="_blank">
+                <a class="js-download-verify-link" href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4=" download="hello.txt" target="_blank">
                   Download
                 </a>
               </div>
               <h3>To this location</h3>
-              <div id="js-acme-ver-uri" class="acme-ver-uri">..loading</div>
+              <div class="js-acme-ver-uri" class="acme-ver-uri">..loading</div>
             </div>
             <div class="js-acme-verification-dns-01">
               <h3>Set this DNS Record</h3>
               <div class="acme-ver-dns-label">Hostname</div>
-              <div id="js-acme-ver-hostname">loading...</div>
+              <div class="js-acme-ver-hostname">loading...</div>
               <div class="acme-ver-dns-label">TXT Host</div>
-              <div id="js-acme-ver-txt-host">loading...</div>
+              <div class="js-acme-ver-txt-host">loading...</div>
               <div class="acme-ver-dns-label">TXT Value</div>
-              <div id="js-acme-ver-txt-value">loading...</div>
+              <div class="js-acme-ver-txt-value">loading...</div>
             </div>
 
+          </div>
+          <div class="js-acme-wildcard-challenges">
             <div class="js-acme-wildcard">
-              <h2>Verify Wildcard Domains</h2>
-
-              <table class="js-acme-verification-wildcard">
-                <thead>
-                  <tr>
-                    <th>Hostname</th>
-                    <th>TXT Host</th>
-                    <th>TXT Value</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td>example.com</td>
-                    <td>_acme-challenge.example.com</td>
-                    <td>4A54</td>
-                  </tr>
-                </tbody>
-              </table>
+              <div class="js-acme-verification-wildcard">
+                <h3>Set this DNS Record</h3>
+                <div class="acme-ver-dns-label">Hostname</div>
+                <div class="js-acme-ver-hostname">loading...</div>
+                <div class="acme-ver-dns-label">TXT Host</div>
+                <div class="js-acme-ver-txt-host">loading...</div>
+                <div class="acme-ver-dns-label">TXT Value</div>
+                <div class="js-acme-ver-txt-value">loading...</div>
+              </div>
             </div>
           </div>
 
diff --git a/app/js/app.js b/app/js/app.js
index f32ab86..e56e7a9 100644
--- a/app/js/app.js
+++ b/app/js/app.js
@@ -346,23 +346,27 @@
 
                       if (claim.wildcard) {
                         obj.wildcard.push(data);
+                        let verification = $qs(".js-acme-verification-wildcard");
+                        verification.querySelector(".js-acme-ver-hostname").innerHTML = data.hostname;
+                        verification.querySelector(".js-acme-ver-txt-host").innerHTML = data.dnsHost;
+                        verification.querySelector(".js-acme-ver-txt-value").innerHTML = data.dnsAnswer;
 
-                        $qs(map.wildcard).innerHTML += '<tr><td>' + data.hostname + '</td><td>' + data.dnsHost + '</td><td>' + data.dnsAnswer + '</td></tr>';
                       } else if(obj[data.type]) {
 
                         obj[data.type].push(data);
 
                         if ('dns-01' === data.type) {
-                          $qs("#js-acme-ver-hostname").innerHTML = data.hostname;
-                          $qs("#js-acme-ver-txt-host").innerHTML = data.dnsHost;
-                          $qs("#js-acme-ver-txt-value").innerHTML = data.dnsAnswer;
+                          let verification = $qs(".js-acme-verification-dns-01");
+                          verification.querySelector(".js-acme-ver-hostname").innerHTML = data.hostname;
+                          verification.querySelector(".js-acme-ver-txt-host").innerHTML = data.dnsHost;
+                          verification.querySelector(".js-acme-ver-txt-value").innerHTML = data.dnsAnswer;
                         } else if ('http-01' === data.type) {
-                          $qs("#js-acme-ver-file-location").innerHTML = data.httpPath.split("/").slice(-1);
-                          $qs("#js-acme-ver-content").innerHTML = data.httpAuth;
-                          $qs("#js-acme-ver-uri").innerHTML = data.httpPath;
-                          $qs("#js-download-verify-link").href =
+                          $qs(".js-acme-ver-file-location").innerHTML = data.httpPath.split("/").slice(-1);
+                          $qs(".js-acme-ver-content").innerHTML = data.httpAuth;
+                          $qs(".js-acme-ver-uri").innerHTML = data.httpPath;
+                          $qs(".js-download-verify-link").href =
                             "data:text/octet-stream;base64," + window.btoa(data.httpAuth);
-                          $qs("#js-download-verify-link").download = data.httpPath.split("/").slice(-1);
+                          $qs(".js-download-verify-link").download = data.httpPath.split("/").slice(-1);
                         }
                       }
 
@@ -374,7 +378,7 @@
                   // hide wildcard if no wildcard
                   // hide http-01 and dns-01 if only wildcard
                   if (!obj.wildcard.length) {
-                    $qs('.js-acme-wildcard').hidden = true;
+                    $qs('.js-acme-wildcard-challenges').hidden = true;
                   }
                   if (!obj['http-01'].length) {
                     $qs('.js-acme-challenges').hidden = true;