handle logout, #855

frontend/src/api/actions/logOut.ts

@@ -0,0 +1,22 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from "../../configuration/getApiUrl"
+import getFetchCredentials from "../../configuration/getFetchCredentials";
+import getCookie from "../../functions/getCookie";
+
+const logOut = async () => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/user/logout/`, {
+    method: 'POST',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+  })
+  
+  return response;
+}
+
+export default logOut;

frontend/src/components/Navigation.tsx

@@ -1,15 +1,24 @@
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import iconSearch from '/img/icon-search.svg';
 import iconGear from '/img/icon-gear.svg';
 import iconExit from '/img/icon-exit.svg';
 import Routes from '../configuration/routes/RouteList';
 import NavigationItem from './NavigationItem';
+import logOut from '../api/actions/logOut';
 
 interface NavigationProps {
   isAdmin: boolean;
 }
 
 const Navigation = ({ isAdmin }: NavigationProps) => {
+
+  const navigate = useNavigate();
+  const handleLogout = async (event: { preventDefault: () => void }) => {
+    event.preventDefault();
+    await logOut();
+    navigate(Routes.Login)
+  }
+
   return (
     <div className="boxed-content">
       <Link to={Routes.Home}>
@@ -30,9 +39,7 @@ const Navigation = ({ isAdmin }: NavigationProps) => {
           <Link to={Routes.SettingsDashboard}>
             <img src={iconGear} alt="gear-icon" title="Settings" />
           </Link>
-          <Link to={Routes.Logout}>
-            <img className="alert-hover" src={iconExit} alt="exit-icon" title="Logout" />
-          </Link>
+          <img className="alert-hover" src={iconExit} alt="exit-icon" title="Logout" onClick={handleLogout} />
         </div>
       </div>
     </div>

frontend/src/style.css

@@ -319,6 +319,7 @@ button:hover {
 
 .alert-hover:hover {
   filter: var(--img-filter-error);
+  cursor: pointer;
 }
 
 /* top of page */