Add api route and webclient page for account settings

webclient/src/Account.js

@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import './light.css';
+import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
+import { BasicTable, staticUrl, requester } from './utils.js';
+import { LoginForm, SignupForm } from './LoginSignup.js';
+
+function AccountForm(props) {
+	const member = props.user.member;
+	const [input, setInput] = useState({ ...member, set_details: true });
+	const [error, setError] = useState({});
+	const [loading, setLoading] = useState(false);
+	const history = useHistory();
+
+	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
+	const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
+	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});
+			history.push('/');
+		})
+		.catch(err => {
+			setLoading(false);
+			console.log(err);
+			setError(err.data);
+		});
+	};
+
+	const makeProps = (name) => ({
+		name: name,
+		onChange: handleChange,
+		value: input[name],
+		error: error[name],
+	});
+
+	return (
+		<Form onSubmit={handleSubmit}>
+			<Header size='medium'>Member Details</Header>
+
+			<Form.Input
+				label='First Name'
+				{...makeProps('first_name')}
+			/>
+			<Form.Input
+				label='Last Name'
+				{...makeProps('last_name')}
+			/>
+			<Form.Input
+				label='Preferred First Name'
+				{...makeProps('preferred_name')}
+			/>
+
+			<Form.Input
+				label='Phone Number (999) 555-1234'
+				{...makeProps('phone')}
+			/>
+			<Form.Input
+				label='Emergency Contact Name'
+				{...makeProps('emergency_contact_name')}
+			/>
+			<Form.Input
+				label='Emergency Contact Phone'
+				{...makeProps('emergency_contact_phone')}
+			/>
+
+			<Form.Input
+				label='Member Photo'
+				name='photo'
+				type='file'
+				accept='image/*'
+				onChange={handleUpload}
+			/>
+
+			<Form.Button loading={loading} error={error.non_field_errors}>
+				Submit
+			</Form.Button>
+		</Form>
+	);
+};
+
+export function Account(props) {
+	return (
+		<Container>
+			<Header size='large'>Account Settings</Header>
+			<AccountForm {...props} />
+		</Container>
+	);
+};

webclient/src/App.js

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-r
 import './light.css'; import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
 import { requester } from './utils.js';
 import { Home } from './Home.js';
+import { Account } from './Account.js';
 import { Transactions, TransactionDetail } from './Transactions.js';
 import { Cards } from './Cards.js';
 import { Training } from './Training.js';
@@ -39,9 +40,9 @@ function App() {
 	}, [token]);
 
 	function logout() {
-		window.location = '/';
 		setTokenCache('');
 		setUserCache(false);
+		window.location = '/';
 	}
 
 	return (
@@ -65,9 +66,9 @@ function App() {
 					<Dropdown item text='Member' id='ps-menu'>
 						<Dropdown.Menu>
 							<Dropdown.Item
-								content='Profile'
+								content='Account'
 								as={Link}
-								to='/transactions'
+								to='/account'
 							/>
 							<Dropdown.Item
 								content='Transactions'
@@ -84,11 +85,6 @@ function App() {
 								as={Link}
 								to='/cards'
 							/>
-							<Dropdown.Item
-								content='Account'
-								as={Link}
-								to='/cards'
-							/>
 						</Dropdown.Menu>
 					</Dropdown>
 
@@ -130,6 +126,10 @@ function App() {
 			<div className='topPadding'>
 				{user ?
 					<Switch>
+						<Route path='/account'>
+							<Account token={token} user={user} setUserCache={setUserCache} />
+						</Route>
+
 						<Route path='/transactions/:id'>
 							<TransactionDetail user={user} />
 						</Route>

webclient/src/Home.js

@@ -7,21 +7,11 @@ import { LoginForm, SignupForm } from './LoginSignup.js';
 
 function SignupDetailsForm(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 [input, setInput] = useState({ ...member, set_details: true });
 	const [error, setError] = useState({});
 	const [loading, setLoading] = useState(false);
 
-	const handleValues = (e, v) => setInput({
-		...input,
-		[v.name]: v.value
-	});
-
+	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
 	const handleChange = (e) => handleValues(e, e.currentTarget);
 
 	const handleSubmit = (e) => {
@@ -39,36 +29,31 @@ function SignupDetailsForm(props) {
 		});
 	};
 
+	const makeProps = (name) => ({
+		name: name,
+		onChange: handleChange,
+		value: input[name],
+		error: error[name],
+	});
+
 	return (
 		<Form onSubmit={handleSubmit}>
 			<Header size='medium'>Enter Member Details</Header>
 			<Form.Input
-				label='Preferred Name'
-				name='preferred_name'
-				onChange={handleChange}
-				value={input.preferred_name}
-				error={error.preferred_name}
+				label='Preferred First Name'
+				{...makeProps('preferred_name')}
 			/>
 			<Form.Input
 				label='Phone Number (999) 555-1234'
-				name='phone'
-				onChange={handleChange}
-				value={input.phone}
-				error={error.phone}
+				{...makeProps('phone')}
 			/>
 			<Form.Input
 				label='Emergency Contact Name'
-				name='emergency_contact_name'
-				onChange={handleChange}
-				value={input.emergency_contact_name}
-				error={error.emergency_contact_name}
+				{...makeProps('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}
+				{...makeProps('emergency_contact_phone')}
 			/>
 
 			<Form.Button loading={loading} error={error.non_field_errors}>
@@ -107,7 +92,7 @@ function MemberInfo(props) {
 						<Table.Body>
 							<Table.Row>
 								<Table.Cell>Status:</Table.Cell>
-								<Table.Cell>{member.status}</Table.Cell>
+								<Table.Cell>{member.status || 'Unknown'}</Table.Cell>
 							</Table.Row>
 							<Table.Row>
 								<Table.Cell>Expiry:</Table.Cell>
@@ -123,11 +108,11 @@ function MemberInfo(props) {
 				<Table.Body>
 					<Table.Row>
 						<Table.Cell>Application:</Table.Cell>
-						<Table.Cell>{member.application_date || '???'}</Table.Cell>
+						<Table.Cell>{member.application_date || 'Unknown'}</Table.Cell>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Start:</Table.Cell>
-						<Table.Cell>{member.current_start_date || '???'}</Table.Cell>
+						<Table.Cell>{member.current_start_date || 'Unknown'}</Table.Cell>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Vetted:</Table.Cell>
@@ -135,7 +120,7 @@ function MemberInfo(props) {
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Monthly:</Table.Cell>
-						<Table.Cell>${member.monthly_fees || '???'}</Table.Cell>
+						<Table.Cell>${member.monthly_fees || 'Unknown'}</Table.Cell>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Card Number:</Table.Cell>

webclient/src/LoginSignup.js

@@ -9,11 +9,7 @@ export function LoginForm(props) {
 	const [error, setError] = useState({});
 	const [loading, setLoading] = useState(false);
 
-	const handleValues = (e, v) => setInput({
-		...input,
-		[v.name]: v.value
-	});
-
+	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
 	const handleChange = (e) => handleValues(e, e.currentTarget);
 
 	const handleSubmit = (e) => {
@@ -60,11 +56,7 @@ export function SignupForm(props) {
 	const [error, setError] = useState({});
 	const [loading, setLoading] = useState(false);
 
-	const handleValues = (e, v) => setInput({
-		...input,
-		[v.name]: v.value
-	});
-
+	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
 	const handleChange = (e) => handleValues(e, e.currentTarget);
 
 	const genUsername = () => (
@@ -93,26 +85,26 @@ export function SignupForm(props) {
 	return (
 		<Form onSubmit={handleSubmit}>
 			<Header size='medium'>Sign Up</Header>
-			<Form.Group widths='equal'>
-				<Form.Input
-					label='First Name'
-					name='first_name'
-					onChange={handleChange}
-					error={error.first_name}
-				/>
-				<Form.Input
-					label='Last Name'
-					name='last_name'
-					onChange={handleChange}
-					error={error.last_name}
-				/>
-			</Form.Group>
+
+			<Form.Input
+				label='First Name'
+				name='first_name'
+				onChange={handleChange}
+				error={error.first_name}
+			/>
+			<Form.Input
+				label='Last Name'
+				name='last_name'
+				onChange={handleChange}
+				error={error.last_name}
+			/>
 
 			<Form.Input
 				label='Username'
 				name='username'
 				value={genUsername()}
 				error={error.username}
+				readOnly
 			/>
 			<Form.Input
 				label='Email'