Added logout button

public/i18n/de.json

@@ -22,6 +22,9 @@
     "LOADING": "Lade Dashboard ...",
     "HELLO": "Hallo"
   },
-  "welcome": "Dein Game-Backlog unter Kontrolle",
+  "MAIN": {
-  "login": "Anmelden"
+    "WELCOME": "Dein Game-Backlog unter Kontrolle",
+    "LOGIN": "Anmelden",
+    "LOGOUT": "Abmelden"
+  }
 }

public/i18n/en.json

@@ -22,6 +22,9 @@
     "LOADING": "Loading dashboard ...",
     "HELLO": "Hello"
   },
-  "welcome": "Control your game backlog",
+  "MAIN": {
-  "login": "Login"
+    "WELCOME": "Control your game backlog",
+    "LOGIN": "Login",
+    "LOGOUT": "Logout"
+  }
 }

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">
+                    {isAuthenticated ? (
-                        {t('login')}
+                        <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">
-                    </Link>
+                            {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>