Merge pull request #29 from DuendeSoftware/wca/jwt-decoder/fixes

JWT Decoder fixes

Author: wcabus

src/Pages/Home/JwtDecoder/JwtDecoder.cshtml

@@ -335,7 +335,7 @@
             let debounceTimeout;
             jwtInput.on('input', function() {
                 clearTimeout(debounceTimeout);
-                debounceTimeout = setTimeout(async () => await parseJwt.call(this), 300); // 300ms debounce
+                debounceTimeout = setTimeout(async () => await parseJwt.call(this), 100); // 100ms debounce
             });
 
             @if (Model.View?.Token != null)
@@ -373,10 +373,10 @@
                         encodedPayload: payloadInfo.length > 1 ? payloadInfo[1] : '',
                         signature: signature
                     };
-                    
-                    await showDecodedJwt(decodedJwt.header, decodedJwt.payload, decodedJwt.encodedHeader, decodedJwt.encodedPayload, signature);
+
                     colorJwtInput($(this), parts, decodedJwt.encodedHeader, decodedJwt.encodedPayload, decodedJwt.signature);
-                    
+                    await showDecodedJwt(decodedJwt.header, decodedJwt.payload, decodedJwt.encodedHeader, decodedJwt.encodedPayload, signature);
+                                        
                     if (parts.length !== 3) {
                         showError('Invalid JWT format. A JWT should have three parts separated by dots.');
                     }
@@ -456,10 +456,16 @@
                     }
                 }
             }
+            else if (originalParts.length > 1) {
+                html += `<span class="skipped">${originalParts[0]}</span>`;
+            }
+
+            html += '<span class="jwt-divider">.</span>';
+            
             if (encodedPayload) {
                 const originalPayload = originalParts[1];
                 if (originalPayload === encodedPayload) {
-                    html += '<span class="jwt-divider">.</span>' + `<span class="text-success">${encodedPayload}</span>`;
+                    html += `<span class="text-success">${encodedPayload}</span>`;
                 }
                 else {
                     // Show the additional characters before and after the "encodedPayload" part that are found in originalPayload
@@ -468,14 +474,20 @@
                     if (start > 0) {
                         html += `<span class="skipped">${originalPayload.substring(0, start)}</span>`;
                     }
-                    html += '<span class="jwt-divider">.</span>' + `<span class="text-success">${encodedPayload}</span>`;
+                    html += `<span class="text-success">${encodedPayload}</span>`;
                     if (end < originalPayload.length) {
                         html += `<span class="skipped">${originalPayload.substring(end)}</span>`;
                     }
                 }
             }
+            else if (originalParts.length > 2) {
+                html += `<span class="skipped">${originalParts[1]}</span>`;
+            }
+
+            html += '<span class="jwt-divider">.</span>';
+            
             if (signature) {
-                html += '<span class="jwt-divider">.</span>' + `<span class="text-warning">${signature}</span>`;
+                html += `<span class="text-warning">${signature}</span>`;
             }
             target.html(html);
         }