🐢

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import { BrowserRouter } from 'react-router-dom'
 import { UserContextProvider } from './contexts/UserContext'
-import { CoreLayout } from './layout/CoreLayout'
+import { CoreLayout } from './app/CoreLayout'
 import './scss/app.scss'
 
 const App = () => {

frontend/src/app/CoreLayout.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import { Layout } from 'antd'
 import { useUserContext } from '../contexts/UserContext'
-import { Login } from '../pages/Login'
+import { Login } from './pages/Login'
 import { Route, Switch } from 'react-router'
-import { Dashboard } from '../pages/Dashboard'
-import { NavRoute, AppHeader } from './AppHeader'
-import { Profile } from '../pages/Profile'
+import { Dashboard } from './pages/Dashboard'
+import { NavRoute, AppHeader } from './layout/AppHeader'
+import { Profile } from './pages/Profile'
 
 export const CoreLayout = () => {
   const { user } = useUserContext()

frontend/src/app/forms/NewUser.tsx

@@ -0,0 +1,36 @@
+import { Button, Form, Input, message } from 'antd'
+import { User } from '../../types'
+
+type NewUserForm = Omit<User, 'id'> & {
+  password1: string
+  password2: string
+}
+
+export const NewUser = () => {
+  const [form] = Form.useForm<NewUserForm>()
+
+  const handleFinish = (user: NewUserForm) => {
+    if (user.password1 !== user.password2) {
+      message.error('passwords do not match')
+      return
+    }
+  }
+
+  return (
+    <Form form={form} onFinish={handleFinish}>
+      <Form.Item label="username" name="name">
+        <Input></Input>
+      </Form.Item>
+      <Form.Item label="email" name="email">
+        <Input></Input>
+      </Form.Item>
+      <Form.Item label="password" name="password1">
+        <Input></Input>
+      </Form.Item>
+      <Form.Item label="confirm" name="password2">
+        <Input></Input>
+      </Form.Item>
+      <Button htmlType="submit">Create</Button>
+    </Form>
+  )
+}

frontend/src/app/layout/AppHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Avatar, Button, Typography } from 'antd'
 import { Header } from 'antd/lib/layout/layout'
-import { User } from '../types'
+import { User } from '../../types'
 import { Link, useHistory } from 'react-router-dom'
 
 export type NavRoute = {

frontend/src/app/pages/Login.tsx

@@ -1,5 +1,5 @@
 import { FormEvent, useState } from 'react'
-import { useUserContext } from '../contexts/UserContext'
+import { useUserContext } from '../../contexts/UserContext'
 
 export const Login = () => {
   const { handleLogin } = useUserContext()

frontend/src/contexts/UserContext.tsx

@@ -12,6 +12,7 @@ import { useHistory } from 'react-router'
 
 import { User } from '../types'
 import { getLoggedInUser, logIn, logOut } from '../api'
+import axios from 'axios'
 
 type Props = {
   children: React.ReactNode
@@ -34,6 +35,10 @@ export const UserContextProvider = ({ children }: Props) => {
   useEffect(() => {
     const login = async () => {
       try {
+        const res = axios.post('/dj-rest-auth/login', {
+          email: 'blah',
+          password: 'blah',
+        })
         const user = await getLoggedInUser()
         if (!user) throw new Error()
         setUser(user)

frontend/src/pages/forms/NewUser.tsx

@@ -1,14 +0,0 @@
-import { Form, Input, Layout } from 'antd'
-import { User } from '../../types'
-
-export const NewUser = () => {
-  const [form] = Form.useForm<User>()
-
-  return (
-    <Form form={form}>
-      <Form.Item label="username" name="name">
-        <Input></Input>
-      </Form.Item>
-    </Form>
-  )
-}

frontend/src/types/index.ts

@@ -1,4 +1,5 @@
 export type User = {
-  id: string;
-  username: string;
-};
+  id: string
+  username: string
+  email: string
+}