Beautifying the display of the JWT, claim and resource

Author: technotenshi

public/css/main.css

@@ -62,18 +62,22 @@ textarea {
  ========================================================================== */
 
 
-
-
-
-
-
-
-
-
-
-
-
-
+.code {
+border-color:#339; 
+border-width:thin; 
+border-style:dashed; 
+width:700px; 
+background-color:#DBE2EE; 
+word-wrap:break-word; 
+font-family:'Courier New', Courier, monospace; 
+padding:5px;
+}
+
+.resourceContainer {
+width:378px;
+height:284px;
+background-color:#CCC;
+}
 
 /* ==========================================================================
  Media Queries

public/index.html

@@ -36,16 +36,16 @@ <h1>Login</h1>
  </div>
  <div id="jwt" style="display:none">
  <h1>Current JWT</h1>
- <div id="token"></div>
+ <div id="token" class="code"></div>
  <h2>Decoded JWT</h2>
- <div id="decodedToken"></div>
+ <div id="decodedToken" class="code"></div>
  </div>
  <div id="resource" style="display:none">
  <h1>Resource</h1>
  <p>
  <input type="submit" name="btnGetResource" id="btnGetResource" value="Get Resource">
  <a href="resource.php" target="_blank">Try opening the resource directly</a></p>
- <div id="resourceContainer"></div>
+ <div class="resourceContainer" id="resourceContainer"></div>
  </div>
 </div>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

public/js/main.js

@@ -11,7 +11,7 @@ $(function(){
  store.claim = b64utos(a[1]);
 
  $("#token").html(store.jwt);
- $("#decodedToken").html(store.claim);
+ $("#decodedToken").html('<pre>' + JSON.stringify(JSON.parse(store.claim), null, 4) + '</pre>');
  $("#loginForm").hide();
  $("#jwt").show()
  $("#resource").show();