Grunt watch and general bugfixes.

Author: sebadoom

Gruntfile.js

@@ -5,6 +5,7 @@ module.exports = grunt => {
   grunt.loadNpmTasks('grunt-contrib-stylus');
   grunt.loadNpmTasks('grunt-contrib-pug');
   grunt.loadNpmTasks('grunt-webpack');
+  grunt.loadNpmTasks('grunt-contrib-watch');
 
   grunt.initConfig({
     copy: {
@@ -44,9 +45,32 @@ module.exports = grunt => {
     webpack: {
       prod: websiteWebpackConfig,
       dev: websiteWebpackConfig
+    },
+    watch: {
+      js: {
+        files: 'src/**',
+        tasks: 'webpack'
+      },
+      assets: {
+        files: [
+          'img/**',
+          'fonts/**',
+          'assets/**',
+          'opensearch.xml',
+          'node_modules/bootstrap/dist/css/bootstrap.min.css',
+          'node_modules/codemirror/lib/codemirror.css',
+          'node_modules/codemirror/addon/lint/lint.css',
+          'css/budicon.css'
+        ],
+        tasks: 'copy'
+      },
+      views: {
+        files: ['stylus/**', 'views/**'],
+        tasks: ['stylus', 'pug']
+      }
     }
   });
 
   grunt.registerTask('build', ['copy', 'stylus', 'pug', 'webpack']);
-  grunt.registerTask('default', ['build']);
+  grunt.registerTask('default', ['build', 'watch']);
 };

package.json

@@ -19,6 +19,7 @@
     "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-pug": "^1.0.0",
     "grunt-contrib-stylus": "^1.2.0",
+    "grunt-contrib-watch": "^1.0.0",
     "grunt-webpack": "^3.0.2",
     "highlight.js": "^9.12.0",
     "isotope-layout": "^3.0.5",

src/jwt.js

@@ -31,29 +31,39 @@ export function verify(jwt, secretOrPublicKeyString, base64Secret = false) {
     return false;
   }
 
-  if(decoded.header.alg.indexOf('HS') === 0) {
-    return jws.JWS.verify(jwt, 
-      base64Secret ? 
-        b64utohex(secretOrPublicKeyString) : 
-        utf8tohex(secretOrPublicKeyString));
-  } else {
-    return jws.JWS.verify(jwt, secretOrPublicKeyString);
+  try {
+    if(decoded.header.alg.indexOf('HS') === 0) {
+      return jws.JWS.verify(jwt, 
+        base64Secret ? 
+          b64utohex(secretOrPublicKeyString) : 
+          utf8tohex(secretOrPublicKeyString));
+    } else {
+      return jws.JWS.verify(jwt, secretOrPublicKeyString);
+    }
+  } catch(e) {
+    console.error('Could not verify token, ' +
+                  'probably due to bad data in it or the keys: ', e);
+    return false;
   }
 }
 
 export function decode(jwt) {
   const split = jwt.split('.');
 
-  const result = {};
+  const result = {
+    errors: false
+  };
   try {
     result.header = JSON.parse(b64utoutf8(split[0]));
   } catch(e) {
-    result.header = '';
+    result.header = {};
+    result.errors = true;
   }
   try {
     result.payload = JSON.parse(b64utoutf8(split[1]));
   } catch(e) {
-    result.payload = '';
+    result.payload = {};
+    result.errors = true;
   }
 
   return result;

src/utils.js

@@ -100,3 +100,7 @@ export function isValidKey(key) {
     key: key
   };
 }
+
+export function deferToNextLoop(func) {
+  setTimeout(func, 1);
+}

src/website/editor/index.js

@@ -1,4 +1,5 @@
 import { copyTextToClipboard } from '../utils.js';
+import { deferToNextLoop } from '../../utils.js';
 import { downloadPublicKeyIfPossible } from '../../public-key-download.js';
 import { tooltipHandler } from './tooltip.js';
 import { tokenEditor, headerEditor, payloadEditor } from './instances.js';
@@ -73,7 +74,7 @@ function displaySecretOrKeys(algorithm) {
     keyEditorContainer.style.display = '';
   }
 
-  fixEditorHeight();
+  deferToNextLoop(fixEditorHeight);
 }
 
 function selectAlgorithm(algorithm) {
@@ -175,6 +176,8 @@ function markAsInvalidWithElement(element, clearTokenEditor = true) {
 }
 
 function encodeToken() {
+  deferToNextLoop(fixEditorHeight);
+
   eventManager.withDisabledEvents(() => {
     let header;
     try {
@@ -218,23 +221,31 @@ function encodeToken() {
 }
 
 function decodeToken() {
+  deferToNextLoop(fixEditorHeight);
+
   eventManager.withDisabledEvents(() => {
     try {
       const jwt = getTrimmedValue(tokenEditor);
       const decoded = decode(jwt);
 
       selectAlgorithm(decoded.header.alg);
-      downloadPublicKeyIfPossible(decoded).then(publicKey => {
-        eventManager.withDisabledEvents(() => {
-          publicKeyTextArea.value = publicKey;
-          verifyToken();
+      if(decoded.header.alg && decoded.header.alg.indexOf('HS') === -1) {
+        downloadPublicKeyIfPossible(decoded).then(publicKey => {
+          eventManager.withDisabledEvents(() => {
+            publicKeyTextArea.value = publicKey;
+            verifyToken();
+          });
         });
-      });
+      }
 
       headerEditor.setValue(stringify(decoded.header));
       payloadEditor.setValue(stringify(decoded.payload));
 
-      verifyToken();
+      if(decoded.errors) {
+        markAsInvalidWithElement(editorElement, false);
+      } else {
+        verifyToken();
+      }
     } catch(e) {
       console.error('Failed to decode token: ', e);
     }  

src/website/editor/instances.js

@@ -16,7 +16,8 @@ const jsonEditorOptions = {
       instance.replaceSelection('   ', 'end');
     }
   },
-  lint: true
+  lint: true,
+  scrollbarStyle: 'null'
 };
 
 const tokenEditorOptions = Object.assign({}, jsonEditorOptions, {

stylus/app.styl

@@ -518,6 +518,9 @@ body
       +breakpoint("tablet")
         grid(2, 30px, '.box-content')
 
+      .error .CodeMirror
+        background-color #ffc0cb
+
       .box-content
         height 0
         overflow hidden
@@ -576,9 +579,7 @@ body
           textarea
             width 100%
             max-width 266px
-            resize none
-            &.error
-              background-color #ffc0cb
+            resize none            
 
   .validation-status
     text-transform capitalize