added login and logout actions in auth reducer

client/src/actions/auth.js

@@ -34,6 +34,7 @@ export const register = ({ name, email, password }) => async (dispatch) => {
 			type: actionTypes.REGISTER_SUCCESS,
 			payload: res.data,
 		})
+		dispatch(loadUser())
 	} catch (err) {
 		const errors = err.response.data.errors
 		if (errors) {
@@ -44,3 +45,34 @@ export const register = ({ name, email, password }) => async (dispatch) => {
 		})
 	}
 }
+
+export const login = (email, password) => async (dispatch) => {
+	const config = {
+		headers: {
+			'Content-Type': 'application/json',
+		},
+	}
+	const body = JSON.stringify({ email, password })
+	try {
+		const res = await axios.post('/api/auth', body, config)
+		dispatch({
+			type: actionTypes.LOGIN_SUCCESS,
+			payload: res.data,
+		})
+		dispatch(loadUser())
+	} catch (err) {
+		const errors = err.response.data.errors
+		if (errors) {
+			errors.forEach((error) => dispatch(setAlert(error.msg, 'danger')))
+		}
+		dispatch({
+			type: actionTypes.LOGIN_FAIL,
+		})
+	}
+}
+
+export const logout = () => (dispatch) => {
+	dispatch({
+		type: actionTypes.LOGOUT,
+	})
+}

client/src/actions/types.js

@@ -4,3 +4,6 @@ export const REGISTER_SUCCESS = 'REGISTER_SUCCESS'
 export const REGISTER_FAIL = 'REGISTER_FAIL'
 export const USER_LOADED = 'USER_LOADED'
 export const AUTH_ERROR = 'AUTH_ERROR'
+export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
+export const LOGIN_FAIL = 'LOGIN_FAIL'
+export const LOGOUT = 'LOGOUT'

client/src/components/Layout/Navbar.js

@@ -1,27 +1,57 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+
+import { logout } from '../../actions/auth'
+
+const Navbar = ({ auth: { isAuthenticated, loading }, logout }) => {
+	const authLinks = (
+		<ul>
+			<li>
+				<a onClick={logout} href='#!'>
+					<i className='fas fa-sign-out-alt'></i>{' '}
+					<span className='hide-sm'>Logout</span>
+				</a>
+			</li>
+		</ul>
+	)
+
+	const guestLinks = (
+		<ul>
+			<li>
+				<a href='#!'>Developers</a>
+			</li>
+			<li>
+				<Link to='/register'>Register</Link>
+			</li>
+			<li>
+				<Link to='/login'>Login</Link>
+			</li>
+		</ul>
+	)
 
-const Navbar = () => {
 	return (
 		<nav className='navbar bg-dark'>
 			<h1>
 				<Link to='/'>
 					<i className='fas fa-code'></i> Developer HUB
 				</Link>
 			</h1>
-			<ul>
-				<li>
-					<Link to='/profiles'>Developers</Link>
-				</li>
-				<li>
-					<Link to='/register'>Register</Link>
-				</li>
-				<li>
-					<Link to='/login'>Login</Link>
-				</li>
-			</ul>
+			{!loading && (
+				<Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>
+			)}
 		</nav>
 	)
 }
 
-export default Navbar
+Navbar.prototype = {
+	logout: PropTypes.func.isRequired,
+	auth: PropTypes.object.isRequired,
+}
+
+const mapStateToProps = (state) => ({
+	auth: state.auth,
+})
+
+export default connect(mapStateToProps, { logout })(Navbar)

client/src/components/auth/LogIn.js

@@ -1,7 +1,11 @@
 import React, { Fragment, useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, Redirect } from 'react-router-dom'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
 
-const LogIn = () => {
+import { login } from '../../actions/auth'
+
+const LogIn = ({ login, isAuthenticated }) => {
 	const [formData, setFormData] = useState({
 		email: '',
 		password: '',
@@ -15,6 +19,11 @@ const LogIn = () => {
 
 	const submitHandler = (e) => {
 		e.preventDefault()
+		login(email, password)
+	}
+
+	if (isAuthenticated) {
+		return <Redirect to='/dashboard' />
 	}
 
 	return (
@@ -57,4 +66,13 @@ const LogIn = () => {
 	)
 }
 
-export default LogIn
+LogIn.propTypes = {
+	login: PropTypes.func.isRequired,
+	isAuthenticated: PropTypes.bool,
+}
+
+const mapStateToProps = (state) => ({
+	isAuthenticated: state.auth.isAuthenticated,
+})
+
+export default connect(mapStateToProps, { login })(LogIn)

client/src/components/auth/Register.js

@@ -1,12 +1,12 @@
 import React, { Fragment, useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, Redirect } from 'react-router-dom'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 
 import { setAlert } from '../../actions/alert'
 import { register } from '../../actions/auth'
 
-const Register = ({ setAlert, register }) => {
+const Register = ({ setAlert, register, isAuthenticated }) => {
 	const [formData, setFormData] = useState({
 		name: '',
 		email: '',
@@ -29,6 +29,10 @@ const Register = ({ setAlert, register }) => {
 		}
 	}
 
+	if (isAuthenticated) {
+		return <Redirect to='/dashboard' />
+	}
+
 	return (
 		<Fragment>
 			<h1 className='large text-primary'>Sign Up</h1>
@@ -92,6 +96,11 @@ const Register = ({ setAlert, register }) => {
 Register.propTypes = {
 	setAlert: PropTypes.func.isRequired,
 	register: PropTypes.func.isRequired,
+	isAuthenticated: PropTypes.bool,
 }
 
-export default connect(null, { setAlert, register })(Register)
+const mapStateToProps = (state) => ({
+	isAuthenticated: state.auth.isAuthenticated,
+})
+
+export default connect(mapStateToProps, { setAlert, register })(Register)

client/src/reducers/auth.js

@@ -10,6 +10,7 @@ const intialState = {
 export default function (state = intialState, action) {
 	switch (action.type) {
 		case actionTypes.REGISTER_SUCCESS:
+		case actionTypes.LOGIN_SUCCESS:
 			localStorage.setItem('token', action.payload.token)
 			return {
 				...state,
@@ -19,6 +20,8 @@ export default function (state = intialState, action) {
 			}
 		case actionTypes.REGISTER_FAIL:
 		case actionTypes.AUTH_ERROR:
+		case actionTypes.LOGIN_FAIL:
+		case actionTypes.LOGOUT:
 			localStorage.removeItem('token')
 			return {
 				...state,

client/src/utils/setAuthToken.js

@@ -1,5 +1,8 @@
 import axios from 'axios'
 
+// if the token is there it will add it to the headers
+// and
+// if the token is not there it will delete it from the headers
 const setAuthToken = (token) => {
 	if (token) {
 		axios.defaults.headers.common['x-auth-token'] = token