token-editor-common.pug

.algorithm-code
  .tab-nav
    .tab-link.current
      a(href='#encoded-jwt') Encoded
        small paste a token here
    .tab-link
      a(href='#decoded-jwt') Decoded
        small edit the payload and secret

  .tab-content
    #encoded-jwt.box-content.current(heap-ignore="true")
      .input.js-input
        include token-editor-warnings.pug
    #decoded-jwt.box-content(heap-ignore="true")
      .output
        .jwt-explained.jwt-header
          p.text-line HEADER:
            span ALGORITHM & TOKEN TYPE
          .js-header

        .jwt-explained.jwt-payload
          p.text-line PAYLOAD:
            span DATA
          .js-payload

        .jwt-explained.jwt-signature
          p.text-line VERIFY SIGNATURE
          pre.pre-encode.HS256.
            <span id="hmacsha-text">HMACSHA256</span>(
              base64UrlEncode(header) + "." +
              base64UrlEncode(payload),
              <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>(
              base64UrlEncode(header) + "." +
              base64UrlEncode(payload),
              <textarea rows="4" name="public-key" placeholder="Public Key in SPKI, PKCS #1, X.509 Certificate, or JWK string format."></textarea>,
              <textarea rows="5" name="private-key" placeholder="Private Key in PKCS #8, PKCS #1, or JWK string format. The key never leaves your browser."></textarea>
            )