blob: 1ed2eb8fc06bced3aabe29fc8d7ac88fb0405d84 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
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>
</>
)
}
|
