/
signup.tsx
69 lines (62 loc) · 1.58 KB
/
signup.tsx
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
import { useState } from 'react'
import { useRouter } from 'next/router'
import Link from 'next/link'
import { gql, useMutation } from '@apollo/client'
import { getErrorMessage } from '../lib/form'
import Field from '../components/field'
const SignUpMutation = gql`
mutation SignUpMutation($email: String!, $password: String!) {
signUp(input: { email: $email, password: $password }) {
user {
id
email
}
}
}
`
function SignUp() {
const [signUp] = useMutation(SignUpMutation)
const [errorMsg, setErrorMsg] = useState()
const router = useRouter()
async function handleSubmit(event) {
event.preventDefault()
const emailElement = event.currentTarget.elements.email
const passwordElement = event.currentTarget.elements.password
try {
await signUp({
variables: {
email: emailElement.value,
password: passwordElement.value,
},
})
router.push('/signin')
} catch (error) {
setErrorMsg(getErrorMessage(error))
}
}
return (
<>
<h1>Sign Up</h1>
<form onSubmit={handleSubmit}>
{errorMsg && <p>{errorMsg}</p>}
<Field
name="email"
type="email"
autoComplete="email"
required
label="Email"
/>
<Field
name="password"
type="password"
autoComplete="password"
required
label="Password"
/>
<button type="submit">Sign up</button> or{' '}
<Link href="/signin">Sign in</Link>
</form>
</>
)
}
export default SignUp