Skip to content

Commit c95f5c8

Browse files
wcabuswcabus
authored
Merge pull request #26 from DuendeSoftware/wca/jwt-decoder-syntax-highlighting
JWT Decoder - JSON Syntax highlight, color scheme and presenter mode improvements
2 parents 386c0c1 + 09ae3cc commit c95f5c8

File tree

4 files changed

+95
-33
lines changed

4 files changed

+95
-33
lines changed

‎src/Pages/Home/JwtDecoder/JwtDecoder.cshtml

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,19 @@
33

44
<div class="jwt-decoder-page">
55
<h2 id="jwt-decoder" style="scroll-margin-top: 3em;">JSON Web Token (JWT) Decoder</h2>
6-
<p class="lead">
7-
Using this tool, you can decode and validate JSON Web Tokens (JWTs) issued by IdentityServer or another token issuer.
8-
</p>
9-
<p>
10-
A JSON Web Token (JWT) is a compact, URL-safe means of representing claims to be transferred between two parties.
11-
It is commonly used for authentication and information exchange in web applications.
12-
A JWT consists of three parts: a header, a payload, and a signature, separated by dots.
13-
<br />
14-
<br />
15-
For more details, see <a href="https://datatracker.ietf.org/doc/html/rfc7519" target="_blank">RFC 7519</a>.
16-
</p>
6+
<div id="intro">
7+
<p class="lead">
8+
Using this tool, you can decode and validate JSON Web Tokens (JWTs) issued by IdentityServer or another token issuer.
9+
</p>
10+
<p>
11+
A JSON Web Token (JWT) is a compact, URL-safe means of representing claims to be transferred between two parties.
12+
It is commonly used for authentication and information exchange in web applications.
13+
A JWT consists of three parts: a header, a payload, and a signature, separated by dots.
14+
<br />
15+
<br />
16+
For more details, see <a href="https://datatracker.ietf.org/doc/html/rfc7519" target="_blank">RFC 7519</a>.
17+
</p>
18+
</div>
1719
<div class="alert alert-warning d-flex align-items-center">
1820
<i class="glyphicon glyphicon-exclamation-sign" style="font-size: 3em" title="Warning"></i>
1921
<div class="mx-3">
@@ -59,11 +61,11 @@
5961
<h3>Decoded JWT</h3>
6062
<div class="jwt-decoded-output">
6163
<h4 class="pt-1">Header</h4>
62-
<div id="jwt-header" class="jwt-decoded jwt-header bg-dark p-2">&nbsp;</div>
64+
<div id="jwt-header" class="jwt-decoded jwt-header bg-dark text-light p-2">&nbsp;</div>
6365
<h4 class="pt-1">Payload</h4>
64-
<div id="jwt-payload" class="jwt-decoded jwt-payload bg-dark p-2">&nbsp;</div>
66+
<div id="jwt-payload" class="jwt-decoded jwt-payload bg-dark text-light p-2">&nbsp;</div>
6567
<h4 class="pt-1">Signature</h4>
66-
<pre id="jwt-signature" class="jwt-decoded jwt-signature bg-dark p-2">&nbsp;</pre>
68+
<pre id="jwt-signature" class="jwt-decoded jwt-signature bg-dark text-light p-2">&nbsp;</pre>
6769
<div class="jwt-signature-validation-result alert alert-success align-items-center d-none">
6870
<i class="glyphicon glyphicon-ok-sign" style="font-size: 3em" title="Valid signature"></i>
6971
<div class="result-message mx-3">This JWT has a valid signature.</div>
@@ -290,11 +292,13 @@
290292
$('.row-jwt').removeClass('align-items-stretch');
291293
$('.col-jwt').removeClass('col-md-6');
292294
$('#jwt-input').parent().removeClass('flex-grow-1');
295+
$('#intro').addClass('d-none');
293296
}
294297
else {
295298
$('.row-jwt').addClass('align-items-stretch');
296299
$('.col-jwt').addClass('col-md-6');
297300
$('#jwt-input').parent().addClass('flex-grow-1');
301+
$('#intro').removeClass('d-none');
298302
}
299303
}
300304
@@ -474,21 +478,33 @@
474478
});
475479
contents.append(`<span class="json-object-end">}${(isLastItem ? '' : ',')}</span>`);
476480
} else if (typeof value === 'string') {
477-
const text = JSON.stringify(value) + (isLastItem ? '' : ',');
481+
const text = JSON.stringify(value);
478482
contents.text(text);
479483
contents.addClass('json-string');
484+
if (!isLastItem) {
485+
contents.append('<span class="json-structure">,</span>');
486+
}
480487
} else if (typeof value === 'number') {
481-
const text = value + (isLastItem ? '' : ',');
488+
const text = value;
482489
contents.text(text);
483490
contents.addClass('json-number');
491+
if (!isLastItem) {
492+
contents.append('<span class="json-structure">,</span>');
493+
}
484494
} else if (typeof value === 'boolean') {
485-
const text = (value ? 'true' : 'false') + (isLastItem ? '' : ',');
495+
const text = value ? 'true' : 'false';
486496
contents.text(text);
487497
contents.addClass('json-boolean');
498+
if (!isLastItem) {
499+
contents.append('<span class="json-structure">,</span>');
500+
}
488501
} else {
489-
const text = String(value) + (isLastItem ? '' : ',');
502+
const text = String(value);
490503
contents.text(text);
491504
contents.addClass('json-unknown');
505+
if (!isLastItem) {
506+
contents.append('<span class="json-structure">,</span>');
507+
}
492508
}
493509
494510
if (options.explainClaims && key && explain) {

‎src/wwwroot/css/site.css

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -113,33 +113,53 @@ a.navbar-brand .icon-banner {
113113
}
114114
.jwt-decoder-container .jwt-decoded {
115115
text-wrap: auto;
116-
background-color: #000000;
117116
}
118117
.jwt-decoder-container .jwt-decoded.jwt-header {
119-
color: rgb(253.5223880597, 157.4776119403, 157.4776119403);
118+
border: 4px solid #c586c0;
120119
}
121120
.jwt-decoder-container .jwt-decoded.jwt-payload {
122-
color: #46ec88;
121+
border: 4px solid #d0872f;
123122
}
124123
.jwt-decoder-container .jwt-decoded.jwt-signature {
125-
color: rgb(245.7438016529, 201.7768595041, 124.2561983471);
124+
border: 4px solid #86c0c5;
125+
color: #dcdcaa !important;
126+
overflow-wrap: anywhere;
126127
}
127128
.jwt-decoder-container .jwt-input-editable {
128129
word-wrap: anywhere;
129130
}
130131
.jwt-decoder-container .jwt-input-editable .text-danger {
131-
color: rgb(253.5223880597, 157.4776119403, 157.4776119403) !important;
132+
color: #c586c0 !important;
132133
}
133134
.jwt-decoder-container .jwt-input-editable .text-success {
134-
color: #46ec88 !important;
135+
color: #d0872f !important;
135136
}
136137
.jwt-decoder-container .jwt-input-editable .text-warning {
137-
color: rgb(245.7438016529, 201.7768595041, 124.2561983471) !important;
138+
color: #86c0c5 !important;
138139
}
139140
.jwt-decoder-container .json-content, .jwt-decoder-container .jwt-input-editable {
140141
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
141142
font-size: 1em;
142143
}
144+
.jwt-decoder-container .json-content {
145+
color: #dcdcaa !important;
146+
}
147+
.jwt-decoder-container .json-content .json-key {
148+
color: #9cdcfe !important;
149+
}
150+
.jwt-decoder-container .json-content .json-boolean, .jwt-decoder-container .json-content .json-number {
151+
color: #b5cea8 !important;
152+
}
153+
.jwt-decoder-container .json-content .json-string {
154+
color: #ce9178 !important;
155+
}
156+
.jwt-decoder-container .json-content .json-explanation {
157+
color: #6a9955 !important;
158+
font-style: italic;
159+
}
160+
.jwt-decoder-container .json-content .json-structure {
161+
color: #dcdcaa !important;
162+
}
143163
.jwt-decoder-container .jwt-signature {
144164
font-size: 1em;
145165
}

‎src/wwwroot/css/site.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/wwwroot/css/site.scss

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -127,34 +127,35 @@ a.navbar-brand {
127127

128128
.jwt-decoded {
129129
text-wrap: auto;
130-
background-color: #000000;
131130

132131
&.jwt-header {
133-
color: lighten(#fc3939, 20%);
132+
border: 4px solid #c586c0;
134133
}
135134

136135
&.jwt-payload {
137-
color: lighten(#13b955, 20%);
136+
border: 4px solid #d0872f;
138137
}
139138

140139
&.jwt-signature {
141-
color: lighten(#efa31d, 20%);
140+
border: 4px solid #86c0c5;
141+
color: #dcdcaa !important;
142+
overflow-wrap: anywhere;
142143
}
143144
}
144145

145146
.jwt-input-editable {
146147
word-wrap: anywhere;
147148

148149
.text-danger {
149-
color: lighten(#fc3939, 20%) !important;
150+
color: #c586c0 !important;
150151
}
151152

152153
.text-success {
153-
color: lighten(#13b955, 20%) !important;
154+
color: #d0872f !important;
154155
}
155156

156157
.text-warning {
157-
color: lighten(#efa31d, 20%) !important;
158+
color: #86c0c5 !important;
158159
}
159160
}
160161

@@ -163,6 +164,31 @@ a.navbar-brand {
163164
font-size: 1em;
164165
}
165166

167+
.json-content {
168+
color: #dcdcaa !important;
169+
170+
.json-key {
171+
color: #9cdcfe !important;
172+
}
173+
174+
.json-boolean, .json-number {
175+
color: #b5cea8 !important;
176+
}
177+
178+
.json-string {
179+
color: #ce9178 !important;
180+
}
181+
182+
.json-explanation {
183+
color: #6a9955 !important;
184+
font-style: italic;
185+
}
186+
187+
.json-structure {
188+
color: #dcdcaa !important;
189+
}
190+
}
191+
166192
.jwt-signature {
167193
font-size: 1em;
168194
}

0 commit comments

Comments
 (0)