Implement authentication

src/Components/App.js

@@ -1,7 +1,9 @@
-import React from 'react';
-import { Container, Menu } from 'semantic-ui-react';
+import React, { useState } from 'react';
+import { Container, Menu, Header, Message, Icon } from 'semantic-ui-react';
 import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom';
 
+import Login from './Login';
+
 import Dashboard from './Dashboard';
 import Account from './Account';
 import PackageScanner from './PackageScanner';
@@ -15,13 +17,50 @@ import Warehouses from './Operators/Warehouses';
 import AllRoutes from './Operators/Routes';
 
 function App() {
+	const [ user, setUser ] = useState(null);
+
+	function logout() {
+		sessionStorage.removeItem('token');
+		localStorage.removeItem('token');
+		setUser(null);
+
+		//
+	}
+
+	if (!user) {
+		return (
+			<Router>
+				<Menu>
+					<Container>
+						<Menu.Item as={Link} header to="/">Deliverly</Menu.Item>
+					</Container>
+				</Menu>
+
+				<Container>
+					<Header as="h1">Welcome to Deliverly</Header>
+					Deliverly is a delivery platform...
+
+					<Message icon as="a" href="/track">
+						<Icon name="box" />
+						<Message.Content>
+							<Message.Header>Tracking a Package?</Message.Header>
+							If you are trying to track a package, please click here.
+						</Message.Content>
+					</Message>
+
+					<Login setUser={setUser} />
+				</Container>
+			</Router>
+		)
+	}
+
 	return (
 		<Router>
 			<Menu>
 				<Container>
 					<Menu.Item as={Link} header to="/">Deliverly</Menu.Item>
 
-					<Menu.Item position='right'>Logout</Menu.Item>
+					<Menu.Item position='right' onClick={logout}>Logout</Menu.Item>
 				</Container>
 			</Menu>
 

src/Components/Dashboard.js

@@ -6,7 +6,7 @@ import Map from './Map';
 function Dashboard() {
 	return (
 		<Container>
-			<Header as="h2">Welcome to Deliverly, user!</Header>
+			<Header as="h1">Welcome to Deliverly, user!</Header>
 
 			<Card.Group itemsPerRow={4} doubling>
 				<Card link as={Link} to="/routes">

src/Components/Login.js

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import { Segment, Header, Form, Input, Message, Button } from 'semantic-ui-react';
+
+function Login(props) {
+	const { setUser } = props;
+	const [ error, setError ] = useState(null);
+	const [ loading, setLoading ] = useState(false);
+	const [ email, setEmail ] = useState('[email protected]');
+	const [ password, setPassword ] = useState('password');
+	const [ remember, setRemember ] = useState(false);
+
+	useEffect(() => {
+		let token = sessionStorage.getItem('token');
+		if (!token) token = localStorage.getItem('token');
+
+		if (token) {
+			setLoading(true);
+
+			//Login
+			setUser({
+				'name': 'Bob',
+				'token': token,
+				'operator': false
+			});
+
+			setLoading(false);
+		}
+
+	}, []);
+
+	function attemptLogin() {
+		let token = 'abc';
+
+		setUser({
+			'name': 'Bob',
+			'token': token,
+			'operator': false
+		});
+
+		sessionStorage.setItem('token', token);
+		if (remember) localStorage.setItem('token', token);
+	}
+
+	return (
+		<Segment style={{marginTop: '3rem', padding: '2rem'}}>
+			<Header as="h2">Driver Login</Header>
+			<Form onSubmit={attemptLogin} loading={loading}>
+				{ error && <Message negative>{error}</Message> }
+
+				<Form.Field required>
+					<label>Email</label>
+					<Input type="email" placeholder="Email" value={email} required onChange={(e, state) => setEmail(state.value)} />
+				</Form.Field>
+				<Form.Field required>
+					<label>Password</label>
+					<Input type="password" placeholder="Password" value={password} required onChange={(e, state) => setPassword(state.value)} />
+				</Form.Field>
+
+				<Form.Checkbox inline label='Remember me' checked={remember} onChange={(e, state) => setRemember(state.checked)} />
+				<Button type="submit">Login</Button>
+			</Form>
+		</Segment>
+	);
+}
+
+export default Login;

src/Components/Map.js

@@ -2,9 +2,6 @@ import React, { createRef, useEffect, useState } from 'react';
 import { Segment, ItemDescription, ItemExtra } from 'semantic-ui-react';
 import mapboxgl from 'mapbox-gl';
 
-mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;
-console.log(process.env);
-
 function Map(props) {
 	const [ map, setMap ] = useState(null);
 	const ref = createRef();
@@ -13,7 +10,7 @@ function Map(props) {
 	useEffect(() => {
 		if (!items) return;
 		if (items.length === 0) return;
-
+		mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;
 		let _map = new mapboxgl.Map({
 			container: ref.current,
 			style: 'mapbox://styles/mapbox/streets-v11',

src/Components/Operators/Warehouses.js

@@ -24,21 +24,21 @@ function Warehouses() {
 				<Modal.Content>
 					{ error && <Message negative>{error}</Message> }
 					<Form onSubmit={createWarehouse}>
-						<Form.Field>
+						<Form.Field required>
 							<label>Name</label>
 							<Input fluid placeholder="Name" required value={name} onChange={(e, state) => setName(state.value)} />
 						</Form.Field>
 
 						<Form.Group widths="equal">
-							<Form.Field>
+							<Form.Field required>
 								<label>Street</label>
 								<Input fluid placeholder="Street" required value={street} onChange={(e, state) => setStreet(state.value)} />
 							</Form.Field>
-							<Form.Field>
+							<Form.Field required>
 								<label>Town</label>
 								<Input fluid placeholder="Town" required value={town} onChange={(e, state) => setTown(state.value)} />
 							</Form.Field>
-							<Form.Field>
+							<Form.Field required>
 								<label>Postcode</label>
 								<Input fluid placeholder="Postcode" required value={postcode} onChange={(e, state) => setPostcode(state.value)} />
 							</Form.Field>
@@ -83,21 +83,21 @@ function Warehouses() {
 				<Modal.Content>
 					{ error && <Message negative>{error}</Message> }
 					<Form onSubmit={updateWarehouse}>
-						<Form.Field>
+						<Form.Field required>
 							<label>Name</label>
 							<Input fluid placeholder="Name" required value={name} onChange={(e, state) => setName(state.value)} />
 						</Form.Field>
 
 						<Form.Group widths="equal">
-							<Form.Field>
+							<Form.Field required>
 								<label>Street</label>
 								<Input fluid placeholder="Street" required value={street} onChange={(e, state) => setStreet(state.value)} />
 							</Form.Field>
-							<Form.Field>
+							<Form.Field required>
 								<label>Town</label>
 								<Input fluid placeholder="Town" required value={town} onChange={(e, state) => setTown(state.value)} />
 							</Form.Field>
-							<Form.Field>
+							<Form.Field required>
 								<label>Postcode</label>
 								<Input fluid placeholder="Postcode" required value={postcode} onChange={(e, state) => setPostcode(state.value)} />
 							</Form.Field>

src/index.js

@@ -4,6 +4,9 @@ import './index.css';
 import App from './Components/App';
 import * as serviceWorker from './serviceWorker';
 
+console.warn('Do not paste anything in here!');
+console.warn('Doing so could grant an attacker full access to your account');
+
 ReactDOM.render(
 	<React.StrictMode>
 		<App />