Complete login, sign up, and member details
This commit is contained in:
4
webclient/.gitignore
vendored
4
webclient/.gitignore
vendored
@@ -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.
@@ -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>
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -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']});
|
||||
}
|
||||
|
Reference in New Issue
Block a user