Fixes #39: implements claim description tooltips.

Author: sebadoom

src/dom-elements.js

@@ -4,8 +4,11 @@ export const decodedTabLink =
   document.querySelector('.tab-link a[href="#decoded-jwt"]');
 export const encodedTabElement = document.getElementById('encoded-jwt');
 export const decodedTabElement = document.getElementById('decoded-jwt');
+
 export const editorElement = document.querySelector('#encoded-jwt .input');
 export const decodedElement = document.querySelector('#decoded-jwt .output');
+export const claimsTooltipElement = 
+  document.getElementById('js-claims-tooltip');
 export const headerElement = document.querySelector('.js-header');
 export const payloadElement = document.querySelector('.js-payload');
 export const payloadTooltipElement = 

src/editor/claims-tooltip.js

@@ -0,0 +1,56 @@
+import { claimsTooltipElement } from '../dom-elements.js';
+import { timeClaims } from './time-tooltip.js';
+import { stringifyIndentSpaces } from './utils.js';
+import strings from '../strings.js';
+
+function hideTooltip() {
+  claimsTooltipElement.style.display = 'none';
+}
+
+function showTooltip(x, y, text) {
+  claimsTooltipElement.firstChild.textContent = text;
+  claimsTooltipElement.style.left = x + 'px';
+  claimsTooltipElement.style.top = y + 'px';
+  claimsTooltipElement.style.display = 'block';
+}
+
+export function claimsTooltipHandler(event) {
+  const editor = event.currentTarget.querySelector('.CodeMirror').CodeMirror;
+  //const editor = event.currentTarget.firstChild.CodeMirror;
+
+  if(!editor) {
+    return;
+  }
+
+  const result = editor.coordsChar({
+    left: event.pageX,
+    top: event.pageY
+  }, 'page');
+
+  const line = editor.getLine(result.line);
+  const matches = /"(.*)":\s*"?(.*)"?/.exec(line);
+
+  if(!matches) {
+    hideTooltip();
+    return;
+  }
+
+  const claim = matches[1];  
+
+  // If this is a time claim and the mouse cursor is on top of the time,
+  // let the time tooltip handle this, do nothing.
+  // TODO: merge both tooltip handlers?
+  const claimEnd = line.indexOf(':');
+  if(result.ch >= claimEnd && timeClaims.includes(claim)) {
+    hideTooltip();
+    return;
+  }
+
+  const claimText = strings.common.claims[claim];
+  if(!claimText) {
+    hideTooltip();
+    return;
+  }
+
+  showTooltip(event.pageX, event.pageY, claimText);
+}

src/editor/index.js

@@ -5,6 +5,7 @@ import {
 } from '../utils.js';
 import { downloadPublicKeyIfPossible } from './public-key-download.js';
 import { timeTooltipHandler } from './time-tooltip.js';
+import { claimsTooltipHandler } from './claims-tooltip.js';
 import { tokenEditor, headerEditor, payloadEditor } from './instances.js';
 import { 
   getTrimmedValue,
@@ -371,6 +372,8 @@ function setupEvents() {
 
   // Human readable timestamp tooltips
   payloadElement.addEventListener('mousemove', timeTooltipHandler);
+  payloadElement.addEventListener('mousemove', claimsTooltipHandler);
+  headerElement.addEventListener('mousemove', claimsTooltipHandler);
 
   setupTabEvents();
 }

src/editor/time-tooltip.js

@@ -1,6 +1,8 @@
 import { payloadEditor } from './instances.js';
 import { payloadTooltipElement } from '../dom-elements.js';
 
+export const timeClaims = ['exp', 'nbf', 'iat', 'auth_time', 'updated_at'];
+
 export function timeTooltipHandler(event) {
   const result = payloadEditor.coordsChar({
     left: event.pageX,
@@ -9,8 +11,6 @@ export function timeTooltipHandler(event) {
 
   const line = payloadEditor.getLine(result.line);
 
-  const timeClaims = ['exp', 'nbf', 'iat', 'auth_time', 'updated_at'];
-
   const matches = /"(.*)":\s*"?(\d*)"?/.exec(line);
   if (matches && timeClaims.indexOf(matches[1]) !== -1) {
     const dateStr = (new Date(parseInt(matches[2], 10) * 1000)).toString();

src/editor/utils.js

@@ -22,8 +22,10 @@ export function fixEditorHeight() {
   }
 }
 
+export const stringifyIndentSpaces = 2;
+
 export function stringify(object) {
-  return JSON.stringify(object, null, 2);
+  return JSON.stringify(object, null, stringifyIndentSpaces);
 }
 
 export function getSelectedAlgorithm() {

src/strings.js

@@ -2,6 +2,18 @@ export default {
   common: {
     shareThisJwt: 'Share JWT',
     jwtIoUrlCopied: 'Copied',
+    claims: {
+      exp: 'Expiration time (seconds since Unix epoch)',
+      nbf: 'Not valid before (seconds since Unix epoch)',
+      iat: 'Issued at (seconds since Unix epoch)',
+      iss: 'Issuer: who created and signed this token',
+      sub: 'Subject: who the token refers to',
+      aud: 'Audience: who or what the token is intended for',
+      jti: 'JWT ID: unique identifier for this token',
+      typ: 'Type of token',
+      azp: 'Authorized party: the party to which this token was issued',
+      alg: 'Signature or encryption algorithm'
+    }
   },
   extension: {
     alreadyInstalled: 'Already installed',

stylus/website/codemirror.styl

@@ -40,7 +40,7 @@
   .text-line a, .CodeMirror *
     color #D63AFF
 
-#js-payload-tooltip
+#js-payload-tooltip, #js-claims-tooltip
   position absolute
   background-color #00b9f1
   display none
@@ -51,4 +51,4 @@
 
 .jwt-playground .output .jwt-signature
   .text-line a, pre
-    color #00B9F1
+    color #00B9F1

views/token-editor-common.pug

@@ -12,6 +12,7 @@
       .input.js-input
     #decoded-jwt.box-content
       .output
+        #js-claims-tooltip placeholder
         .jwt-explained.jwt-header
           p.text-line HEADER:
             span ALGORITHM & TOKEN TYPE