contact form cleanup

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 = () => {
       <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">
+      <div id="contact-form-md-info">
         Basic{" "}
         <a
           href="https://commonmark.org/help/"
@@ -110,27 +108,29 @@ const ContactForm = () => {
           links
         </a>
         ](https://jarv.is), and <code>`code`</code>.
-      </span>
+      </div>
 
-      <h-captcha id="contact-form-captcha" site-key={process.env.HCAPTCHA_SITE_KEY} size="normal" tabindex="0" />
+      <div id="contact-form-captcha">
+        <h-captcha site-key={process.env.HCAPTCHA_SITE_KEY} size="normal" />
+      </div>
 
       <div id="contact-form-action-row">
         <button
           id="contact-form-btn-submit"
-          title={status.action}
-          aria-label={status.action}
+          title="Send Message"
+          aria-label="Send Message"
           disabled={sending}
           style={{ display: status.success ? "none" : null }}
-        >
-          {sending ? "Sending..." : status.action}
-        </button>
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: parseEmoji(sending ? "Sending..." : "📤 Send") }}
+        />
 
         <span
           class="contact-form-result"
           id={status.success ? "contact-form-result-success" : "contact-form-result-error"}
-        >
-          {status.message}
-        </span>
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: parseEmoji(status.message) }}
+        />
       </div>
     </form>
   );