MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

logout function added

Browse Source
This commit is contained in:
victorAnumudu
2024-12-10 10:37:43 +01:00
parent 70d0691f71
commit c47efaaadc
8 changed files with 96 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+3
View File
@@ -4,6 +4,7 @@
"private": true,
"dependencies": {
"@popperjs/core": "^2.11.8",
"@reduxjs/toolkit": "^2.4.0",
"@tanstack/react-query": "^5.62.3",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
@@ -15,8 +16,10 @@
"react-apexcharts": "^1.7.0",
"react-dom": "^18.3.1",
"react-icons": "^5.4.0",
"react-redux": "^9.1.2",
"react-router-dom": "^7.0.2",
"react-scripts": "5.0.1",
"redux": "^5.0.1",
"sass": "^1.82.0",
"web-vitals": "^2.1.4"
},
src/component/auth/Login2.jsx
+19 -4
View File
@@ -1,14 +1,18 @@
import React, { useState } from 'react'
import { useMutation } from '@tanstack/react-query'
import { useDispatch } from 'react-redux'
import LoginImg from '../../assets/bg/login.svg'
import { Link, useNavigate } from 'react-router-dom'
import siteLinks from '../../links/siteLinks'
import { loginUser } from '../../services/services'
import { updateUserDetails } from '../../store/UserDetails'
export default function Login() {
const dispatch = useDispatch()
const navigate = useNavigate()
const [fields, setFields] = useState({
@@ -17,7 +21,6 @@ export default function Login() {
})
const handleChange = ({target:{name, value}}) => {
console.log('working')
setFields(prev => ({...prev, [name]:value}))
}
@@ -27,10 +30,15 @@ export default function Login() {
},
onError: (error) => {
console.log('error', error)
},
onSuccess: () => {
navigate('/dash') // later add redux to dispatch state
onSuccess: (res) => {
const {token} = res?.data?.data
if(token){
localStorage.setItem('token', token)
const data = {token}
dispatch(updateUserDetails({ ...data }));
navigate('/dash') // later add redux to dispatch state
}
}
})
@@ -71,6 +79,13 @@ export default function Login() {
<Link to={siteLinks.forgetpwd} className="ml-auto">Forgot Password ?</Link>
</div>
</div>
{login.error &&
<>
<div className="col-12 mt-3">
<p className='text-danger'>Unable to login, try agian!</p>
</div>
</>
}
<div className="col-12 mt-3">
<button type='button' onClick={()=>{login.mutate(fields)}} className="btn btn-primary text-uppercase">{login.isPending ? 'loading...' : 'Sign In'}</button>
</div>
src/component/authorization/UserExist.jsx
+19 -24
View File
@@ -1,5 +1,7 @@
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from "react-redux";
import { Outlet, useNavigate } from 'react-router-dom'
import { updateUserDetails } from "../../store/UserDetails";
import MainLoaderBS from '../loaders/MainLoaderBS'
import Layout from '../layout/Layout'
import siteLinks from '../../links/siteLinks'
@@ -12,8 +14,15 @@ export default function UserExist() {
const navigate = useNavigate()
const [loading, setLoading] = useState(true)
const dispatch = useDispatch()
const [lastActivityTime, setLastActivityTime] = useState(Date.now()); // HOLDS THE INITIAL TIME USER LOGS IN
const { userDetails: { token }} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
let loggedIn = token ? true : false; // variable to determine if user is logged in
// console.log('loggedIn', loggedIn)
// Function to log the user out
const logoutUser = () => {
@@ -49,34 +58,20 @@ export default function UserExist() {
}
},[lastActivityTime])
// Setting up event listeners for user activity
// useEffect(() => {
// // Listen for activity events
// const events = ['mousemove', 'keydown', 'click', 'scroll', 'touchstart'];
// // Adding event listeners
// events.forEach(event => {
// window.addEventListener(event, resetTimer);
// });
// // Start the timer initially
// // resetTimer();
// // Cleanup event listeners when the component unmounts
// return () => {
// events.forEach(event => {
// window.removeEventListener(event, resetTimer);
// });
// // if (timer) {
// // clearTimeout(timer);
// // setTimer(null);
// // }
// };
// }, []);
useEffect(()=>{
let token = localStorage.getItem('token')
const timer = setTimeout(()=>{
if(token && loggedIn){
setLoading(false)
}else if(token && !loggedIn){
const data = {token}
dispatch(updateUserDetails({ ...data }));
setLoading(false)
// dispatch(updateUserDetails({ ...res.data }));
}else{
navigate('auth/login')
}
},1000)
return () => clearTimeout(timer)
src/component/layout/layoutcom/UserHeader.jsx
+9 -1
View File
@@ -1,5 +1,6 @@
import React from "react";
import getImage from "../../../utils/getImage";
import { useNavigate } from "react-router-dom";
export default function UserHeader(){
@@ -18,6 +19,13 @@ export default function UserHeader(){
// e.preventDefault()
// }
const navigate = useNavigate()
const logout = () => {
localStorage.clear()
navigate('/login', {replace: true})
}
return (
<header className="app-header top-bar">
<nav className="navbar navbar-expand-md">
@@ -280,7 +288,7 @@ export default function UserHeader(){
<h4 className="text-white mb-0">Alice Williams</h4>
<small className="text-white">Henry@example.com</small>
</div>
<a href="#" className="text-white font-20 tooltip-wrapper" data-toggle="tooltip"
<a href="#" onClick={logout} className="text-white font-20 tooltip-wrapper" data-toggle="tooltip"
data-placement="top" title="" data-original-title="Logout"> <i
className="zmdi zmdi-power"></i></a>
</div>
src/component/layout/layoutcom/UserMenu.jsx
+9 -2
View File
@@ -1,10 +1,17 @@
import React from 'react'
import { Link, useLocation } from 'react-router-dom'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import siteLinks from '../../../links/siteLinks'
import { IoIosArrowDown } from 'react-icons/io'
export default function UserMenu() {
const {pathname} = useLocation()
const navigate = useNavigate()
const logout = () => {
localStorage.clear()
navigate('/login', {replace: true})
}
return (
<>
<div className="sidebar-nav scrollbar scroll_dark">
@@ -48,7 +55,7 @@ export default function UserMenu() {
<li className="sidebar-banner p-4 bg-gradient text-center m-3 d-block rounded">
<h5 className="text-white mb-1">MERMS Panel</h5>
<Link className="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0" to={siteLinks.login}> Log Out</Link>
<Link className="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0" to='' onClick={logout}> Log Out</Link>
</li>
</ul>
</div>
src/index.js
+7 -2
View File
@@ -1,8 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
// import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import store from './store/store'
import App from './App';
//import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.min.js'
@@ -14,7 +17,9 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>
</React.StrictMode>
);
src/store/UserDetails.js
+20
View File
@@ -0,0 +1,20 @@
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
userDetails: {},
};
export const userSlice = createSlice({
name: "userDetails",
initialState,
reducers: {
updateUserDetails: (state, action) => {
state.userDetails = { ...action.payload };
},
},
});
// Action creators are generated for each case reducer function
export const { updateUserDetails } = userSlice.actions;
export default userSlice.reducer;
src/store/store.js
+10
View File
@@ -0,0 +1,10 @@
import { configureStore } from "@reduxjs/toolkit";
import userDetailReducer from "./UserDetails";
export default configureStore({
reducer: {
userDetails: userDetailReducer,
},
});