mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-27 06:18:27 -04:00
preact-ify contact form
This commit is contained in:
parent
9a247ddb8d
commit
a338a05ce8
GPG Key ID:
2B0C9CF251E69A39
@ -1,46 +1,46 @@
|
||||
import "vanilla-hcaptcha";
|
||||
import { h, render } from "preact";
|
||||
import { useState } from "preact/hooks";
|
||||
import fetch from "unfetch";
|
||||
|
||||
// don't continue if there isn't a contact form on this page
|
||||
// TODO: be better and only do any of this on /contact/
|
||||
const contactForm = document.querySelector("form#contact-form");
|
||||
const CONTACT_ENDPOINT = "/api/contact/";
|
||||
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener("submit", (event) => {
|
||||
// immediately prevent <form> from actually submitting to a new page
|
||||
event.preventDefault();
|
||||
const ContactForm = () => {
|
||||
// status/feedback:
|
||||
const [status, setStatus] = useState({ success: false, action: "Submit", message: "" });
|
||||
// keep track of fetch:
|
||||
const [sending, setSending] = useState(false);
|
||||
|
||||
// feedback <span>s for later
|
||||
const successSpan = document.querySelector("span#contact-form-result-success");
|
||||
const errorSpan = document.querySelector("span#contact-form-result-error");
|
||||
const onSubmit = async (e) => {
|
||||
// immediately prevent browser from actually navigating to a new page
|
||||
e.preventDefault();
|
||||
|
||||
// disable the whole form if the button has been disabled below (on success)
|
||||
const submitButton = document.querySelector("button#contact-form-btn-submit");
|
||||
if (submitButton.disabled === true) {
|
||||
return;
|
||||
}
|
||||
// begin the process
|
||||
setSending(true);
|
||||
|
||||
// change button appearance between click and server response
|
||||
submitButton.textContent = "Sending...";
|
||||
submitButton.disabled = true; // prevent accidental multiple submissions
|
||||
submitButton.style.cursor = "default";
|
||||
|
||||
try {
|
||||
// https://simonplend.com/how-to-use-fetch-to-post-form-data-as-json-to-your-api/
|
||||
const formData = Object.fromEntries(new FormData(event.currentTarget).entries());
|
||||
// extract data from form fields
|
||||
const { name, email, message } = e.target.elements;
|
||||
const formData = {
|
||||
name: name.value,
|
||||
email: email.value,
|
||||
message: message.value,
|
||||
"h-captcha-response": e.target.elements["h-captcha-response"].value,
|
||||
};
|
||||
|
||||
// some client-side validation. these are all also checked on the server to be safe but we can save some
|
||||
// unnecessary requests here.
|
||||
// we throw identical error messages to the server's so they're caught in the same way below.
|
||||
if (!formData.name || !formData.email || !formData.message) {
|
||||
throw new Error("USER_MISSING_DATA");
|
||||
}
|
||||
if (!formData["h-captcha-response"]) {
|
||||
throw new Error("USER_INVALID_CAPTCHA");
|
||||
if (!(formData.name && formData.email && formData.message && formData["h-captcha-response"])) {
|
||||
setSending(false);
|
||||
setStatus({ success: false, action: "Try Again", message: "Please make sure that all fields are filled in." });
|
||||
|
||||
// remove focus from the submit button
|
||||
document.activeElement.blur();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// post JSONified form input to /api/contact/
|
||||
fetch(contactForm.action, {
|
||||
// if we've gotten here then all data is (or should be) valid and ready to post to API
|
||||
fetch(CONTACT_ENDPOINT, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
@ -50,40 +50,93 @@ if (contactForm) {
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
setSending(false);
|
||||
|
||||
if (data.success === true) {
|
||||
// handle successful submission
|
||||
// we can disable submissions & hide the send button now
|
||||
submitButton.disabled = true;
|
||||
submitButton.style.display = "none";
|
||||
|
||||
// just in case there *was* a PEBCAK error and it was corrected
|
||||
errorSpan.style.display = "none";
|
||||
|
||||
// let user know we were successful
|
||||
successSpan.textContent = "Success! You should hear from me soon. :)";
|
||||
// disable submissions, hide the send button, and let user know we were successful
|
||||
setStatus({ success: true, action: "", message: "Success! You should hear from me soon. :)" });
|
||||
} else {
|
||||
// pass on an error sent by the server
|
||||
// pass on any error sent by the server
|
||||
throw new Error(data.message);
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
})
|
||||
.catch((error) => {
|
||||
const message = error instanceof Error ? error.message : "UNKNOWN_EXCEPTION";
|
||||
|
||||
setSending(false);
|
||||
|
||||
// give user feedback based on the error message returned
|
||||
if (message === "USER_INVALID_CAPTCHA") {
|
||||
errorSpan.textContent = "Did you complete the CAPTCHA? (If you're human, that is...)";
|
||||
setStatus({
|
||||
success: false,
|
||||
action: "Try Again",
|
||||
message: "Did you complete the CAPTCHA? (If you're human, that is...)",
|
||||
});
|
||||
} else if (message === "USER_MISSING_DATA") {
|
||||
errorSpan.textContent = "Please make sure that all fields are filled in.";
|
||||
setStatus({
|
||||
success: false,
|
||||
action: "Try Again",
|
||||
message: "Please make sure that all fields are filled in.",
|
||||
});
|
||||
} else {
|
||||
// something else went wrong, and it's probably my fault...
|
||||
errorSpan.textContent = "Internal server error. Try again later?";
|
||||
setStatus({ success: false, action: "Try Again", message: "Internal server error. Try again later?" });
|
||||
}
|
||||
|
||||
// reset submit button to let user try again
|
||||
submitButton.textContent = "Try Again";
|
||||
submitButton.disabled = false;
|
||||
submitButton.style.cursor = "pointer";
|
||||
submitButton.blur(); // remove keyboard focus from the button
|
||||
}
|
||||
// remove focus from the submit button
|
||||
document.activeElement.blur();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit} id="contact-form" action={CONTACT_ENDPOINT} method="POST">
|
||||
<input type="text" name="name" placeholder="Name" disabled={status.success} />
|
||||
<input type="email" name="email" placeholder="Email" disabled={status.success} />
|
||||
<textarea name="message" placeholder="Write something..." disabled={status.success} />
|
||||
|
||||
<span id="contact-form-md-info">
|
||||
Basic{" "}
|
||||
<a
|
||||
href="https://commonmark.org/help/"
|
||||
title="Markdown reference sheet"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Markdown syntax
|
||||
</a>{" "}
|
||||
is allowed here, e.g.: <strong>**bold**</strong>, <em>_italics_</em>, [
|
||||
<a href="https://jarv.is" target="_blank" rel="noopener noreferrer">
|
||||
links
|
||||
</a>
|
||||
](https://jarv.is), and <code>`code`</code>.
|
||||
</span>
|
||||
|
||||
<h-captcha id="contact-form-captcha" site-key={process.env.HCAPTCHA_SITE_KEY} size="normal" tabindex="0" />
|
||||
|
||||
<div id="contact-form-action-row">
|
||||
<button
|
||||
id="contact-form-btn-submit"
|
||||
title={status.action}
|
||||
aria-label={status.action}
|
||||
disabled={sending}
|
||||
style={{ display: status.success ? "none" : null }}
|
||||
>
|
||||
{sending ? "Sending..." : status.action}
|
||||
</button>
|
||||
|
||||
<span
|
||||
class="contact-form-result"
|
||||
id={status.success ? "contact-form-result-success" : "contact-form-result-error"}
|
||||
>
|
||||
{status.message}
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
// don't continue if there isn't a contact form on this page
|
||||
if (typeof window !== "undefined" && document.querySelector("div#contact-form-wrapper")) {
|
||||
render(<ContactForm />, document.querySelector("div#contact-form-wrapper"));
|
||||
}
|
||||
|
||||
@ -87,7 +87,7 @@ div.layout-contact {
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
span.contact-form-result {
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
|
||||
|
||||
@ -5,26 +5,6 @@
|
||||
<p>Fill out this quick form and I'll get back to you as soon as I can! You can also <a href="mailto:jake@jarv.is">email me directly</a>, send me a <a href="https://twitter.com/messages/compose?recipient_id=229769022" target="_blank" rel="noopener nofollow">direct message on Twitter</a>, or <a href="sms:+1-617-917-3737">text me</a>.</p>
|
||||
<p>🔐 You can grab my public key here: <a href="/pubkey.asc" title="My Public PGP Key" target="_blank" rel="pgpkey authn noopener"><code>6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39</code></a>.</p>
|
||||
|
||||
<form id="contact-form" action="/api/contact/" method="POST">
|
||||
<input type="text" name="name" placeholder="Name">
|
||||
<input type="email" name="email" placeholder="Email">
|
||||
<textarea name="message" placeholder="Write something..."></textarea>
|
||||
|
||||
<span id="contact-form-md-info">Basic <a href="https://commonmark.org/help/" title="Markdown reference sheet" target="_blank" rel="noopener">Markdown syntax</a> is allowed here, e.g.: <strong>**bold**</strong>, <em>_italics_</em>, [<a href="https://jarv.is" target="_blank" rel="noopener">links</a>](https://jarv.is), and <code>`code`</code>.</span>
|
||||
|
||||
<h-captcha
|
||||
id="contact-form-captcha"
|
||||
site-key="{{ getenv "HCAPTCHA_SITE_KEY" | default "10000000-ffff-ffff-ffff-000000000001" }}"
|
||||
size="normal"
|
||||
tabindex="0"></h-captcha>
|
||||
|
||||
<div id="contact-form-action-row">
|
||||
<button title="Submit" aria-label="Submit" id="contact-form-btn-submit">📤 Send</button>
|
||||
<div id="contact-form-result">
|
||||
<span id="contact-form-result-error"></span>
|
||||
<span id="contact-form-result-success"></span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="contact-form-wrapper"></div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@ -90,6 +90,10 @@ export default (env, argv) => {
|
||||
},
|
||||
],
|
||||
}),
|
||||
new webpack.EnvironmentPlugin([
|
||||
// we need to dynamically inject the hcaptcha site key into the contact form
|
||||
"HCAPTCHA_SITE_KEY",
|
||||
]),
|
||||
new AssetsManifestPlugin({
|
||||
writeToDisk: true, // allow Hugo to access file in dev mode
|
||||
output: path.resolve(__dirname, "data/manifest.json"),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user