From 125a03f5292ba67c0fa4f5a9ce7ab1887f53cc20 Mon Sep 17 00:00:00 2001 From: rui hildt Date: Wed, 19 Aug 2020 13:38:25 +0200 Subject: [PATCH] Implement login request --- package.json | 4 ++-- src/constants.js | 1 + src/http-common.js | 10 ---------- src/screens/Login.js | 40 ++++++++++++---------------------------- src/utils/common.js | 26 +++++++++++++++----------- src/utils/http-common.js | 9 +++++++++ 6 files changed, 39 insertions(+), 51 deletions(-) create mode 100644 src/constants.js delete mode 100644 src/http-common.js create mode 100644 src/utils/http-common.js diff --git a/package.json b/package.json index f71b540..cb06e9a 100644 --- a/package.json +++ b/package.json @@ -29,8 +29,8 @@ "rsuite": "^4.8.0" }, "scripts": { - "start": "PORT=8000 react-app-rewired start", - "dev": "BROWSER=firefox-developer-edition react-app-rewired start", + "start": "react-app-rewired start", + "dev": "PORT=8000 BROWSER=firefox-developer-edition react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject" diff --git a/src/constants.js b/src/constants.js new file mode 100644 index 0000000..bf6892a --- /dev/null +++ b/src/constants.js @@ -0,0 +1 @@ +export const API_URL = 'http://localhost:3000/api'; \ No newline at end of file diff --git a/src/http-common.js b/src/http-common.js deleted file mode 100644 index ef8d231..0000000 --- a/src/http-common.js +++ /dev/null @@ -1,10 +0,0 @@ -import axios from 'axios'; - -export const API_URL = 'https://meeting-planner-backend.herokuapp.com'; - -export const my_app = axios.create({ - baseURL: API_URL, - headers: { - 'Content-type': 'application/json', - }, -}); diff --git a/src/screens/Login.js b/src/screens/Login.js index 626f425..a92f7b2 100644 --- a/src/screens/Login.js +++ b/src/screens/Login.js @@ -1,6 +1,6 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; -import axios from 'axios'; +import { backend } from '../utils/http-common'; import { Panel, Form, @@ -8,55 +8,38 @@ import { FormControl, ControlLabel, Button, + Message, } 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 history = useHistory(); + + const [error, setError] = useState(false); 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) + backend + .post('/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(''); + setUserSession(response.data.token, response.data.user); + history.push('/dashboard'); }) .catch((error) => { - console.log('ERROR', error); - setLoading(false); if (error.response.status === 401) - setError(error.response.data.message); + setError('Incorrect credentials. Please try again.'); else setError('Something went wrong. Please try again later.'); }); }; @@ -65,6 +48,7 @@ export default function Login({ title }) { <> + {error && }
Email diff --git a/src/utils/common.js b/src/utils/common.js index 7e7fb06..2b4e980 100644 --- a/src/utils/common.js +++ b/src/utils/common.js @@ -1,23 +1,27 @@ -// return the user data from the session storage +// return the user data from the local storage export const getUser = () => { - const userStr = sessionStorage.getItem('user'); - if (userStr) return JSON.parse(userStr); + const user = JSON.parse(localStorage.getItem('user')); + + if (user) return user; else return null; }; -// return the token from the session storage +// return the token from the local storage export const getToken = () => { - return sessionStorage.getItem('token') || null; + const token = JSON.parse(localStorage.getItem('token')); + + if (token) return token; + else return null; }; -// remove the token and user from the session storage +// remove the token and user from the local storage export const removeUserSession = () => { - sessionStorage.removeItem('token'); - sessionStorage.removeItem('user'); + localStorage.removeItem('token'); + localStorage.removeItem('user'); }; -// set the token and user from the session storage +// set the token and user from the local storage export const setUserSession = (token, user) => { - sessionStorage.setItem('token', token); - sessionStorage.setItem('user', JSON.stringify(user)); + localStorage.setItem('token', token); + localStorage.setItem('user', JSON.stringify(user)); }; diff --git a/src/utils/http-common.js b/src/utils/http-common.js new file mode 100644 index 0000000..8510475 --- /dev/null +++ b/src/utils/http-common.js @@ -0,0 +1,9 @@ +import axios from 'axios'; +import { API_URL } from '../constants'; + +export const backend = axios.create({ + baseURL: API_URL, + headers: { + 'Content-type': 'application/json', + }, +});