bluecrypt-keypairs.js/app.js

(function () {
  'use strict';

  var Keypairs = window.Keypairs;

  function $(sel) {
    return document.querySelector(sel);
  }
  function $$(sel) {
    return Array.prototype.slice.call(document.querySelectorAll(sel));
  }

  function run() {
    console.log('hello');

    // Show different options for ECDSA vs RSA
    $$('input[name="kty"]').forEach(function ($el) {
      $el.addEventListener('change', function (ev) {
        console.log(this);
        console.log(ev);
        if ("RSA" === ev.target.value) {
          $('.js-rsa-opts').hidden = false;
          $('.js-ec-opts').hidden = true;
        } else {
          $('.js-rsa-opts').hidden = true;
          $('.js-ec-opts').hidden = false;
        }
      });
    });

    // Generate a key on submit
    $('form.js-keygen').addEventListener('submit', function (ev) {
      ev.preventDefault();
      ev.stopPropagation();
      $('.js-loading').hidden = false;
      $('.js-jwk').hidden = true;
      $('.js-toc-der-public').hidden = true;
      $('.js-toc-pem-public').hidden = true;
      $('.js-toc-der-private').hidden = true;
      $('.js-toc-pem-private').hidden = true;
      $$('input').map(function ($el) { $el.disabled = true; });
      $$('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
      };
      console.log('opts', opts);
      Keypairs.generate(opts).then(function (results) {
        var der_public, der_private;
        if (opts.kty == 'EC') {
          der_public = x509.packSpki(results.public);
          der_private = x509.packPkcs8(results.private);
          var pem_private = Eckles.export({ jwk: results.private })
          var pem_public = Eckles.export({ jwk: results.public, public: true })
          $('.js-input-pem-public').innerText = pem_public;
          $('.js-toc-pem-public').hidden = false;
          $('.js-input-pem-private').innerText = pem_private;
          $('.js-toc-pem-private').hidden = false;
        } else {
          der_private = x509.packPkcs8(results.private);
          der_public = x509.packPkcs8(results.public);
          Rasha.pack({ jwk: results.private }).then(function (pem) {
            $('.js-input-pem-private').innerText = pem;
            $('.js-toc-pem-private').hidden = false;
          })
          Rasha.pack({ jwk: results.public }).then(function (pem) {
            $('.js-input-pem-public').innerText = pem;
            $('.js-toc-pem-public').hidden = false;
          })
        }

        $('.js-der-public').innerText = der_public;
        $('.js-toc-der-public').hidden = false;
        $('.js-der-private').innerText = der_private;
        $('.js-toc-der-private').hidden = false;
        $('.js-jwk').innerText = JSON.stringify(results, null, 2);
        $('.js-loading').hidden = true;
        $('.js-jwk').hidden = false;
        $$('input').map(function ($el) { $el.disabled = false; });
        $$('button').map(function ($el) { $el.disabled = false; });
        $('.js-toc-jwk').hidden = false;
      });
    });

    $('form.js-acme-account').addEventListener('submit', function (ev) {
      ev.preventDefault();
      ev.stopPropagation();
      $('.js-loading').hidden = false;
      ACME.accounts.create
    });

    $('.js-generate').hidden = false;
    $('.js-create-account').hidden = false;
  }

  window.addEventListener('load', run);
}());