index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Complexity V2</title>
  </head>
  <body>
    <div id="app">
      <script src="./index.js" type="module"></script>
    </div>
    <footer>
      <div style="font-style: italic">
        This is a work in progress! If you want to receive an email when this
        project is finished, enter your email below:
      </div>
      <form id="signup-form" style="margin-top: 1rem">
        <input
          type="email"
          name="email"
          id="email"
          placeholder="you@example.com"
          required
        />
        <div id="turnstile-container"></div>
        <button type="submit">Subscribe</button>
        <p id="form-status"></p>
      </form>
    </footer>
    <script>
      const TURNSTILE_SITEKEY = "0x4AAAAAACGTVUPmIFsJov8d";
      const SUBMIT_URL = "https://api.ricky0123.com/api/new-sign-up";

      let turnstileReady = false;
      let turnstileToken = null;
      let pendingSubmit = false;

      function loadTurnstile() {
        return new Promise((resolve) => {
          if (window.turnstile) {
            resolve();
            return;
          }
          const script = document.createElement("script");
          script.src =
            "https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onTurnstileLoad";
          script.async = true;
          window.onTurnstileLoad = resolve;
          document.head.appendChild(script);
        });
      }

      async function initTurnstile() {
        await loadTurnstile();
        turnstile.render("#turnstile-container", {
          sitekey: TURNSTILE_SITEKEY,
          callback: (token) => {
            turnstileToken = token;
            turnstileReady = true;
            if (pendingSubmit) {
              submitForm();
            }
          },
        });
      }

      async function submitForm() {
        const status = document.getElementById("form-status");
        const email = document.getElementById("email").value;

        status.textContent = "Subscribing...";

        try {
          const response = await fetch(SUBMIT_URL, {
            method: "POST",
            body: JSON.stringify({
              email,
              token: turnstileToken,
              source: window.location.hostname,
              name: "unknown",
            }),
            headers: { "Content-Type": "application/json" },
          });

          const result = await response.json();

          if (result.success) {
            status.textContent = "Thanks!";
            document.getElementById("signup-form").reset();
            turnstile.reset();
            turnstileToken = null;
            turnstileReady = false;
          } else {
            status.textContent = "Something went wrong. Try again?";
          }
        } catch (err) {
          status.textContent = "Something went wrong. Try again?";
        }

        pendingSubmit = false;
      }

      document
        .getElementById("signup-form")
        .addEventListener("submit", async (e) => {
          e.preventDefault();

          const status = document.getElementById("form-status");

          if (!turnstileReady) {
            status.textContent = "One moment...";
            pendingSubmit = true;
            initTurnstile();
            return;
          }

          submitForm();
        });
    </script>
  </body>
</html>