registration and login

frontend/src/api/index.ts

@@ -7,10 +7,10 @@ import { JWT, getJWT, setHeaders, setJWT, wipeJWT } from '../utils/jwt'
 const dev = process.env.NODE_ENV === 'development'
 
 export const logIn = async (username: string, password: string) => {
-  if (dev) return mockUser
+  // if (dev) return mockUser
 
   try {
-    const { data: jwt } = await axios.post<JWT>(`/api/login`, {
+    const { data: jwt } = await axios.post<JWT>(`/api/dj-rest-auth/login/`, {
       username,
       password,
     })

frontend/src/app/CoreLayout.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Layout } from 'antd'
 import { useUserContext } from '../contexts/UserContext'
 import { Login } from './pages/Login'
@@ -14,6 +13,7 @@ export const CoreLayout = () => {
   const routes: NavRoute[] = [
     { exact: true, path: '/', label: 'Dashboard', component: Dashboard },
     { path: '/profile', label: 'Profile', component: Profile },
+    { path: '/login', label: 'Login', component: Login },
     { path: '/new/user', label: 'New User', component: NewUser },
   ]
 

frontend/src/app/forms/NewUser.tsx

@@ -2,8 +2,6 @@ import { Button, Form, Input, Layout, message } from 'antd'
 import axios from 'axios'
 import { User } from '../../types'
 
-axios.defaults.baseURL = 'http://localhost:8080/'
-
 type NewUserForm = Omit<User, 'id'> & {
   password1: string
   password2: string
@@ -19,7 +17,7 @@ export const NewUser = () => {
       return
     }
 
-    axios.post(`/dj-rest-auth/registration`, user)
+    axios.post(`/dj-rest-auth/registration/`, user)
   }
 
   console.log('ASDFUASDJF')
@@ -28,14 +26,14 @@ export const NewUser = () => {
     <Layout>
       <Layout.Content>
         <Form form={form} onFinish={handleFinish}>
-          <Form.Item label="username" name="name">
+          <Form.Item label="username" name="username">
             <Input></Input>
           </Form.Item>
           <Form.Item label="email" name="email">
-            <Input></Input>
+            <Input type="email"></Input>
           </Form.Item>
           <Form.Item label="password" name="password1">
-            <Input></Input>
+            <Input minLength={8}></Input>
           </Form.Item>
           <Form.Item label="confirm" name="password2">
             <Input></Input>

frontend/src/app/pages/Login.tsx

@@ -1,31 +1,32 @@
-import { FormEvent, useState } from 'react'
+import { Button, Form, Input } from 'antd'
+import { useForm } from 'antd/lib/form/Form'
 import { useUserContext } from '../../contexts/UserContext'
 
+type Credentials = {
+  username: string
+  password: string
+}
+
 export const Login = () => {
   const { handleLogin } = useUserContext()
 
-  const [username, setUsername] = useState('')
-  const [password, setPassword] = useState('')
-
-  const handleSubmit = (e: FormEvent) => {
-    e.preventDefault()
+  const [form] = useForm<Credentials>()
 
+  const handleSubmit = ({ username, password }: Credentials) => {
     handleLogin(username, password)
   }
 
   return (
-    <form onSubmit={handleSubmit}>
-      <input
-        onChange={(e) => setUsername(e.target.value)}
-        type="text"
-        value={username}
-      />
-      <input
-        onChange={(e) => setPassword(e.target.value)}
-        type="text"
-        value={password}
-      />
-      <button type="submit">Login!</button>
-    </form>
+    <Form form={form} onFinish={handleSubmit}>
+      <Form.Item label="username" name="username">
+        <Input />
+      </Form.Item>
+      <Form.Item label="password" name="password">
+        <Input type="password" />
+      </Form.Item>
+      <Button type="primary" htmlType="submit">
+        Login!
+      </Button>
+    </Form>
   )
 }

frontend/src/contexts/UserContext.tsx

@@ -12,7 +12,6 @@ import { useHistory } from 'react-router'
 
 import { User } from '../types'
 import { getLoggedInUser, logIn, logOut } from '../api'
-import axios from 'axios'
 
 type Props = {
   children: React.ReactNode