/
signup.js
76 lines (68 loc) · 1.99 KB
/
signup.js
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
import { useState, useEffect } from 'react'
import Router from 'next/router'
import Link from 'next/link'
import { useUser } from '../lib/hooks'
export default function SignupPage() {
const [user, { mutate }] = useUser()
const [errorMsg, setErrorMsg] = useState('')
async function onSubmit(e) {
e.preventDefault()
const body = {
username: e.currentTarget.username.value,
password: e.currentTarget.password.value,
name: e.currentTarget.name.value,
}
if (body.password !== e.currentTarget.rpassword.value) {
setErrorMsg(`The passwords don't match`)
return
}
const res = await fetch('/api/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
})
if (res.status === 201) {
const userObj = await res.json()
// set user to useSWR state
mutate(userObj)
} else {
setErrorMsg(await res.text())
}
}
useEffect(() => {
// redirect to home if user is authenticated
if (user) Router.push('/')
}, [user])
return (
<>
<h1>Sign up to Example</h1>
{errorMsg && <p className="error">{errorMsg}</p>}
<div className="form-container">
<form onSubmit={onSubmit}>
<label>
<span>Username</span>
<input type="text" name="username" required />
</label>
<label>
<span>Password</span>
<input type="password" name="password" required />
</label>
<label>
<span>Repeat password</span>
<input type="password" name="rpassword" required />
</label>
<label>
<span>Name</span>
<input type="text" name="name" required />
</label>
<div className="submit">
<button type="submit">Sign up</button>
<Link href="/login">
<a>I already have an account</a>
</Link>
</div>
</form>
</div>
</>
)
}