Add logo, login, signup form and perform login

webclient/src/App.js

@@ -1,11 +1,142 @@
-import React from 'react';
+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>
-			<header>
-				Hello world
-			</header>
+			<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>
 	);
 }