Adding checkbox to toggle base64 encoding secret.

Author: pose

dist/css/app.css

@@ -24,13 +24,12 @@ <h1>JSON Web Tokens</h1>
   base64UrlEncode(header) .
   base64UrlEncode(payload),
   <input type="text" name="secret" value="secret" />
-)</pre></div>
+) <span class="is-base64-encoded-label"> <input type="checkbox" name="is-base64-encoded" />secret base64 encoded?</span></pre></div>
       </div>
       <div class="validation-status js-signature">
       </div>
     </div>
 
-
     <!-- build:js dist/js/app.js -->
     <script src="vendor/zepto/zepto.js"></script>
     <script src="vendor/jsonlint/lib/jsonlint.js"></script>

dist/js/app.js

@@ -19,13 +19,12 @@ <h1>JSON Web Tokens</h1>
   base64UrlEncode(header) .
   base64UrlEncode(payload),
   <input type="text" name="secret" value="secret">
-)</pre></div>
+) <span class="is-base64-encoded-label"> <input type="checkbox" name="is-base64-encoded">secret base64 encoded?</span></pre></div>
       </div>
       <div class="validation-status js-signature">
       </div>
     </div>
 
-
     <script src="dist/js/app.js"></script>
   </body>
 </html>

html/index.html

@@ -91,7 +91,9 @@
   function refreshTokenEditor(instance) {
     tokenEditor.off('change', tokenEditorOnChangeListener);
     var secretElement = document.getElementsByName('secret')[0];
-    var signResult = window.sign(headerEditor.getValue(), payloadEditor.getValue(), secretElement.value);
+    var isBase64EncodedElement = document.getElementsByName('is-base64-encoded')[0];
+    var signResult = window.sign(headerEditor.getValue(), payloadEditor.getValue(), secretElement.value,
+                                 isBase64EncodedElement.checked);
 
     if (signResult.error) {
       tokenEditor.setValue('');
@@ -137,13 +139,16 @@
   headerEditor.on('change',   refreshTokenEditor);
 
   var secretElement = document.getElementsByName('secret')[0];
+  var isBase64EncodedElement = document.getElementsByName('is-base64-encoded')[0];
+
   function updateSignature () {
     var signatureElement = getFirstElementByClassName('js-signature');
+
     if (!signatureElement) {
       return;
     }
     var value = getTrimmedValue(tokenEditor);
-    var result = window.verify(value, secretElement.value).result;
+    var result = window.verify(value, secretElement.value, isBase64EncodedElement.checked).result;
     if (result) {
       $(signatureElement).removeClass('invalid-token');
       $(signatureElement).addClass('valid-token');
@@ -156,6 +161,7 @@
   }
   secretElement.addEventListener('change', updateSignature, false);
   secretElement.addEventListener('keyup', updateSignature, false);
+  isBase64EncodedElement.addEventListener('change', updateSignature, false);
 
   tokenEditor.setValue('eyJhbGciOiJIUzI1NiIsImN0eSI6IkpXVCJ9.eyJhZ2UiOjIxfQ.8nqb61Mdqdama9pZQz07HiIySY6FZC9UjHMKHg6zhjw');
 

index.html

@@ -37,7 +37,7 @@ function asciiToHex(s) {
 
 }
 
-window.sign = function (header, payload, secret) {
+window.sign = function (header, payload, secret, isSecretBase64Encoded) {
   var value = '', error = null, headerAsJSON, payloadAsJSON;
 
   try {
@@ -59,6 +59,10 @@ window.sign = function (header, payload, secret) {
     return error;
   }
 
+  if (isSecretBase64Encoded) {
+    secret = url_base64_decode(secret);
+  }
+
   try {
     value = KJUR.jws.JWS.sign(null, headerAsJSON, payloadAsJSON, asciiToHex(secret));
   } catch (e) {
@@ -68,8 +72,13 @@ window.sign = function (header, payload, secret) {
   return {result: value, error: error};
 };
 
-window.verify = function (value, secret) {
+window.verify = function (value, secret, isSecretBase64Encoded) {
   var result = '', error = null;
+
+  if (isSecretBase64Encoded) {
+    secret = url_base64_decode(secret);
+  }
+
   try {
     result = KJUR.jws.JWS.verify(value, asciiToHex(secret));
   } catch (e) {

js/app.js

@@ -112,9 +112,9 @@ h1 {
       color: @jwtSignatureColor;
       font-family: monospace;
 
-      pre {
-        padding: 0;
-        margin: 0;
+      pre { padding: 0; margin: 0; }
+      span.is-base64-encoded-label {
+        font-size: x-small;
       }
     }
   }