Init pt 2

1 files changed, 154 insertions, 0 deletions

diff --git a/src/blinkies/add.njk b/src/blinkies/add.njk
new file mode 100644
index 0000000..9992041
--- /dev/null
+++ b/src/blinkies/add.njk
@@ -0,0 +1,154 @@
+---
+layout: base.njk
+title: Add a Blinkie!
+---
+
+<h2>Add your very own blinkie!</h2>
+<p>
+  Please allow us 1 to 10 business days to process your request. Your engagement
+  is very important to our shareholders.
+</p>
+
+<form
+  id="form"
+  method="POST"
+  action="https://posthook.liz.coffee/hook/add-a-blinkie"
+  enctype="multipart/form-data"
+>
+  <div class="form-group">
+    <label for="name">Name *</label>
+    <input
+      type="text"
+      id="name"
+      name="name"
+      placeholder="Elizabeth..."
+      required
+    />
+  </div>
+  <br />
+
+  <div class="form-group">
+    <label for="email">Email</label>
+    <p>
+      <small>
+        In case something goes wrong or you want to update the blinkie in the future and need to email <a href="mailto:me@liz.coffee">me</a>.
+      </small>
+    </p>
+    <input
+      type="email"
+      id="email"
+      name="email"
+      placeholder="me@liz.coffee..."
+    />
+  </div>
+  <br />
+
+  <div class="form-group">
+    <label for="description">Description *</label>
+    <p>
+      <small>
+         Please explain why you think this blinkie is a good addition to this site.
+        "I am cool as fuck yo" is a valid reason.
+      </small>
+    </p>
+    <input
+      type="text"
+      id="description"
+      name="description"
+      placeholder="I am cool as fuck yo..."
+      required
+    />
+  </div>
+  <br />
+
+  <div class="form-group">
+    <label for="gif">Blinkie *</label>
+    <p><small>Blinkie gif in 150px:20px or equivalent aspect ratio.</small></p>
+    <input
+      type="file"
+      id="gif"
+      name="gif"
+      accept="image/gif"
+      required
+    />
+    <label for="gif" class="file-input-button">
+      Browse Files
+    </label>
+
+  </div>
+  <br />
+
+  <div
+    class="h-captcha"
+    data-sitekey="70fc31c2-32a4-4304-8b5a-b492eba656ec"
+  ></div>
+
+  <br />
+
+  <input type="hidden" name="_redirect" value="https://liz.coffee/" />
+  <input id="_token" type="hidden" name="_token" />
+
+  <button type="submit">Submit</button>
+</form>
+
+<script src="https://hcaptcha.com/1/api.js" async defer></script>
+
+<script>
+  const form = document.getElementById("form");
+  const tokenInput = document.getElementById("_token");
+  const fileInput = document.getElementById("gif");
+  const fileName = document.getElementById("file-name");
+  const fileGroup = document.getElementById("file-group");
+
+  fileInput.addEventListener("change", () => {
+    if (fileInput.files.length > 0) {
+      fileName.textContent = fileInput.files[0].name;
+      fileGroup.classList.add("has-file");
+    } else {
+      fileName.textContent = "No file selected";
+      fileGroup.classList.remove("has-file");
+    }
+  });
+
+  form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const hcaptchaResponse = hcaptcha.getResponse();
+    if (!hcaptchaResponse) {
+      alert("Please complete the hCaptcha before submitting.");
+      return;
+    }
+    try {
+      const tokenRes = await fetch(
+        "https://posthook.liz.coffee/hook/add-a-blinkie/token",
+        { credentials: "omit" }
+      );
+      const tokenData = await tokenRes.json();
+      const csrfToken = tokenData?.ok?.token;
+      if (!csrfToken) throw new Error("Missing token");
+      tokenInput.value = csrfToken;
+
+      const formData = new FormData(form);
+      const submitRes = await fetch(form.action, {
+        method: "POST",
+        body: formData,
+        headers: {
+          "H-Captcha-Response": hcaptchaResponse,
+          "X-CSRF-Token": csrfToken,
+        },
+        redirect: "manual",
+        credentials: "omit",
+      });
+
+      const redirectUrl = formData.get("_redirect");
+      if (typeof redirectUrl === "string" && redirectUrl.length > 0) {
+        window.location.assign(redirectUrl);
+        return;
+      }
+      const text = await submitRes.text();
+      if (!submitRes.ok) throw new Error(text || "Submit failed");
+    } catch (err) {
+      alert("Something went wrong. Please try again.");
+      hcaptcha.reset();
+    }
+  });
+</script>