You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.3 KiB
JavaScript
37 lines
1.3 KiB
JavaScript
5 years ago
|
import React from 'react'
|
||
|
|
import Link from 'next/link'
|
||
|
|
import isEmail from 'validator/lib/isEmail'
|
||
|
|
import axios from 'axios'
|
||
|
|
|
||
|
|
import {FormController, Input, Button} from '~/components/form'
|
||
|
|
import useErrorReducer from '../hooks/errorReducer'
|
||
|
|
|
||
|
|
export default function Register(){
|
||
|
|
const [errors, dispatch] = useErrorReducer()
|
||
|
|
|
||
|
|
const submit = async (values)=>{
|
||
|
|
try {
|
||
|
|
const {data} = await axios.post(`/api/users`, values)
|
||
|
|
console.log(data)
|
||
|
|
} catch (err) {
|
||
|
|
if(!err.response || err.response.status !== 422) throw err;
|
||
|
|
|
||
|
|
dispatch({
|
||
|
|
type: 'set_errors',
|
||
|
|
errors: err.response.data.errors
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<FormController errors={errors} errorDispatch={dispatch} onSubmit={submit}>
|
||
|
|
<h1>Register</h1>
|
||
|
|
<Input label="Email" type="text" name="email" validate={value=>isEmail(value)} hint="Enter a valid email address" />
|
||
|
|
<Input label="Password" type="password" name="password" validate={value=>(value.length >= 8)} hint="Password must be at least 8 characters long" />
|
||
|
|
<Input label="Repeat password" type="password" name="password2" validate={(value, fields)=>(value === fields.password.value)} hint="Passwords must match" />
|
||
|
|
<Button type="submit">Register</Button>
|
||
|
|
<p>Already have an account? <Link href="/login"><a>Login here</a></Link>.</p>
|
||
|
|
</FormController>
|
||
|
|
)
|
||
|
|
}
|