Django API Keygen (AJAX)

django-api-keygen-ajax.markdown

Django API Keygen (AJAX)

A Pen by ambu on CodePen.

License.

index.html

<div class="bg-dark text-white">
  <!--Navbar-->
  <nav class="navbar bg-secondary">
    <div class="container-fluid">
      <a class="navbar-brand text-light" href="#">🏠</a>
    </div>
  </nav>
  <div class="container h-100 d-flex align-items-center justify-content-center">
    <!-- Grid-->
    <div class="row">
      <div class="col">
        <!-- Title-->
        <p class="display-3 text-center mb-5">API Keygen</p>
        <!-- Input Group-->
        <div class="d-flex justify-content-center">
          <div class="input-group-lg">
            <input class="form-control mb-3" type="text" value="Private API Key" aria-label="readonly input example" readonly>

            <button type="button" class="btn btn-outline-success" id="liveToastBtn">Generate</button>
            <button type="button" class="btn btn-outline-danger" id="liveToastBtn">Revoke</button>
            <button type="button" class="btn btn-outline-warning" id="liveToastBtn">Refresh</button>
            <!--Toasts-->
          </div>
          <div class="toast-container position-fixed p-3">
            <div id="liveToast" class="toast bg-dark text-light" role="alert" aria-live="assertive" aria-atomic="true">
              <div class="toast-header">

                <span class="btn-close position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle bg-light" data-bs-dismiss="toast" aria-label="Close">
                </span>

                <strong class="me-auto fs-5">Request</strong>
              </div>
              <div class="toast-body">
                <p class="lead">Sent <span class="badge bg-primary">get</span> request to API</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Grid end-->
</div>
</div>

script.js

const toastTrigger = document.getElementById("liveToastBtn");
const toastLiveExample = document.getElementById("liveToast");
if (toastTrigger) {
  console.log(1234);
  toastTrigger.addEventListener("click", () => {
    const toast = new bootstrap.Toast(toastLiveExample);

    toast.show();
  });
}

style.css

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
.bg-dark {
  background: #0f0;
  height: 100%;
}

/* placeholder centering */
input {
  text-align: center;
}

.badge {
  text-transform: uppercase;
}