Add Login query

This commit is contained in:
rui hildt 2020-08-18 19:10:49 +02:00
parent 0f6d5a2005
commit e1641b32d1
4 changed files with 125 additions and 37 deletions

View File

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

View File

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

View File

@ -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'; 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 // TODO Move to a .less file
const boxStyle = { const boxStyle = {
maxWidth: 373, maxWidth: 373,
@ -14,35 +111,3 @@ const boxStyle = {
marginBottom: '10vh', marginBottom: '10vh',
padding: '1rem', 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>
</>
);
}

23
src/utils/common.js Normal file
View File

@ -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));
};