Complete login, sign up, and member details

This commit is contained in:
2020-01-08 23:43:59 +00:00
parent 5526cf708b
commit d59d24ae65
15 changed files with 382 additions and 40 deletions

View File

@@ -21,3 +21,7 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor
*.swp
*.swo

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@@ -1,25 +1,31 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import './light.css';
import Logo from './logo.svg';
import { Container, Divider, Form, Grid, Header, Menu, Message } from 'semantic-ui-react';
import { Container, Divider, Form, Grid, Header, Icon, Menu, Message } from 'semantic-ui-react';
import { requester } from './utils.js';
function LoginForm() {
const [input, setInput] = useState({})
const [error, setError] = useState({})
function LoginForm(props) {
const [input, setInput] = useState({});
const [error, setError] = useState({});
const [loading, setLoading] = useState(false);
const handleChange = (e) => setInput({
const handleValues = (e, v) => setInput({
...input,
[e.currentTarget.name]: e.currentTarget.value
[v.name]: v.value
});
const handleChange = (e) => handleValues(e, e.currentTarget);
const handleSubmit = (e) => {
requester('/rest-auth/login/', 'POST', input)
setLoading(true);
requester('/rest-auth/login/', 'POST', '', input)
.then(res => {
console.log(res);
setError({});
props.setTokenCache(res.key);
})
.catch(err => {
setLoading(false);
console.log(err);
setError(err.data);
});
@@ -27,6 +33,7 @@ function LoginForm() {
return (
<Form onSubmit={handleSubmit}>
<Header size='medium'>Login to Spaceport</Header>
<Form.Input
label='Username'
name='username'
@@ -41,37 +48,95 @@ function LoginForm() {
onChange={handleChange}
error={error.password}
/>
<Form.Button error={error.non_field_errors}>
<Form.Button loading={loading} error={error.non_field_errors}>
Login
</Form.Button>
</Form>
);
}
function SignupForm() {
const [input, setInput] = useState({})
function SignupForm(props) {
const [input, setInput] = useState({});
const [error, setError] = useState({});
const [loading, setLoading] = useState(false);
const handleChange = (e) => setInput({
const handleValues = (e, v) => setInput({
...input,
[e.currentTarget.name]: e.currentTarget.value
[v.name]: v.value
});
const handleChange = (e) => handleValues(e, e.currentTarget);
const genUsername = () => (
input.first_name && input.last_name ?
(input.first_name + '.' + input.last_name).toLowerCase()
:
''
);
const handleSubmit = (e) => {
console.log(input);
}
setLoading(true);
input.username = genUsername();
requester('/registration/', 'POST', '', input)
.then(res => {
console.log(res);
setError({});
props.setTokenCache(res.key);
})
.catch(err => {
setLoading(false);
console.log(err);
setError(err.data);
});
};
return (
<Form onSubmit={handleSubmit}>
<Header size='medium'>Sign Up</Header>
<Form.Group widths='equal'>
<Form.Input
label='First Name'
name='firstname'
name='first_name'
onChange={handleChange}
error={error.first_name}
/>
<Form.Input
label='Last Name'
name='lastname'
name='last_name'
onChange={handleChange}
error={error.last_name}
/>
</Form.Group>
<Form.Input
label='Username'
name='username'
value={genUsername()}
error={error.username}
/>
<Form.Input
label='Email'
name='email'
onChange={handleChange}
error={error.email}
/>
<Form.Group grouped>
<Form.Radio
label='I have an account on the old portal'
name='existing_member'
value={true}
checked={input.existing_member === true}
onChange={handleValues}
error={!!error.existing_member}
/>
<Form.Radio
label='I am new to Protospace'
name='existing_member'
value={false}
checked={input.existing_member === false}
onChange={handleValues}
error={!!error.existing_member}
/>
</Form.Group>
@@ -80,30 +145,133 @@ function SignupForm() {
name='password1'
type='password'
onChange={handleChange}
error={error.password1}
/>
<Form.Input
label='Confirm Password'
name='password2'
type='password'
onChange={handleChange}
error={error.password2}
/>
<Form.Button loading={loading} error={error.non_field_errors}>
Sign Up
</Form.Button>
</Form>
);
}
function DetailsForm(props) {
const member = props.user.member;
const [input, setInput] = useState({
preferred_name: member.preferred_name,
phone: member.phone,
emergency_contact_name: member.emergency_contact_name,
emergency_contact_phone: member.emergency_contact_phone,
set_details: true,
});
const [error, setError] = useState({});
const [loading, setLoading] = useState(false);
const handleValues = (e, v) => setInput({
...input,
[v.name]: v.value
});
const handleChange = (e) => handleValues(e, e.currentTarget);
const handleSubmit = (e) => {
setLoading(true);
requester('/members/' + member.id + '/', 'PATCH', props.token, input)
.then(res => {
console.log(res);
setError({});
props.setUserCache({...props.user, member: res});
})
.catch(err => {
setLoading(false);
console.log(err);
setError(err.data);
});
};
return (
<Form onSubmit={handleSubmit}>
<Header size='medium'>Enter Details</Header>
<Form.Input
label='Preferred Name'
name='preferred_name'
onChange={handleChange}
value={input.preferred_name}
error={error.preferred_name}
/>
<Form.Input
label='Email'
name='email'
label='Phone Number (999) 555-1234'
name='phone'
onChange={handleChange}
value={input.phone}
error={error.phone}
/>
<Form.Button>Sign Up</Form.Button>
<Form.Input
label='Emergency Contact Name'
name='emergency_contact_name'
onChange={handleChange}
value={input.emergency_contact_name}
error={error.emergency_contact_name}
/>
<Form.Input
label='Emergency Contact Phone'
name='emergency_contact_phone'
onChange={handleChange}
value={input.emergency_contact_phone}
error={error.emergency_contact_phone}
/>
<Form.Button loading={loading} error={error.non_field_errors}>
Submit
</Form.Button>
</Form>
);
}
function App() {
const [token, setToken] = useState(localStorage.getItem('token', ''));
const [user, setUser] = useState(JSON.parse(localStorage.getItem('user', 'false')));
const setTokenCache = (x) => {
setToken(x);
localStorage.setItem('token', x);
}
const setUserCache = (x) => {
setUser(x);
localStorage.setItem('user', JSON.stringify(x));
}
useEffect(() => {
requester('/me/', 'GET', token)
.then(res => {
console.log(res);
setUserCache(res);
})
.catch(err => {
console.log(err);
setUser(false);
});
}, [token]);
const logout = () => {
setTokenCache('');
setUserCache(false);
}
return (
<div>
<Container>
<header className='header'>
<div className='header'>
<img src={Logo} className='logo' />
</header>
</div>
</Container>
<Menu>
@@ -117,20 +285,33 @@ function App() {
<Menu.Item
content='Contact'
/>
{user && <Menu.Menu position='right'>
<Menu.Item
content='Logout'
onClick={logout}
/>
</Menu.Menu>}
</Container>
</Menu>
<Container>
<Grid stackable padded columns={2}>
<Grid.Column>
<Header size='medium'>Login to Spaceport</Header>
{user ?
user.member.set_details ?
<p>yay welcome {user.member.first_name}</p>
:
<DetailsForm token={token} user={user} setUserCache={setUserCache} />
:
<div>
<LoginForm setTokenCache={setTokenCache} />
<LoginForm />
<Divider section horizontal>Or</Divider>
<Divider section horizontal>Or</Divider>
<Header size='medium'>Sign Up</Header>
<SignupForm />
<SignupForm setTokenCache={setTokenCache} />
</div>
}
</Grid.Column>
<Grid.Column>
<p>two</p>

View File

@@ -1,5 +1,11 @@
.header {
padding-top: 1.5rem;
margin-bottom: 1.5rem;
}
.header .logo {
max-width: 100%;
height: 2rem;
display: block;
margin: 1.5rem auto;
margin: auto;
}

View File

@@ -8,23 +8,28 @@ if (process.env.NODE_ENV !== 'production') {
apiUrl = 'https://api.' + window.location.hostname;
}
export const requester = (route, method, data) => {
var options;
export const requester = (route, method, token, data) => {
let options = {headers: {}};
if (token) {
options.headers.Authorization = 'Token ' + token;
}
if (method == 'GET') {
options = {};
} else if (method == 'POST') {
// pass
} else if (['POST', 'PUT', 'PATCH'].includes(method)) {
const formData = new FormData();
Object.keys(data).forEach(key =>
formData.append(key, data[key])
);
options = {
method: 'POST',
...options,
method: method,
body: formData,
};
} else {
return 'Method not supported';
throw new Error('Method not supported');
}
const customError = (data) => {
@@ -44,11 +49,13 @@ export const requester = (route, method, data) => {
const code = error.data.status;
if (code == 413) {
throw customError({non_field_errors: ['File too big']});
} else if (code == 400) {
} else if (code >= 400 && code < 500) {
return error.data.json()
.then(result => {
throw customError(result);
});
} else if (code >= 500 && code < 600) {
throw customError({non_field_errors: ['Server Error']});
} else {
throw customError({non_field_errors: ['Network Error']});
}