Add Login query

package.json

@@ -29,7 +29,7 @@
     "rsuite": "^4.8.0"
   },
   "scripts": {
-    "start": "react-app-rewired start",
+    "start": "PORT=8000 react-app-rewired start",
     "dev": "BROWSER=firefox-developer-edition react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",

src/screens/App.js

@@ -25,7 +25,7 @@ export default function App() {
 		<Router>
 			<Switch>
 				<Route path='/' exact>
-					<Invite title={titles.invite} />
+					<Login title={titles.login} />
 				</Route>
 				<Route path='/schedule'>
 					<Schedule title={titles.schedule} />

src/screens/Login.js

@@ -1,9 +1,106 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
-
+import { useHistory } from 'react-router-dom';
-import { Panel, Form, FormGroup, FormControl, ControlLabel, Button } from 'rsuite';
+import axios from 'axios';
+import {
+	Panel,
+	Form,
+	FormGroup,
+	FormControl,
+	ControlLabel,
+	Button,
+} from 'rsuite';
 
+import { setUserSession } from '../utils/common';
 import NavBar from './../components/Navbar/NavBar';
 
+export default function Login({ title }) {
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(null);
+	const [credentials, setCredentials] = useState({
+		email: '',
+		password: '',
+	});
+
+	const history = useHistory();
+
+	// handle input fields
+	const handleChange = (value, evt) => {
+		console.log(value, evt.target.name);
+		setCredentials({
+			...credentials,
+			[evt.target.name]: value,
+		});
+	};
+
+	// handle button click of login form
+	const handleLogin = () => {
+		setError(null);
+		setLoading(true);
+		console.log(credentials.email, credentials.password);
+		axios
+			.post('http://localhost:3000/api/auth/login', credentials)
+			.then((response) => {
+				setLoading(false);
+				console.log('RESPONSE', response);
+				localStorage.setItem(
+					'data',
+					JSON.stringify({
+						token: response.data.token,
+						user: response.data.user,
+					}),
+				);
+				// TODO: Working redirection
+				history.push('');
+			})
+			.catch((error) => {
+				console.log('ERROR', error);
+				setLoading(false);
+				if (error.response.status === 401)
+					setError(error.response.data.message);
+				else setError('Something went wrong. Please try again later.');
+			});
+	};
+
+	return (
+		<>
+			<NavBar title={title} />
+			<Panel bordered style={boxStyle}>
+				<Form>
+					<FormGroup>
+						<ControlLabel>Email</ControlLabel>
+						<FormControl
+							name='email'
+							type='email'
+							formValue={credentials.email}
+							onChange={handleChange}
+						/>
+					</FormGroup>
+					<ControlLabel>Password</ControlLabel>
+					<FormGroup>
+						<FormControl
+							name='password'
+							type='password'
+							formValue={credentials.password}
+							onChange={handleChange}
+						/>
+					</FormGroup>
+					<FormGroup>
+						<Button
+							appearance='primary'
+							block
+							size='lg'
+							onClick={handleLogin}
+						>
+							Sign in
+						</Button>
+					</FormGroup>
+					<Button appearance='link'>Forgot password?</Button>
+				</Form>
+			</Panel>
+		</>
+	);
+}
+
 // TODO Move to a .less file
 const boxStyle = {
 	maxWidth: 373,
@@ -14,35 +111,3 @@ const boxStyle = {
 	marginBottom: '10vh',
 	padding: '1rem',
 };
-
-export default function Login({ title }) {
-	return (
-		<>
-			<NavBar title={title} />
-			<Panel bordered style={boxStyle}>
-				<Form>
-					<FormGroup>
-					<ControlLabel>Email</ControlLabel>
-						<FormControl
-							name='email'
-							type='email'
-						/>
-					</FormGroup>
-					<ControlLabel>Password</ControlLabel>
-					<FormGroup>
-						<FormControl
-							name='password'
-							type='password'
-						/>
-					</FormGroup>
-					<FormGroup>
-						<Button appearance='primary' block size="lg">
-							Sign in
-						</Button>
-					</FormGroup>
-					<Button appearance='link'>Forgot password?</Button>
-				</Form>
-			</Panel>
-		</>
-	);
-}

src/utils/common.js

@@ -0,0 +1,23 @@
+// return the user data from the session storage
+export const getUser = () => {
+	const userStr = sessionStorage.getItem('user');
+	if (userStr) return JSON.parse(userStr);
+	else return null;
+};
+
+// return the token from the session storage
+export const getToken = () => {
+	return sessionStorage.getItem('token') || null;
+};
+
+// remove the token and user from the session storage
+export const removeUserSession = () => {
+	sessionStorage.removeItem('token');
+	sessionStorage.removeItem('user');
+};
+
+// set the token and user from the session storage
+export const setUserSession = (token, user) => {
+	sessionStorage.setItem('token', token);
+	sessionStorage.setItem('user', JSON.stringify(user));
+};