You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
144 lines
2.6 KiB
144 lines
2.6 KiB
import React, { useState } from 'react'; |
|
import './light.css'; |
|
import Logo from './logo.svg'; |
|
import { Container, Divider, Form, Grid, Header, Menu, Message } from 'semantic-ui-react'; |
|
import { requester } from './utils.js'; |
|
|
|
function LoginForm() { |
|
const [input, setInput] = useState({}) |
|
const [error, setError] = useState({}) |
|
|
|
const handleChange = (e) => setInput({ |
|
...input, |
|
[e.currentTarget.name]: e.currentTarget.value |
|
}); |
|
|
|
const handleSubmit = (e) => { |
|
requester('/rest-auth/login/', 'POST', input) |
|
.then(res => { |
|
console.log(res); |
|
setError({}); |
|
}) |
|
.catch(err => { |
|
console.log(err); |
|
setError(err.data); |
|
}); |
|
}; |
|
|
|
return ( |
|
<Form onSubmit={handleSubmit}> |
|
<Form.Input |
|
label='Username' |
|
name='username' |
|
placeholder='first.last' |
|
onChange={handleChange} |
|
error={error.username} |
|
/> |
|
<Form.Input |
|
label='Password' |
|
name='password' |
|
type='password' |
|
onChange={handleChange} |
|
error={error.password} |
|
/> |
|
<Form.Button error={error.non_field_errors}> |
|
Login |
|
</Form.Button> |
|
</Form> |
|
); |
|
} |
|
|
|
function SignupForm() { |
|
const [input, setInput] = useState({}) |
|
|
|
const handleChange = (e) => setInput({ |
|
...input, |
|
[e.currentTarget.name]: e.currentTarget.value |
|
}); |
|
|
|
const handleSubmit = (e) => { |
|
console.log(input); |
|
} |
|
|
|
return ( |
|
<Form onSubmit={handleSubmit}> |
|
<Form.Group widths='equal'> |
|
<Form.Input |
|
label='First Name' |
|
name='firstname' |
|
onChange={handleChange} |
|
/> |
|
<Form.Input |
|
label='Last Name' |
|
name='lastname' |
|
onChange={handleChange} |
|
/> |
|
</Form.Group> |
|
|
|
<Form.Input |
|
label='Password' |
|
name='password1' |
|
type='password' |
|
onChange={handleChange} |
|
/> |
|
<Form.Input |
|
label='Confirm Password' |
|
name='password2' |
|
type='password' |
|
onChange={handleChange} |
|
/> |
|
<Form.Input |
|
label='Email' |
|
name='email' |
|
onChange={handleChange} |
|
/> |
|
<Form.Button>Sign Up</Form.Button> |
|
</Form> |
|
); |
|
} |
|
|
|
function App() { |
|
return ( |
|
<div> |
|
<Container> |
|
<header className='header'> |
|
<img src={Logo} className='logo' /> |
|
</header> |
|
</Container> |
|
|
|
<Menu> |
|
<Container> |
|
<Menu.Item |
|
content='Home' |
|
/> |
|
<Menu.Item |
|
content='About' |
|
/> |
|
<Menu.Item |
|
content='Contact' |
|
/> |
|
</Container> |
|
</Menu> |
|
|
|
<Container> |
|
<Grid stackable padded columns={2}> |
|
<Grid.Column> |
|
<Header size='medium'>Login to Spaceport</Header> |
|
|
|
<LoginForm /> |
|
|
|
<Divider section horizontal>Or</Divider> |
|
|
|
<Header size='medium'>Sign Up</Header> |
|
<SignupForm /> |
|
</Grid.Column> |
|
<Grid.Column> |
|
<p>two</p> |
|
</Grid.Column> |
|
</Grid> |
|
</Container> |
|
</div> |
|
); |
|
} |
|
|
|
export default App;
|
|
|