web: disable signup button while submitting

This commit is contained in:
Jeffrey Morgan 2023-07-12 17:32:27 -07:00
parent e6eee0732c
commit 787d965331

View file

@ -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&apos;re signed up for updates</p>} {success && <p className='text-center text-sm'>You&apos;re signed up for updates</p>}
</form> </form>