JWT sharing now working.

Author: sebadoom

src/editor/index.js

@@ -1,9 +1,13 @@
-import { copyTextToClipboard, deferToNextLoop, safeLocalStorageSetItem } from '../utils.js';
+import { 
+  copyTextToClipboard,
+  deferToNextLoop,
+  safeLocalStorageSetItem,
+  copyTokenLink 
+} from '../utils.js';
 import { downloadPublicKeyIfPossible } from './public-key-download.js';
 import { tooltipHandler } from './tooltip.js';
 import { tokenEditor, headerEditor, payloadEditor } from './instances.js';
 import { 
-  copyTokenLink,
   getTrimmedValue,
   stringify,
   fixEditorHeight 
@@ -38,6 +42,14 @@ import {
 // passed to the event manager.
 const eventManager = new EventManager();
 
+function isSharedSecretAlgorithm(algorithm) {
+  return algorithm && algorithm.indexOf('HS') === 0;
+}
+
+function isPublicKeyAlgorithm(algorithm) {
+  return algorithm && algorithm.indexOf('HS') === -1;
+}
+
 function markAsInvalid() {
   signatureStatusElement.classList.remove('valid-token');
   signatureStatusElement.classList.add('invalid-token');
@@ -115,7 +127,7 @@ export function useDefaultToken(algorithm) {
     headerEditor.setValue(stringify(decoded.header));
     payloadEditor.setValue(stringify(decoded.payload));
 
-    if(algorithm.indexOf('HS') === 0) {
+    if(isSharedSecretAlgorithm(algorithm)) {
       secretInput.value = defaults.secret;
     } else {
       publicKeyTextArea.value = defaults.publicKey;
@@ -233,7 +245,7 @@ function encodeToken() {
 
     try {
       const encoded = sign(header, payload, 
-        header.alg.indexOf('HS') === 0 ?
+        isSharedSecretAlgorithm(header.alg) ?
           secretInput.value :
           privateKeyTextArea.value,
           secretBase64Checkbox.checked);
@@ -260,7 +272,7 @@ function decodeToken() {
       const decoded = decode(jwt);
 
       selectAlgorithm(decoded.header.alg);
-      if(decoded.header.alg && decoded.header.alg.indexOf('HS') === -1) {
+      if(isPublicKeyAlgorithm(decoded.header.alg)) {
         downloadPublicKeyIfPossible(decoded).then(publicKey => {
           eventManager.withDisabledEvents(() => {
             publicKeyTextArea.value = publicKey;
@@ -294,7 +306,7 @@ function verifyToken() {
   }
 
   const publicKeyOrSecret = 
-    decoded.header.alg.indexOf('HS') === 0 ?
+    isSharedSecretAlgorithm(decoded.header.alg) ?
       secretInput.value : 
       publicKeyTextArea.value;
 
@@ -327,6 +339,17 @@ function setupTabEvents() {
   });
 }
 
+function copyTokenHandler(event) {
+  event.preventDefault();
+
+  const token = getTrimmedValue(tokenEditor);
+  const publicKey = isPublicKeyAlgorithm(getSelectedAlgorithm()) ? 
+    publicKeyTextArea.value :
+    null;
+  
+  copyTokenLink(token, publicKey);
+}
+
 function setupEvents() {
   // The event manager lets us enable/disable events as needed without
   // manually tracking them. Events that need to be disabled should be
@@ -356,7 +379,7 @@ function setupEvents() {
   // Human readable timestamp tooltips
   payloadElement.addEventListener('mousemove', tooltipHandler);
   // Temporary (share button not ready yet)
-  signatureStatusElement.addEventListener('click', copyTokenLink);
+  signatureStatusElement.addEventListener('click', copyTokenHandler);
 
   setupTabEvents();
 }
@@ -365,6 +388,15 @@ export function setTokenEditorValue(value) {
   tokenEditor.setValue(value);
 }
 
+export function getTokenEditorValue() {
+  return {
+    token: getTrimmedValue(tokenEditor),
+    publicKey: isPublicKeyAlgorithm(getSelectedAlgorithm()) ? 
+      publicKeyTextArea.value :
+      undefined
+  };
+}
+
 export function setupTokenEditor() {
   setupEvents();
   selectAlgorithm('HS256');

src/editor/utils.js

@@ -16,18 +16,6 @@ export function getTrimmedValue(instance) {
   return value.replace(/\s/g, '');
 }
 
-export function copyTokenLink() {
-  const algorithm = algorithmSelect.querySelector(':selected').value;
-
-  let url = 'https://jwt.io/#debugger-io?'
-    + `token=${encodeURIComponent(getTrimmedValue(tokenEditor))}`;
-  if (algorithm.indexOf('HS') === -1) {
-    url += `&publicKey=${encodeURIComponent(publicKeyTextArea.value)}`;
-  }
-
-  copyTextToClipboard(url);
-}
-
 export function fixEditorHeight() {
   if(isWideScreen()) {
     editorElement.style.height = `${decodedElement.offsetHeight}px`;

src/extension/dom-elements.js

@@ -1 +1,5 @@
-export * from '../dom-elements.js';
+export * from '../dom-elements.js';
+
+export const shareJwtLink = document.querySelector('.jwt-clipboard-btn');
+export const shareJwtTextElement =
+  document.getElementById('share-this-jwt-text');

src/extension/index.js

@@ -1,4 +1,28 @@
-import { setupTokenEditor } from '../editor';
+import { setupTokenEditor, getTokenEditorValue } from '../editor';
+import { shareJwtLink, shareJwtTextElement } from './dom-elements.js';
+import { copyTokenLink } from '../utils.js';
+import strings from '../strings.js';
+
+function setupShareJwtButton() {
+  shareJwtLink.addEventListener('click', event => {
+    event.preventDefault();
+
+    const value = getTokenEditorValue();
+    if(value.token) {
+      // If the selected algorithm does not use public keys, publicKey will be
+      // undefined.
+      copyTokenLink(value.token, value.publicKey);
+    }
+
+    shareJwtTextElement.firstChild.textContent = 
+      strings.extension.jwtIoUrlCopied;
+    setTimeout(() => {
+      shareJwtTextElement.firstChild.textContent = 
+        strings.extension.shareThisJwt;        
+    }, 2000);
+  });
+}
 
 // Initialization
 setupTokenEditor();
+setupShareJwtButton();

src/strings.js

@@ -1,7 +1,9 @@
 export default {
   extension: {
     alreadyInstalled: 'Already installed',
-    addToChrome: 'Add to Chrome'
+    addToChrome: 'Add to Chrome',
+    shareThisJwt: 'Share this JWT',
+    jwtIoUrlCopied: 'JWT.io URL copied'
   },
   editor: {
     signatureVerified: 'signature verified',

src/utils.js

@@ -160,6 +160,15 @@ export function copyTextToClipboard(text) {
   document.body.removeChild(textArea);
 }
 
+export function copyTokenLink(token, publicKeyOptional) {
+  let url = `https://jwt.io/#debugger-io?token=${encodeURIComponent(token)}`;
+  if(publicKeyOptional) {
+    url += `&publicKey=${encodeURIComponent(publicKeyOptional)}`;
+  }
+
+  copyTextToClipboard(url);
+}
+
 // https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
 export function getParameterByName(name, url) {
   if(!url) {