registration page and such

frontend/src/pages/NewUser/index.tsx

@@ -1,5 +1,9 @@
-import { Button, Form, Input, Layout, message } from 'antd'
-import axios from 'axios'
+import { Input, message } from 'antd'
+import { useForm } from 'antd/lib/form/Form'
+import FormItem from 'antd/lib/form/FormItem'
+import { useAppContext } from '../../contexts/AppContext'
+import { Button } from '../../elements/Button'
+import { Form } from '../../elements/Form'
 import { User } from '../../types'
 
 type NewUserForm = Omit<User, 'id'> & {
@@ -8,7 +12,8 @@ type NewUserForm = Omit<User, 'id'> & {
 }
 
 export const NewUser = () => {
-  const [form] = Form.useForm<NewUserForm>()
+  const api = useAppContext()
+  const [form] = useForm<NewUserForm>()
 
   const handleFinish = (user: NewUserForm) => {
     if (user.password1 !== user.password2) {
@@ -16,23 +21,23 @@ export const NewUser = () => {
       return
     }
 
-    axios.post(`/dj-rest-auth/registration/`, user)
+    api.post(`/dj-rest-auth/registration`, user)
   }
 
   return (
     <Form form={form} onFinish={handleFinish}>
-      <Form.Item label="username" name="username">
+      <FormItem label="username" name="username">
         <Input></Input>
-      </Form.Item>
-      <Form.Item label="email" name="email">
+      </FormItem>
+      <FormItem label="email" name="email">
         <Input type="email"></Input>
-      </Form.Item>
-      <Form.Item label="password" name="password1">
+      </FormItem>
+      <FormItem label="password" name="password1">
         <Input minLength={8}></Input>
-      </Form.Item>
-      <Form.Item label="confirm" name="password2">
+      </FormItem>
+      <FormItem label="confirm" name="password2">
         <Input></Input>
-      </Form.Item>
+      </FormItem>
       <Button type="primary" htmlType="submit">
         Create
       </Button>