|
|
|
'use client'
|
|
|
|
import { useState, useRef, FormEvent } from 'react'
|
|
|
|
import InfoBar from "~/components/InfoBar/"
|
|
|
|
|
|
|
|
import styles from '~/styles/form.module.css'
|
|
|
|
|
|
|
|
const submitUrl = 'https://contact.tempest.dev/api/contact/me'
|
|
|
|
|
|
|
|
export default function Contact() {
|
|
|
|
const [submitting, setSubmitting] = useState(false)
|
|
|
|
const [status, setStatus] = useState('')
|
|
|
|
|
|
|
|
const nameRef = useRef<HTMLInputElement>()
|
|
|
|
const emailRef = useRef<HTMLInputElement>()
|
|
|
|
const messageRef = useRef<HTMLTextAreaElement>()
|
|
|
|
|
|
|
|
const submit = async (ev: FormEvent<HTMLFormElement>) => {
|
|
|
|
ev.preventDefault()
|
|
|
|
|
|
|
|
setStatus('')
|
|
|
|
|
|
|
|
const name = nameRef.current.value
|
|
|
|
const email = emailRef.current.value
|
|
|
|
const message = 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>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|