diff --git a/js/app.js b/js/app.js index 0e9a4320..b881bf51 100644 --- a/js/app.js +++ b/js/app.js @@ -330,12 +330,11 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\ var algorithmRadios = $('input[name="algorithm"]'), lastRestoredToken; + var tokenRadios = $('input[name="token-type"]'); function setJSONEditorContent(jsonEditor, decodedJSON, selector) { jsonEditor.off('change', refreshTokenEditor); - - if (decodedJSON.result !== null && decodedJSON.result !== undefined) { jsonEditor.setValue(decodedJSON.result); } else { @@ -385,7 +384,6 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\ if (window.matchMedia('(min-width: 768px)').matches) { autoHeightInput(); } - } function selectDetectedAlgorithm(alg){ @@ -393,15 +391,11 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\ $algRadio.prop('checked', true); fireEvent($algRadio.get(0)); - - } function saveToStorage(jwt) { // Save last valid jwt value for refresh safeLocalStorageSetItem("jwtValue", jwt); - - } function loadFromStorage(cb) { @@ -452,8 +446,6 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\ } tokenEditor.on('change', tokenEditorOnChangeListener); fireEvent(secretElement); - - } function getFirstElementByClassName(selector) { @@ -502,8 +494,6 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\ isBase64 ); - - var error = result.error; result = result.result; if (!error && result) { @@ -515,8 +505,6 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\ $(signatureElement).addClass('invalid-token'); signatureElement.innerHTML = ' invalid signature'; } - - } function getKey(algorithm, action) { @@ -529,8 +517,6 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\ } else { return action === 'sign' ? privateKeyElement.val() : publicKeyElement.val(); } - - } function getAlgorithm() { @@ -547,15 +533,13 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\ .filter('.' + algorithm) .show(); - if(getTrimmedValue(tokenEditor) === DEFAULT_HS_TOKEN && + if(getTokenType() === 'id_token' && getTrimmedValue(tokenEditor) === DEFAULT_HS_TOKEN && algorithm === 'RS256'){ setDefaultsForRSA(); - }else if(getTrimmedValue(tokenEditor) === DEFAULT_RS_TOKEN && + }else if(getTokenType() === 'id_token' && getTrimmedValue(tokenEditor) === DEFAULT_RS_TOKEN && algorithm === 'HS256'){ setDefaultsForHMAC(); } - - } function setDefaultsForRSA() { @@ -563,14 +547,29 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\ $('.jwt-signature textarea[name=public-key]').val(DEFAULT_PUBLIC_RSA); $('.jwt-signature textarea[name=private-key]').val(DEFAULT_PRIVATE_RSA); - - } function setDefaultsForHMAC(){ tokenEditor.setValue(DEFAULT_HS_TOKEN); + } + function updateToken() { + var tokenType = getTokenType(); + if (document.location.hash) { + var qs = document.location.hash.slice(1); + var d = {}; + qs = qs.split('&'); + qs.forEach(function (kv) { kv = kv.split('='); d[kv[0]] = kv[1]; }); + if (d[tokenType]) { + tokenEditor.setValue(decodeURIComponent(d[tokenType])); + return; + } + } + } + + function getTokenType() { + return tokenRadios.filter(':checked').val(); } function validateKey() { @@ -588,8 +587,6 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\ } else { $textarea.addClass('error'); } - - } updateAlgorithm(); @@ -597,8 +594,12 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\ algorithmRadios.on('change', function(){ updateAlgorithm(); updateSignature(); + }); - + tokenRadios.on('change', function(){ + updateToken(); + updateAlgorithm(); + updateSignature(); }); $('.jwt-signature textarea[name="public-key"]').on('input', updateSignature); @@ -629,10 +630,21 @@ FaFp+DyAe+b4nDwuJaW2LURbr8AEZga7oQj0uYxcYw==\n\ var d = {}; qs = qs.split('&'); qs.forEach(function (kv) { kv = kv.split('='); d[kv[0]] = kv[1]; }); + + if (d.access_token && d.id_token) { + // show token-type selector + $('.jwt-playground .selections .token-type').show(); + } + 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) { @@ -669,6 +681,14 @@ $(".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)}) // end 07012015 +$(".debugger-jwt .token-type select").change(function() { + $('.debugger-jwt .token-type input[value="'+$(this).val()+'"]').parent().trigger("click"); + $('.debugger-jwt .token-type input[value="'+$(this).val()+'"]').change(); +}); + +$(".debugger-jwt .token-type select").change(function(){var a=$('.debugger-jwt .token-type input[value="'+$(this).val()+'"]');a.prop("checked",!0)}) + + // Fetch stargazers count for each repo from GitHub's API $('.stars').each(function(idx, element){ var $el = $(element); diff --git a/server.js b/server.js index 45d10812..aaddfd4e 100644 --- a/server.js +++ b/server.js @@ -1,17 +1,17 @@ var express = require('express'); var http = require('http'); var enforce = require('express-sslify'); - + var app = express(); -// use HTTPS(true) in case you are behind a load balancer (e.g. Heroku) +// use HTTPS(true) in case you are behind a load balancer (e.g. Heroku) if (process.env.NODE_ENV === 'production') { console.log('redirecting to ssl'); app.use(enforce.HTTPS({ trustProtoHeader: true })) } app.use('/', express.static(__dirname)); - + http.createServer(app).listen(process.env.PORT || 3000, function() { console.log('started'); -}); \ No newline at end of file +}); diff --git a/stylus/app.styl b/stylus/app.styl index 201e0986..2e408ca2 100644 --- a/stylus/app.styl +++ b/stylus/app.styl @@ -402,7 +402,7 @@ body position relative select background white - width 100px + width 112px height 38px font-size 12px padding 0 10px @@ -425,6 +425,10 @@ body right 10px .jwt-playground + .selections + display flex + justify-content center + .algorithm text-align center span @@ -435,6 +439,18 @@ body .jwt-select margin-left 10px + .token-type + display none + text-align center + span + font-weight bold + text-transform uppercase + font-size 12px + vertical-align middle + .jwt-select + margin-left 10px + margin-right 20px + .algorithm-code margin-top 35px .tab-nav diff --git a/views/index.jade b/views/index.jade index 28b5891b..f93205f2 100644 --- a/views/index.jade +++ b/views/index.jade @@ -64,18 +64,30 @@ block content h1 Debugger .jwt-playground + .selections + .token-type + span Token + .hide + label + input(type='radio', name='token-type', value='id_token', checked='') + label + input(type='radio', name='token-type', value='access_token') + .jwt-select + select + option(name='token-type',value='id_token', selected='') id_token + option(name='token-type',value='access_token') access_token - .algorithm - span Algorithm - .hide - label - input(type='radio', name='algorithm', value='HS256', checked='') - label - input(type='radio', name='algorithm', value='RS256') - .jwt-select - select - option(name='algorithm',value='HS256', selected='') HS256 - option(name='algorithm',value='RS256') RS256 + .algorithm + span Algorithm + .hide + label + input(type='radio', name='algorithm', value='HS256', checked='') + label + input(type='radio', name='algorithm', value='RS256') + .jwt-select + select + option(name='algorithm',value='HS256', selected='') HS256 + option(name='algorithm',value='RS256') RS256 .algorithm-code .tab-nav