no-acme (#10)

I’ll make the couple of fixed I figure the hard coded value was a good example of what input would be maybe it should be a placeholder instead or empty

.editorconfig

@@ -0,0 +1,11 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+tab_width = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

app.js

@@ -43,6 +43,8 @@
       $('.js-jwk').hidden = true;
       $('.js-toc-der-public').hidden = true;
       $('.js-toc-der-private').hidden = true;
+      $('.js-toc-jwk').hidden = true;
+
       $$('.js-toc-pem').forEach(function ($el) {
         $el.hidden = true;
       });
@@ -50,8 +52,8 @@
       $$('button').map(function ($el) { $el.disabled = true; });
       var opts = {
         kty: $('input[name="kty"]:checked').value
-      , namedCurve: $('input[name="ec-crv"]:checked').value
+        , namedCurve: $('input[name="ec-crv"]:checked').value
-      , modulusLength: $('input[name="rsa-len"]:checked').value
+        , modulusLength: $('input[name="rsa-len"]:checked').value
       };
       var then = Date.now();
       console.log('opts', opts);
@@ -106,12 +108,72 @@
         $$('button').map(function ($el) { $el.disabled = false; });
         $('.js-toc-jwk').hidden = false;
 
-        $('.js-create-account').hidden = false;
-        $('.js-create-csr').hidden = false;
       });
     });
 
+    $('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; });
+
+      try {
+
+
+        var opts = {
+          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);

bundle.sh

@@ -25,7 +25,7 @@ cat > bluecrypt-keypairs.min.js << EOF
 ;
 EOF
 uglifyjs bluecrypt-keypairs.js >> bluecrypt-keypairs.min.js
-gzip bluecrypt-keypairs.min.js
+gzip -f bluecrypt-keypairs.min.js
 
 # Minified Gzipped
 cat > bluecrypt-keypairs.min.js << EOF
@@ -37,5 +37,6 @@ cat > bluecrypt-keypairs.min.js << EOF
 EOF
 uglifyjs bluecrypt-keypairs.js >> bluecrypt-keypairs.min.js
 
+rsync -av ./ root@beta.therootcompany.com:~/beta.therootcompany.com/keypairs/
 rsync -av ./ root@beta.rootprojects.org:~/beta.rootprojects.org/keypairs/
 rsync -av ./ ubuntu@rootprojects.org:/srv/www/rootprojects.org/keypairs/

index.html

@@ -1,11 +1,12 @@
 <html>
-  <head>
+
-    <title>BlueCrypt</title>
+<head>
-    <style>
+  <title>BlueCrypt</title>
-      textarea {
+  <style>
-        width: 42em;
+    textarea {
-        height: 10em;
+      width: 42em;
-      }
+      height: 10em;
+    }
       /* need to word wrap the binary no space der */
       .js-der-public, .js-der-private{
         white-space: pre-wrap;      /* CSS3 */
@@ -17,14 +18,22 @@
     </style>
   </head>
   <body>
-    <h1>BlueCrypt for the Browser</h1>
+    <h1>@bluecrypt/keypairs: Universal&nbsp;keygen&nbsp;&amp;&nbsp;signing&nbsp;for&nbsp;browsers</h1>
-    <p>BlueCrypt is universal crypto for the browser. It's lightweight, fast, and based on native webcrypto.
+    <p>Keypairs.js is <strong>easy-to-use browser crypto in kilobytes, not megabytes.</strong></p>
-    This means it's easy-to-use crypto in kilobytes, not megabytes.</p>
 
-    <h2>Keypair Generation</h2>
+    <p>It's a modern alternative to larger, legacy libraries like PKI.js and rsasign,
-    <form class="js-keygen">
+    with more universal support for keygen, signing, and verification (including PKI, X509, JOSE, JWS, and JWT)
-      <p>Key Type:</p>
+    at a fraction of the cost.</p>
-      <div>
+
+    <p>This is intended to be explored with your JavaScript console open.</p>
+    <pre><code>&lt;script src="<a href="https://rootprojects.org/keypairs/bluecrypt-keypairs.js">https://rootprojects.org/keypairs/bluecrypt-keypairs.js</a>"&gt;&lt;/script&gt;</code></pre>
+    <pre><code>&lt;script src="<a href="https://rootprojects.org/keypairs/bluecrypt-keypairs.min.js">https://rootprojects.org/keypairs/bluecrypt-keypairs.min.js</a>"&gt;&lt;/script&gt;</code></pre>
+    <a href="https://git.rootprojects.org/root/bluecrypt-keypairs.js">Documentation</a>
+
+  <h2>Keypair Generation</h2>
+  <form class="js-keygen">
+    <p>Key Type:</p>
+    <div>
         <input type="radio" id="-ktyEC"
          name="kty" value="EC" checked>
         <label for="-ktyEC">ECDSA</label>
@@ -50,43 +59,74 @@
         <label for="-modlen5"><input type="radio" id="-modlen5"
          name="rsa-len" value="4096">4096</label>
       </div>
-      <button class="js-generate" hidden>Generate</button>
+    <button class="js-generate" hidden>Generate</button>
-    </form>
+  </form>
 
-    <div class="js-loading" hidden>Loading</div>
+  <div class="js-loading" hidden>Loading</div>
 
-    <details class="js-toc-jwk" hidden>
+  <details class="js-toc-jwk" hidden>
-      <summary>JWK Keypair</summary>
+    <summary>JWK Keypair</summary>
-      <pre><code class="js-jwk">&nbsp;</code></pre>
+    <pre><code class="js-jwk">&nbsp;</code></pre>
-    </details>
+  </details>
-    <details class="js-toc-der-private" hidden>
+  <details class="js-toc-der-private" hidden>
-      <summary>DER Private Binary</summary>
+    <summary>DER Private Binary</summary>
-      <pre><code class="js-der-private">&nbsp;</code></pre>
+    <pre><code class="js-der-private">&nbsp;</code></pre>
-    </details>
+  </details>
-    <details class="js-toc-der-public" hidden>
+  <details class="js-toc-der-public" hidden>
-      <summary>DER Public Binary</summary>
+    <summary>DER Public Binary</summary>
-      <pre><code class="js-der-public">&nbsp;</code></pre>
+    <pre><code class="js-der-public">&nbsp;</code></pre>
-    </details>
+  </details>
-    <details class="js-toc-pem js-toc-pem-pkcs1-private" hidden>
+  <details class="js-toc-pem js-toc-pem-pkcs1-private" hidden>
-      <summary>PEM Private (base64-encoded PKCS1 DER)</summary>
+    <summary>PEM Private (base64-encoded PKCS1 DER)</summary>
-      <pre><code  class="js-input-pem-pkcs1-private" ></code></pre>
+    <pre><code  class="js-input-pem-pkcs1-private" ></code></pre>
-    </details>
+  </details>
-    <details class="js-toc-pem js-toc-pem-sec1-private" hidden>
+  <details class="js-toc-pem js-toc-pem-sec1-private" hidden>
-      <summary>PEM Private (base64-encoded SEC1 DER)</summary>
+    <summary>PEM Private (base64-encoded SEC1 DER)</summary>
-      <pre><code  class="js-input-pem-sec1-private" ></code></pre>
+    <pre><code  class="js-input-pem-sec1-private" ></code></pre>
-    </details>
+  </details>
-    <details class="js-toc-pem js-toc-pem-pkcs8-private" hidden>
+  <details class="js-toc-pem js-toc-pem-pkcs8-private" hidden>
-      <summary>PEM Private (base64-encoded PKCS8 DER)</summary>
+    <summary>PEM Private (base64-encoded PKCS8 DER)</summary>
-      <pre><code  class="js-input-pem-pkcs8-private" ></code></pre>
+    <pre><code  class="js-input-pem-pkcs8-private" ></code></pre>
-    </details>
+  </details>
-    <details class="js-toc-pem js-toc-pem-pkcs1-public" hidden>
+  <details class="js-toc-pem js-toc-pem-pkcs1-public" hidden>
-      <summary>PEM Public (base64-encoded PKCS1 DER)</summary>
+    <summary>PEM Public (base64-encoded PKCS1 DER)</summary>
-      <pre><code  class="js-input-pem-pkcs1-public" ></code></pre>
+    <pre><code  class="js-input-pem-pkcs1-public" ></code></pre>
-    </details>
+  </details>
-    <details class="js-toc-pem js-toc-pem-spki-public" hidden>
+  <details class="js-toc-pem js-toc-pem-spki-public" hidden>
-      <summary>PEM Public (base64-encoded SPKI/PKIX DER)</summary>
+    <summary>PEM Public (base64-encoded SPKI/PKIX DER)</summary>
-      <pre><code  class="js-input-pem-spki-public" ></code></pre>
+    <pre><code  class="js-input-pem-spki-public" ></code></pre>
-    </details>
+  </details>
+
+  <h2>Signing</h2>
+  <div class="errors" id="sign-error"></div>
+  <form class="js-keysign">
+    <div>
+      <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="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" hidden>
+    <summary>JWS </summary>
+    <pre><code class="js-jws"></code></pre>
+  </details>
+  <details class="js-toc-jwt" hidden>
+    <summary>JWT </summary>
+    <pre><code class="js-jwt"></code></pre>
+  </details>
+
+    <br>
+    <p>Bluecrypt&trade; is a collection of lightweight, zero-dependency, libraries written in VanillaJS.
+    They are fast, tiny, and secure, using the native features of modern browsers where possible.</p>
+    <br>
+    <footer>View (git) source
+      <a href="https://git.rootprojects.org/root/bluecrypt-keypairs.js">@bluecrypt/keypairs</a></footer>
 
     <script src="./lib/bluecrypt-encoding.js"></script>
     <script src="./lib/asn1-packer.js"></script>