app.js

@@ -127,18 +127,52 @@
       $$('input').map(function ($el) { $el.disabled = true; });
       $$('button').map(function ($el) { $el.disabled = true; });
 
-      // function here
+      var opts = {
-      // keys.generate()
+        jwk: JSON.parse($('textarea[name="JWK"]').value),
-      // jws = jwk.sign(payload)
+        claims: {
-      // jwt = jws.protected + '.' + jws.payload + '.' + jws.signature
+          exp: "1h",
-      // promise call back
+          iss: document.getElementById(`-acmeDomains`).value
+        }
+      };
+
+      Keypairs.signJwt(opts).then(function (msg) {
+        console.log("msg response")
+        console.log(msg)
+
+        $('.js-jwt').innerText = msg;
+        $('.js-toc-jwt').hidden = false;
+        var msgArr = msg.split(".")
+        var protected64 = msgArr[0]
+        var payload64 = msgArr[1]
+        Keypairs._sign(opts, msg).then(function (buf) {
+          var signedMsg = {
+            protected: protected64
+            , payload: payload64
+            , signature: Enc.bufToUrlBase64(buf)
+          };
+          $('.js-jws').innerText = JSON.stringify(signedMsg);
+          $('.js-toc-jws').hidden = false;
           $('.js-pem-loading').hidden = true;
           $$('input').map(function ($el) { $el.disabled = false; });
           $$('button').map(function ($el) { $el.disabled = false; });
         });
+      })
+
+      // jws = jwk.sign(payload)
+      // jwt = jws.protected + '.' + jws.payload + '.' + jws.signature
+
+    });
 
     $('.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

@@ -93,19 +93,23 @@
   <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="pem">JWK:</label>
       <br>
       <textarea id="pem" name="pem"></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>
   </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>
   </details>