From 6667b7a347c185ef02ea90b7fa22808dd198ec4e Mon Sep 17 00:00:00 2001
From: Lobo <andreas.dahm@gmail.com>
Date: Sat, 4 Apr 2026 10:54:58 +0200
Subject: [PATCH] Added logout button

---
 public/i18n/de.json |  7 +++++--
 public/i18n/en.json |  7 +++++--
 src/App.jsx         | 30 ++++++++++++++++++++++++++----
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/public/i18n/de.json b/public/i18n/de.json
index 8fba93a..1d23d29 100644
--- a/public/i18n/de.json
+++ b/public/i18n/de.json
@@ -22,6 +22,9 @@
     "LOADING": "Lade Dashboard ...",
     "HELLO": "Hallo"
   },
-  "welcome": "Dein Game-Backlog unter Kontrolle",
-  "login": "Anmelden"
+  "MAIN": {
+    "WELCOME": "Dein Game-Backlog unter Kontrolle",
+    "LOGIN": "Anmelden",
+    "LOGOUT": "Abmelden"
+  }
 }
\ No newline at end of file
diff --git a/public/i18n/en.json b/public/i18n/en.json
index a2698ef..de01e9c 100644
--- a/public/i18n/en.json
+++ b/public/i18n/en.json
@@ -22,6 +22,9 @@
     "LOADING": "Loading dashboard ...",
     "HELLO": "Hello"
   },
-  "welcome": "Control your game backlog",
-  "login": "Login"
+  "MAIN": {
+    "WELCOME": "Control your game backlog",
+    "LOGIN": "Login",
+    "LOGOUT": "Logout"
+  }
 }
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 959c93c..39cacdc 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,4 @@
-import {Link, Route, Routes} from 'react-router-dom';
+import {Link, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
 import {useEffect, useState} from 'react';
 
@@ -10,6 +10,16 @@ import Dashboard from "./pages/Dashboard.jsx";
 function App() {
     const {t, i18n} = useTranslation();
     const [isDarkMode, setIsDarkMode] = useState(true);
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+    // Hooks for routing
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    useEffect(() => {
+        const token = localStorage.getItem('tbp_jwt');
+        setIsAuthenticated(!!token); // Converts the token string (or null) to a boolean
+    }, [location]);
 
     // Sync React state with the HTML class required by Tailwind CSS
     useEffect(() => {
@@ -28,6 +38,12 @@ function App() {
         }
     };
 
+    const handleLogout = () => {
+        localStorage.removeItem('tbp_jwt');
+        setIsAuthenticated(false);
+        navigate('/login');
+    };
+
     return (
         <div className="min-h-screen flex flex-col bg-slate-50 dark:bg-slate-950 transition-colors duration-300 font-sans">
             <header className="p-4 flex justify-between items-center border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 sticky top-0 z-50">
@@ -44,9 +60,15 @@ function App() {
                     }} className="text-xl text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors">
                         <i className={isDarkMode ? "mdi mdi-weather-sunny" : "mdi mdi-weather-night"}></i>
                     </button>
-                    <Link to="/login" className="bg-blue-600 hover:bg-blue-500 text-white px-5 py-2 rounded-lg font-bold transition-all shadow-md shadow-blue-500/20">
-                        {t('login')}
-                    </Link>
+                    {isAuthenticated ? (
+                        <button onClick={handleLogout} className="bg-red-600 hover:bg-red-500 text-white px-5 py-2 rounded-lg font-bold transition-all shadow-md shadow-red-500/20">
+                            {t('MAIN.LOGOUT')}
+                        </button>
+                    ) : (
+                        <Link to="/login" className="bg-blue-600 hover:bg-blue-500 text-white px-5 py-2 rounded-lg font-bold transition-all shadow-md shadow-blue-500/20">
+                            {t('MAIN.LOGIN')}
+                        </Link>
+                    )}
                 </div>
             </header>