implemented contact form

2 files changed, 125 insertions, 0 deletions

diff --git a/app/contact/page.tsx b/app/contact/page.tsx
new file mode 100644
index 0000000..1ed2eb8
--- /dev/null
+++ b/app/contact/page.tsx
@@ -0,0 +1,91 @@
+'use client'
+import { useState, useRef, FormEvent } from 'react'
+import InfoBar from "~/components/InfoBar/"
+
+import styles from '~/styles/form.module.css'
+
+const submitUrl = 'https://kae.tempest.dev/api/contact/me'
+
+export default function Contact() {
+  const [submitting, setSubmitting] = useState(false)
+  const [status, setStatus] = useState('')
+
+  const nameRef = useRef()
+  const emailRef = useRef()
+  const messageRef = useRef()
+
+  const submit = async (ev: FormEvent<HTMLFormElement>) => {
+    ev.preventDefault()
+
+    setStatus('')
+
+    const name: string = nameRef.current?.value ?? ''
+    const email: string = emailRef.current?.value ?? ''
+    const message: string = messageRef.current?.value ?? ''
+
+    if (!name) setStatus(s => s + ' Name required.')
+    if (!email) setStatus(s => s + ' Email required.')
+    if (!message) setStatus(s => s + ' Message required.')
+
+    if (!name || !email || !message)
+      return
+
+    setSubmitting(true)
+
+    try {
+
+      await fetch(submitUrl, {
+        method: 'post',
+        headers: {
+          'content-type': 'application/json'
+        },
+        body: JSON.stringify({
+          name, email, message
+        })
+      })
+
+      setStatus('Message sent successfully')
+    } catch {
+      setStatus('Error submitting message, please try again')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <>
+      <h1 className="pageTitle">
+        Contact
+      </h1>
+      <main className="mainColumn">
+        <InfoBar>
+          Be nice.  Please don't make us regret putting this here
+        </InfoBar>
+        <form className={styles.form} onSubmit={submit}>
+          <label htmlFor="name">Name:</label>
+          <input disabled={submitting} name="name" ref={nameRef} />
+
+          <label htmlFor="email">Email:</label>
+          <input disabled={submitting} name="email" ref={emailRef} />
+
+          <label htmlFor="message">Message:</label>
+          <textarea disabled={submitting} name="message" ref={messageRef} />
+
+          <button disabled={submitting} type="submit">Submit</button>
+          {status && <span className={styles.status}>{status}</span>}
+          {/*<FormController
+          url="https://kae.tempest.dev/api/contact/tempest"
+          afterSubmit={() => setStatus('Message sent successfully!')}
+          onError={() => setStatus('Error submitting message, please try again.')}
+        >
+          <Input name="name" validate={v => !!v} />
+          <Input name="email" validate={v => !!v && v.includes('@')} />
+          <TextArea name="message" validate={v => !!v && v.length < 1000} />
+          <Button onClick={() => setStatus(null)} type="submit">submit</Button>
+          {status && <p>{status}</p>}
+        </FormController>*/}
+        </form>
+      </main>
+    </>
+  )
+}
diff --git a/styles/form.module.css b/styles/form.module.css
new file mode 100644
index 0000000..56ed09a
--- /dev/null
+++ b/styles/form.module.css
@@ -0,0 +1,34 @@
+.form {
+  display: grid;
+  grid-template-columns: fit-content(30px) 1fr;
+  grid-row-gap: var(--text-padding);
+  grid-column-gap: var(--text-padding);
+}
+
+.form textarea {
+  min-height: 160px;
+  resize: none;
+}
+
+.form button[type="submit"],
+.form .status{
+  grid-column: 1 / -1;
+  text-align: center;
+}
+
+.form input,
+.form textarea,
+.form button[type="submit"] {
+  color: white;
+  background: var(--page-background);
+  border: none;
+  box-sizing: border-box;
+  padding: 4px;
+  height: 32px;
+  width: 100%;
+  box-shadow: none;
+}
+
+.form button[type="submit"] {
+  cursor: pointer;
+}