Merge pull request jsonwebtoken#362 from jsonwebtoken/disclaimer-warning

Add disclaimer warning above the debugger

Author: diegopoza

stylus/website/index.styl

@@ -660,23 +660,12 @@ body
       margin-left 10px
 
   .warning
-    background-color #FFFCD2
-    font-size 11px
-    color #4A4A4A
-    text-align center
-    padding 10px
     margin 0 -15px
+    border-radius 0
     line-height 1.8
-    color: darken(#FFFCD2, 80%)
     +breakpoint("tablet")
-      font-size 14px
       margin 0 0 30px
       border-radius 3px
-      padding 20px 0
-    a
-      color: darken(#FFFCD2, 80%)
-      font-weight bold
-      margin-left 5px
     svg
       height: 14px;
       width: 14px;
@@ -1163,3 +1152,22 @@ footer
   .social-counter
     +breakpoint("tablet")
       text-align right
+
+.warning
+  display block
+  width 100%
+  padding 15px
+  margin 0 0 40px 0
+  background #fff7c9
+  border-radius 3px
+  font-size 14px
+  color #786600
+  line-height 2
+
+  a
+    border-bottom 1px solid rgba(120,102,0,.4)
+    color #786600
+    text-decoration none
+
+    &:hover
+      opacity .7

views/website/libraries.pug

@@ -9,21 +9,21 @@ section#libraries-io.libraries-jwt
           select#libraries-select
             option(value='*', selected='') All
             // Languages must be in alphabetic order
-            -            
-              const sortedLangs = Array.from(languages);   
+            -
+              const sortedLangs = Array.from(languages);
               sortedLangs.sort((a, b) => a.name.localeCompare(b.name));
             each lang in sortedLangs
               option(value=`.${lang.uniqueClass}`) #{lang.name}
 
     .warning
       b Warning:
-      |  Critical vulnerabilities in JSON Web Token libraries with asymmetric keys.
+      |  Critical vulnerabilities in JSON Web Token libraries with asymmetric keys. 
       a(href='https://auth0.com/blog/critical-vulnerabilities-in-json-web-token-libraries/')
         | Learn more
 
-        svg(height='48', viewbox='0 0 48 48', width='48', xmlns='http://www.w3.org/2000/svg')
-          path(d='M-838-2232H562v3600H-838z', fill='none')
-          path(d='M16 10v28l22-14z')
+      svg(height='48', viewbox='0 0 48 48', width='48', xmlns='http://www.w3.org/2000/svg')
+        path(d='M-838-2232H562v3600H-838z', fill='none')
+        path(d='M16 10v28l22-14z')
 
     .libraries-sv(data-accordion-group)
       each lang in languages

views/website/token-editor.pug

@@ -4,6 +4,10 @@ section#debugger-io.debugger-jwt
     h1 Debugger
 
     .jwt-playground
+      .warning
+        strong Warning:
+        |  JWTs are credentials, which can grant access to resources. Be careful where you paste them! We do not record tokens, all validation and debugging is done on the client side.
+
       .selections
         .algorithm
           span Algorithm