Add share button to website (design by design team).

Gruntfile.js

@@ -173,6 +173,9 @@ module.exports = grunt => {
         files: [
           'stylus/*.styl',
           'stylus/extension/**',
+          // Yes, we still share styles with the website, it's really hard
+          // to refactor them out without breaking stuff
+          'stylus/website/**',
           'views/*.pug',
           'views/extension/**'
         ],

src/extension/index.js

@@ -5,29 +5,10 @@ import {
 } from '../editor';
 import { setupTokenPageInspector } from './page-inspector.js';
 import { shareJwtLink, shareJwtTextElement } from './dom-elements.js';
-import { copyTokenLink } from '../utils.js';
 import { getTokenFromClipboardIfPossible } from './utils.js';
+import { setupShareJwtButton } from '../share-button.js';
 import strings from '../strings.js';
 
-function setupShareJwtButton() {
-  shareJwtLink.addEventListener('click', event => {
-    event.preventDefault();
-
-    const value = getTokenEditorValue();
-    if(value.token) {
-      // If the selected algorithm does not use public keys, publicKey will be
-      // undefined.
-      copyTokenLink(value.token, value.publicKey);
-    }
-
-    const shareJwtTextNode = shareJwtTextElement.firstChild;
-    shareJwtTextNode.textContent = strings.extension.jwtIoUrlCopied;
-    setTimeout(() => {
-      shareJwtTextNode.textContent = strings.extension.shareThisJwt;
-    }, 2000);
-  });
-}
-
 function loadFromClipboardIfPossible() {
   const token = getTokenFromClipboardIfPossible();
   if(token) {
@@ -39,4 +20,4 @@ function loadFromClipboardIfPossible() {
 setupTokenEditor();
 loadFromClipboardIfPossible();
 setupTokenPageInspector();
-setupShareJwtButton();
+setupShareJwtButton(shareJwtLink, shareJwtTextElement);

src/share-button.js

@@ -0,0 +1,23 @@
+import { copyTokenLink } from './utils.js';
+import { getTokenEditorValue } from './editor';
+
+import strings from './strings.js';
+
+export function setupShareJwtButton(shareJwtElement, shareJwtTextElement) {
+  shareJwtElement.addEventListener('click', event => {
+    event.preventDefault();
+
+    const value = getTokenEditorValue();
+    if(value.token) {
+      // If the selected algorithm does not use public keys, publicKey will be
+      // undefined.
+      copyTokenLink(value.token, value.publicKey);
+    }
+
+    const shareJwtTextNode = shareJwtTextElement.firstChild;
+    shareJwtTextNode.textContent = strings.common.jwtIoUrlCopied;
+    setTimeout(() => {
+      shareJwtTextNode.textContent = strings.common.shareThisJwt;
+    }, 2000);
+  });
+}

src/strings.js

@@ -1,9 +1,11 @@
 export default {
+  common: {
+    shareThisJwt: 'Share JWT',
+    jwtIoUrlCopied: 'Copied',
+  },
   extension: {
     alreadyInstalled: 'Already installed',
-    addToBrowser: 'Add to Browser',
-    shareThisJwt: 'Share this JWT',
-    jwtIoUrlCopied: 'Copied',
+    addToBrowser: 'Add to Browser',    
     noJwtsFound: 'No JWTs found',
     saveBackTo: 'Save back to '
   },

src/website/dom-elements.js

@@ -20,6 +20,9 @@ export const codeElements = document.querySelectorAll('.plain-text pre code');
 
 export const debuggerSection = document.getElementById('debugger-io');
 
+export const shareJwtButton = document.querySelector('.website-share button');
+export const shareJwtTextElement = shareJwtButton.querySelector('span');
+
 export const starsElements = document.getElementsByClassName('stars');
 export const librariesElement = document.querySelector('.libraries-sv');
 export const librariesSelect = document.getElementById('libraries-select');

src/website/index.js

@@ -7,12 +7,15 @@ import { setupSmoothScrolling } from './smooth-scrolling.js';
 import { setupHighlighting } from './highlighting.js';
 import { getParameterByName } from '../utils.js';
 import { isChrome, isFirefox } from './utils.js';
+import { setupShareJwtButton } from '../share-button.js';
 import { 
   publicKeyTextArea, 
   codeElements, 
   debuggerSection,
   extensionSection,
-  ebookSection
+  ebookSection,
+  shareJwtButton,
+  shareJwtTextElement
 } from './dom-elements.js';
 
 /* For initialization, look at the end of this file */
@@ -59,3 +62,4 @@ parseLocationQuery();
 setupHighlighting();
 setupJwtCounter();
 pickEbookOrExtensionBanner();
+setupShareJwtButton(shareJwtButton, shareJwtTextElement);

stylus/extension/index.styl

@@ -23,6 +23,9 @@
   &:hover
     opacity: 0.85
 
+  span
+    padding-left 15px
+
   img
     position absolute
     top 5px
@@ -81,6 +84,13 @@
     margin-top 10px
     padding 5px 0
     font-size 20px
+    text-align center
+    &.valid-token
+      background-color #00B9F1
+      color white
+    &.invalid-token
+      background-color red
+      color white
 
     i 
       line-height 22px

stylus/website/index.styl

@@ -583,18 +583,18 @@ body
 
   .validation-status
     text-transform capitalize
-    color white
-    text-align center
+    background-color white
+    text-align left
     border-radius 3px
     padding 10px 0
     margin-top 30px
     font-size 20px
     +breakpoint("tablet")
       font-size 30px
     &.valid-token
-      background-color #00B9F1
+      color #00B9F1
     &.invalid-token
-      background-color red
+      color red
     i
       font-size 18px
       vertical-align bottom
@@ -603,6 +603,20 @@ body
       +breakpoint("tablet")
         font-size 24px
 
+  .debugger-footer
+    font-size 30px
+    .website-validation
+      padding-left 0      
+    .website-share
+      padding-right 0
+      button
+        width 100%;
+        background-color #00b9f1;
+        color white;
+        font-weight 400;
+        border-color #00b9f1;
+
+
 
 // libraries-jwt
 

views/extension/index.pug

@@ -28,10 +28,11 @@ block content
 
             .share-this-jwt.h-block
               a.jwt-clipboard-btn(href="#")
-                span#share-this-jwt-text Share this JWT
+                span#share-this-jwt-text Share JWT
                 img(src="/img/icon-chromeless.svg" height="22" alt="Share this jwt")
 
         include ../token-editor-common.pug
+        include ../token-editor-validation.pug
 
         .colophon.clearfix
           .pull-left

views/token-editor-common.pug

@@ -29,7 +29,7 @@
             <span id="hmacsha-text">HMACSHA256</span>(
               base64UrlEncode(header) + "." +
               base64UrlEncode(payload),
-              <input type="text" name="secret" value="secret" title="Weak secret!">
+              <input type="text" name="secret" value="your-256-bit-secret" title="Weak secret!">
             )<span class="is-base64-encoded-label"> <input id="is-base64-encoded" type="checkbox" name="is-base64-encoded"><label for="is-base64-encoded">secret base64 encoded</label></span>
           pre.pre-encode.RS256.
             <span id="rsasha-text">RSASHA256</span>(
@@ -38,5 +38,3 @@
               <textarea rows="4" name="public-key" placeholder="Public Key or Certificate. Enter it in plain text only if you want to verify a token"></textarea>,
               <textarea rows="5" name="private-key" placeholder="Private Key. Enter the it in plain text only if you want to generate a new token. The key never leaves your browser."></textarea>
             )
-
-.validation-status.js-signature

views/token-editor-validation.pug

@@ -0,0 +1 @@
+.validation-status.js-signature

views/website/token-editor.pug

@@ -11,3 +11,10 @@ section#debugger-io.debugger-jwt
             include ../token-editor-algorithms.pug
 
       include ../token-editor-common.pug
+      .debugger-footer.container
+        .row
+          .col-xs-6.website-validation
+            include ../token-editor-validation.pug
+          .col-xs-6.website-share
+            button.btn
+              span SHARE JWT