Logout functionality added, Fix toast message was not show after applied private router.

Author: WebDeveloperGuide

web_admin/src/App.js

@@ -10,12 +10,14 @@ import Users from "./components/pages/user/Users";
 import NotFound from "./components/pages/NotFound";
 import AuthRoute from "./AuthRoute";
 import PrivateRouter from "./PrivateRouter";
+import Toast from "./components/LoadingError/Toast";
 import './App.css';
 import "react-toastify/dist/ReactToastify.css";
 
 function App() {
   return (
     <>
+      <Toast/>
       <Router>
         <Switch>
           <PrivateRouter path="/" component={Dashboard} exact />

web_admin/src/AuthRoute.js

@@ -7,14 +7,14 @@ function AuthRoute({ component: Component, ...rest }) {
   const { userInfo } = userLogin;
   let isAdmin = 0;
   if (userInfo){
-    isAdmin = userInfo.data[0].isAdmin;
+    isAdmin = (userInfo.data[0].isAdmin === true) ? 1 : 0;
   }
 
   return (
     <Route
       {...rest}
       component={(props) => {
-        if (userInfo && isAdmin) {
+        if (isAdmin === 1) {
           return <Redirect to={`/dashboard`} />;          
         } else {
           return <Component {...props} />;

web_admin/src/PrivateRouter.js

@@ -7,14 +7,14 @@ function PrivateRouter({ component: Component, ...rest }) {
   const { userInfo } = userLogin;
   let isAdmin = 0;
   if (userInfo){
-    isAdmin = userInfo.data[0].isAdmin;
+    isAdmin = (userInfo.data[0].isAdmin === true) ? 1 : 0;
   }  
 
   return (
     <Route
       {...rest}
       component={(props) => {
-        if (userInfo && isAdmin) {
+        if (isAdmin === 1) {
           return <Component {...props} />;
         } else {
           return <Redirect to={`/login`} />;

web_admin/src/components/Header.js

@@ -1,6 +1,17 @@
-import {Link} from 'react-router-dom';
+import {Link,useHistory} from 'react-router-dom';
+import { logout } from "../redux/actions/userActions";
+import { useDispatch } from "react-redux";
+
 
 const Header = () => {
+  const dispatch = useDispatch();
+  const history = useHistory();
+
+  const logoutHandler = () => {
+    dispatch(logout());
+    history.push("/login");
+  };
+  
 	return(
 		<nav className="navbar default-layout col-lg-12 col-12 p-0 fixed-top d-flex align-items-top flex-row">
           <div className="text-center navbar-brand-wrapper d-flex align-items-center justify-content-start">
@@ -164,7 +175,7 @@ const Header = () => {
                   <a className="dropdown-item"><i className="dropdown-item-icon mdi mdi-message-text-outline text-primary me-2" /> Messages</a>
                   <a className="dropdown-item"><i className="dropdown-item-icon mdi mdi-calendar-check-outline text-primary me-2" /> Activity</a>
                   <a className="dropdown-item"><i className="dropdown-item-icon mdi mdi-help-circle-outline text-primary me-2" /> FAQ</a>
-                  <a className="dropdown-item"><i className="dropdown-item-icon mdi mdi-power text-primary me-2" />Sign Out</a>
+                  <Link className="dropdown-item" to="#" onClick={logoutHandler}><i className="dropdown-item-icon mdi mdi-power text-primary me-2"/>Log Out</Link>
                 </div>
               </li>
             </ul>

web_admin/src/components/pages/Login.js

@@ -2,7 +2,6 @@ import { Link } from "react-router-dom";
 import {useState, useEffect} from 'react';
 import { useDispatch, useSelector } from "react-redux";
 import Loading from "../LoadingError/Loading";
-import Toast from "../LoadingError/Toast";
 import { Login } from "../../redux/actions/userActions";
 import Message from "./../LoadingError/Error";
 
@@ -48,10 +47,7 @@ const LoginPage = ({history}) =>{
     }, [userInfo, history]);
 
 	return(
-        <>
-          <Toast />
-          {error && <Message variant="alert-danger">{error}</Message>}
-          {loading && <Loading />}
+        <>          
       		<div className="container-scroller">
             <div className="container-fluid page-body-wrapper full-page-wrapper">
               <div className="content-wrapper d-flex align-items-center auth px-0">

web_admin/src/redux/actions/userActions.js

@@ -88,9 +88,9 @@ export const Login = (email, password) => async (dispatch) => {
       });
     } else {
       dispatch({ type: USER_LOGIN_SUCCESS, payload: data });
+      localStorage.setItem("userInfo", JSON.stringify(data));
     }
-
-    localStorage.setItem("userInfo", JSON.stringify(data));
+    
   } catch (error) {
     const message =
       error.response && error.response.data.message

web_services/routes/auth.js

@@ -36,8 +36,7 @@ router.post("/login",async (req,res)=>{
 		}else{
 			const hashedPassword = CryptoJS.AES.decrypt(user.password, process.env.PASS_SECRET);
 			const originalPassword = hashedPassword.toString(CryptoJS.enc.Utf8);
-			console.log("password",req.body.password)
-			console.log("originalPassword",originalPassword)
+			
 			if(req.body.password!=originalPassword){
 				res.status(200).json({success:0,message:"Invalid Email or Password"});
 			}else{