Add User Logout function

Author: zntb

backend/events.json

@@ -1 +1 @@
-{"events":[{"title":"Another event","image":"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.pzsIeXOfUfiGxZUFwJ_VwwHaE4%26pid%3DApi&f=1&ipt=e469e7b3657ed87d395649be2b4cc18e3794727ecebc5f8ddf2f69333c75be69&ipo=images","date":"2024-01-27","description":"Another awesome event!!","id":"b5b592cf-c1cc-4c36-bd00-7670d1494ff6"},{"title":"A new event","image":"https://cdn.muenchen-p.de/fl_progressive,q_65/.imaging/stk/responsive/teaser300/dms/va-2016/muenchner-christkindlmarkt/christkindlmarkt-marienplat-logo-hp/document/christkindlmarkt-marienplat-logo-hp.jpg","date":"2022-10-01","description":"Some awesome event!","id":"2a42fcc4-ea21-4bdd-abf6-c40006dc66a9"}],"users":[{"email":"[email protected]","password":"$2a$12$DpO//Ez6vBSVTwqTCDVQpOsrJPEMZ1GphoJMTy8.g7TWHiBP97dQ.","id":"0eb4897f-2f6d-4b30-bd04-9ce763f96697"},{"email":"[email protected]","password":"$2a$12$3m6KUOiNwanEyfkY61rBkeADcW2rW3FSIAd9bS4M5grlHMQkMDV/S","id":"e54095a1-a14c-46d6-b7dc-b316c3a6ccfd"},{"email":"[email protected]","password":"$2a$12$J9lpeDvXxDB3onD8FpMcGu2srQyzCpiMrFPdp/BezkQCSjXCZQlfC","id":"538c7b46-8b5c-482d-a4ab-106cd9e63b75"}]}
+{"events":[{"title":"Another event","image":"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.pzsIeXOfUfiGxZUFwJ_VwwHaE4%26pid%3DApi&f=1&ipt=e469e7b3657ed87d395649be2b4cc18e3794727ecebc5f8ddf2f69333c75be69&ipo=images","date":"2024-01-27","description":"Another awesome event.","id":"b5b592cf-c1cc-4c36-bd00-7670d1494ff6"},{"title":"A new event","image":"https://cdn.muenchen-p.de/fl_progressive,q_65/.imaging/stk/responsive/teaser300/dms/va-2016/muenchner-christkindlmarkt/christkindlmarkt-marienplat-logo-hp/document/christkindlmarkt-marienplat-logo-hp.jpg","date":"2022-10-01","description":"Some awesome event!","id":"2a42fcc4-ea21-4bdd-abf6-c40006dc66a9"}],"users":[{"email":"[email protected]","password":"$2a$12$DpO//Ez6vBSVTwqTCDVQpOsrJPEMZ1GphoJMTy8.g7TWHiBP97dQ.","id":"0eb4897f-2f6d-4b30-bd04-9ce763f96697"},{"email":"[email protected]","password":"$2a$12$3m6KUOiNwanEyfkY61rBkeADcW2rW3FSIAd9bS4M5grlHMQkMDV/S","id":"e54095a1-a14c-46d6-b7dc-b316c3a6ccfd"},{"email":"[email protected]","password":"$2a$12$J9lpeDvXxDB3onD8FpMcGu2srQyzCpiMrFPdp/BezkQCSjXCZQlfC","id":"538c7b46-8b5c-482d-a4ab-106cd9e63b75"}]}

frontend/src/App.js

@@ -16,6 +16,7 @@ import NewsletterPage, { action as newsletterAction } from './pages/Newsletter';
 import AuthenticationPage, {
   action as authAction,
 } from './pages/Authentication';
+import { action as logoutAction } from './pages/Logout';
 
 const router = createBrowserRouter([
   {
@@ -67,6 +68,10 @@ const router = createBrowserRouter([
         element: <NewsletterPage />,
         action: newsletterAction,
       },
+      {
+        path: 'logout',
+        action: logoutAction,
+      },
     ],
   },
 ]);

frontend/src/components/MainNavigation.js

@@ -1,4 +1,4 @@
-import { NavLink } from 'react-router-dom';
+import { Form, NavLink } from 'react-router-dom';
 
 import classes from './MainNavigation.module.css';
 import NewsletterSignup from './NewsletterSignup';
@@ -50,6 +50,11 @@ function MainNavigation() {
               Authentication
             </NavLink>
           </li>
+          <li>
+            <Form action="/logout" method="post">
+              <button style={{ padding: '0.2rem 0.5rem' }}>Logout</button>
+            </Form>
+          </li>
         </ul>
       </nav>
       <NewsletterSignup />

frontend/src/pages/Logout.js

@@ -0,0 +1,6 @@
+import { redirect } from 'react-router-dom';
+
+export function action() {
+  localStorage.removeItem('token');
+  return redirect('/');
+}