cash-stacks/frontend/src/pages/NewUser/index.tsx
2021-07-15 23:06:36 -06:00

49 lines
1.3 KiB
TypeScript

import { Input, message } from 'antd'
import { useForm } from 'antd/lib/form/Form'
import FormItem from 'antd/lib/form/FormItem'
import axios from 'axios'
import { useAppContext } from '../../contexts/AppContext'
import { Button } from '../../elements/Button'
import { Form } from '../../elements/Form'
type NewUserForm = {
username: string
email: string
password1: string
password2: string
}
export const NewUser = () => {
const { baseURL } = useAppContext()
const [form] = useForm<NewUserForm>()
const handleFinish = (user: NewUserForm) => {
if (user.password1 !== user.password2) {
message.error('passwords do not match')
return
}
axios.post(`${baseURL}/dj-rest-auth/registration/`, user)
}
return (
<Form form={form} onFinish={handleFinish}>
<FormItem label="username" name="username">
<Input></Input>
</FormItem>
{/* <FormItem label="email" name="email">
<Input type="email"></Input>
</FormItem> */}
<FormItem label="password" name="password1">
<Input minLength={6}></Input>
</FormItem>
<FormItem label="confirm" name="password2">
<Input></Input>
</FormItem>
<Button type="primary" htmlType="submit">
Create
</Button>
</Form>
)
}