JWT

by Sasá Rafalsky

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>JWT</title>

    <style>
      body {
        font-family: 'Arial';
      }

      body .container {
        max-width: 500px;
        margin: 56px auto;
        display: flex;
        flex-direction: column;
        text-align: center;
      }

      body .container .title {
        font-weight: bold;
        font-size: 48px;
      }

      body .container .box {
        margin: 48px 0 12px;
        display: flex;
      }

      body .container .box input {
        width: 100%;
        height: 36px;
        padding: 0 12px;
        border: 2px solid #000;
        border-radius: 5px;
      }

      body .container .box button {
        width: 64px;
        margin: 0 0 0 8px;
        background-color: #000;
        border: none;
        border-radius: 5px;
        color: #fff;
        font-size: 11px;
        font-weight: bold;
        outline: none;
        cursor: pointer;
      }

      body .container .box button:hover {
        background-color: #333;
      }

      body .container .generator {
        max-width: 250px;
        margin: 0 auto;
        height: 48px;
        background-color: #09f;
        border: none;
        border-radius: 12px;
        padding: 0 18px;
        font-weight: bold;
        text-transform: uppercase;
        color: #fff;
        font-size: 13px;
        cursor: pointer;
        outline: none;
      }

      body .container .generator:hover {
        background-color: #08f;
      }

    </style>

    <script>
      function generate() {
        let t = document.getElementById('token');

        t.value = null;
        t.placeholder = 'Solicitando token...';

        setTimeout(function() {
          let url = 'https://example.com/profile';

          // Eliminar esta linea y descomentar el fetch
          t.value = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);

          /*
          fetch(url, {
        ...