app.js

@@ -120,18 +120,60 @@
       $$('input').map(function ($el) { $el.disabled = true; });
       $$('button').map(function ($el) { $el.disabled = true; });
 
-      // function here
+      try {
-      // keys.generate()
+
-      // jws = jwk.sign(payload)
+
-      // jwt = jws.protected + '.' + jws.payload + '.' + jws.signature
+        var opts = {
-      // promise call back
+          jwk: JSON.parse($('textarea[name="jwk"]').value),
+          claims: {
+            exp: "1h",
+            iss: document.getElementById(`-acmeDomains`).value
+          }
+        };
+
+        Keypairs.signJwt(opts).then(function (msg) {
+          document.getElementById(`sign-error`).innerText = null;
+          $('.js-jwt').innerText = msg;
+          $('.js-toc-jwt').hidden = false;
+          var msgArr = msg.split(".")
+          var protected64 = msgArr[0]
+          var payload64 = msgArr[1]
+          var signature = msgArr[2]
+          var signedMsg = {
+            protected: protected64
+            , payload: payload64
+            , signature
+          };
+          $('.js-jws').innerText = JSON.stringify(signedMsg, null, 2);
+          $('.js-toc-jws').hidden = false;
           $('.js-pem-loading').hidden = true;
           $$('input').map(function ($el) { $el.disabled = false; });
           $$('button').map(function ($el) { $el.disabled = false; });
+        }).catch(function (error) {
+          document.getElementById(`sign-error`).innerText = error.message
+          $('.js-pem-loading').hidden = true;
+          $$('input').map(function ($el) { $el.disabled = false; });
+          $$('button').map(function ($el) { $el.disabled = false; });
+        })
+      } catch (error) {
+        document.getElementById(`sign-error`).innerText = error.message
+        $('.js-pem-loading').hidden = true;
+        $$('input').map(function ($el) { $el.disabled = false; });
+        $$('button').map(function ($el) { $el.disabled = false; });
+      }
+
     });
 
     $('.js-generate').hidden = false;
     $('.js-sign').hidden = false;
+    $('textarea[name="jwk"]').value = JSON.stringify({
+      "crv": "P-256",
+      "d": "LImWxqqTHbP3LHQfqscDSUzf_uNePGqf9U6ETEcO5Ho",
+      "kty": "EC",
+      "x": "vdjQ3T6VBX82LIKDzepYgRsz3HgRwp83yPuonu6vqos",
+      "y": "IUkEXtAMnppnV1A19sE2bJhUo4WPbq6EYgWxma4oGyg",
+      "kid": "MnfJYyS9W5gUjrJLdn8ePMzik8ZJz2qc-VZmKOs_oCw"
+    })
   }
 
   window.addEventListener('load', run);

index.html

@@ -101,20 +101,24 @@
   <div class="errors" id="sign-error"></div>
   <form class="js-keysign">
     <div>
-      <label for="pem">Pem</label>
+      <label for="-acmeDomains">Domains:</label>
+      <input class="js-domains" type="text" id="-acmeDomains" value="example.com www.example.com">
+    </div>
+    <div>
+      <label for="jwk">JWK:</label>
       <br>
-      <textarea id="pem" name="pem"></textarea>
+      <textarea id="jwk" name="jwk"></textarea>
     </div>
     <button class="js-sign" hidden>Sign</button>
   </form>
   <div class="js-pem-loading" hidden>Loading</div>
-  <details class="js-toc-jws">
+  <details class="js-toc-jws" hidden>
     <summary>JWS </summary>
-    <pre><code class="js-jws" ></code></pre>
+    <pre><code class="js-jws"></code></pre>
   </details>
-  <details class="js-toc-jwt">
+  <details class="js-toc-jwt" hidden>
-    <summary>JWS </summary>
+    <summary>JWT </summary>
-    <pre><code class="js-jwt" ></code></pre>
+    <pre><code class="js-jwt"></code></pre>
   </details>
 
     <br>