basic_auth_app/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>WirePact Basic Auth Demo App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <nav class="bg-gray-800 border-gray-200 px-2 sm:px-4 py-2.5 text-white text-right">
      <span>Hello Fellow User</span>
    </nav>
    <main class="p-8">
      <h1 class="text-xl font-bold mb-8">Hello there and welcome to the Basic Auth demo app.</h1>
      <p class="mb-8">
        Here you can set the API url that you want to call. On submit, the application will call the url with the provided
        <a href="https://tools.ietf.org/html/rfc7617">Basic Auth (RFC7617)</a> credentials. The form should be prefilled with
        the credentials from the environment variables.
      </p>
      <div class="text-center mb-16">
        <div class="inline-block w-1/2 border border-blue-200 rounded p-4 text-center">
          <input
            id="username"
            class="mb-4 rounded w-full px-4 py-2 bg-blue-100 border-b border-b-blue-500"
            placeholder="Basic Auth Username (e.g. john.doe)"
          />
          <input
            id="password"
            class="mb-4 rounded w-full px-4 py-2 bg-blue-100 border-b border-b-blue-500"
            placeholder="Basic Auth Password (e.g. my-secret-password)"
          />
          <input
            id="api-url"
            class="mb-4 rounded w-full px-4 py-2 bg-blue-100 border-b border-b-blue-500"
            placeholder="API Url (e.g.
          http://localhost:3000/api)"
          />
          <button id="send" class="rounded px-4 py-2 bg-blue-300 hover:bg-blue-500 transition-colors">Send Request</button>
        </div>
      </div>
      <div id="response-div" class="text-center mb-16 hidden">
        <div class="w-2/3 p-4 text-left border border-green-500 inline-block rounded">
          <code id="response" class="whitespace-pre"></code>
        </div>
      </div>
      <div id="err-div" class="text-center mb-16 hidden">
        <div class="w-2/3 p-4 text-left border border-red-500 inline-block rounded">
          <code id="err" class="whitespace-pre"></code>
        </div>
      </div>
    </main>
    <script async defer src="main.js" onload="onLoad();"></script>
  </body>
</html>