Fixes #266 and #233: show human readable timestamps when hovering over

selected claims that contain dates.

Author: sebadoom

js/app.js

@@ -319,17 +319,47 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\
     lint: true
   });
 
-  var payloadEditor = codeMirror(document.getElementsByClassName('js-payload')[0], {
+  var payloadEditorDom = document.getElementsByClassName('js-payload')[0];
+  var payloadEditor = codeMirror(payloadEditorDom, {
     mode:           'application/json',
     lineWrapping:   true,
     extraKeys: { 'Tab':  tabHack},
     lint: true
   });
 
+  $(payloadEditorDom).on('mousemove', tooltipHandler)
+
   var algorithmRadios = $('input[name="algorithm"]'),
     lastRestoredToken;
   var tokenRadios = $('input[name="token-type"]');
 
+  var payloadTooltip = $('#js-payload-tooltip');
+  
+  function tooltipHandler(event) {
+    var result = payloadEditor.coordsChar({
+      left: event.pageX,
+      top: event.pageY
+    }, 'page');
+
+    var line = payloadEditor.getLine(result.line);
+    
+    var timeClaims = ['exp', 'nbf', 'iat', 'auth_time', 'updated_at'];
+
+    var matches = /"(.*)":\s*"?(\d*)"?/.exec(line);
+    if(matches && timeClaims.indexOf(matches[1]) !== -1) {
+      var dateStr = (new Date(parseInt(matches[2]))).toString();
+      console.log(dateStr);
+      payloadTooltip.text(dateStr);
+      payloadTooltip.css({
+        left: event.pageX + 'px',
+        top: event.pageY + 'px',
+      });
+      payloadTooltip.show();
+    } else {
+      payloadTooltip.hide();
+    }
+  }
+
   function setJSONEditorContent(jsonEditor, decodedJSON, selector) {
     jsonEditor.off('change', refreshTokenEditor);
 

stylus/codemirror.styl

@@ -34,6 +34,15 @@
   .text-line a, .CodeMirror *
     color #D63AFF
 
+#js-payload-tooltip
+  position absolute
+  background-color #00b9f1
+  display none
+  color white
+  z-index 9999
+  padding 0 4pt
+  margin-left 4pt
+
 .jwt-playground .output .jwt-signature
   .text-line a, pre
     color #00B9F1

views/index.jade

@@ -126,6 +126,7 @@ block content
                   p.text-line PAYLOAD:
                     span DATA
                   .js-payload
+                    #js-payload-tooltip
 
                 .jwt-explained.jwt-signature
                   p.text-line VERIFY SIGNATURE