logout function added

2024-12-10 10:37:43 +01:00
parent 70d0691f71
commit c47efaaadc
8 changed files with 96 additions and 33 deletions
@@ -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>
@@ -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>