diff --git a/.stylelintrc.json b/.stylelintrc.json index d30b4ce0..194688bf 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -4,6 +4,7 @@ "rules": { "color-hex-length": "long", "max-nesting-depth": 6, + "no-descending-specificity": null, "order/order": null, "order/properties-alphabetical-order": null, "plugin/no-unsupported-browser-features": [true, { "severity": "warning", "ignore": ["flexbox"] }], diff --git a/assets/js/src/contact.js b/assets/js/src/contact.js index a03d40de..728adde0 100644 --- a/assets/js/src/contact.js +++ b/assets/js/src/contact.js @@ -2,16 +2,17 @@ import "vanilla-hcaptcha"; import { h, render } from "preact"; import { useState } from "preact/hooks"; import fetch from "unfetch"; +import parseEmoji from "./emoji.js"; const CONTACT_ENDPOINT = "/api/contact/"; const ContactForm = () => { // status/feedback: - const [status, setStatus] = useState({ success: false, action: "Submit", message: "" }); + const [status, setStatus] = useState({ success: false, message: "" }); // keep track of fetch: const [sending, setSending] = useState(false); - const onSubmit = async (e) => { + const onSubmit = (e) => { // immediately prevent browser from actually navigating to a new page e.preventDefault(); @@ -19,19 +20,18 @@ const ContactForm = () => { setSending(true); // 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, + name: e.target.elements.name?.value, + email: e.target.elements.email?.value, + message: e.target.elements.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. + // some client-side validation to save requests (these are also checked on the server to be safe) + // TODO: change border color of the specific empty/missing field(s) to red 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." }); + setStatus({ success: false, message: "❗ Please make sure that all fields are filled in." }); // remove focus from the submit button document.activeElement.blur(); @@ -55,7 +55,7 @@ const ContactForm = () => { if (data.success === true) { // handle successful submission // 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. :)" }); + setStatus({ success: true, message: "Thanks! You should hear from me soon. 😊" }); } else { // pass on any error sent by the server throw new Error(data.message); @@ -70,18 +70,16 @@ const ContactForm = () => { if (message === "USER_INVALID_CAPTCHA") { setStatus({ success: false, - action: "Try Again", - message: "Did you complete the CAPTCHA? (If you're human, that is...)", + message: "❗ Did you complete the CAPTCHA? (If you're human, that is...)", }); } else if (message === "USER_MISSING_DATA") { setStatus({ success: false, - action: "Try Again", - message: "Please make sure that all fields are filled in.", + message: "❗ Please make sure that all fields are filled in.", }); } else { // something else went wrong, and it's probably my fault... - setStatus({ success: false, action: "Try Again", message: "Internal server error. Try again later?" }); + setStatus({ success: false, message: "❗ Internal server error. Try again later?" }); } // remove focus from the submit button @@ -95,7 +93,7 @@ const ContactForm = () => {