Partial implementation of the share JWT button.

Author: sebadoom

js/app.js

@@ -459,7 +459,9 @@ $(".panel-default .panel-heading").click(function() {
     var decodedHeader = window.decode(parts[0]);
 
     try {
+      headerEditor.off('change', refreshTokenEditor);
       selectDetectedAlgorithm(JSON.parse(decodedHeader.result).alg);
+      headerEditor.on('change', refreshTokenEditor);
     } catch (e){
       console.error('Invalid header decoded');
     }
@@ -776,16 +778,14 @@ $(".panel-default .panel-heading").click(function() {
 
   var qs;
   var d;
-  if (document.location.search) {
-    qs = document.location.search.slice(1);
-    d = {};
-    qs = qs.split('&');
-    qs.forEach(function (kv) { kv = kv.split('='); d[kv[0]] = kv[1]; });
-    if (d.value) {
-      tokenEditor.setValue(decodeURIComponent(d.value));
-      return;
-    }
-  }
+
+  loadFromStorage(function (jwt) {
+    lastRestoredToken = jwt || defaultTokens.hs256.token;
+
+    tokenEditor.setValue(
+      lastRestoredToken
+    );
+  });
 
   if (document.location.hash) {
     qs = document.location.hash.slice(1);
@@ -800,25 +800,107 @@ $(".panel-default .panel-heading").click(function() {
 
     if (d.id_token) {
       tokenEditor.setValue(decodeURIComponent(d.id_token));
-      return;
     }
 
     if (d.access_token) {
       tokenEditor.setValue(decodeURIComponent(d.access_token));
-      return;
     }
   }
 
-  loadFromStorage(function (jwt) {
-    lastRestoredToken = jwt || defaultTokens.hs256.token;
+  if (document.location.search) {
+    qs = document.location.search.slice(1);
+    d = {};
+    qs = qs.split('&');
+    qs.forEach(function (kv) { 
+      kv = kv.split('=');
+      d[kv[0]] = kv[1];
+    });    
+    if(d.publicKey) {
+      var publicKey = $('.jwt-signature textarea[name="public-key"]');
+      publicKey.val(decodeURIComponent(d.publicKey));
+      validateKey.apply(publicKey);
+    }
+    if (d.value) {
+      tokenEditor.setValue(decodeURIComponent(d.value));
+    }
+    if(d.token) {
+      tokenEditor.setValue(decodeURIComponent(d.token));
+    }    
 
-    tokenEditor.setValue(
-      lastRestoredToken
-    );
-  });
+
+  }
+
+  function copyTokenLink() {
+    var algorithm = $('input[name="algorithm"]').filter(':checked').val();
+    
+    var url = 'https://jwt.io/#debugger-io?';
+    url += 'token=' + encodeURIComponent(getTrimmedValue(tokenEditor));
+    if(algorithm.indexOf('HS') === -1) {
+      var publicKey = $('.jwt-signature textarea[name="public-key"]');
+      url += '&publicKey=' + encodeURIComponent(publicKey.val());
+    }
+
+    copyTextToClipboard(url);
+  }
+
+  $('.validation-status.js-signature').on('click', copyTokenLink);
 
 }());
 
+// https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript
+function copyTextToClipboard(text) {
+  var textArea = document.createElement("textarea");
+
+  //
+  // *** This styling is an extra step which is likely not required. ***
+  //
+  // Why is it here? To ensure:
+  // 1. the element is able to have focus and selection.
+  // 2. if element was to flash render it has minimal visual impact.
+  // 3. less flakyness with selection and copying which **might** occur if
+  //    the textarea element is not visible.
+  //
+  // The likelihood is the element won't even render, not even a flash,
+  // so some of these are just precautions. However in IE the element
+  // is visible whilst the popup box asking the user for permission for
+  // the web page to copy to the clipboard.
+  //
+
+  // Place in top-left corner of screen regardless of scroll position.
+  textArea.style.position = 'fixed';
+  textArea.style.top = 0;
+  textArea.style.left = 0;
+
+  // Ensure it has a small width and height. Setting to 1px / 1em
+  // doesn't work as this gives a negative w/h on some browsers.
+  textArea.style.width = '2em';
+  textArea.style.height = '2em';
+
+  // We don't need padding, reducing the size if it does flash render.
+  textArea.style.padding = 0;
+
+  // Clean up any borders.
+  textArea.style.border = 'none';
+  textArea.style.outline = 'none';
+  textArea.style.boxShadow = 'none';
+
+  // Avoid flash of white box if rendered for any reason.
+  textArea.style.background = 'transparent';
+
+  textArea.value = text;
+
+  document.body.appendChild(textArea);
+
+  textArea.select();
+
+  try {
+    document.execCommand('copy');
+  } catch (err) {
+    console.error(err);
+  }
+
+  document.body.removeChild(textArea);
+}
 
 //TIMESTAMP
 (function() {
@@ -840,7 +922,10 @@ $(".debugger-jwt .algorithm select").change(function() {
 });
 
 
-$(".debugger-jwt .algorithm select").change(function(){var a=$('.debugger-jwt .algorithm input[value="'+$(this).val()+'"]');a.prop("checked",!0);});
+$(".debugger-jwt .algorithm select").change(function() {
+  var a = $('.debugger-jwt .algorithm input[value="'+$(this).val()+'"]');
+  a.prop("checked",!0);
+});
 // end 07012015
 
 $(".debugger-jwt .token-type select").change(function() {