boilerplate function

app.js

@@ -57,8 +57,8 @@
       $$('button').map(function ($el) { $el.disabled = true; });
       var opts = {
         kty: $('input[name="kty"]:checked').value
-      , namedCurve: $('input[name="ec-crv"]:checked').value
-      , modulusLength: $('input[name="rsa-len"]:checked').value
+        , namedCurve: $('input[name="ec-crv"]:checked').value
+        , modulusLength: $('input[name="rsa-len"]:checked').value
       };
       var then = Date.now();
       console.log('opts', opts);
@@ -118,7 +118,27 @@
       });
     });
 
+    $('form.js-keysign').addEventListener('submit', function (ev) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      $('.js-pem-loading').hidden = false;
+      $('.js-toc-jws').hidden = true;
+      $('.js-toc-jwt').hidden = true;
+      $$('input').map(function ($el) { $el.disabled = true; });
+      $$('button').map(function ($el) { $el.disabled = true; });
+
+      // function here
+      // keys.generate()
+      // jws = jwk.sign(payload)
+      // jwt = jws.protected + '.' + jws.payload + '.' + jws.signature
+      // promise call back
+      $('.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;
   }
 
   window.addEventListener('load', run);