<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="https://forum.zeroqode.com/uploads/default/optimized/2X/4/420232f2442102d4869cc5bcb3748abc63bf1cbd_2_500x500.png" type="image/png">
  <link type="text/css" href="style.css">
  <title>Agora Tools</title>
  <style>
  body {
    font-family: 'Arial', sans-serif;
    text-align: center;
    background-color: #020509;
  }

  h2 {
    color: #ffffff;
    font-family: "Source Sans 3", ui-sans-serif, system-ui, "Segoe UI", Roboto, Ubuntu, sans-serif;
  }

  #textInput {
    padding: 8px;
    font-size: 16px;
  }

  button {
    cursor: pointer;
    background-color: rgb(66, 132, 63);
    border: 1.11111px solid rgb(81, 158, 77);
    border-radius: 6px;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    font: 500 16px "Source Sans 3", ui-sans-serif, system-ui, "Segoe UI", Roboto, Ubuntu, sans-serif;
    height: 41px;
    line-height: 20px;
    margin: 0;
    min-width: 90px;
    padding: 5px 15px;
    position: relative;
    text-align: center;
    text-decoration-line: none;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    width: 90px;
  }

  button:hover {
    background-color: rgb(96, 170, 92);
  }

  .parentContainer {
    max-width: 400px;
    margin: 20px auto;
    margin-bottom: -20px;
    padding: 20px;
    background-color: #0c0f14;
    border-bottom-color: rgb(55, 59, 66);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
  }

  label {
    color: #e8eaeb;
    display: block;
    margin-top: 3px;
    margin-bottom: 3px;
    font: 500 14px "Source Sans 3", ui-sans-serif, system-ui, "Segoe UI", Roboto, Ubuntu, sans-serif;
    text-align: left !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    margin-bottom: 10px;
    border: 0.5px solid #878787;
    border-radius: 4px;
    background-color: #171b21;
    color: #e8eaeb;
  }
  </style>
</head>
<body>
  <h2>Token Validator</h2>
  <div id="parentContainer" class="parentContainer">
    <label>Token: </label>
    <input id="textInput1"></input>
    <button onclick="processText()">Validate</button>
  </div>
  <script>
    function processText() {
    const inputText = document.getElementById("textInput1").value;
    const encodedInputText = encodeURIComponent(inputText);
    
    fetch(`/process/${encodedInputText}`)
        .then(response => {
        return response.json();
        })
        .then(data => {
        console.log('Data:', data);

        const clearContainer = (containerId) => {
          const container = document.getElementById(containerId);
          container.innerHTML = ''; // Clear Existing Data
        };
        const createAndSetInput = (parentElement, elementId, label, value) => {
          if (value != null && value != "") {
            const labelElement = document.createElement("label");
            labelElement.for = elementId;
            labelElement.innerText = `${label}: `;
            parentElement.appendChild(labelElement);

            const inputElement = document.createElement("input");
            inputElement.id = elementId;
            inputElement.type = "text";
            inputElement.value = value;
            parentElement.appendChild(inputElement);
            parentElement.appendChild(document.createElement("br")); // Add a line break
          }

        };
        const containerId = "parentContainer";
        const parentElement = document.getElementById(containerId);
        // Clear existing content in the container
        clearContainer(containerId);
        // Create and append input elements with labels on new lines
        createAndSetInput(parentElement, "token", "Token", inputText);
        if (data.tokenData.appId) {
          createAndSetInput(parentElement, "appID", "App ID", data.tokenData.appId);
          createAndSetInput(parentElement, "channel", "Channel", data.tokenData.channel);
          formatCreation = data.tokenData.creation;
          createAndSetInput(parentElement, "creation", "Creation", data.tokenData.creation);
          createAndSetInput(parentElement, "expiration", "Expiration", data.tokenData.expiration);
          createAndSetInput(parentElement, "role", "Role", data.tokenData.role);
          createAndSetInput(parentElement, "serviceType", "Service", data.tokenData.serviceType);
          createAndSetInput(parentElement, "uid", "UID", data.tokenData.uid);
          createAndSetInput(parentElement, "validity", "Validity", data.tokenData.valid);
        }else{
          createAndSetInput(parentElement, "errorInfo", "Info", "Invalid Token");
        }

        var newButton = document.createElement("button");
        newButton.textContent = "Return";
        newButton.setAttribute("onclick", "location.reload();");
        parentElement.appendChild(newButton);

        })
        .catch(error => console.error('Error:', error));
    }
  </script>
</body>
</html>