|
@@ -4,6 +4,7 @@ import { useState } from 'react'
|
|
|
|
|
|
export default function Signup() {
|
|
export default function Signup() {
|
|
const [email, setEmail] = useState('')
|
|
const [email, setEmail] = useState('')
|
|
|
|
+ const [submitting, setSubmitting] = useState(false)
|
|
const [success, setSuccess] = useState(false)
|
|
const [success, setSuccess] = useState(false)
|
|
|
|
|
|
return (
|
|
return (
|
|
@@ -11,6 +12,8 @@ export default function Signup() {
|
|
onSubmit={async e => {
|
|
onSubmit={async e => {
|
|
e.preventDefault()
|
|
e.preventDefault()
|
|
|
|
|
|
|
|
+ setSubmitting(true)
|
|
|
|
+
|
|
await fetch('/api/signup', {
|
|
await fetch('/api/signup', {
|
|
method: 'POST',
|
|
method: 'POST',
|
|
headers: {
|
|
headers: {
|
|
@@ -19,6 +22,7 @@ export default function Signup() {
|
|
body: JSON.stringify({ email }),
|
|
body: JSON.stringify({ email }),
|
|
})
|
|
})
|
|
|
|
|
|
|
|
+ setSubmitting(false)
|
|
setSuccess(true)
|
|
setSuccess(true)
|
|
setEmail('')
|
|
setEmail('')
|
|
|
|
|
|
@@ -38,7 +42,8 @@ export default function Signup() {
|
|
<input
|
|
<input
|
|
type='submit'
|
|
type='submit'
|
|
value='Get updates'
|
|
value='Get updates'
|
|
- className='bg-black text-white rounded-lg px-4 py-2 focus:outline-none cursor-pointer'
|
|
|
|
|
|
+ disabled={submitting}
|
|
|
|
+ className='bg-black text-white disabled:text-neutral-200 disabled:bg-neutral-700 rounded-lg px-4 py-2 focus:outline-none cursor-pointer'
|
|
/>
|
|
/>
|
|
{success && <p className='text-center text-sm'>You're signed up for updates</p>}
|
|
{success && <p className='text-center text-sm'>You're signed up for updates</p>}
|
|
</form>
|
|
</form>
|